玩转WebGL(八)立方体纹理

纹理映射

步骤：

• 准备纹理图像
• 配置集合图形纹理映射方式
• 加载和配置纹理图像
• 从纹理中抽出纹素赋给片元

纹理坐标

就是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色，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