Last active
August 29, 2015 14:13
-
-
Save amadeus/5dc285713f340be177ed to your computer and use it in GitHub Desktop.
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 — lesson 3</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 gl; | |
function initGL(canvas) { | |
try { | |
gl = canvas.getContext("experimental-webgl"); | |
gl.viewportWidth = canvas.width; | |
gl.viewportHeight = canvas.height; | |
} catch (e) { | |
} | |
if (!gl) { | |
alert("Could not initialise WebGL, sorry :-("); | |
} | |
} | |
function getShader(gl, id) { | |
var shaderScript = document.getElementById(id); | |
if (!shaderScript) { | |
return null; | |
} | |
var str = ""; | |
var k = shaderScript.firstChild; | |
while (k) { | |
if (k.nodeType == 3) { | |
str += k.textContent; | |
} | |
k = k.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; | |
function initShaders() { | |
var fragmentShader = getShader(gl, "shader-fs"); | |
var vertexShader = getShader(gl, "shader-vs"); | |
shaderProgram = gl.createProgram(); | |
gl.attachShader(shaderProgram, vertexShader); | |
gl.attachShader(shaderProgram, fragmentShader); | |
gl.linkProgram(shaderProgram); | |
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { | |
alert("Could 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"); | |
} | |
var mvMatrix = mat4.create(); | |
var mvMatrixStack = []; | |
var pMatrix = mat4.create(); | |
function mvPushMatrix() { | |
var copy = mat4.create(); | |
mat4.set(mvMatrix, copy); | |
mvMatrixStack.push(copy); | |
} | |
function mvPopMatrix() { | |
if (mvMatrixStack.length == 0) { | |
throw "Invalid popMatrix!"; | |
} | |
mvMatrix = mvMatrixStack.pop(); | |
} | |
function setMatrixUniforms() { | |
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); | |
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); | |
} | |
function degToRad(degrees) { | |
return degrees * Math.PI / 180; | |
} | |
var triangleVertexPositionBuffer; | |
var triangleVertexColorBuffer; | |
var squareVertexPositionBuffer; | |
var squareVertexColorBuffer; | |
function initBuffers() { | |
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; | |
squareVertexPositionBuffer = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); | |
vertices = [ | |
1.0, 1.0, 0.0, | |
-1.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); | |
squareVertexPositionBuffer.itemSize = 3; | |
squareVertexPositionBuffer.numItems = 4; | |
squareVertexColorBuffer = gl.createBuffer(); | |
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); | |
colors = [] | |
for (var i=0; i < 4; i++) { | |
colors = colors.concat([0.5, 0.5, 1.0, 1.0]); | |
} | |
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); | |
squareVertexColorBuffer.itemSize = 4; | |
squareVertexColorBuffer.numItems = 4; | |
} | |
var rTri = 0; | |
var rSquare = 0; | |
function drawScene() { | |
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); | |
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); | |
// Set the projection matrix | |
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix); | |
// Reset the model-view matrix | |
mat4.identity(mvMatrix); | |
// Move the mv matrix to the left 1.5 unites, and away 7 units | |
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); | |
// Save the model view matrix to the stack | |
mvPushMatrix(); | |
// Rotate the model-view matrix | |
mat4.rotate(mvMatrix, degToRad(rTri), [0, 1, 0]); | |
// Bind the triangle vertex data | |
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); | |
// Setup the attribute pointer | |
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); | |
// Bind the triangle color data | |
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); | |
// Setup the attribute pointer | |
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); | |
// Apply projection and model-view matrices | |
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); | |
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); | |
// Draw the triangle | |
gl.drawArrays(gl.TRIANGLE_FAN, 0, triangleVertexPositionBuffer.numItems); | |
mvPopMatrix(); | |
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]); | |
mvPushMatrix(); | |
mat4.rotate(mvMatrix, degToRad(rSquare), [1, 0, 0]); | |
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); | |
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); | |
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); | |
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); | |
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix); | |
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix); | |
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); | |
mvPopMatrix(); | |
} | |
var lastTime = 0; | |
function animate() { | |
var timeNow = new Date().getTime(); | |
if (lastTime != 0) { | |
var elapsed = timeNow - lastTime; | |
rTri += (90 * elapsed) / 1000.0; | |
rSquare += (75 * elapsed) / 1000.0; | |
} | |
lastTime = timeNow; | |
} | |
function tick() { | |
requestAnimFrame(tick); | |
drawScene(); | |
animate(); | |
} | |
function webGLStart() { | |
var canvas = document.getElementById("lesson03-canvas"); | |
initGL(canvas); | |
initShaders() | |
initBuffers(); | |
gl.clearColor(0.0, 0.0, 0.0, 1.0); | |
gl.enable(gl.DEPTH_TEST); | |
tick(); | |
} | |
</script> | |
</head> | |
<body onload="webGLStart();"> | |
<a href="http://learningwebgl.com/blog/?p=239"><< Back to Lesson 3</a><br /> | |
<canvas id="lesson03-canvas" style="border: none;" width="500" height="500"></canvas> | |
<br/> | |
<a href="http://learningwebgl.com/blog/?p=239"><< Back to Lesson 3</a><br /> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment