Shader编程语法汇总

【Laya shader】

类型：

vec2 (x,y)
vec3 (x, y, z)
vec4 (x, y, z, w) 通常w是1
mat3 定义三行三列的矩阵
mat4用于定义一个四行四列的矩阵

Laya Shader API： LAYA_API

Laya Shader 概述： LAYABOX技术文档

Laya中的Shader3D是一个壳，一个Shader3D可以包含多个SubShader，Shader3D负责管理多个SubShader，一般情况下一个Shader3D下只有一个SubShader。

SubShader是真正的着色器程序，SubShader可以包含多个ShaderPass，ShaderPass可以attach顶点着色器和片元着色器，完成各种效果的渲染。当一个SubShader包含多个ShaderPass的时候，实质为多Pass渲染，每一个ShaderPass，都会对使用该Shader的精灵渲染一次，所以可以实现各种特殊的效果，但是也会为性能带来一定的压力。Shader3D负责管理多个SubShader，一般情况下一个Shader3D下只有一个SubShader。

（1）创建一个Shader3D：创建Shader3D的函数是一个静态函数，通过Shader3D.add直接进行创建：创建时传入用户自定义Shader的name即可，此时便创建了一个名为那么的Shader3D壳

1. static add(name, attributeMap = null, uniformMap = null, enableInstancing);

（2）为 Shader3D添加 SubShader：

1. addSubShader(subShader);

(3) 通过Shader 属性名称获得唯一ID。（这里所说的属性名称指的是 Shader中的uniform，那么对应的唯一ID 便是 uniform 在该Shader中的索引值）

1. static propertyNameToID(name)

(4) 是否开启调试模式设置：在调试代码阶段，可以开启 Shader调试模式，那么将在控制台输出编译Shader 信息，包括宏定义信息，SubShaderIndex，PassIndex等等，当然在Shader存在语法问题，也会报出编译错误或者链接错误：

1. Shader3D.debugMode = true;

（5）LayaAir中使用 Shader：

创建一个Shader3D之后，LayaAir并非直接使用该对象和精力进行关联， LayaAir定义了材质（Material），材质定义各种渲染状态以及使用的Shader。只需要将该材质赋予精灵，那么精灵在渲染的时候便会使用材质对应的 Shader进行渲染。在材质中使用 setShaderName("ShaderName") 进行设置：

1. //name设置使用Shader名字。
2. setShaderName(name)

（6） SubShader 子着色器可以理解为 Shader 的渲染方案；每个 Shader 至少1个subShader ，可以有多个subShader：

Laya中SubShader属性介绍：

1.构造函数，需要两个参数，一个是attributeMap，一个是 uniformMap

attributeMap 定义了顶点的属性信息，对应的Shader中的attribute属性，attributeMap是一个映射，key是attribute属性的名称，value是一个索引值

uniformMap也是一个映射，key是uniform属性的名称，value是这个 uniform的提交周期。

提交周期的说明：提交周期表示当前的 uniform更新的一种时机，目前支持的周期类型：

Shader3D.PERIOD_CAMERA :shader变量提交周期，逐相机。
Shader3D.PERIOD_CUSTOM :shader变量提交周期，自定义。
Shader3D.PERIOD_MATERIAL :shader变量提交周期，逐材质。
Shader3D.PERIOD_SCENE :shader变量提交周期，逐场景。
Shader3D.PERIOD_SPRITE :shader变量提交周期，逐精灵和相机，注：因为精灵包含MVP矩阵，为复合属性，所以摄像机发生变化时也应提交。


逐场景，逐相机，逐精灵和相机，这三种周期的uniform是引擎自动传入的值，即当场景，相机，精灵与相机任意一个的属性有变化时，引擎自动提交相应的变动

(7) 添加着色器 Pass：参数如下

vs：该 Pass 使用的顶点着色器文件；

ps：该 Pass 使用的片元着色器文件；

stateMap：是一个映射，key为渲染状态的名称，value为其对应的索引，常用的渲染状态有 Cull，Blend，BlendSrc，BlendDst，DepthTest，DepthWrite

“Forward”表示当前的渲染时前向渲染路径，“ShadowCaster”表示当前渲染时渲染阴影贴图的渲染路径（将物体的深度信息渲染到一张阴影贴图中或者深度纹理中）

当SubShader中含有多个Pass的时候，那么每一个Pass都会对精灵进行一次渲染：

1. addShaderPass(vs, ps, stateMap = null, pipelineMode = "Forward")

(8) SubShader 中定义了一系列的Pass （通道）。每个 Pass 定义了一次完整的渲染流程，注意 Pass 数目过多会造成渲染性能的下降。

ShaderPass中比较重要的属性：获取渲染状态，获取后还能对此进行修改。

1. renderState(): RenderState

定义

1.uniform变量（非系统相关，外部传入的）

uniform mat4 vMvpMatrix;//用于接收来自js程序的一个与顶点坐标信息无关的 4*4 矩阵

uniform变量主要用于定义与顶点信息无关的变量，只要是与顶点坐标无关的变量，基本都会用uniform来定义。

其中mat4用于定义一个四行四列的矩阵，mat3用于定义三行三列的矩阵，以此类推mat2为二行二列。

2. varying变量（顶点着色器输入并计算，可以提供给片段着色器使用）

顶点着色器和片段着色器共用的变量

3. attribute变量（系统相关，系统提供的变量）

attribute变量用于接收与顶点数据相关的一切变量，例如顶点着色器里面的：

获取attributeMap的变量

一.vs 顶点着色器

gl_position 顶点裁剪坐标坐标,值【-1，1】，镜头屏幕坐标
a_Position 顶点本地坐标程序提供
a_Normal 顶点法线
u_MvpMatrix 世界矩阵转换本地坐标用 gl_position = u_MvpMatrix * a_Positio

5. u_Time 系统时间（逐场景）从0开始计时，递增（单位秒）

gl_color vec4 用来输入的属性表示顶点的主颜色
gl_Secondary vec4 输入属性表示顶点的辅助颜色
gl_Normal vec3 输入属性用来表示顶点的法线值
gl_Vertex vec3 输入属性表示物体控件的顶点位置
gl_MultiTexCoordn vec4 输入属性表示顶点的第n个纹理坐标
gl_FogCoord float 输入属性表示顶点的雾坐标
gl_Position vec4 输入属性变换后的顶点位置（经常用来表示，乘以相应的矩阵后的变换坐标）
gl_ClipVertex vec4 输出坐标，用于用户裁剪平面的裁剪
gl_PointSize float 一般用来表示片元点的大小
gl_FrontColor vec4 正面主颜色varying输出
gl_BackColor vec4 背面主颜色varying输出
gl_FrontSecondaryColor vec4 正面的辅助颜色varying输出
gl_BackSecondaryColor vec4 背面的辅助颜色varying输出
gl_TexCoord[] vec4 纹理坐标的数组varying输出
gl_FogFragCoord float 雾坐标varying的输出

20. u_WorldMat 本地坐标转世界坐标，本地坐标乘以的一个系数，是一个4*4的矩阵

二.fs 片段着色器

precision mediump float; 中精度
gl_FragColor 展示的顶点颜色
a_Texcoord0 顶点纹理颜色信息
gl_Color vec4 包含主颜色的插值只读输入
gl_SecondaryColor vec4 包含辅助颜色的插值只读输入属性
gl_TexCoord[] vec4 包含纹理坐标数组的插值只读输入
gl_FragCoord vec4 只读输入属性窗口的x,y,z和1/w
gl_FrontFacing bool 只读输入，如果是窗口正面图元的一部分，则这个值为true
gl_PointCoord vec2 点精灵的二维空间坐标范围在(0.0, 0.0)到(1.0, 1.0)之间，仅用于点图元和点精灵开启的情况下
gl_FragData[] vec4 使用glDrawBuffers输出的数据数组。不能与gl_FragColor结合使用。
gl_FragColor vec4 输出的颜色用于随后的像素操作
gl_FragDepth float 输出的深度用于随后的像素操作，如果这个值没有被写，则使用固定功能管线的深度值代替

三.内置函数：

（1）vec4 texture2D（sampler2D sampler，vec2 coord）：

第一个参数代表图片纹理，第二个参数代表纹理坐标点，通过 GLSL的内建函数 textur2D 来获取对应位置纹理的颜色 RGBA值

Shader编程语法汇总

猜你喜欢