webgl helloworld

之前的webgl 初识1, 初识2 已经介绍了webgl的基本概念，工作原理. 没有理解的自己yy.
现呈上例子一枚
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>helloworld</title>
  6 
  7     <script id="2d-vertex-shader" type="notjs">
  8         attribute vec4 a_position;
  9         attribute vec2 a_texCoord;
 10         varying vec2 v_texCoord;
 11         void main() {
 12             gl_Position = a_position;
 13             v_texCoord = a_texCoord;
 14         }
 15     </script>
 16 
 17     <script id="2d-fragment-shader" type="notjs">
 18         precision mediump float;
 19         uniform sampler2D u_image;
 20         varying vec2 v_texCoord;
 21         void main() {
 22            gl_FragColor = texture2D(u_image, v_texCoord);
 23         }
 24     </script>
 25 
 26     <script type="text/javascript">
 27         function main(image){
 28             console.log(image);
 29             var canvas = document.getElementById("c");
 30             var gl = canvas.getContext("webgl");
 31             if (!gl) {
 32                 return;
 33             }
 34 
 35             var vertexShaderSource = document.getElementById("2d-vertex-shader").text;
 36             var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;
 37             var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
 38             var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
 39             var program = createProgram(gl, vertexShader, fragmentShader);
 40 
 41 
 42             var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
 43             var texCoordAttributeLocation = gl.getAttribLocation(program, "a_texCoord");
 44             var imageLocation = gl.getUniformLocation(program, "u_image");
 45 
 46             var positionBuffer = gl.createBuffer();
 47             var positions = [0, 0,
 48                 0, 0.5,
 49                 0.7, 0,
 50                 0.7, 0.5];
 51             gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 52             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
 53             gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
 54 
 55             var uvBuffer = gl.createBuffer();
 56             var uvs = [0, 0, 0, 1.0, 1.0, 1.0, 1.0, 0];
 57             gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
 58             gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvs), gl.STATIC_DRAW);
 59             gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);
 60 
 61             var texture = gl.createTexture();
 62             gl.bindTexture(gl.TEXTURE_2D, texture);
 63             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 64             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 65             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 66             gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 67             gl.texImage2D(gl.TEXTURE_2D, imageLocation, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
 68 
 69             gl.enableVertexAttribArray(positionAttributeLocation);
 70             gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 71 
 72             gl.enableVertexAttribArray(texCoordAttributeLocation);
 73             // gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
 74 
 75             gl.activeTexture(gl.TEXTURE);
 76             // gl.bindTexture(gl.TEXTURE_2D, texture);
 77 
 78             gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 79             gl.useProgram(program);
 80             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 81         }
 82 
 83         function createShader(gl, type, source) {
 84             var shader = gl.createShader(type);
 85             gl.shaderSource(shader, source);
 86             gl.compileShader(shader);
 87             var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
 88             if (success) {
 89                 return shader;
 90             }
 91             console.log(gl.getShaderInfoLog(shader));
 92             gl.deleteShader(shader);
 93         }
 94 
 95         function createProgram(gl, vertexShader, fragmentShader) {
 96             var program = gl.createProgram();
 97             gl.attachShader(program, vertexShader);
 98             gl.attachShader(program, fragmentShader);
 99             gl.linkProgram(program);
100             var success = gl.getProgramParameter(program, gl.LINK_STATUS);
101             if (success) {
102                 return program;
103             }
104             console.log(gl.getProgramInfoLog(program));
105             gl.deleteProgram(program);
106         }
107 
108 
109         function onload() {
110             var image = new Image();
111             image.src = "leaves.jpg";  // MUST BE SAME DOMAIN!!!
112             image.onload = function() {
113                 main(image);
114             }
115         }
116     </script>
117 
118 </head>
119 <body onload="onload();">
120 <canvas id="c" width="400" height="400"></canvas>
121 </body>
122 </html>