WebGL 雪碧图 Atlas texture

282 阅读1分钟

blog.csdn.net/qq_21476953…

image.png

  • 减少请求
  • 减少drawcall
  • 限制贴图数量
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;

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);
  ...
}
precision mediump float;
uniform sampler2D uAltas;
in highp vec2 vUV;
out vec4 outColor;

void main(void){ outColor = texture(uAltas,vUV); }