OpenGL实现礼物特效方案（直播）

OpenGL实现礼物特效方案（直播）

礼物特效

常见的直播都会礼物打赏，这些礼物炫酷画面一般其实通过播放器播放一帧帧的图片。首选一个播放器、平台的OpenGL的控件，把渲染设置透明，准背好带有左通道图、右边实体的视频文件，这样可以实现出来礼物是，其他背景都是透明的，在播放小视频感觉就刷礼物的效果。

OpenGL礼物特效原理

了解什么是颜色通道

颜色表示中，RGBA 表示红色 (Red)、绿色 (Green)、蓝色 (Blue) 和透明度 (Alpha) 四个通道的值。每个通道的取值范围通常是从 0 到 1，其中：
白色：RGBA 分别为 (1, 1, 1, 1)，表示所有颜色通道的值都最大，因此呈现为白色。
黑色：RGBA 分别为 (0, 0, 0, 1)，表示所有颜色通道的值都最小，因此呈现为黑色。
下图左边部分就分别是白色和黑色组成

带有左通道图、右边实体的视频文件，当OpenGL在绘制图片的时候，取通道图比如R分量设置透明度，如果R=1，为不透明，R=0；是透明实现背景透明效果。

以下下列shader和对应定点为例子

static const GLfloat squareVertices[] = {
    1.0f, -1.0f, 0.0f,
    -1.0f, -1.0f, 0.0f,
    1.0f, 1.0f, 0.0f,
    -1.0f,  1.0f, 0.0f,
};

static const GLfloat textureVertices[] = {
    1.0f,  0.0f,
    0.501f,  0.0f,
    1.0f, 1.0f,
    0.501f, 1.0f,
};
static const char* lightingeffects_fragment_shader ="#extension GL_OES_EGL_image_external : require\n"
        "precision mediump float;\n"
        "varying vec2 textureCoordinate;\n"
        "uniform samplerExternalOES videoFrame;\n"
        "\n"
        "void main() {\n"
        "    //gl_FragColor=texture2D(videoFrame, textureCoordinate);\n"
        "    gl_FragColor = vec4(texture2D(videoFrame, textureCoordinate).rgb,texture2D(videoFrame, textureCoordinate+vec2(-0.5, 0)).r);\n"
        "}";


static const char* lightingeffects_vertex_shader = "attribute vec4 position;\n"
        "attribute vec4 inputTextureCoordinate;//S T 纹理坐标\n"
        "varying vec2 textureCoordinate;\n"
        "uniform mat4 Matrix;\n"
        "uniform float tans;\n"
        "void main() {\n"
        "    textureCoordinate = vec2(inputTextureCoordinate.x, 1.0 - inputTextureCoordinate.y);\n"
        "    gl_Position = Matrix*position;\n"
        "    gl_Position = vec4(gl_Position.x, gl_Position.y-tans, gl_Position.z, gl_Position.w) ;\n"
        "}";

根据提供的 textureVertices 数组，其中包含四个顶点的纹理坐标信息，可以明确以下事实：

1. 纹理坐标的排列顺序是：

   • 点 1: (1.0, 0.0)
   • 点 2: (0.501, 0.0)
   • 点 3: (1.0, 1.0)
   • 点 4: (0.501, 1.0)

2. 通过最后一行代码 gl_FragColor = vec4(...); 中的 textureCoordinate 变量来推断，这个着色器中使用的纹理坐标应该是 varying vec2 textureCoordinate; 定义的变量。

基于上述信息：

• 从那个位置坐标开始画：根据给定的纹理坐标数组，绘制开始于第一个顶点 (1.0, 0.0) 的位置。

• 往那个方向：根据逆时针顺序，绘制方向应该是从右下角到右上角到左上角再到左下角。

• 那个位置结束：绘制结束于最后一个顶点 (0.501, 1.0) 的位置。

通过纹理坐标的分析 gl_FragColor = vec4(texture2D(videoFrame, textureCoordinate).rgb,texture2D(videoFrame, textureCoordinate+vec2(-0.5, 0)).r);，对应参数vec4，分别RGBA， texture2D(videoFrame, textureCoordinate+vec2(-0.5, 0)).r ，通过R分量获取对应的透明度，其中-0.5为了获取左通道的右下角第一个坐标，这样组成每个纹理点的RGBA进行绘制实现显示礼物