之前的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>