🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] > [参考](https://colin1994.github.io/2017/11/11/OpenGLES-Lesson04/) ## GLSL - OpenGL着色器语言( OpenGL Shading Language) - 让开发者可以对渲染过程拥有更多的控制 ![](https://img.kancloud.cn/b5/0a/b50a8650f59fc04ba80a2e9ba6a13788_400x219.png) ## 基础语法 demo: ``` // 顶点着色器 .vsh attribute vec4 position; attribute vec4 color; varying vec4 colorVarying; void main(void) { colorVarying = color; gl_Position = position; } // 片段着色器 .fsh varying lowp vec4 colorVarying; void main(void) { gl_FragColor = colorVarying; } ``` ### 变量类型 | 变量类别 | 变量类型 | 描述 | | --- | --- | --- | | 空 | void | 用于无返回值的函数或空的参数列表 | | 标量 | float, int, bool | 浮点型,整型,布尔型的标量数据类型 | | 浮点型向量 | float, vec2, vec3, vec4 | 包含1,2,3,4个元素的浮点型向量 | | 整数型向量 | int, ivec2, ivec3, ivec4 | 包含1,2,3,4个元素的整型向量 | | 布尔型向量 | bool, bvec2, bvec3, bvec4 | 包含1,2,3,4个元素的布尔型向量 | | 矩阵 | mat2, mat3, mat4 | 尺寸为2x2,3x3,4x4的浮点型矩阵 | | 纹理句柄 | sampler2D, samplerCube | 表示2D,立方体纹理的句柄 | > GLSL 中没有指针类型 **标量** ``` float myFloat = 1.0; bool myBool = true; myFloat = float(myBool); // bool -> float myBool = bool(myFloat); // float -> bool ``` **向量** - 如果向量构造器中只提供了一个标量参数,则向量中所有值都会设定为该标量值。 - 如果提供了多个标量值或提供了向量参数,则会从左至右使用提供的参数来给向量赋值,如果使用多个标量来赋值,则需要确保标量的个数要多于向量构造器中的个数 ``` vec4 myVec4 = vec4(1.0); // myVec4 = {1.0, 1.0, 1.0, 1.0} vec3 myVec3 = vec3(1.0, 0.0, 0.5); // myVec3 = {1.0, 0.0, 0.5} vec3 temp = vec3(myVec3); // temp = myVec3 vec2 myVec2 = vec2(myVec3); // myVec2 = {myVec3.x, myVec3.y} myVec4 = vec4(myVec2, temp, 0.0); // myVec4 = {myVec2.x, myVec2.y , temp, 0.0 } ``` **矩阵** ``` mat3 myMat3 = mat3(1.0, 0.0, 0.0, // 第一列 0.0, 1.0, 0.0, // 第二列 0.0, 1.0, 1.0); // 第三列 ``` | 分量访问符 | 符号描述 | | --- | --- | | (x,y,z,w) | 与位置相关的分量 | | (r,g,b,a) | 与颜色相关的分量 | | (s,t,p,q) | 与纹理坐标相关的分量 | ``` vec3 myVec3 = vec3(0.0, 1.0, 2.0); // myVec3 = {0.0, 1.0, 2.0} vec3 temp; temp = myVec3.xyz; // temp = {0.0, 1.0, 2.0} temp = myVec3.xxx; // temp = {0.0, 0.0, 0.0} temp = myVec3.zyx; // temp = {2.0, 1.0, 0.0} ``` **向量和矩阵的操作** ``` vec3 v, u; float f; v = u + f; // 等价于 v.x = u.x + f; v.y = u.y + f; v.z = u.z + f; ``` ``` vec3 v, u, w; w = v + u; // 等价于 w.x = v.x + u.x; w.y = v.y + u.y; w.z = v.z + u.z; ``` ### 限定符 | 限定符 | 描述 | | --- | --- | | | 局部可读写变量,或者函数的参数 | | const | 编译时常量,或只读的函数参数 | | attribute | 由应用程序传输给顶点着色器的逐顶点的数据 | | uniform | 在图元处理过程中其值保持不变,由应用程序传输给着色器 | | varying | 由顶点着色器传输给片段着色器中的插值数据 |