WebGL 顶点着色器与片元着色器

-着色器1

WebGL数据类型

• 一般不用bool,bvec,ivec
• 常用就float,sampler2D,samplerCube,mat3,mat4

修饰符(WebGL1.0)

修饰符(WebGL2.0)

• in vec3 normal;
• out vec3 vNormal;
• layout (location = 0) in vec3 position;
• layout (location = 1) in vec3 normal;
• layout(location = 0) out vec4 gColor;
• layout(location = 1) out vec4 gNormal;

顶点着色器 预定义变量

片段着色器 预定义变量

输入的变量

Example

WebGL1.0

attribute vec4 a_position;  //js一般输入的是 n组数组  每一数组大小跟声明有关
uniform vec4 u_offset;      //js一般输入的是 一组数组 这个数组大小跟声明有关 uniform这个可以在片元着色器写
uniform float u_kernel[9];  //js一般输入的是 一组数组 这个数组大小跟声明有关
varying vec4 v_positionWithOffset; //只是用来传值 不用在js里输入
//uniform 不一定要输入 都会有默认值
attribute vec2 a_TexCoord;//顶点纹理坐标
varying vec2 v_TexCoord; 

void main() {
  gl_Position = a_position + u_offset + u_kernel[0];
  v_positionWithOffset = a_position + u_offset;
  v_TexCoord = a_TexCoord; //uv坐标
}

precision mediump float;
varying vec4 v_positionWithOffset;  //要想使用的话 必须要有相同的声明

struct SomeStruct { //自定义结构
  bool active;
  vec2 someVec2;
};
uniform SomeStruct u_someThing;


uniform sampler2D u_Sampler;  //贴图颜色来的
varying vec2 v_TexCoord;  //片元顶点坐标
void main() {
  vec4 color = v_positionWithOffset * 0.5 + 0.5
  gl_FragColor = texture2D(u_Sampler,v_TexCoord); //texture2D会返回四个通道
}

WebGL2.0

#version 300 es
in vec4 a_position;
in vec2 a_TexCoord;//纹理坐标
out vec2 v_TexCoord;//插值后纹理坐标

void main() {
   gl_Position = a_position;
   v_TexCoord = a_TexCoord; //一般不做处理
}

#version 300 es
precision highp float;
int vec2 vTexcoord; //varing 已经被替代了
out vec4 outColor;  // you can pick any name
uniform sampler2D uTexture;
void main() {
   outColor = doMathToMakeAColor;
   gl_FragColor = texture2D(uTexture,v_TexCoord);
}