OpenGL和OpenGL ES显示YUV图片的着色器差别(一)

这里解释的只是用于显示YUV图片的代码,没有增加任何效果:

OpenGL 的片段着色器片段:

const char *fsrc = "varying vec2 textureOut; \
    uniform sampler2D tex_y; \
    uniform sampler2D tex_u; \
    uniform sampler2D tex_v; \
    void main(void) \
    { \
        vec3 yuv; \
        vec3 rgb; \
        yuv.x = texture2D(tex_y, textureOut).r; \
        yuv.y = texture2D(tex_u, textureOut).r - 0.5; \
        yuv.z = texture2D(tex_v, textureOut).r - 0.5; \
        rgb = mat3( 1,       1,         1, \
                    0,       -0.39465,  2.03211, \
                    1.13983, -0.58060,  0) * yuv; \
        gl_FragColor = vec4(rgb, 1); \
    }";

OpenGL 的顶点着色器片段:

const char *vsrc = "attribute vec4 vertexIn; \
    attribute vec2 textureIn; \
    varying vec2 textureOut;  \
    void main(void)           \
    {                         \
        gl_Position = vertexIn; \
        textureOut = textureIn; \
    }";

OpenGL ES 的片段着色器片段:

const char *fsrc = "#version 320 es\n\
    precision mediump float;\n\
    in vec2 textureOut;\n\
    uniform sampler2D tex_y;\n\
    uniform sampler2D tex_u;\n\
    uniform sampler2D tex_v;\n\
    out vec4 fragColor;\n\
    void main(void)\n\
    {\n\
        vec3 yuv;\n\
        vec3 rgb;\n\
        yuv.x = texture(tex_y, textureOut).r;\n\
        yuv.y = texture(tex_u, textureOut).r - 0.5;\n\
        yuv.z = texture(tex_v, textureOut).r - 0.5;\n\
        rgb = mat3(1.0, 1.0, 1.0,\n\
                   0.0, -0.39465, 2.03211,\n\
                   1.13983, -0.58060, 0.0) * yuv;\n\
        fragColor = vec4(rgb, 1.0);\n\
    }";

OpenGL ES的顶点着色器片段:

const char *vsrc = "#version 320 es\n\
    in vec4 vertexIn;\n\
    in vec2 textureIn;\n\
    out vec2 textureOut;\n\
    void main(void)\n\
    {\n\
        gl_Position = vertexIn;\n\
        textureOut = textureIn;\n\
    }";

差别:

  • 添加了 #version 320 es 指令,指定使用 OpenGL ES 3.2 版本。
  • 使用 inout 关键字替代了原来的 varying
  • 使用 precision mediump float 指定片段着色器的浮点数精度。
  • 使用 texture 函数替代了原来的 texture2D 函数。
相关推荐
起司锅仔3 天前
OpenGL ES 着色器(5)
android·安卓·opengl·着色器
幻梦丶海炎5 天前
【Threejs进阶教程-着色器篇】8. Shadertoy如何使用到Threejs-基础版
webgl·threejs·着色器·glsl
优雅永不过时·6 天前
three.js 通过着色器实现热力图效果
前端·javascript·智慧城市·three.js·热力图·着色器
UTwelve10 天前
【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第四篇-着色器投影-接收阴影部分】
ue5·虚幻·着色器
我啥都会10 天前
着色器(Vertex Shader)基础
算法·着色器
UTwelve10 天前
【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第二篇-着色器制作】
ue5·游戏引擎·虚幻·着色器·虚幻4
白茶等风1213810 天前
【ASE】第一课_双面着色器
着色器
优雅永不过时·10 天前
使用three.js 实现着色器草地的效果
前端·javascript·智慧城市·webgl·three·着色器
Allen747411 天前
AR传送门+特定区域显示内容+放大镜 效果着色器使用
着色器
UTwelve12 天前
【UE5】将2D切片图渲染为体积纹理,最终实现使用RT实时绘制体积纹理【第三篇-着色器光照】
ue5·ue4·虚幻·着色器