WebGL编程笔记3:纹理图片texture
HTML部分 <script type="text/javascript" src="gl-matrix.js"></script> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid red"></canvas> JavaScript部分 以下两点若不注意texture2D有可能取不到值,一片黑色。 老的显卡只支持图片尺寸为2的n次幂的纹理图片。 TEXTURE_MAG_FILTER和TEXTURE_MIN_FILTER参数需要制定。 const vertex = ` attribute vec3 v3Position; uniform mat4 u_matrix; attribute vec2 inUv; varying vec2 outUv; void main() { gl_Position = u_matrix * vec4(v3Position, 1.0); outUv = inUv; } `; // texture2D(u_texture, vec2(outUv.x, outUv.y)); // texture2D(u_texture, outUv; // 从纹理texture中根据outUv坐标取色素rgba const fragment = ` precision