Skip to content

Instantly share code, notes, and snippets.

@elnaqah

elnaqah/gist:5049691

Created February 27, 2013 17:17
Show Gist options
  • Save elnaqah/5049691 to your computer and use it in GitHub Desktop.
Save elnaqah/5049691 to your computer and use it in GitHub Desktop.
Download ZIP
webgl_lec1 added animation
Raw
gistfile1.txt
<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 type="text/javascript" src="webgl-utils.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();
var mvMatrixStack=[];
function mvPushMatrix()
{
var copy=mat4.create();
mat4.set(mvMatrix,copy);
mvMatrixStack.push(copy);
}
function mvPopMatrix()
{
if (mvMatrixStack.length==0) {
throw "ya 3am mesh pop";
}
mvMatrix=mvMatrixStack.pop();
}
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 degree_to_redian(degree)
{
return degree*Math.PI/180.0;
}
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]);
mat4.rotate(mvMatrix,degree_to_redian(rTri),[1.0,1.0,0.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();
tick();
}
var rTri=0;
var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;
rTri += (90 * elapsed) / 1000.0;
}
lastTime = timeNow;
}
function tick()
{
requestAnimFrame(tick);
drawScene();
animate();
}
</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