Created
February 27, 2013 16:08
-
-
Save elnaqah/5049062 to your computer and use it in GitHub Desktop.
webgl lec1 example with color added
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Learning WebGL</title> | |
| <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> | |
| <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script> | |
| <script id="shader-fs" type="x-shader/x-fragment"> | |
| precision mediump float; | |
| varying vec4 vColor; | |
| void main(void) | |
| { | |
| gl_FragColor=vColor; | |
| } | |
| </script> | |
| <script id="shader-vs" type="x-shader/x-vertex"> | |
| attribute vec3 aVertexPosition; | |
| attribute vec4 aVertexColor; | |
| uniform mat4 uMVMatrix; | |
| uniform mat4 uPMatrix; | |
| varying vec4 vColor; | |
| void main(void) | |
| { | |
| gl_Position=uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0); | |
| vColor=aVertexColor; | |
| } | |
| </script> | |
| <script type="text/javascript"> | |
| var mvMatrix=mat4.create(); | |
| var pMatrix=mat4.create(); | |
| function setUniforms() | |
| { | |
| gl.uniformMatrix4fv(shaderProgram.pMatrixUniform,false,pMatrix); | |
| gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform,false,mvMatrix); | |
| } | |
| function getShader(gl,id) | |
| { | |
| var shaderScript=document.getElementById(id); | |
| if(!shaderScript) | |
| { | |
| return null; | |
| } | |
| var str=""; | |
| var script=shaderScript.firstChild; | |
| while(script){ | |
| if(script.nodeType==3) | |
| { | |
| str+=script.textContent; | |
| } | |
| script=script.nextSibling; | |
| } | |
| var shader; | |
| if(shaderScript.type == "x-shader/x-fragment") | |
| { | |
| shader=gl.createShader(gl.FRAGMENT_SHADER); | |
| } | |
| else if(shaderScript.type == "x-shader/x-vertex" ) | |
| { | |
| shader=gl.createShader(gl.VERTEX_SHADER); | |
| } | |
| else | |
| { | |
| return null; | |
| } | |
| gl.shaderSource(shader,str); | |
| gl.compileShader(shader); | |
| if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)) | |
| { | |
| alert(gl.getShaderInfoLog(shader)); | |
| return null; | |
| } | |
| return shader; | |
| } | |
| var shaderProgram; | |
| var gl; | |
| function initShaders() | |
| { | |
| var fragementShader=getShader(gl,"shader-fs"); | |
| var vertexShader=getShader(gl,"shader-vs"); | |
| shaderProgram=gl.createProgram(); | |
| gl.attachShader(shaderProgram,vertexShader); | |
| gl.attachShader(shaderProgram,fragementShader); | |
| gl.linkProgram(shaderProgram); | |
| if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)) | |
| { | |
| alert("cloud not initialise shaders"); | |
| } | |
| gl.useProgram(shaderProgram); | |
| shaderProgram.vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition"); | |
| gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); | |
| shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram,"aVertexColor"); | |
| gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); | |
| shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix"); | |
| shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix"); | |
| } | |
| function initGL(canvas) | |
| { | |
| try{ | |
| gl=canvas.getContext("experimental-webgl"); | |
| gl.viewportWidth=canvas.width; | |
| gl.viewportHeight=canvas.height; | |
| } | |
| catch(e){} | |
| if(!gl) | |
| { | |
| alert("mafesh webgl"); | |
| } | |
| } | |
| var triangleVertexPositionBuffer; | |
| var triangleVertexColorBuffer; | |
| function initBuffer() | |
| { | |
| triangleVertexPositionBuffer=gl.createBuffer(); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer); | |
| var vertices=[ | |
| 0.0,1.0,0.0, | |
| -1.0,-1.0,0.0, | |
| 1.0,-1.0,0.0 | |
| ] | |
| gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices),gl.STATIC_DRAW); | |
| triangleVertexPositionBuffer.itemSize=3; | |
| triangleVertexPositionBuffer.numItems=3; | |
| triangleVertexColorBuffer=gl.createBuffer(); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer); | |
| var colors=[ | |
| 1.0,0.0,0.0,1.0, | |
| 0.0,1.0,0.0,1.0, | |
| 0.0,0.0,1.0,1.0 | |
| ]; | |
| gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(colors),gl.STATIC_DRAW); | |
| triangleVertexColorBuffer.itemSize=4; | |
| triangleVertexColorBuffer.numItems=3; | |
| } | |
| function drawScene() | |
| { | |
| gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight); | |
| gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
| mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,0.1,100.0,pMatrix); | |
| mat4.identity(mvMatrix); | |
| mat4.translate(mvMatrix,[0.0,0.0,-7.0]); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer); | |
| gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0); | |
| gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer); | |
| gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0); | |
| setUniforms(); | |
| gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems); | |
| } | |
| function webGLStart() | |
| { | |
| var canvas=document.getElementById("canvas"); | |
| initGL(canvas); | |
| initShaders(); | |
| initBuffer(); | |
| gl.clearColor(0.0,0.0,0.0,1.0); | |
| gl.enable(gl.DEPTH_TEST) | |
| drawScene(); | |
| } | |
| </script> | |
| </head> | |
| <body onload="webGLStart()"> | |
| <canvas id="canvas" style="border: none;" width="500" height="500"></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment