Simple calculations in WebGL UV

• Calculate uv of screen space

vec2 uv = vec2(gl_FragCoord.xy/screenSize.xy);
Copy the code

• Calculates the minimum pixel unit

vec2 invSize = 1.0 / screenSize.xy; 
vec2 onePixel = vec2(1.0.1.0) / u_textureSize;
Copy the code

• Let’s get this straightened out
  • If the tDepth is 1024×1024 pixels, it is possible to traverse 1024×1024 pixels
  • Vuv with 1/screensize means about one pixel

vec4 rbga = texture2D(tDepth, vuv);
rbga = (
   texture2D(tDepth, vuv) +
   texture2D(tDepth, vuv + vec2(onePixel.x, 0.0)) +
   texture2D(tDepth, vuv + vec2(-onePixel.x, 0.0))) / 3.0;
Copy the code

• Repeat texture (repeat, of course)

precision mediump float;
uniform sampler2D uMask_A;
uniform sampler2D uMask_B;
uniform vec3[2] uColors;
in highp vec2 vUV;
out vec4 outColor;

void main(void) {// 0.2 is to make mask_A less intense
  vec4 mask_a = texture(uMask_A,vUV*4.0) * 0.2; // the 1x1 map is now 4x4
  vec4 mask_b = texture(uMask_B,vUV*2.0);  // the 1x1 map is now 2x2
}
Copy the code

• Sprite figure

in vec4 a_position;
in vec3 a_norm;
in vec2 a_uv;

uniform mat4 uPMatrix;
uniform mat4 uMVMatrix;
uniform mat4 uCameraMatrix;
uniform vec2[6] uFaces;
out highp vec2 vUV;

const float size = 1.0/16.0; // This is 1/16, which refers to a Sprite square

void main(void) {int f = int(a_position.w);
  float u = uFaces[f].x * size + a_uv.x * size;
  float v = uFaces[f].y * size + a_uv.y * size;
  // Calculate the UV coordinates for use in the chip shader
  vUV = vec2(u,v); . }Copy the code

• Uv flip

precision mediump float;
attribute vec3 a_vs;
attribute vec2 a_uvs;
varying vec2 v_uvs;
void main() {
    gl_Position = vec4(a_vs, 1.0);
    v_uvs = vec2(a_uvs.x, 1.0 - a_uvs.y); // flip up and down
}
Copy the code