| OLD | NEW |
|---|
| (Empty) | |
| 1 |
| 2 <html> |
| 3 |
| 4 <head> |
| 5 <title>Learning WebGL — lesson 1</title> |
| 6 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> |
| 7 |
| 8 <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script> |
| 9 |
| 10 <script id="shader-fs" type="x-shader/x-fragment"> |
| 11 precision mediump float; |
| 12 |
| 13 void main(void) { |
| 14 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); |
| 15 } |
| 16 </script> |
| 17 |
| 18 <script id="shader-vs" type="x-shader/x-vertex"> |
| 19 attribute vec3 aVertexPosition; |
| 20 |
| 21 uniform mat4 uMVMatrix; |
| 22 uniform mat4 uPMatrix; |
| 23 |
| 24 void main(void) { |
| 25 gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); |
| 26 } |
| 27 </script> |
| 28 |
| 29 |
| 30 <script type="text/javascript"> |
| 31 |
| 32 var gl; |
| 33 function initGL(canvas) { |
| 34 try { |
| 35 gl = canvas.getContext("webgl"); |
| 36 gl.viewportWidth = canvas.width; |
| 37 gl.viewportHeight = canvas.height; |
| 38 } catch (e) { |
| 39 } |
| 40 if (!gl) { |
| 41 alert("Could not initialise WebGL, sorry :-("); |
| 42 } |
| 43 } |
| 44 |
| 45 |
| 46 function getShader(gl, id) { |
| 47 var shaderScript = document.getElementById(id); |
| 48 if (!shaderScript) { |
| 49 return null; |
| 50 } |
| 51 |
| 52 var str = ""; |
| 53 var k = shaderScript.firstChild; |
| 54 while (k) { |
| 55 if (k.nodeType == 3) { |
| 56 str += k.textContent; |
| 57 } |
| 58 k = k.nextSibling; |
| 59 } |
| 60 |
| 61 var shader; |
| 62 if (shaderScript.type == "x-shader/x-fragment") { |
| 63 shader = gl.createShader(gl.FRAGMENT_SHADER); |
| 64 } else if (shaderScript.type == "x-shader/x-vertex") { |
| 65 shader = gl.createShader(gl.VERTEX_SHADER); |
| 66 } else { |
| 67 return null; |
| 68 } |
| 69 |
| 70 gl.shaderSource(shader, str); |
| 71 gl.compileShader(shader); |
| 72 |
| 73 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { |
| 74 alert(gl.getShaderInfoLog(shader)); |
| 75 return null; |
| 76 } |
| 77 |
| 78 return shader; |
| 79 } |
| 80 |
| 81 |
| 82 var shaderProgram; |
| 83 |
| 84 function initShaders() { |
| 85 var fragmentShader = getShader(gl, "shader-fs"); |
| 86 var vertexShader = getShader(gl, "shader-vs"); |
| 87 |
| 88 shaderProgram = gl.createProgram(); |
| 89 gl.attachShader(shaderProgram, vertexShader); |
| 90 gl.attachShader(shaderProgram, fragmentShader); |
| 91 gl.linkProgram(shaderProgram); |
| 92 |
| 93 if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { |
| 94 alert("Could not initialise shaders"); |
| 95 } |
| 96 |
| 97 gl.useProgram(shaderProgram); |
| 98 |
| 99 shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgr
am, "aVertexPosition"); |
| 100 gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); |
| 101 |
| 102 shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPM
atrix"); |
| 103 shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uM
VMatrix"); |
| 104 } |
| 105 |
| 106 |
| 107 var mvMatrix = mat4.create(); |
| 108 var pMatrix = mat4.create(); |
| 109 |
| 110 function setMatrixUniforms() { |
| 111 gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); |
| 112 gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); |
| 113 } |
| 114 |
| 115 |
| 116 |
| 117 var triangleVertexPositionBuffer; |
| 118 var squareVertexPositionBuffer; |
| 119 |
| 120 function initBuffers() { |
| 121 triangleVertexPositionBuffer = gl.createBuffer(); |
| 122 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); |
| 123 var vertices = [ |
| 124 117.0, 167.0, 0.0, |
| 125 33.0, 333.0, 0.0, |
| 126 200.0, 333.0, 0.0 |
| 127 ]; |
| 128 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRA
W); |
| 129 triangleVertexPositionBuffer.itemSize = 3; |
| 130 triangleVertexPositionBuffer.numItems = 3; |
| 131 |
| 132 squareVertexPositionBuffer = gl.createBuffer(); |
| 133 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); |
| 134 vertices = [ |
| 135 300.0, 167.0, 0.0, |
| 136 467.0, 167.0, 0.0, |
| 137 300.0, 333.0, 0.0, |
| 138 467.0, 333.0, 0.0 |
| 139 ]; |
| 140 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRA
W); |
| 141 squareVertexPositionBuffer.itemSize = 3; |
| 142 squareVertexPositionBuffer.numItems = 4; |
| 143 } |
| 144 |
| 145 |
| 146 function drawScene() { |
| 147 gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); |
| 148 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); |
| 149 |
| 150 // mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 1000.0
, pMatrix); |
| 151 mat4.ortho(-250.0, 250.0, -250.0, 250.0, 0.1, 1000, pMatrix); |
| 152 mat4.identity(mvMatrix); |
| 153 mat4.scale(mvMatrix, [1, -1, 1]); |
| 154 mat4.translate(mvMatrix, [-250, -250, -1]); |
| 155 gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); |
| 156 gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVe
rtexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); |
| 157 setMatrixUniforms(); |
| 158 gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); |
| 159 |
| 160 |
| 161 // mat4.translate(mvMatrix, [300, 0.0, 0.0]); |
| 162 gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); |
| 163 gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVert
exPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); |
| 164 setMatrixUniforms(); |
| 165 gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems)
; |
| 166 } |
| 167 |
| 168 |
| 169 |
| 170 function webGLStart() { |
| 171 var canvas = document.getElementById("lesson01-canvas"); |
| 172 initGL(canvas); |
| 173 initShaders(); |
| 174 initBuffers(); |
| 175 |
| 176 gl.clearColor(0.0, 0.0, 0.0, 1.0); |
| 177 gl.enable(gl.DEPTH_TEST); |
| 178 |
| 179 drawScene(); |
| 180 } |
| 181 |
| 182 |
| 183 </script> |
| 184 |
| 185 |
| 186 </head> |
| 187 |
| 188 |
| 189 <body onload="webGLStart();"> |
| 190 <a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1</a><
br /> |
| 191 |
| 192 <canvas id="lesson01-canvas" style="border: none;" width="500" height="500">
</canvas> |
| 193 |
| 194 <br/> |
| 195 <a href="http://learningwebgl.com/blog/?p=28"><< Back to Lesson 1</a><
br /> |
| 196 </body> |
| 197 |
| 198 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1342523002:
json based animation toy (Closed)
Base URL: https://skia.googlesource.com/skia.git@master