iOS视觉– (11) OpenGL ES+GLSL实现大眼和瘦脸

前面我们学过摄像头的烘托、单滤镜、多滤镜的处理的流程。接下来要学习的是大眼和瘦脸的技能了。这儿会运用到人脸识别的技能，刚开端计划用的是Vision原生结构来做，无奈，脱离年代的6太卡了。难当次重任，后边运用了第三方结构。测试版可以随意玩玩。真的不错哦。功率很高，特征点106个。仍是OK的。 借鉴博客：iOS原生结构Vision实现瘦脸大眼特效、仿DY特效相机之大眼瘦脸 本文达到作用如下图：

106个特征点如下图:(104与74堆叠，105与77堆叠，去掉了)

原了解析

主要是以下3点，详细请前往参考博客和原了解析。

• 1.圆内扩大
• 2.圆内缩小
• 3.向某一点拉伸

用一张gif图来归纳上面的内容，也是本文章终究的达到的作用，如最初所展现的作用图

经过前面我们了解了

• 日常开发中OpenGL开发流程

• 1.设置图层
• 2.设置图形上下文
• 3.设置烘托缓冲区（renderBuffer）
• 4.设置帧缓冲区（frameBuffer）
• 5.编译、链接上色器（shader）
• 6.设置VBO (Vertex Buffer Objects)
• 7.设置纹路
• 8.烘托

这些根本步骤大致是不变的。这章是摄像头烘托+”多滤镜”烘托思想的结合提现。内容是感觉是增加了，可是实践的开发流程仍是一样的。接下来让我们进入正题。 经过分析我们主要有以下3个作业：

部分中心代码：

    ///制作面部特征点
    func renderFacePoint() {
        //MARK: - 1.制作摄像头
        //运用上色器
        glUseProgram(renderProgram)
        //绑定frameBuffer
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), facePointFrameBuffer)
        //设置清屏色彩
        glClearColor(0.0, 0.0, 0.0, 1.0)
        //铲除屏幕
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
        //1.设置视口大小
        let scale = self.contentScaleFactor
        glViewport(0, 0, GLsizei(self.frame.size.width * scale), GLsizei(self.frame.size.height * scale))
#warning("留意⚠️：想要获取shader里边的变量，这儿要记住要在glLinkProgram后边、后边、后边")
        //----处理极点数据-------
        //将极点数据经过renderProgram中的传递到极点上色程序的position
        /*1.glGetAttribLocation,用来获取vertex attribute的进口的.
          2.告诉OpenGL ES,经过glEnableVertexAttribArray，
          3.终究数据是经过glVertexAttribPointer传递曩昔的。
         */
        //留意：第二参数字符串有必要和shaderv.vsh中的输入变量：position保持一致
        let position = glGetAttribLocation(renderProgram, "position")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(position))
        //设置读取办法
        //参数1：index,极点数据的索引
        //参数2：size,每个极点特点的组件数量，1，2，3，或许4.默许初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默许初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或许直接转换为固定值。（GL_FALSE）
        //参数5：stride,接连极点特点之间的偏移量，默许为0；
        //参数6：指定一个指针，指向数组中的第一个极点特点的第一个组件。默许为0
//        glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
        glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, standardVertex)
        //----处理纹路数据-------
        //1.glGetAttribLocation,用来获取vertex attribute的进口的.
        //留意：第二参数字符串有必要和shaderv.vsh中的输入变量：textCoordinate保持一致
        let textCoord = glGetAttribLocation(renderProgram, "textCoordinate")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(textCoord))
        //3.设置读取办法
        //参数1：index,极点数据的索引
        //参数2：size,每个极点特点的组件数量，1，2，3，或许4.默许初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默许初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或许直接转换为固定值。（GL_FALSE）
        //参数5：stride,接连极点特点之间的偏移量，默许为0；
        //参数6：指定一个指针，指向数组中的第一个极点特点的第一个组件。默许为0
//        glVertexAttribPointer(GLuint(textCoord), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))
        glVertexAttribPointer(GLuint(textCoord), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, standardVerticalInvertFragment)
        //法一：运用 CVOpenGLESTexture进行加载，翻开下面
        glActiveTexture(GLenum(GL_TEXTURE0))
        glUniform1i(glGetUniformLocation(self.renderProgram, "colorMap"), 0)
        //法二：运用 glTexImage2D 办法加载，翻开下面
//        glActiveTexture(GLenum(GL_TEXTURE1))
//        glBindTexture(GLenum(GL_TEXTURE_2D), originalTexture)
//        glUniform1i(glGetUniformLocation(self.renderProgram, "colorMap"), 1) //单个纹路可以不用设置
        glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
        //MARK: - 2.制作面部特征点
        if drawLandMark {
            //留意⚠️：不能清屏。否则看不到照相机画面
            //        glClearColor(0.0, 0.0, 0.0, 1.0)
            //铲除屏幕
            //        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
            //1.设置视口大小
            glViewport(0, 0, GLsizei(self.frame.size.width * scale), GLsizei(self.frame.size.height * scale))
            //运用上色器
            glUseProgram(faceProgram)
            for faceInfo in FaceDetector.shareInstance().faceModels {
                var tempPoint: [GLfloat] = [GLfloat].init(repeating: 0, count: faceInfo.landmarks.count * 3)
                var indices: [GLubyte] = [GLubyte].init(repeating: 0, count: faceInfo.landmarks.count)
                for i in 0..<faceInfo.landmarks.count {
                    let point = faceInfo.landmarks[i].cgPointValue
                    tempPoint[i*3+0] = GLfloat(point.x * 2 - 1)
                    tempPoint[i*3+1] = GLfloat(point.y * 2 - 1)
                    tempPoint[i*3+2] = 0.0
                    indices[i] = GLubyte(i)
                }
                let position = glGetAttribLocation(faceProgram, "position")
                glEnableVertexAttribArray(GLuint(position))
                //这种办法得先把极点数据提交到GPU
                //            glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 3), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
                glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, tempPoint)
                let lineWidth = faceInfo.bounds.size.width / CGFloat(self.frame.width * scale)
                let sizeScaleUniform = glGetUniformLocation(self.faceProgram, "sizeScale")
                glUniform1f(GLint(sizeScaleUniform), GLfloat(lineWidth * 20))
                //            var scaleMatrix = GLKMatrix4Identity//GLKMatrix4Scale(GLKMatrix4Identity, 1/Float(lineWidth), 1/Float(lineWidth), 0)
                //            let scaleMatrixUniform = shader.uniformIndex("scaleMatrix")!
                //            glUniformMatrix4fv(GLint(scaleMatrixUniform), 1, GLboolean(GL_FALSE), &scaleMatrix.m.0)
                glDrawElements(GLenum(GL_POINTS), GLsizei(indices.count), GLenum(GL_UNSIGNED_BYTE), indices)
            }
        }
        //MARK: - 3.制作纹路结束，开端瘦脸
        renderThinFace()
    }
//MARK: - 制作瘦脸
    ///制作瘦脸
    func renderThinFace() {
        //运用上色器
        glUseProgram(thinFaceProgram)
        //绑定frameBuffer
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), thinFaceFrameBuffer)
        let faceInfo = FaceDetector.shareInstance().oneFace
        if faceInfo.landmarks.count == 0 {
            glUniform1i(hasFaceUniform, 0)
            //3.制作纹路结束，开端烘托到屏幕上
            displayRenderToScreen(facePointTexture)
            return
        }
        glClearColor(0.0, 0.0, 0.0, 1.0)
        //铲除屏幕
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
        //1.设置视口大小
        let scale = self.contentScaleFactor
        glViewport(0, 0, GLsizei(self.frame.size.width * scale), GLsizei(self.frame.size.height * scale))
        hasFaceUniform = glGetUniformLocation(self.thinFaceProgram, "hasFace")
        aspectRatioUniform = glGetUniformLocation(self.thinFaceProgram, "aspectRatio")
        facePointsUniform = glGetUniformLocation(self.thinFaceProgram, "facePoints")
        thinFaceDeltaUniform = glGetUniformLocation(self.thinFaceProgram, "thinFaceDelta")
        bigEyeDeltaUniform = glGetUniformLocation(self.thinFaceProgram, "bigEyeDelta")
        glUniform1i(hasFaceUniform, 1)
        let aspect: Float = Float(inputTextureW / inputTextureH)
        glUniform1f(aspectRatioUniform, aspect)
        glUniform1f(thinFaceDeltaUniform, thinFaceDelta)
        glUniform1f(bigEyeDeltaUniform, bigEyeDelta)
        let size = 106 * 2
        var tempPoint: [GLfloat] = [GLfloat].init(repeating: 0, count: size)
        var index = 0
        for i in 0..<faceInfo.landmarks.count {
            let point = faceInfo.landmarks[i].cgPointValue
            tempPoint[i*2+0] = GLfloat(point.x)
            tempPoint[i*2+1] = GLfloat(point.y)
            index += 2
            if (index == size) {
                break
            }
        }
        glUniform1fv(facePointsUniform, GLsizei(size), tempPoint)
        //留意：第二参数字符串有必要和shaderv.vsh中的输入变量：position保持一致
        let position = glGetAttribLocation(thinFaceProgram, "position")
        glEnableVertexAttribArray(GLuint(position))
        glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, standardVertex)
        //----处理纹路数据-------
        let textCoord = glGetAttribLocation(thinFaceProgram, "inputTextureCoordinate")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(textCoord))
        glVertexAttribPointer(GLuint(textCoord), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, standardVerticalInvertFragment)
        glActiveTexture(GLenum(GL_TEXTURE1))
        glBindTexture(GLenum(GL_TEXTURE_2D), facePointTexture)
        glUniform1i(glGetUniformLocation(self.thinFaceProgram, "inputImageTexture"), 1) //单个纹路可以不用设置
        glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
        //MARK: - 3.制作纹路结束，开端烘托到屏幕上
        displayRenderToScreen(thinFaceTexture)
    }
    //8.烘托到屏幕上
    private func displayRenderToScreen(_ texture: GLuint) {
        //留意⚠️：打破之前的纹路绑定联系，使OpenGL的纹路绑定状况康复到默许状况。
        glBindTexture(GLenum(GL_TEXTURE_2D), 0) //将2D纹路绑定到默许的纹路，一般用于打破之前的纹路绑定联系，使OpenGL的纹路绑定状况康复到默许状况。
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), 0)//将framebuffer绑定到默许的FBO处，一般用于打破之前的FBO绑定联系，使OpenGL的FBO绑定状况康复到默许状况。
        //设置清屏色彩
        glClearColor(0.0, 0.0, 0.0, 1.0)
        //铲除屏幕
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
        //1.设置视口大小
        let scale = self.contentScaleFactor
        glViewport(0, 0, GLsizei(self.frame.size.width * scale), GLsizei(self.frame.size.height * scale))
        //运用上色器
        glUseProgram(displayProgram)
        //绑定frameBuffer
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer)
#warning("留意⚠️：想要获取shader里边的变量，这儿要记住要在glLinkProgram后边、后边、后边")
        //----处理极点数据-------
        //将极点数据经过renderProgram中的传递到极点上色程序的position
        /*1.glGetAttribLocation,用来获取vertex attribute的进口的.
          2.告诉OpenGL ES,经过glEnableVertexAttribArray，
          3.终究数据是经过glVertexAttribPointer传递曩昔的。
         */
        //留意：第二参数字符串有必要和shaderv.vsh中的输入变量：position保持一致
        let position = glGetAttribLocation(displayProgram, "position")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(position))
        //设置读取办法
        //参数1：index,极点数据的索引
        //参数2：size,每个极点特点的组件数量，1，2，3，或许4.默许初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默许初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或许直接转换为固定值。（GL_FALSE）
        //参数5：stride,接连极点特点之间的偏移量，默许为0；
        //参数6：指定一个指针，指向数组中的第一个极点特点的第一个组件。默许为0
//        glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
        glVertexAttribPointer(GLuint(position), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, standardVertex)
        //----处理纹路数据-------
        //1.glGetAttribLocation,用来获取vertex attribute的进口的.
        //留意：第二参数字符串有必要和shaderv.vsh中的输入变量：textCoordinate保持一致
        let textCoord = glGetAttribLocation(displayProgram, "textCoordinate")
        //设置适宜的格局从buffer里边读取数据
        glEnableVertexAttribArray(GLuint(textCoord))
        //3.设置读取办法
        //参数1：index,极点数据的索引
        //参数2：size,每个极点特点的组件数量，1，2，3，或许4.默许初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默许初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或许直接转换为固定值。（GL_FALSE）
        //参数5：stride,接连极点特点之间的偏移量，默许为0；
        //参数6：指定一个指针，指向数组中的第一个极点特点的第一个组件。默许为0
//        glVertexAttribPointer(GLuint(textCoord), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))
        glVertexAttribPointer(GLuint(textCoord), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), 0, standardVerticalInvertFragment)
        glActiveTexture(GLenum(GL_TEXTURE0))
        glBindTexture(GLenum(GL_TEXTURE_2D), texture)
        glUniform1i(glGetUniformLocation(self.displayProgram, "inputImageTexture"), 0) //单个纹路可以不用设置
        glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
        if (EAGLContext.current() == myContext) {
            myContext.presentRenderbuffer(Int(GL_RENDERBUFFER))
        }
    }

这儿值得留意的是：制作特征点的时分不能进行Clear清屏操作，否则会看不摄像头所捕获的内容

大眼片元上色器算法:

 //圓內扩大
 vec2 enlargeEye(vec2 textureCoord, vec2 originPosition, float radius, float delta) {
    float weight = distance(vec2(textureCoord.x, textureCoord.y / aspectRatio), vec2(originPosition.x, originPosition.y / aspectRatio)) / radius;
    weight = 1.0 - (1.0 - weight * weight) * delta;
    weight = clamp(weight,0.0,1.0);
    textureCoord = originPosition + (textureCoord - originPosition) * weight;
    return textureCoord;
}
vec2 bigEye(vec2 currentCoordinate) {
    vec2 faceIndexs[2];
    faceIndexs[0] = vec2(74., 72.);//如下图中，以74为圆心，74到72作为半径R
    faceIndexs[1] = vec2(77., 75.);
    for(int i = 0; i < 2; i++)
    {
        int originIndex = int(faceIndexs[i].x);
        int targetIndex = int(faceIndexs[i].y);
        vec2 originPoint = vec2(facePoints[originIndex * 2], facePoints[originIndex * 2 + 1]);
        vec2 targetPoint = vec2(facePoints[targetIndex * 2], facePoints[targetIndex * 2 + 1]);
        float radius = distance(vec2(targetPoint.x, targetPoint.y / aspectRatio), vec2(originPoint.x, originPoint.y / aspectRatio));
        radius = radius * 5.;
        currentCoordinate = enlargeEye(currentCoordinate, originPoint, radius, bigEyeDelta);
    }
    return currentCoordinate;
}

textureCoord表明当时要修正的坐标，originPosition表明圆心坐标，radius表明圆的半径，delta用来操控变形强度。 和瘦脸的算法类似，根据originPosition和targetPosition确认一个圆，圆内的坐标会参与核算，圆外的不变。 圆内的坐标环绕圆心originPosition在改变，终究的坐标完全是由weight的值决议，weight越大，终究的坐标改变越小，当weight为1，即坐标处于圆边界或圆外时，终究的坐标不变；当weight小于1时，终究的坐标会落在原坐标和圆点之间，也就是说终究返回的像素点比原像素点间隔圆点更近，这样就产生了以圆点为中心的扩大作用。

如下图中，以74为圆心，74到72作为半径R

瘦脸片元上色器算法:

vec2 curveWarp(vec2 textureCoord, vec2 originPosition, vec2 targetPosition, float delta) {
    vec2 offset = vec2(0.0);
    vec2 result = vec2(0.0);
    vec2 direction = (targetPosition - originPosition) ;
    float radius = distance(vec2(targetPosition.x, targetPosition.y / aspectRatio), vec2(originPosition.x, originPosition.y / aspectRatio));
    float ratio = distance(vec2(textureCoord.x, textureCoord.y / aspectRatio), vec2(originPosition.x, originPosition.y / aspectRatio)) / radius;
    ratio = 1.0 - ratio;
    ratio = clamp(ratio, 0.0, 1.0);
    offset = direction * ratio * delta;
    result = textureCoord - offset;
    return result;
}
//指定9对 圆心坐标和目标坐标，如下图
vec2 thinFace(vec2 currentCoordinate) {
    vec2 faceIndexs[9];
    faceIndexs[0] = vec2(3., 44.);
    faceIndexs[1] = vec2(29., 44.);
    faceIndexs[2] = vec2(7., 45.);
    faceIndexs[3] = vec2(25., 45.);
    faceIndexs[4] = vec2(10., 46.);
    faceIndexs[5] = vec2(22., 46.);
    faceIndexs[6] = vec2(14., 49.);
    faceIndexs[7] = vec2(18., 49.);
    faceIndexs[8] = vec2(16., 49.);
    for(int i = 0; i < 9; i++)
    {
        int originIndex = int(faceIndexs[i].x);
        int targetIndex = int(faceIndexs[i].y);
        vec2 originPoint = vec2(facePoints[originIndex * 2], facePoints[originIndex * 2 + 1]);
        vec2 targetPoint = vec2(facePoints[targetIndex * 2], facePoints[targetIndex * 2 + 1]);
        currentCoordinate = curveWarp(currentCoordinate, originPoint, targetPoint, thinFaceDelta);
    }
    return currentCoordinate;
}

textureCoord表明当时要修正的坐标，originPosition表明圆心坐标，targetPosition表明目标坐标，delta用来操控变形强度。

上述shader办法可以这样了解，首先确认一个以originPosition为圆心、targetPosition和 originPosition之间的间隔为半径的圆，然后将圆内的像素朝着同一个方向移动一个偏移值，且偏移值在间隔圆心越近时越大，终究将变换后的坐标返回。

如果将办法简化为这样的表达式变换后的坐标 = 原坐标 - (目标坐标 - 圆心坐标) * 变形强度，也就是说，办法的作用就是要在原坐标的基础上减去一个偏移值，而(targetPosition - originPosition)决议了移动的方向和最大值。

• 指定9对 圆心坐标和目标坐标，如下图

刚开端想的是实现像最初动图那样的作用，可是在实现的时分遇到了一些问题。刚开端的主意是这样的，如下图

后边想到在实现多滤镜的时分，上一个片元上色器的输出，作为下一个片元上色器的输入， 如下图所示：

本文Demo：码云、Github