Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

remove tabs, reformat code

  • Loading branch information...
commit 351262e12a64d4992ea1c7101c808b078df4cd34 1 parent 59f063c
David Hrachovy authored
Showing with 151 additions and 152 deletions.
  1. +95 −95 index.html
  2. +31 −32 src/buffers.js
  3. +16 −16 src/shaderutils.js
  4. +9 −9 src/utils.js
190 index.html
View
@@ -3,106 +3,106 @@
<head>
<meta charset="utf-8">
<title>opengl</title>
-<script src="src/mjs.js"></script>
-<script src="src/utils.js"></script>
-<script src="src/buffers.js"></script>
-<script src="src/shaderutils.js"></script>
+ <script src="src/mjs.js"></script>
+ <script src="src/utils.js"></script>
+ <script src="src/buffers.js"></script>
+ <script src="src/shaderutils.js"></script>
</head>
<body>
-<script>
-var squareRotation = 0.0;
+ <script>
+ var squareRotation = 0.0;
-function initWebGL(canvas) {
- gl = null;
-
- try {
- gl = canvas.getContext("experimental-webgl");
- }
- catch(e) {
- }
-
- // If we don't have a GL context, give up now
-
- if (!gl) {
- alert("Unable to initialize WebGL. Your browser may not support it.");
- }
-}
-function drawScene() {
- loadIdentity();
- mvPushMatrix();
+ function initWebGL(canvas) {
+ gl = null;
- //timing
- var currentTime = (new Date).getTime();
- if ( typeof lastSquareUpdateTime != "undefined") {
- var delta = currentTime - lastSquareUpdateTime;
-
- squareRotation += (30 * delta) / 1000.0;
- }
-
- lastSquareUpdateTime = currentTime;
- mvTranslate([-0.0, 0.0, -6.0]);
- mvRotate(squareRotation, [1, 0, 1]);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- perspectiveMatrix = M4x4.makePerspective(45, 640.0/480.0, 0.1, 100.0);
-
-
- gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
- gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
- gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
- setMatrixUniforms();
-gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
- mvPopMatrix();
- requestAnimFrame(drawScene);
-}
-function start() {
- var canvas = document.getElementById("glcanvas");
+ try {
+ gl = canvas.getContext("experimental-webgl");
+ }
+ catch(e) {
+ }
- initWebGL(canvas); // Initialize the GL context
- initBuffers();
- initShaders();
-
- // Only continue if WebGL is available and working
-
- if (gl) {
- gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
- gl.enable(gl.DEPTH_TEST); // Enable depth testing
- gl.depthFunc(gl.LEQUAL); // Near things obscure far things
- drawScene();
- }
-}
-</script>
-<body onload="start()">
-<script id="shader-fs" type="x-shader/x-fragment">
-#ifdef GL_ES
-precision highp float;
-#endif
- varying vec4 acolor;
- void main(void) {
- gl_FragColor = acolor;
- }
-</script>
-<script id="shader-vs" type="x-shader/x-vertex">
-#ifdef GL_ES
-precision highp float;
-#endif
- attribute vec3 aVertexPosition;
- attribute vec4 aColorPosition;
+ // If we don't have a GL context, give up now
- uniform mat4 uMVMatrix;
- uniform mat4 uPMatrix;
-
- varying vec4 acolor;
- void main(void) {
- acolor = aColorPosition;
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
- }
-</script>
- <canvas id="glcanvas" width="640" height="480">
- Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
- </canvas>
-</body>
+ if (!gl) {
+ alert("Unable to initialize WebGL. Your browser may not support it.");
+ }
+ }
+ function drawScene() {
+ loadIdentity();
+ mvPushMatrix();
+
+ //timing
+ var currentTime = (new Date).getTime();
+ if ( typeof lastSquareUpdateTime != "undefined") {
+ var delta = currentTime - lastSquareUpdateTime;
+
+ squareRotation += (30 * delta) / 1000.0;
+ }
+
+ lastSquareUpdateTime = currentTime;
+ mvTranslate([-0.0, 0.0, -6.0]);
+ mvRotate(squareRotation, [1, 0, 1]);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ perspectiveMatrix = M4x4.makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+ gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+ gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+ setMatrixUniforms();
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+ gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+ mvPopMatrix();
+ requestAnimFrame(drawScene);
+ }
+ function start() {
+ var canvas = document.getElementById("glcanvas");
+
+ initWebGL(canvas); // Initialize the GL context
+ initBuffers();
+ initShaders();
+
+ // Only continue if WebGL is available and working
+
+ if (gl) {
+ gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
+ gl.enable(gl.DEPTH_TEST); // Enable depth testing
+ gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+ drawScene();
+ }
+ }
+ </script>
+ <body onload="start()">
+ <script id="shader-fs" type="x-shader/x-fragment">
+ #ifdef GL_ES
+ precision highp float;
+ #endif
+ varying vec4 acolor;
+ void main(void) {
+ gl_FragColor = acolor;
+ }
+ </script>
+ <script id="shader-vs" type="x-shader/x-vertex">
+ #ifdef GL_ES
+ precision highp float;
+ #endif
+ attribute vec3 aVertexPosition;
+ attribute vec4 aColorPosition;
+
+ uniform mat4 uMVMatrix;
+ uniform mat4 uPMatrix;
+
+ varying vec4 acolor;
+ void main(void) {
+ acolor = aColorPosition;
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+ }
+ </script>
+ <canvas id="glcanvas" width="640" height="480">
+ Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
+ </canvas>
+ </body>
</body>
</html>
63 src/buffers.js
View
@@ -1,49 +1,48 @@
-
function initBuffers() {
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
-
-var vertices = [
+
+ var vertices = [
// Front face
-1.0, -1.0, 1.0,
- 1.0, -1.0, 1.0,
- 1.0, 1.0, 1.0,
+ 1.0, -1.0, 1.0,
+ 1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-
+
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
- 1.0, 1.0, -1.0,
- 1.0, -1.0, -1.0,
-
+ 1.0, 1.0, -1.0,
+ 1.0, -1.0, -1.0,
+
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
- 1.0, 1.0, 1.0,
- 1.0, 1.0, -1.0,
-
+ 1.0, 1.0, 1.0,
+ 1.0, 1.0, -1.0,
+
// Bottom face
-1.0, -1.0, -1.0,
- 1.0, -1.0, -1.0,
- 1.0, -1.0, 1.0,
+ 1.0, -1.0, -1.0,
+ 1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
-
+
// Right face
- 1.0, -1.0, -1.0,
- 1.0, 1.0, -1.0,
- 1.0, 1.0, 1.0,
- 1.0, -1.0, 1.0,
-
+ 1.0, -1.0, -1.0,
+ 1.0, 1.0, -1.0,
+ 1.0, 1.0, 1.0,
+ 1.0, -1.0, 1.0,
+
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0
];
-
+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
-var colors = [
+ var colors = [
[1.0, 1.0, 1.0, 1.0], // Front face: white
[1.0, 0.0, 0.0, 1.0], // Back face: red
[0.0, 1.0, 0.0, 1.0], // Top face: green
@@ -51,27 +50,27 @@ var colors = [
[1.0, 1.0, 0.0, 1.0], // Right face: yellow
[1.0, 0.0, 1.0, 1.0] // Left face: purple
];
-
+
var generatedColors = [];
-
+
for (j=0; j<6; j++) {
var c = colors[j];
-
+
for (var i=0; i<4; i++) {
generatedColors = generatedColors.concat(c);
}
}
-
+
cubeVerticesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
-cubeVerticesIndexBuffer = gl.createBuffer();
+ cubeVerticesIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-
+
// This array defines each face as two triangles, using the
// indices into the vertex array to specify each triangle's
// position.
-
+
var cubeVertexIndices = [
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // back
@@ -80,9 +79,9 @@ cubeVerticesIndexBuffer = gl.createBuffer();
16, 17, 18, 16, 18, 19, // right
20, 21, 22, 20, 22, 23 // left
]
-
+
// Now send the element array to GL
-
+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
- new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+ new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
}
32 src/shaderutils.js
View
@@ -1,22 +1,22 @@
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
-
+
// Create the shader program
-
+
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
-
+
// If creating the shader program failed, alert
-
+
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Unable to initialize the shader program.");
}
-
+
gl.useProgram(shaderProgram);
-
+
vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(vertexPositionAttribute);
vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aColorPosition");
@@ -24,23 +24,23 @@ function initShaders() {
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
-
+
if (!shaderScript) {
return null;
}
-
+
var theSource = "";
var currentChild = shaderScript.firstChild;
-
+
while(currentChild) {
if (currentChild.nodeType == 3) {
theSource += currentChild.textContent;
}
-
+
currentChild = currentChild.nextSibling;
}
var shader;
-
+
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
@@ -49,17 +49,17 @@ function getShader(gl, id) {
return null; // Unknown shader type
}
gl.shaderSource(shader, theSource);
-
+
// Compile the shader program
-
+
gl.compileShader(shader);
-
+
// See if it compiled successfully
-
+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
return null;
}
-
+
return shader;
}
18 src/utils.js
View
@@ -13,14 +13,14 @@ function mvPopMatrix() {
if (!mvMatrixStack.length) {
throw("Can't pop from an empty matrix stack.");
}
-
+
mvMatrix = mvMatrixStack.pop();
return mvMatrix;
}
function mvRotate(angle, axis) {
var inRadians = angle * Math.PI / 180.0;
-
+
M4x4.rotate(inRadians, axis, mvMatrix, mvMatrix);
}
@@ -45,11 +45,11 @@ function setMatrixUniforms() {
}
requestAnimFrame = (function() {
return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
- window.setTimeout(callback, 1000/60);
- };
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
+ window.setTimeout(callback, 1000/60);
+ };
})();
Please sign in to comment.
Something went wrong with that request. Please try again.