WebGl 二维纹理贴图(矩形)

来源：cnblogs　　作者：&amp;执念　　时间：2019/4/1 9:06:37　　对本文有异议

效果：

代码：

  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>