纹理映射
步骤:
- 准备纹理图像
- 配置集合图形纹理映射方式
- 加载和配置纹理图像
- 从纹理中抽出纹素赋给片元
纹理坐标
就是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色,webgl系统中的纹理坐标是二维的。
设置纹理坐标:
private texCoords = [
1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0,
1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0,
1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0
]
// uv
let texcoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.texCoords), gl.STATIC_DRAW);
gl.vertexAttribPointer(texcoordLoc, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(texcoordLoc);
顶点着色器
attribute vec4 a_position;
uniform mat4 u_worldV