效果：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WebGl 二维纹理贴图(矩形)</title> 6 </head> 7 <body> 8 9 <canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas> 10 11 </body> 12 13 <script> 14 15 window.onload = function () { 16 17 //获取上下文 18 var canvas = document.getElementById('myCanvas'); 19 var gl = canvas.getContext('webgl'); 20 21 //定义矩形数据 并 将其储存在缓存对象 22 var vertices = [ 23 -0.5,0.5,0.0, 0.0,0.0,//(x,y,z)(r,g,b)分别代表坐标和颜色 24 -0.5,-0.5,0.0, 1.0,0.0, 25 0.5,-0.5,0.0, 0.0,1.0, 26 0.5,0.5,0.0, 1.0,1.0, 27 ]; 28 29 var indices = [3,2,1,3,1,0]; 30 31 var vertex_buffer = gl.createBuffer(); 32 gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer); 33 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 34 35 var Index_Buffer = gl.createBuffer(); 36 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,Index_Buffer);//注意 是 ELEMENT_ARRAY_BUFFER 不是 ARRAY_BUFFER 37 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 38 39 //创建和编译着色器程序 40 var vertCode = 'attribute vec3 coordinates;' + 41 'attribute vec2 texCoord;' + 42 'varying vec2 vtexCoord;' + 43 'void main() {' + 44 ' gl_Position = vec4(coordinates, 1.0);' + 45 ' vtexCoord = texCoord;' + 46 '}'; 47 var fragCode = 'precision mediump float;' + 48 'varying vec2 vtexCoord;' + 49 'uniform sampler2D u_Sampler;' + 50 'void main() {' + 51 ' gl_FragColor = texture2D(u_Sampler, vtexCoord);' + 52 '}'; 53 54 var vertShader = gl.createShader(gl.VERTEX_SHADER); 55 gl.shaderSource(vertShader, vertCode); 56 gl.compileShader(vertShader); 57 58 var fragShader = gl.createShader(gl.FRAGMENT_SHADER); 59 gl.shaderSource(fragShader, fragCode); 60 gl.compileShader(fragShader); 61 62 var shaderProgram = gl.createProgram(); 63 gl.attachShader(shaderProgram, vertShader); 64 gl.attachShader(shaderProgram, fragShader); 65 gl.linkProgram(shaderProgram); 66 gl.useProgram(shaderProgram); 67 68 69 //与缓冲区对象相关联着色器程序 70 var bytes = new Float32Array(vertices).BYTES_PER_ELEMENT;// vertices中每个元素的字节数 ,这里是 float 类型, 所以是 4 个字节 71 72 var coord = gl.getAttribLocation(shaderProgram, "coordinates"); 73 gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, bytes*5, 0); 74 gl.enableVertexAttribArray(coord); 75 76 var texCoord = gl.getAttribLocation(shaderProgram, "texCoord"); 77 gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, bytes*5, bytes*3) ; 78 gl.enableVertexAttribArray(texCoord); 79 80 81 //创建纹理对象并调用纹理绘制方法 82 var texture = gl.createTexture();//创建纹理对象 83 var u_Sampler = gl.getUniformLocation(shaderProgram,"u_Sampler");//获取u_Sampler的存储位置 84 var image = new Image();//创建image对象 85 image.src = "./timg.jpg"; 86 image.onload = function () {//加载纹理 87 //纹理绘制 88 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);//对纹理图像进行y轴反转 89 gl.activeTexture(gl.TEXTURE0);//开启0号纹理单元 90 gl.bindTexture(gl.TEXTURE_2D,texture);//向target绑定纹理对象 91 gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);//配置纹理参数 92 gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);//配置纹理图像 93 gl.uniform1i(u_Sampler,0);//将0号纹理传递给着色器 94 95 //绘制 96 gl.clearColor(0.0,0.0,0.0,1.0); 97 gl.clear(gl.COLOR_BUFFER_BIT); 98 gl.drawElements(gl.TRIANGLE_STRIP, indices.length, gl.UNSIGNED_SHORT,0); 99 100 }; 101 102 103 } 104 105 </script> 106 107 </html>