引子
JavaScript WebGL 设置颜色效果始终有限,这时候就会想到使用图片,这就涉及到 WebGL 中的纹理使用,比预想中要麻烦的多。
使用图片
纹理(texture)可以用来添加模拟物体的细节,在 3D 游戏中各种模拟的物体都使用了纹理。在绘制矩形的基础上主要有以下几个方面的变化:
- 数据
- 顶点着色器
- 片元着色器
- 缓冲纹理坐标数据
- 加载并创建纹理
- 绘制
数据
先准备一张图片,然后为了把纹理映射到对应的矩形上,需要指定矩形每个顶点各自对应纹理的那个位置。
纹理二维坐标在 x 和 y 轴上,范围为 0 到 1 之间。纹理坐标起于(0, 0),对应图片的左下角,终于(1, 1),对应图片的右上角。所以对应的纹理坐标为:
const texCoords = [
1.0,
1.0, // 右上角
0.0,
1.0, // 左上角
0.0,
0.0, // 左下角
1.0,
0.0, // 右下角
];
顶点着色器
纹理坐标需要进行缓冲并进行传递,在顶点着色器中增加了变量 aVertexTextureCoord
,其值会传递到片元着色器。
const source = ` attribute vec3 aVertexPos; attribute vec2 aVertexTextureCoord; varying highp vec2 vTextureCoord; void main(void){ gl_Position = vec4(aVertexPos, 1); vTextureCoord = aVertexTextureCoord; } `;
片元着色器
在片元着色器中接受纹理坐标,定义纹理采样器 uSampler
,注意这个是全局变量,在任何阶段都可以访问,目前还没有值。内置的方法 texture2D
获得最终的颜色。
const fragmentSource = ` varying highp vec2 vTextureCoord; uniform sampler2D uSampler; void main(void){ gl_FragColor = texture2D(uSampler, vTextureCoord); } `;
缓冲纹理坐标数据
纹理坐标数据同样需要进入缓冲。
/** * 缓冲纹理坐标数据并激活 * @param {*} gl WebGL 上下文 * @param {*} shaderProg
文章评论