效果：
代碼：
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>