Skip to content

Instantly share code, notes, and snippets.

@elnaqah
Created February 27, 2013 15:33
Show Gist options
  • Save elnaqah/5048783 to your computer and use it in GitHub Desktop.
Save elnaqah/5048783 to your computer and use it in GitHub Desktop.
this is a simple webgl example
<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;
void main(void)
{
gl_FragColor=vec4(1.0,1.0,1.0,1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void)
{
gl_Position=uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);
}
</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.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 squareVertexPositionBuffer;
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;
}
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);
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