The data type

The modifier (webgl)

Vertex shaders are predefined variables

Fragment shader predefined variables

Input variable

Example

webgl

attribute vec4 a_position;  //js input n groups of arrays. Each array size depends on the declaration
uniform vec4 u_offset;      // The uniform array can be written in the fragment shader
uniform float u_kernel[9];  //js usually inputs a set of arrays. The size of the array depends on the declaration
varying vec4 v_positionWithOffset; // This is only used to pass values without input in js
// Uniform has a default value
attribute vec2 a_TexCoord;// Vertex texture coordinates
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 coordinates
}
Copy the code
precision mediump float; varying vec4 v_positionWithOffset; Struct SomeStruct {// custom struct 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 returns four channels}Copy the code

WebGL2.0

#version 300 es
in vec4 a_position;
in vec2 a_TexCoord;// Texture coordinates
out vec2 v_TexCoord;// Interpolated texture coordinates

void main() {
   gl_Position = a_position;
   v_TexCoord = a_TexCoord; // Generally do not do processing
}
Copy the code
#version 300 es precision highp float; int vec2 vTexcoord; // Varing has been replaced by out vec4 outColor; // you can pick any name uniform sampler2D uTexture; void main() { outColor = doMathToMakeAColor; gl_FragColor = texture2D(uTexture,v_TexCoord); }Copy the code

– Shader 1