WebGL uv方面的简单计算

• 计算屏幕空间的uv

vec2 uv = vec2(gl_FragCoord.xy/screenSize.xy);

• 计算最小像素单位

vec2 invSize = 1.0 / screenSize.xy; 
vec2 onePixel = vec2(1.0, 1.0) / u_textureSize;

• 理一下这里
  • 如果tDepth是1024x1024像素的贴图的话,就可能要遍历1024x1024个像素
  • vuv 与 1/screensize 意味着左右一个像素

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;

• 重复纹理(当然要设置repeat)

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 是让mask_a的颜色强度弱一些
  vec4 mask_a = texture(uMask_A,vUV*4.0) * 0.2; //1x1的贴图 变成4x4了
  vec4 mask_b = texture(uMask_B,vUV*2.0);  //1x1的贴图 变成2x2了
}

• 雪碧图

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; //这个是1/16 指的是雪碧图的一个正方形格子是1/16

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;
  // 计算uv坐标给片元着色器中使用
  vUV = vec2(u,v);
  ...
}

• uv翻转

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); //上下翻转
}