先說下題外話哈，最近做了個(gè)領(lǐng)取電商平臺優(yōu)惠券的小程序，掃碼支持下哈~

image

離屏渲染

之前已經(jīng)將相機(jī)的預(yù)覽數(shù)據(jù)已經(jīng)輸出到opengl的紋理上，渲染的時(shí)候，opengl直接將紋理渲染到了屏幕。

但是，如果想要對該紋理進(jìn)一步處理，就不能直接渲染到屏幕，而是應(yīng)該先渲染到屏幕外的緩沖區(qū)（FrameBuffer）處理完后再渲染到屏幕。渲染到緩沖區(qū)的操作就是離屏渲染。

離屏渲染的目的是更改渲染目標(biāo)（屏幕->緩沖區(qū)），主要步驟如下：

1. 準(zhǔn)備離屏渲染所需要的 FrameBuffer 和 紋理對象
2. 切換渲染目標(biāo)（屏幕->緩沖區(qū)）
3. 執(zhí)行渲染（和之前一樣，執(zhí)行onDrawFrame方法進(jìn)行繪制）
4. 重置渲染目標(biāo)（緩沖區(qū)->屏幕）

關(guān)鍵代碼如下：

    //準(zhǔn)備離屏渲染所需要的 FrameBuffer 和 紋理對象 
    public void genFrameBufferAndTexture() {
        glGenFramebuffers(frameBuffer.length, frameBuffer, 0);

        glGenTextures(frameTexture.length, frameTexture, 0);
    }
    //切換渲染目標(biāo)（屏幕->緩沖區(qū)）
    public void bindFrameBufferAndTexture() {
        glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer[0]);
        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, frameTexture[0], 0);
    }
    //重置渲染目標(biāo)（緩沖區(qū)->屏幕）
    public void unBindFrameBuffer() {
        glBindFramebuffer(GL_FRAMEBUFFER, 0);
    }

拍照

無論中間經(jīng)過離屏渲染做了多少處理，最后都會切換渲染到屏幕，不渲染到屏幕看不到，也就沒法預(yù)覽。

拍照是再預(yù)覽的基礎(chǔ)上，再點(diǎn)擊拍照的一瞬間將最后一個(gè)渲染環(huán)節(jié)切換到FrameBuffer，然后通過 glReadPixels 方法將顯存中的數(shù)據(jù)回傳到內(nèi)存中保存到本地，最后再將渲染切換回屏幕繼續(xù)預(yù)覽。

需要注意的是在屏幕預(yù)覽時(shí)y軸正方向是向下的，所以保存到本地的時(shí)候需要在y軸上做一次反轉(zhuǎn)。

關(guān)鍵代碼如下：

        if (isTakingPhoto()) {
            ByteBuffer exportBuffer = ByteBuffer.allocate(width * height * 4);

            bindFrameBufferAndTexture();
            colorFilter.setMatrix(MatrixUtil.flip(matrix, false, true));
            colorFilter.onDraw();
            glReadPixels(0, 0, width, height, GL_RGBA, GL_UNSIGNED_BYTE, exportBuffer);
            savePhoto(exportBuffer);
            unBindFrameBuffer();

            setTakingPhoto(false);
            colorFilter.setMatrix(MatrixUtil.flip(matrix, false, true));
        } else {
            colorFilter.onDraw();
        }

前后相機(jī)切換

這個(gè)比較簡單，需要注意的就是前置/后置攝像頭默認(rèn)的旋轉(zhuǎn)角度不同預(yù)覽的時(shí)候需要進(jìn)行旋轉(zhuǎn)校正。

    //后置相機(jī)，順時(shí)針旋轉(zhuǎn)90度
    public static final float[] textureCoordCameraBack = {
            1.0f, 1.0f,
            0.0f, 1.0f,
            0.0f, 0.0f,
            1.0f, 0.0f
    };

    //前置相機(jī)，逆時(shí)針旋轉(zhuǎn)90度
    public static final float[] textureCoordCameraFront = {
            0.0f, 0.0f,
            1.0f, 0.0f,
            1.0f, 1.0f,
            0.0f, 1.0f
    };

另外一個(gè)需要注意的就是前置相機(jī)的鏡像問題，通過矩陣進(jìn)行設(shè)置

        if (this.useFront != useFront) {
            this.useFront = useFront;
            cameraFilter.setUseFront(useFront);
            matrix = MatrixUtil.flip(matrix, true, false);
        }

項(xiàng)目github地址