[SCM] WebKit Debian packaging branch, debian/experimental, updated. upstream/1.3.3-9427-gc2be6fc
cmarrin at apple.com
cmarrin at apple.com
Wed Dec 22 12:44:01 UTC 2010
The following commit has been merged in the debian/experimental branch:
commit 3e51a2a23b128667648b89309df78dd57991d162
Author: cmarrin at apple.com <cmarrin at apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Fri Aug 27 23:31:19 2010 +0000
Updated WebGL blog files for latest WebKit implementation
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@66273 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebKitSite/blog-files/webgl/Earth.html b/WebKitSite/blog-files/webgl/Earth.html
index 587a07f..1920bc7 100644
--- a/WebKitSite/blog-files/webgl/Earth.html
+++ b/WebKitSite/blog-files/webgl/Earth.html
@@ -1,12 +1,37 @@
<!DOCTYPE html>
+<!--
+/*
+ * Copyright (C) 2009 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+ -->
<html>
<head>
<title>Earth and Mars</title>
- <script src="resources/CanvasMatrix.js"> </script>
- <script src="resources/utils3d.js"> </script>
+ <script src="resources/J3DI.js"> </script>
+ <script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
- uniform mat4 u_modelViewMatrix;
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
uniform vec3 lightDir;
@@ -28,6 +53,10 @@
</script>
<script id="fshader" type="x-shader/x-fragment">
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
uniform sampler2D sampler2d;
varying float v_Dot;
@@ -68,17 +97,17 @@
function reshape(ctx)
{
var canvas = document.getElementById('example');
- if (canvas.clientWidth == width && canvas.clientHeight == height)
+ if (canvas.width == width && canvas.width == height)
return;
- width = canvas.clientWidth;
- height = canvas.clientHeight;
+ width = canvas.width;
+ height = canvas.height;
ctx.viewport(0, 0, width, height);
- ctx.perspectiveMatrix = new CanvasMatrix4();
- ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
+ ctx.perspectiveMatrix = new J3DIMatrix4();
ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
}
function drawOne(ctx, angle, x, y, z, scale, texture)
@@ -100,23 +129,22 @@
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, ctx.sphere.indexObject);
// generate the model-view matrix
- var mvMatrix = new CanvasMatrix4();
- mvMatrix.scale(scale, scale, scale);
- mvMatrix.rotate(angle, 0,1,0);
- mvMatrix.rotate(30, 1,0,0);
+ var mvMatrix = new J3DIMatrix4();
mvMatrix.translate(x,y,z);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ mvMatrix.rotate(30, 1,0,0);
+ mvMatrix.rotate(angle, 0,1,0);
+ mvMatrix.scale(scale, scale, scale);
// construct the normal matrix from the model-view matrix
- var normalMatrix = new CanvasMatrix4(mvMatrix);
+ var normalMatrix = new J3DIMatrix4(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
+ normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
// construct the model-view * projection matrix
- var mvpMatrix = new CanvasMatrix4(mvMatrix);
- mvpMatrix.multRight(ctx.perspectiveMatrix);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
+ var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
+ mvpMatrix.multiply(mvMatrix);
+ mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
ctx.bindTexture(ctx.TEXTURE_2D, texture);
ctx.drawElements(ctx.TRIANGLES, ctx.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -140,6 +168,13 @@
function start()
{
+ var c = document.getElementById("example");
+ var w = Math.floor(window.innerWidth * 0.9);
+ var h = Math.floor(window.innerHeight * 0.9);
+
+ c.width = w;
+ c.height = h;
+
var ctx = init();
currentAngle = 0;
incAngle = 0.2;
@@ -151,8 +186,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebKitSite/blog-files/webgl/ManyPlanetsDeep.html b/WebKitSite/blog-files/webgl/ManyPlanetsDeep.html
index 132e0d1..c2dac40 100644
--- a/WebKitSite/blog-files/webgl/ManyPlanetsDeep.html
+++ b/WebKitSite/blog-files/webgl/ManyPlanetsDeep.html
@@ -1,12 +1,37 @@
<!DOCTYPE html>
+<!--
+/*
+ * Copyright (C) 2009 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+ -->
<html>
<head>
<title>Many Planets Deep</title>
- <script src="resources/CanvasMatrix.js"> </script>
- <script src="resources/utils3d.js"> </script>
+ <script src="resources/J3DI.js"> </script>
+ <script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
- uniform mat4 u_modelViewMatrix;
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
uniform vec3 lightDir;
@@ -28,6 +53,10 @@
</script>
<script id="fshader" type="x-shader/x-fragment">
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
uniform sampler2D sampler2d;
varying float v_Dot;
@@ -76,17 +105,17 @@
function reshape(ctx)
{
var canvas = document.getElementById('example');
- if (canvas.clientWidth == width && canvas.clientHeight == height)
+ if (canvas.width == width && canvas.height == height)
return;
- width = canvas.clientWidth;
- height = canvas.clientHeight;
+ width = canvas.width;
+ height = canvas.height;
ctx.viewport(0, 0, width, height);
- ctx.perspectiveMatrix = new CanvasMatrix4();
- ctx.perspectiveMatrix.lookat(0,0,20, 0, 0, 0, 0, 1, 0);
+ ctx.perspectiveMatrix = new J3DIMatrix4();
ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ ctx.perspectiveMatrix.lookat(0,0,20, 0, 0, 0, 0, 1, 0);
}
function drawOne(ctx, angle, x, y, z, scale, texture)
@@ -108,23 +137,22 @@
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, ctx.sphere.indexObject);
// generate the model-view matrix
- var mvMatrix = new CanvasMatrix4();
- mvMatrix.scale(scale, scale, scale);
- mvMatrix.rotate(angle, 0,1,0);
- mvMatrix.rotate(30, 1,0,0);
+ var mvMatrix = new J3DIMatrix4();
mvMatrix.translate(x,y,z);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ mvMatrix.rotate(30, 1,0,0);
+ mvMatrix.rotate(angle, 0,1,0);
+ mvMatrix.scale(scale, scale, scale);
// construct the normal matrix from the model-view matrix
- var normalMatrix = new CanvasMatrix4(mvMatrix);
+ var normalMatrix = new J3DIMatrix4(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
+ normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
// construct the model-view * projection matrix
- var mvpMatrix = new CanvasMatrix4(mvMatrix);
- mvpMatrix.multRight(ctx.perspectiveMatrix);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
+ var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
+ mvpMatrix.multiply(mvMatrix);
+ mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
ctx.bindTexture(ctx.TEXTURE_2D, texture);
ctx.drawElements(ctx.TRIANGLES, ctx.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -168,6 +196,13 @@
function start()
{
+ var c = document.getElementById("example");
+ var w = Math.floor(window.innerWidth * 0.9);
+ var h = Math.floor(window.innerHeight * 0.9);
+
+ c.width = w;
+ c.height = h;
+
var ctx = init();
currentAngles = [ ];
incAngles = [ ];
@@ -188,8 +223,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebKitSite/blog-files/webgl/SpinningBox.html b/WebKitSite/blog-files/webgl/SpinningBox.html
index 7b8c5e7..7b87cac 100644
--- a/WebKitSite/blog-files/webgl/SpinningBox.html
+++ b/WebKitSite/blog-files/webgl/SpinningBox.html
@@ -1,149 +1,239 @@
<!DOCTYPE html>
+<!--
+/*
+ * Copyright (C) 2009 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+ -->
<html>
- <head>
- <title>Spinning Box</title>
- <script src="resources/CanvasMatrix.js"> </script>
- <script src="resources/utils3d.js"> </script>
- <script id="vshader" type="x-shader/x-vertex">
- uniform mat4 pMatrix;
- uniform mat4 mvMatrix;
- uniform vec3 lightDir;
-
- attribute vec3 vNormal;
- attribute vec4 vColor;
- attribute vec4 vPosition;
-
- varying float v_Dot;
-
- void main()
- {
- gl_FrontColor = vColor;
- vec4 transNormal = mvMatrix * vec4(vNormal,1);
- v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
- gl_Position = pMatrix * mvMatrix * vPosition;
- }
- </script>
-
- <script id="fshader" type="x-shader/x-fragment">
- varying float v_Dot;
-
- void main()
- {
- gl_FragColor = vec4(gl_Color.xyz * v_Dot, gl_Color.a);
- }
- </script>
-
- <script>
- function init()
- {
- var gl = initWebGL("example", "vshader", "fshader",
- [ "vNormal", "vColor", "vPosition"],
- [ 0, 0, 0, 1 ], 10000);
-
- gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
-
- gl.box = makeBox(gl);
-
- // color array
- var colors = new WebGLUnsignedByteArray(
- [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
- 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
- 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
- 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
- 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
- 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
- );
-
- gl.box.colorObject = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
- gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
-
- return gl;
- }
-
- width = -1;
- height = -1;
-
- function reshape(gl)
- {
- var canvas = document.getElementById('example');
- if (canvas.clientWidth == width && canvas.clientHeight == height)
- return;
-
- width = canvas.clientWidth;
- height = canvas.clientHeight;
-
- gl.viewport(0, 0, width, height);
- var pMatrix = new CanvasMatrix4();
- pMatrix.lookat(0,0,10, 0, 0, 0, 0, 1, 0);
- pMatrix.perspective(30, width/height, 1, 10000);
- gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "pMatrix"), false, pMatrix.getAsWebGLFloatArray());
- }
-
- function drawPicture(gl)
- {
- reshape(gl);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- var mvMatrix = new CanvasMatrix4();
- mvMatrix.rotate(currentAngle, 0,1,0);
- mvMatrix.rotate(20, 1,0,0);
- gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mvMatrix"), false, mvMatrix.getAsWebGLFloatArray());
-
- gl.enableVertexAttribArray(0);
- gl.enableVertexAttribArray(1);
- gl.enableVertexAttribArray(2);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
- gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
- gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
- gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
-
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
- gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);
-
- gl.flush();
-
- framerate.snapshot();
-
- currentAngle += incAngle;
- if (currentAngle > 360)
- currentAngle -= 360;
- }
-
- function start()
- {
- var gl = init();
- currentAngle = 0;
- incAngle = 0.5;
- framerate = new Framerate("framerate");
- setInterval(function() { drawPicture(gl) }, 10);
- }
- </script>
- <style type="text/css">
- canvas {
- border: 2px solid black;
- width:90%;
- height:90%;
- }
- .text {
- position:absolute;
- top:100px;
- left:20px;
- font-size:2em;
- color: blue;
- }
- </style>
- </head>
- <body onload="start()">
- <canvas id="example">
- There is supposed to be an example drawing here, but it's not important.
- </canvas>
- <div class="text">This is some text under the canvas</div>
- <div id="framerate"></div>
- </body>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Spinning WebGL Box</title>
+
+<script src="resources/J3DI.js"> </script>
+<script src="resources/J3DIMath.js" type="text/javascript"> </script>
+<script id="vshader" type="x-shader/x-vertex">
+ uniform mat4 u_modelViewProjMatrix;
+ uniform mat4 u_normalMatrix;
+ uniform vec3 lightDir;
+
+ attribute vec3 vNormal;
+ attribute vec4 vColor;
+ attribute vec4 vPosition;
+
+ varying float v_Dot;
+ varying vec4 v_Color;
+
+ void main()
+ {
+ gl_Position = u_modelViewProjMatrix * vPosition;
+ v_Color = vColor;
+ vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
+ v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
+ }
+</script>
+
+<script id="fshader" type="x-shader/x-fragment">
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
+ varying float v_Dot;
+ varying vec4 v_Color;
+
+ void main()
+ {
+ gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a);
+ }
+</script>
+
+<script>
+ function init()
+ {
+ // Initialize
+ var gl = initWebGL(
+ // The id of the Canvas Element
+ "example",
+ // The ids of the vertex and fragment shaders
+ "vshader", "fshader",
+ // The vertex attribute names used by the shaders.
+ // The order they appear here corresponds to their index
+ // used later.
+ [ "vNormal", "vColor", "vPosition"],
+ // The clear color and depth values
+ [ 0, 0, 0, 1 ], 10000);
+
+ gl.console.log("Starting init...");
+
+ // Set up a uniform variable for the shaders
+ gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
+
+ // Create a box. On return 'gl' contains a 'box' property with
+ // the BufferObjects containing the arrays for vertices,
+ // normals, texture coords, and indices.
+ gl.box = makeBox(gl);
+
+ // Set up the array of colors for the cube's faces
+ var colors = new Uint8Array(
+ [ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
+ 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
+ 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
+ 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
+ 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
+ 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
+ );
+
+ // Set up the vertex buffer for the colors
+ gl.box.colorObject = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
+ gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
+
+ // Create some matrices to use later and save their locations in the shaders
+ gl.mvMatrix = new J3DIMatrix4();
+ gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
+ gl.normalMatrix = new J3DIMatrix4();
+ gl.u_modelViewProjMatrixLoc =
+ gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
+ gl.mvpMatrix = new J3DIMatrix4();
+
+ // Enable all of the vertex attribute arrays.
+ gl.enableVertexAttribArray(0);
+ gl.enableVertexAttribArray(1);
+ gl.enableVertexAttribArray(2);
+
+ // Set up all the vertex attributes for vertices, normals and colors
+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
+ gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
+ gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
+ gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
+
+ // Bind the index array
+ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
+
+ return gl;
+ }
+
+ width = -1;
+ height = -1;
+
+ function reshape(gl)
+ {
+ var canvas = document.getElementById('example');
+ var windowWidth = window.innerWidth - 20;
+ var windowHeight = window.innerHeight - 40;
+ if (windowWidth == width && windowHeight == height)
+ return;
+
+ width = windowWidth;
+ height = windowHeight;
+ canvas.width = width;
+ canvas.height = height;
+
+ // Set the viewport and projection matrix for the scene
+ gl.viewport(0, 0, width, height);
+ gl.perspectiveMatrix = new J3DIMatrix4();
+ gl.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ gl.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
+ }
+
+ function drawPicture(gl)
+ {
+ // Make sure the canvas is sized correctly.
+ reshape(gl);
+
+ // Clear the canvas
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // Make a model/view matrix.
+ gl.mvMatrix.makeIdentity();
+ gl.mvMatrix.rotate(20, 1,0,0);
+ gl.mvMatrix.rotate(currentAngle, 0,1,0);
+
+ // Construct the normal matrix from the model-view matrix and pass it in
+ gl.normalMatrix.load(gl.mvMatrix);
+ gl.normalMatrix.invert();
+ gl.normalMatrix.transpose();
+ gl.normalMatrix.setUniform(gl, gl.u_normalMatrixLoc, false);
+
+ // Construct the model-view * projection matrix and pass it in
+ gl.mvpMatrix.load(gl.perspectiveMatrix);
+ gl.mvpMatrix.multiply(gl.mvMatrix);
+ gl.mvpMatrix.setUniform(gl, gl.u_modelViewProjMatrixLoc, false);
+
+ // Draw the cube
+ gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);
+
+ // Finish up.
+ gl.flush();
+
+ // Show the framerate
+ framerate.snapshot();
+
+ currentAngle += incAngle;
+ if (currentAngle > 360)
+ currentAngle -= 360;
+ }
+
+ function start()
+ {
+ var c = document.getElementById("example");
+ var w = Math.floor(window.innerWidth * 0.9);
+ var h = Math.floor(window.innerHeight * 0.9);
+
+ c.width = w;
+ c.height = h;
+
+ var gl = init();
+ currentAngle = 0;
+ incAngle = 0.5;
+ framerate = new Framerate("framerate");
+ setInterval(function() { drawPicture(gl) }, 10);
+ }
+</script>
+<style type="text/css">
+ canvas {
+ //border: 2px solid black;
+ }
+ .text {
+ position:absolute;
+ top:100px;
+ left:20px;
+ font-size:2em;
+ color: blue;
+ }
+</style>
+</head>
+
+<body onload="start()">
+<canvas id="example">
+ If you're seeing this your web browser doesn't support the <canvas>> element. Ouch!
+</canvas>
+<div class="text">This is some text over the canvas</div>
+<div id="framerate"></div>
+</body>
+
</html>
diff --git a/WebKitSite/blog-files/webgl/SpiritBox.html b/WebKitSite/blog-files/webgl/SpiritBox.html
index ff67352..b1a5989 100644
--- a/WebKitSite/blog-files/webgl/SpiritBox.html
+++ b/WebKitSite/blog-files/webgl/SpiritBox.html
@@ -1,15 +1,37 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
-
-<html lang="en">
+<!DOCTYPE html>
+<!--
+/*
+ * Copyright (C) 2009 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+ -->
+<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Spinning WebGL Box</title>
-</head>
-<body onload="start()">
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+<title>Spinning WebGL Box</title>
-<script src="resources/utils3d.js" type="text/javascript"> </script>
-<script src="resources/CanvasMatrix.js" type="text/javascript"> </script>
+<script src="resources/J3DI.js"> </script>
+<script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
@@ -26,12 +48,16 @@
{
gl_Position = u_modelViewProjMatrix * vPosition;
v_texCoord = vTexCoord.st;
- vec4 transNormal = u_normalMatrix * vec4(vNormal,1);
+ vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
}
</script>
<script id="fshader" type="x-shader/x-fragment">
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
uniform sampler2D sampler2d;
varying float v_Dot;
@@ -40,8 +66,8 @@
void main()
{
vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
- vec4 color = texture2D(sampler2d,texCoord);
- color += vec4(0.1,0.1,0.1,1);
+ vec4 color = texture2D(sampler2d, texCoord);
+ color += vec4(0.1, 0.1, 0.1, 1);
gl_FragColor = vec4(color.xyz * v_Dot, color.a);
}
</script>
@@ -50,98 +76,105 @@
function init()
{
// Initialize
- var gl = initWebGL("example1", // The id of the Canvas Element
- "vshader", "fshader", // The ids of the vertex and fragment shaders
- [ "vNormal", "vTexCoord", "vPosition"], // The vertex attribute names used by the shaders.
- // The order they appear here corresponds to their index
- // used later.
- [ 0, 0, 0, 1 ], 10000); // The clear color and depth values
+ var gl = initWebGL(
+ // The id of the Canvas Element
+ "example",
+ // The ids of the vertex and fragment shaders
+ "vshader", "fshader",
+ // The vertex attribute names used by the shaders.
+ // The order they appear here corresponds to their index
+ // used later.
+ [ "vNormal", "vColor", "vPosition"],
+ // The clear color and depth values
+ [ 0, 0, 0.5, 1 ], 10000);
// Set some uniform variables for the shaders
gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
-
+
// Enable texturing
gl.enable(gl.TEXTURE_2D);
-
- // Create a box. On return 'gl' contains a 'box' property with the BufferObjects containing
- // the arrays for vertices, normals, texture coords, and indices.
+
+ // Create a box. On return 'gl' contains a 'box' property with
+ // the BufferObjects containing the arrays for vertices,
+ // normals, texture coords, and indices.
gl.box = makeBox(gl);
-
- // Load an image to use. Returns a CanvasTexture object
+
+ // Load an image to use. Returns a WebGLTexture object
spiritTexture = loadImageTexture(gl, "resources/spirit.jpg");
-
+
// Create some matrices to use later and save their locations in the shaders
- gl.mvMatrix = new CanvasMatrix4();
+ gl.mvMatrix = new J3DIMatrix4();
gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
- gl.normalMatrix = new CanvasMatrix4();
- gl.u_modelViewProjMatrixLoc = gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
- gl.mvpMatrix = new CanvasMatrix4();
-
- // Enable all the vertex arrays
+ gl.normalMatrix = new J3DIMatrix4();
+ gl.u_modelViewProjMatrixLoc =
+ gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
+ gl.mvpMatrix = new J3DIMatrix4();
+
+ // Enable all of the vertex attribute arrays.
gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);
- // Setup all the vertex attributes for vertices, normals and texCoords
+ // Set up all the vertex attributes for vertices, normals and texCoords
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
-
+
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
-
+
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.texCoordObject);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
// Bind the index array
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
-
+
return gl;
}
-
+
width = -1;
height = -1;
-
+
function reshape(gl)
{
- var canvas = document.getElementById('example1');
- if (canvas.clientWidth == width && canvas.clientHeight == height)
+ var canvas = document.getElementById('example');
+ if (canvas.width == width && canvas.height == height)
return;
- width = canvas.clientWidth;
- height = canvas.clientHeight;
-
+ width = canvas.width;
+ height = canvas.height;
+
// Set the viewport and projection matrix for the scene
gl.viewport(0, 0, width, height);
- gl.perspectiveMatrix = new CanvasMatrix4();
- gl.perspectiveMatrix.lookat(0,0,7, 0, 0, 0, 0, 1, 0);
+ gl.perspectiveMatrix = new J3DIMatrix4();
gl.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ gl.perspectiveMatrix.lookat(0, 0, 7, 0, 0, 0, 0, 1, 0);
}
-
+
function drawPicture(gl)
{
// Make sure the canvas is sized correctly.
reshape(gl);
-
+
// Clear the canvas
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Make a model/view matrix.
gl.mvMatrix.makeIdentity();
- gl.mvMatrix.rotate(currentAngle, 0,1,0);
gl.mvMatrix.rotate(20, 1,0,0);
+ gl.mvMatrix.rotate(currentAngle, 0,1,0);
// Construct the normal matrix from the model-view matrix and pass it in
gl.normalMatrix.load(gl.mvMatrix);
gl.normalMatrix.invert();
gl.normalMatrix.transpose();
- gl.uniformMatrix4fv(gl.u_normalMatrixLoc, false, gl.normalMatrix.getAsWebGLFloatArray());
-
+ gl.normalMatrix.setUniform(gl, gl.u_normalMatrixLoc, false);
+
// Construct the model-view * projection matrix and pass it in
- gl.mvpMatrix.load(gl.mvMatrix);
- gl.mvpMatrix.multRight(gl.perspectiveMatrix);
- gl.uniformMatrix4fv(gl.u_modelViewProjMatrixLoc, false, gl.mvpMatrix.getAsWebGLFloatArray());
-
+ gl.mvpMatrix.load(gl.perspectiveMatrix);
+ gl.mvpMatrix.multiply(gl.mvMatrix);
+ gl.mvpMatrix.setUniform(gl, gl.u_modelViewProjMatrixLoc, false);
+
// Bind the texture to use
gl.bindTexture(gl.TEXTURE_2D, spiritTexture);
@@ -150,19 +183,24 @@
// Finish up.
gl.flush();
-
+
// Show the framerate
framerate.snapshot();
-
+
currentAngle += incAngle;
if (currentAngle > 360)
currentAngle -= 360;
}
-
+
function start()
{
- if (!document.getElementById("example1").getContext("webkit-3d"))
- alert("You don't have a version of WebKit with WebGL or you don't have it enabled.")
+ var c = document.getElementById("example");
+ var w = Math.floor(window.innerWidth * 0.9);
+ var h = Math.floor(window.innerHeight * 0.9);
+
+ c.width = w;
+ c.height = h;
+
var gl = init();
currentAngle = 0;
incAngle = 0.5;
@@ -170,11 +208,18 @@
setInterval(function() { drawPicture(gl) }, 10);
}
</script>
+<style type="text/css">
+ canvas {
+ border: 2px solid black;
+ }
+</style>
+</head>
-<canvas id="example1" style="width:500px; height:500px" width="500px" height="500px">
+<body onload="start()">
+<canvas id="example">
If you're seeing this your web browser doesn't support the <canvas>> element. Ouch!
</canvas>
<div id="framerate"></div>
-
</body>
+
</html>
diff --git a/WebKitSite/blog-files/webgl/TeapotPerPixel.html b/WebKitSite/blog-files/webgl/TeapotPerPixel.html
index b3f90ed..36266d9 100644
--- a/WebKitSite/blog-files/webgl/TeapotPerPixel.html
+++ b/WebKitSite/blog-files/webgl/TeapotPerPixel.html
@@ -1,9 +1,35 @@
<!DOCTYPE html>
+<!--
+/*
+ * Copyright (C) 2009 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+ -->
<html>
<head>
<title>Teapot (per-pixel)</title>
- <script src="resources/CanvasMatrix.js"> </script>
- <script src="resources/utils3d.js"> </script>
+ <script src="resources/J3DI.js"> </script>
+ <script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
/*
Copyright (c) 2008 Seneca College
@@ -105,6 +131,10 @@
</script>
<script id="fshader" type="x-shader/x-fragment">
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
struct Light
{
vec4 ambient;
@@ -154,7 +184,6 @@
</script>
<script>
- console.log("Hello");
function setDirectionalLight(ctx, program, eyeVector, direction, ambient, diffuse, specular)
{
var lightString = "u_light.";
@@ -224,8 +253,8 @@
obj = loadObj(gl, "resources/teapot.obj");
- mvMatrix = new CanvasMatrix4();
- normalMatrix = new CanvasMatrix4();
+ mvMatrix = new J3DIMatrix4();
+ normalMatrix = new J3DIMatrix4();
return gl;
}
@@ -237,17 +266,17 @@
function reshape(ctx)
{
var canvas = document.getElementById('example');
- if (canvas.clientWidth == width && canvas.clientHeight == height)
+ if (canvas.width == width && canvas.height == height)
return;
- width = canvas.clientWidth;
- height = canvas.clientHeight;
+ width = canvas.width;
+ height = canvas.height;
ctx.viewport(0, 0, width, height);
- ctx.perspectiveMatrix = new CanvasMatrix4();
- ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0);
+ ctx.perspectiveMatrix = new J3DIMatrix4();
ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0);
}
function drawPicture(ctx)
@@ -281,18 +310,21 @@
// generate the model-view matrix
mvMatrix.makeIdentity();
- mvMatrix.rotate(currentAngle, 0, 1, 0);
mvMatrix.rotate(10, 1,0,0);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ mvMatrix.rotate(currentAngle, 0, 1, 0);
+ mvMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false);
// construct the normal matrix from the model-view matrix
normalMatrix.load(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
+ normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
- mvMatrix.multRight(ctx.perspectiveMatrix);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ // Construct the model-view * projection matrix and pass it in
+ var mvpMatrix = new J3DIMatrix4();
+ mvpMatrix.load(ctx.perspectiveMatrix);
+ mvpMatrix.multiply(mvMatrix);
+ mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -307,6 +339,13 @@
function start()
{
+ var c = document.getElementById("example");
+ var w = Math.floor(window.innerWidth * 0.9);
+ var h = Math.floor(window.innerHeight * 0.9);
+
+ c.width = w;
+ c.height = h;
+
var ctx = init();
currentAngle = 0;
incAngle = 0.2;
@@ -318,8 +357,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebKitSite/blog-files/webgl/TeapotPerVertex.html b/WebKitSite/blog-files/webgl/TeapotPerVertex.html
index 6e90bf7..f40eeeb 100644
--- a/WebKitSite/blog-files/webgl/TeapotPerVertex.html
+++ b/WebKitSite/blog-files/webgl/TeapotPerVertex.html
@@ -1,9 +1,35 @@
<!DOCTYPE html>
+<!--
+/*
+ * Copyright (C) 2009 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+ -->
<html>
<head>
<title>Teapot (per-vertex)</title>
- <script src="resources/CanvasMatrix.js"> </script>
- <script src="resources/utils3d.js"> </script>
+ <script src="resources/J3DI.js"> </script>
+ <script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
/*
Copyright (c) 2008 Seneca College
@@ -114,6 +140,10 @@
</script>
<script id="fshader" type="x-shader/x-fragment">
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
uniform sampler2D u_sampler2d;
varying vec4 v_diffuse, v_specular;
@@ -197,8 +227,8 @@
obj = loadObj(gl, "resources/teapot.obj");
- mvMatrix = new CanvasMatrix4();
- normalMatrix = new CanvasMatrix4();
+ mvMatrix = new J3DIMatrix4();
+ normalMatrix = new J3DIMatrix4();
return gl;
}
@@ -210,17 +240,17 @@
function reshape(ctx)
{
var canvas = document.getElementById('example');
- if (canvas.clientWidth == width && canvas.clientHeight == height)
+ if (canvas.width == width && canvas.height == height)
return;
- width = canvas.clientWidth;
- height = canvas.clientHeight;
+ width = canvas.width;
+ height = canvas.height;
ctx.viewport(0, 0, width, height);
- ctx.perspectiveMatrix = new CanvasMatrix4();
- ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0);
+ ctx.perspectiveMatrix = new J3DIMatrix4();
ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0);
}
function drawPicture(ctx)
@@ -254,18 +284,21 @@
// generate the model-view matrix
mvMatrix.makeIdentity();
- mvMatrix.rotate(currentAngle, 0, 1, 0);
mvMatrix.rotate(10, 1,0,0);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ mvMatrix.rotate(currentAngle, 0, 1, 0);
+ mvMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false);
// construct the normal matrix from the model-view matrix
normalMatrix.load(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
+ normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
- mvMatrix.multRight(ctx.perspectiveMatrix);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ // Construct the model-view * projection matrix and pass it in
+ var mvpMatrix = new J3DIMatrix4();
+ mvpMatrix.load(ctx.perspectiveMatrix);
+ mvpMatrix.multiply(mvMatrix);
+ mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -280,6 +313,13 @@
function start()
{
+ var c = document.getElementById("example");
+ var w = Math.floor(window.innerWidth * 0.9);
+ var h = Math.floor(window.innerHeight * 0.9);
+
+ c.width = w;
+ c.height = h;
+
var ctx = init();
currentAngle = 0;
incAngle = 0.2;
@@ -291,8 +331,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebKitSite/blog-files/webgl/WebGL+CSS.html b/WebKitSite/blog-files/webgl/WebGL+CSS.html
index 99d2802..ef2fd79 100644
--- a/WebKitSite/blog-files/webgl/WebGL+CSS.html
+++ b/WebKitSite/blog-files/webgl/WebGL+CSS.html
@@ -2,26 +2,26 @@
<html>
<head>
<title>WebGL + CSS Effects</title>
- <script src="resources/CanvasMatrix.js"> </script>
- <script src="resources/utils3d.js"> </script>
+ <script src="resources/J3DI.js"> </script>
+ <script src="resources/J3DIMath.js" type="text/javascript"> </script>
<script id="vshader" type="x-shader/x-vertex">
/*
Copyright (c) 2008 Seneca College
Licenced under the MIT License (http://www.c3dl.org/index.php/mit-license/)
*/
-
- // We need to create our own light structure since we can't access
+
+ // We need to create our own light structure since we can't access
// the light() function in the 2.0 context.
- struct Light
- {
+ struct Light
+ {
vec4 ambient;
vec4 diffuse;
vec4 specular;
vec4 position;
-
+
vec3 halfVector;
};
-
+
struct Material
{
vec4 emission;
@@ -34,9 +34,9 @@
//
// vertex attributes
//
- attribute vec4 a_vertex;
- attribute vec3 a_normal;
- attribute vec4 a_texCoord;
+ attribute vec4 a_vertex;
+ attribute vec3 a_normal;
+ attribute vec4 a_texCoord;
// for every model we multiply the projection, view and model matrices
// once to prevent having to do it for every vertex, however we still need
@@ -49,15 +49,15 @@
// matrix to transform the vertex normals
uniform mat4 u_normalMatrix;
- // custom light structures need to be used since we don't have access to
+ // custom light structures need to be used since we don't have access to
// light states.
uniform Light u_light;
-
+
// material
uniform vec4 u_globalAmbientColor;
uniform Material u_frontMaterial;
uniform Material u_backMaterial;
-
+
// passed to fragment shader
varying vec4 v_diffuse, v_ambient;
varying vec3 v_normal, v_lightDir;
@@ -68,9 +68,9 @@
this function will calculate how much each component contributes to the scene.
Light light - the light in view space
- vec3 normal -
- vec4 ambient -
- vec4 diffuse -
+ vec3 normal -
+ vec4 ambient -
+ vec4 diffuse -
*/
vec3 directionalLight(inout vec4 ambient, inout vec4 diffuse)
{
@@ -80,12 +80,12 @@
}
void main()
- {
- v_normal = normalize(u_normalMatrix * vec4(a_normal, 1)).xyz;
+ {
+ v_normal = normalize(u_normalMatrix * vec4(a_normal, 1)).xyz;
- vec4 ambient = vec4(0.0, 0.0, 0.0, 1.0);
- vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0);
- vec4 specular = vec4(0.0, 0.0, 0.0, 1.0);
+ vec4 ambient = vec4(0.0, 0.0, 0.0, 1.0);
+ vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0);
+ vec4 specular = vec4(0.0, 0.0, 0.0, 1.0);
// place the current vertex into view space
// ecPos = eye coordinate position.
@@ -94,27 +94,31 @@
// the current vertex in eye coordinate space
vec3 ecPos = ecPos4.xyz/ecPos4.w;
v_lightDir = directionalLight(ambient, diffuse);
-
+
v_ambient = u_frontMaterial.ambient * ambient;
v_ambient += u_globalAmbientColor * u_frontMaterial.ambient;
v_diffuse = u_frontMaterial.diffuse * diffuse;
gl_Position = u_modelViewProjMatrix * a_vertex;
- v_texCoord = a_texCoord.st;
+ v_texCoord = a_texCoord.st;
}
</script>
<script id="fshader" type="x-shader/x-fragment">
- struct Light
- {
+#ifdef GL_ES
+ precision mediump float;
+#endif
+
+ struct Light
+ {
vec4 ambient;
vec4 diffuse;
vec4 specular;
vec4 position;
-
+
vec3 halfVector;
};
-
+
struct Material
{
vec4 emission;
@@ -123,12 +127,12 @@
vec4 specular;
float shininess;
};
-
+
uniform sampler2D u_sampler2d;
uniform Light u_light;
uniform Material u_frontMaterial;
uniform Material u_backMaterial;
-
+
varying vec4 v_diffuse, v_ambient;
varying vec3 v_normal, v_lightDir;
varying vec2 v_texCoord;
@@ -136,7 +140,7 @@
void main()
{
vec4 color = v_diffuse;
-
+
vec3 n = normalize(v_normal);
Light light = u_light;
@@ -148,30 +152,29 @@
vec4 specular = u_frontMaterial.specular * light.specular;
color += vec4(specular.rgb * pow(nDotHV, u_frontMaterial.shininess), specular.a);
}
-
+
gl_FragColor = color + v_ambient;
}
</script>
<script>
- console.log("Hello");
function setDirectionalLight(ctx, program, eyeVector, direction, ambient, diffuse, specular)
{
var lightString = "u_light.";
-
- ctx.uniform4f(ctx.getUniformLocation(program, lightString+"ambient"),
+
+ ctx.uniform4f(ctx.getUniformLocation(program, lightString+"ambient"),
ambient[0], ambient[1], ambient[2], ambient[3]);
- ctx.uniform4f(ctx.getUniformLocation(program, lightString+"diffuse"),
+ ctx.uniform4f(ctx.getUniformLocation(program, lightString+"diffuse"),
diffuse[0], diffuse[1], diffuse[2], diffuse[3]);
- ctx.uniform4f(ctx.getUniformLocation(program, lightString+"specular"),
+ ctx.uniform4f(ctx.getUniformLocation(program, lightString+"specular"),
specular[0], specular[1], specular[2], specular[3]);
- ctx.uniform4f(ctx.getUniformLocation(program, lightString+"position"),
+ ctx.uniform4f(ctx.getUniformLocation(program, lightString+"position"),
direction[0], direction[1], direction[2], direction[3]);
-
+
// compute the half vector
var halfVector = [ eyeVector[0] + direction[0], eyeVector[1] + direction[1], eyeVector[2] + direction[2] ];
- var length = Math.sqrt(halfVector[0] * halfVector[0] +
- halfVector[1] * halfVector[1] +
+ var length = Math.sqrt(halfVector[0] * halfVector[0] +
+ halfVector[1] * halfVector[1] +
halfVector[2] * halfVector[2]);
if (length == 0)
halfVector = [ 0, 0, 1 ];
@@ -181,59 +184,59 @@
halfVector[2] /= length;
}
- ctx.uniform3f(ctx.getUniformLocation(program, lightString+"halfVector"),
+ ctx.uniform3f(ctx.getUniformLocation(program, lightString+"halfVector"),
halfVector[0], halfVector[1], halfVector[2]);
}
-
+
function setMaterial(ctx, program, emission, ambient, diffuse, specular, shininess)
{
var matString = "u_frontMaterial.";
- ctx.uniform4f(ctx.getUniformLocation(program, matString+"emission"),
+ ctx.uniform4f(ctx.getUniformLocation(program, matString+"emission"),
emission[0], emission[1], emission[2], emission[3]);
- ctx.uniform4f(ctx.getUniformLocation(program, matString+"ambient"),
+ ctx.uniform4f(ctx.getUniformLocation(program, matString+"ambient"),
ambient[0], ambient[1], ambient[2], ambient[3]);
- ctx.uniform4f(ctx.getUniformLocation(program, matString+"diffuse"),
+ ctx.uniform4f(ctx.getUniformLocation(program, matString+"diffuse"),
diffuse[0], diffuse[1], diffuse[2], diffuse[3]);
- ctx.uniform4f(ctx.getUniformLocation(program, matString+"specular"),
+ ctx.uniform4f(ctx.getUniformLocation(program, matString+"specular"),
specular[0], specular[1], specular[2], specular[3]);
ctx.uniform1f(ctx.getUniformLocation(program, matString+"shininess"), shininess);
}
function init()
{
- var gl = initWebGL("example", "vshader", "fshader",
+ var gl = initWebGL("example", "vshader", "fshader",
[ "a_normal", "a_texCoord", "a_vertex"],
[ 0, 0, 0, 0 ], 10000);
gl.uniform1i(gl.getUniformLocation(gl.program, "u_sampler2d"), 0);
gl.uniform4f(gl.getUniformLocation(gl.program, "u_globalAmbientColor"), 0.2, 0.2, 0.2, 1);
- setDirectionalLight(gl, gl.program,
+ setDirectionalLight(gl, gl.program,
[ 0, 0, 1 ], // eyeVector
[0, 0, 1, 1], // position
[0.1, 0.1, 0.1, 1], // ambient
[1, 1, 1, 1], // diffuse
[1, 1, 1, 1]); // specular
- setMaterial(gl, gl.program,
+ setMaterial(gl, gl.program,
[ 0, 0, 0, 0 ], // emission
[ 0.1, 0.1, 0.1, 1 ], // ambient
[ 0.8, 0.2, 0, 1 ], // diffuse
[ 0, 0, 1, 1 ], // specular
32); // shininess
-
+
obj = loadObj(gl, "resources/teapot.obj");
- mvMatrix = new CanvasMatrix4();
- normalMatrix = new CanvasMatrix4();
-
+ mvMatrix = new J3DIMatrix4();
+ normalMatrix = new J3DIMatrix4();
+
return gl;
}
-
+
width = -1;
height = -1;
loaded = false;
-
+
function reshape(ctx)
{
var canvas = document.getElementById('example');
@@ -242,18 +245,18 @@
width = canvas.clientWidth;
height = canvas.clientHeight;
-
+
ctx.viewport(0, 0, width, height);
-
- ctx.perspectiveMatrix = new CanvasMatrix4();
- ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0);
+
+ ctx.perspectiveMatrix = new J3DIMatrix4();
ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
+ ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0);
}
-
+
function drawPicture(ctx)
{
var startRenderTime = new Date().getTime();
-
+
reshape(ctx);
ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
@@ -275,36 +278,39 @@
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject);
}
-
+
if (!loaded)
return;
-
+
// generate the model-view matrix
mvMatrix.makeIdentity();
- mvMatrix.rotate(currentAngle, 0, 1, 0);
mvMatrix.rotate(10, 1,0,0);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ mvMatrix.rotate(currentAngle, 0, 1, 0);
+ mvMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false);
// construct the normal matrix from the model-view matrix
normalMatrix.load(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
-
- mvMatrix.multRight(ctx.perspectiveMatrix);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
+ normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
+
+ // Construct the model-view * projection matrix and pass it in
+ var mvpMatrix = new J3DIMatrix4();
+ mvpMatrix.load(ctx.perspectiveMatrix);
+ mvpMatrix.multiply(mvMatrix);
+ mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
-
+
ctx.flush();
-
+
framerate.snapshot();
-
+
currentAngle += incAngle;
if (currentAngle > 360)
currentAngle -= 360;
}
-
+
function start()
{
// set up event listener on the canvas
@@ -314,7 +320,12 @@
isTilted = !isTilted;
container.className = isTilted ? 'tilted' : '';
}, false);
-
+
+ body.addEventListener('touchstart', function () {
+ isTilted = !isTilted;
+ container.className = isTilted ? 'tilted' : '';
+ }, false);
+
var ctx = init();
currentAngle = 0;
incAngle = 0.2;
@@ -322,9 +333,9 @@
var f = function() { drawPicture(ctx) };
setInterval(f, 10);
}
-
+
var isTilted = false;
-
+
</script>
<style type="text/css">
body {
@@ -356,7 +367,7 @@
text-shadow: white 2px 2px 4px;
-webkit-animation:5s rock infinite alternate ease-in-out;
}
-
+
@-webkit-keyframes rock {
0% { -webkit-transform: translateX(-250px) rotate3d(0,0,1, -30deg) }
25% { -webkit-transform: translateX(-150px) rotate3d(0,0,1, 30deg) }
@@ -364,7 +375,7 @@
75% { -webkit-transform: translateX(50px) rotate3d(0,0,1, 30deg) }
100% { -webkit-transform: translateX(150px) rotate3d(0,0,1, -30deg) }
}
-
+
#framerate {
position:absolute;
top:10px;
diff --git a/WebKitSite/blog-files/webgl/resources/CanvasMatrix.js b/WebKitSite/blog-files/webgl/resources/CanvasMatrix.js
deleted file mode 100644
index 19f9322..0000000
--- a/WebKitSite/blog-files/webgl/resources/CanvasMatrix.js
+++ /dev/null
@@ -1,698 +0,0 @@
-/*
- CanvasMatrix4 class
-
- This class implements a 4x4 matrix. It has functions which
- duplicate the functionality of the OpenGL matrix stack and
- glut functions.
-
- IDL:
-
- [
- Constructor(in CanvasMatrix4 matrix), // copy passed matrix into new CanvasMatrix4
- Constructor(in sequence<float> array) // create new CanvasMatrix4 with 16 floats (row major)
- Constructor() // create new CanvasMatrix4 with identity matrix
- ]
- interface CanvasMatrix4 {
- attribute float m11;
- attribute float m12;
- attribute float m13;
- attribute float m14;
- attribute float m21;
- attribute float m22;
- attribute float m23;
- attribute float m24;
- attribute float m31;
- attribute float m32;
- attribute float m33;
- attribute float m34;
- attribute float m41;
- attribute float m42;
- attribute float m43;
- attribute float m44;
-
- void load(in CanvasMatrix4 matrix); // copy the values from the passed matrix
- void load(in sequence<float> array); // copy 16 floats into the matrix
- sequence<float> getAsArray(); // return the matrix as an array of 16 floats
- WebGLFloatArray getAsWebGLFloatArray(); // return the matrix as a WebGLFloatArray with 16 values
- void makeIdentity(); // replace the matrix with identity
- void transpose(); // replace the matrix with its transpose
- void invert(); // replace the matrix with its inverse
-
- void translate(in float x, in float y, in float z); // multiply the matrix by passed translation values on the right
- void scale(in float x, in float y, in float z); // multiply the matrix by passed scale values on the right
- void rotate(in float angle, // multiply the matrix by passed rotation values on the right
- in float x, in float y, in float z); // (angle is in degrees)
- void multRight(in CanvasMatrix matrix); // multiply the matrix by the passed matrix on the right
- void multLeft(in CanvasMatrix matrix); // multiply the matrix by the passed matrix on the left
- void ortho(in float left, in float right, // multiply the matrix by the passed ortho values on the right
- in float bottom, in float top,
- in float near, in float far);
- void frustum(in float left, in float right, // multiply the matrix by the passed frustum values on the right
- in float bottom, in float top,
- in float near, in float far);
- void perspective(in float fovy, in float aspect, // multiply the matrix by the passed perspective values on the right
- in float zNear, in float zFar);
- void lookat(in float eyex, in float eyey, in float eyez, // multiply the matrix by the passed lookat
- in float ctrx, in float ctry, in float ctrz, // values on the right
- in float upx, in float upy, in float upz);
- }
-*/
-
-CanvasMatrix4 = function(m)
-{
- if (typeof m == 'object') {
- if ("length" in m && m.length >= 16) {
- this.load(m[0], m[1], m[2], m[3], m[4], m[5], m[6], m[7], m[8], m[9], m[10], m[11], m[12], m[13], m[14], m[15]);
- return;
- }
- else if (m instanceof CanvasMatrix4) {
- this.load(m);
- return;
- }
- }
- this.makeIdentity();
-}
-
-CanvasMatrix4.prototype.load = function()
-{
- if (arguments.length == 1 && typeof arguments[0] == 'object') {
- var matrix = arguments[0];
-
- if ("length" in matrix && matrix.length == 16) {
- this.m11 = matrix[0];
- this.m12 = matrix[1];
- this.m13 = matrix[2];
- this.m14 = matrix[3];
-
- this.m21 = matrix[4];
- this.m22 = matrix[5];
- this.m23 = matrix[6];
- this.m24 = matrix[7];
-
- this.m31 = matrix[8];
- this.m32 = matrix[9];
- this.m33 = matrix[10];
- this.m34 = matrix[11];
-
- this.m41 = matrix[12];
- this.m42 = matrix[13];
- this.m43 = matrix[14];
- this.m44 = matrix[15];
- return;
- }
-
- if (arguments[0] instanceof CanvasMatrix4) {
-
- this.m11 = matrix.m11;
- this.m12 = matrix.m12;
- this.m13 = matrix.m13;
- this.m14 = matrix.m14;
-
- this.m21 = matrix.m21;
- this.m22 = matrix.m22;
- this.m23 = matrix.m23;
- this.m24 = matrix.m24;
-
- this.m31 = matrix.m31;
- this.m32 = matrix.m32;
- this.m33 = matrix.m33;
- this.m34 = matrix.m34;
-
- this.m41 = matrix.m41;
- this.m42 = matrix.m42;
- this.m43 = matrix.m43;
- this.m44 = matrix.m44;
- return;
- }
- }
-
- this.makeIdentity();
-}
-
-CanvasMatrix4.prototype.getAsArray = function()
-{
- return [
- this.m11, this.m12, this.m13, this.m14,
- this.m21, this.m22, this.m23, this.m24,
- this.m31, this.m32, this.m33, this.m34,
- this.m41, this.m42, this.m43, this.m44
- ];
-}
-
-CanvasMatrix4.prototype.getAsWebGLFloatArray = function()
-{
- return new WebGLFloatArray(this.getAsArray());
-}
-
-CanvasMatrix4.prototype.makeIdentity = function()
-{
- this.m11 = 1;
- this.m12 = 0;
- this.m13 = 0;
- this.m14 = 0;
-
- this.m21 = 0;
- this.m22 = 1;
- this.m23 = 0;
- this.m24 = 0;
-
- this.m31 = 0;
- this.m32 = 0;
- this.m33 = 1;
- this.m34 = 0;
-
- this.m41 = 0;
- this.m42 = 0;
- this.m43 = 0;
- this.m44 = 1;
-}
-
-CanvasMatrix4.prototype.transpose = function()
-{
- var tmp = this.m12;
- this.m12 = this.m21;
- this.m21 = tmp;
-
- tmp = this.m13;
- this.m13 = this.m31;
- this.m31 = tmp;
-
- tmp = this.m14;
- this.m14 = this.m41;
- this.m41 = tmp;
-
- tmp = this.m23;
- this.m23 = this.m32;
- this.m32 = tmp;
-
- tmp = this.m24;
- this.m24 = this.m42;
- this.m42 = tmp;
-
- tmp = this.m34;
- this.m34 = this.m43;
- this.m43 = tmp;
-}
-
-CanvasMatrix4.prototype.invert = function()
-{
- // Calculate the 4x4 determinant
- // If the determinant is zero,
- // then the inverse matrix is not unique.
- var det = this._determinant4x4();
-
- if (Math.abs(det) < 1e-8)
- return null;
-
- this._makeAdjoint();
-
- // Scale the adjoint matrix to get the inverse
- this.m11 /= det;
- this.m12 /= det;
- this.m13 /= det;
- this.m14 /= det;
-
- this.m21 /= det;
- this.m22 /= det;
- this.m23 /= det;
- this.m24 /= det;
-
- this.m31 /= det;
- this.m32 /= det;
- this.m33 /= det;
- this.m34 /= det;
-
- this.m41 /= det;
- this.m42 /= det;
- this.m43 /= det;
- this.m44 /= det;
-}
-
-CanvasMatrix4.prototype.translate = function(x,y,z)
-{
- if (x == undefined)
- x = 0;
- if (y == undefined)
- y = 0;
- if (z == undefined)
- z = 0;
-
- var matrix = new CanvasMatrix4();
- matrix.m41 = x;
- matrix.m42 = y;
- matrix.m43 = z;
-
- this.multRight(matrix);
-}
-
-CanvasMatrix4.prototype.scale = function(x,y,z)
-{
- if (x == undefined)
- x = 1;
- if (z == undefined) {
- if (y == undefined) {
- y = x;
- z = x;
- }
- else
- z = 1;
- }
- else if (y == undefined)
- y = x;
-
- var matrix = new CanvasMatrix4();
- matrix.m11 = x;
- matrix.m22 = y;
- matrix.m33 = z;
-
- this.multRight(matrix);
-}
-
-CanvasMatrix4.prototype.rotate = function(angle,x,y,z)
-{
- // angles are in degrees. Switch to radians
- angle = angle / 180 * Math.PI;
-
- angle /= 2;
- var sinA = Math.sin(angle);
- var cosA = Math.cos(angle);
- var sinA2 = sinA * sinA;
-
- // normalize
- var length = Math.sqrt(x * x + y * y + z * z);
- if (length == 0) {
- // bad vector, just use something reasonable
- x = 0;
- y = 0;
- z = 1;
- } else if (length != 1) {
- x /= length;
- y /= length;
- z /= length;
- }
-
- var mat = new CanvasMatrix4();
-
- // optimize case where axis is along major axis
- if (x == 1 && y == 0 && z == 0) {
- mat.m11 = 1;
- mat.m12 = 0;
- mat.m13 = 0;
- mat.m21 = 0;
- mat.m22 = 1 - 2 * sinA2;
- mat.m23 = 2 * sinA * cosA;
- mat.m31 = 0;
- mat.m32 = -2 * sinA * cosA;
- mat.m33 = 1 - 2 * sinA2;
- mat.m14 = mat.m24 = mat.m34 = 0;
- mat.m41 = mat.m42 = mat.m43 = 0;
- mat.m44 = 1;
- } else if (x == 0 && y == 1 && z == 0) {
- mat.m11 = 1 - 2 * sinA2;
- mat.m12 = 0;
- mat.m13 = -2 * sinA * cosA;
- mat.m21 = 0;
- mat.m22 = 1;
- mat.m23 = 0;
- mat.m31 = 2 * sinA * cosA;
- mat.m32 = 0;
- mat.m33 = 1 - 2 * sinA2;
- mat.m14 = mat.m24 = mat.m34 = 0;
- mat.m41 = mat.m42 = mat.m43 = 0;
- mat.m44 = 1;
- } else if (x == 0 && y == 0 && z == 1) {
- mat.m11 = 1 - 2 * sinA2;
- mat.m12 = 2 * sinA * cosA;
- mat.m13 = 0;
- mat.m21 = -2 * sinA * cosA;
- mat.m22 = 1 - 2 * sinA2;
- mat.m23 = 0;
- mat.m31 = 0;
- mat.m32 = 0;
- mat.m33 = 1;
- mat.m14 = mat.m24 = mat.m34 = 0;
- mat.m41 = mat.m42 = mat.m43 = 0;
- mat.m44 = 1;
- } else {
- var x2 = x*x;
- var y2 = y*y;
- var z2 = z*z;
-
- mat.m11 = 1 - 2 * (y2 + z2) * sinA2;
- mat.m12 = 2 * (x * y * sinA2 + z * sinA * cosA);
- mat.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
- mat.m21 = 2 * (y * x * sinA2 - z * sinA * cosA);
- mat.m22 = 1 - 2 * (z2 + x2) * sinA2;
- mat.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
- mat.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
- mat.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
- mat.m33 = 1 - 2 * (x2 + y2) * sinA2;
- mat.m14 = mat.m24 = mat.m34 = 0;
- mat.m41 = mat.m42 = mat.m43 = 0;
- mat.m44 = 1;
- }
- this.multRight(mat);
-}
-
-CanvasMatrix4.prototype.multRight = function(mat)
-{
- var m11 = (this.m11 * mat.m11 + this.m12 * mat.m21
- + this.m13 * mat.m31 + this.m14 * mat.m41);
- var m12 = (this.m11 * mat.m12 + this.m12 * mat.m22
- + this.m13 * mat.m32 + this.m14 * mat.m42);
- var m13 = (this.m11 * mat.m13 + this.m12 * mat.m23
- + this.m13 * mat.m33 + this.m14 * mat.m43);
- var m14 = (this.m11 * mat.m14 + this.m12 * mat.m24
- + this.m13 * mat.m34 + this.m14 * mat.m44);
-
- var m21 = (this.m21 * mat.m11 + this.m22 * mat.m21
- + this.m23 * mat.m31 + this.m24 * mat.m41);
- var m22 = (this.m21 * mat.m12 + this.m22 * mat.m22
- + this.m23 * mat.m32 + this.m24 * mat.m42);
- var m23 = (this.m21 * mat.m13 + this.m22 * mat.m23
- + this.m23 * mat.m33 + this.m24 * mat.m43);
- var m24 = (this.m21 * mat.m14 + this.m22 * mat.m24
- + this.m23 * mat.m34 + this.m24 * mat.m44);
-
- var m31 = (this.m31 * mat.m11 + this.m32 * mat.m21
- + this.m33 * mat.m31 + this.m34 * mat.m41);
- var m32 = (this.m31 * mat.m12 + this.m32 * mat.m22
- + this.m33 * mat.m32 + this.m34 * mat.m42);
- var m33 = (this.m31 * mat.m13 + this.m32 * mat.m23
- + this.m33 * mat.m33 + this.m34 * mat.m43);
- var m34 = (this.m31 * mat.m14 + this.m32 * mat.m24
- + this.m33 * mat.m34 + this.m34 * mat.m44);
-
- var m41 = (this.m41 * mat.m11 + this.m42 * mat.m21
- + this.m43 * mat.m31 + this.m44 * mat.m41);
- var m42 = (this.m41 * mat.m12 + this.m42 * mat.m22
- + this.m43 * mat.m32 + this.m44 * mat.m42);
- var m43 = (this.m41 * mat.m13 + this.m42 * mat.m23
- + this.m43 * mat.m33 + this.m44 * mat.m43);
- var m44 = (this.m41 * mat.m14 + this.m42 * mat.m24
- + this.m43 * mat.m34 + this.m44 * mat.m44);
-
- this.m11 = m11;
- this.m12 = m12;
- this.m13 = m13;
- this.m14 = m14;
-
- this.m21 = m21;
- this.m22 = m22;
- this.m23 = m23;
- this.m24 = m24;
-
- this.m31 = m31;
- this.m32 = m32;
- this.m33 = m33;
- this.m34 = m34;
-
- this.m41 = m41;
- this.m42 = m42;
- this.m43 = m43;
- this.m44 = m44;
-}
-
-CanvasMatrix4.prototype.multLeft = function(mat)
-{
- var m11 = (mat.m11 * this.m11 + mat.m12 * this.m21
- + mat.m13 * this.m31 + mat.m14 * this.m41);
- var m12 = (mat.m11 * this.m12 + mat.m12 * this.m22
- + mat.m13 * this.m32 + mat.m14 * this.m42);
- var m13 = (mat.m11 * this.m13 + mat.m12 * this.m23
- + mat.m13 * this.m33 + mat.m14 * this.m43);
- var m14 = (mat.m11 * this.m14 + mat.m12 * this.m24
- + mat.m13 * this.m34 + mat.m14 * this.m44);
-
- var m21 = (mat.m21 * this.m11 + mat.m22 * this.m21
- + mat.m23 * this.m31 + mat.m24 * this.m41);
- var m22 = (mat.m21 * this.m12 + mat.m22 * this.m22
- + mat.m23 * this.m32 + mat.m24 * this.m42);
- var m23 = (mat.m21 * this.m13 + mat.m22 * this.m23
- + mat.m23 * this.m33 + mat.m24 * this.m43);
- var m24 = (mat.m21 * this.m14 + mat.m22 * this.m24
- + mat.m23 * this.m34 + mat.m24 * this.m44);
-
- var m31 = (mat.m31 * this.m11 + mat.m32 * this.m21
- + mat.m33 * this.m31 + mat.m34 * this.m41);
- var m32 = (mat.m31 * this.m12 + mat.m32 * this.m22
- + mat.m33 * this.m32 + mat.m34 * this.m42);
- var m33 = (mat.m31 * this.m13 + mat.m32 * this.m23
- + mat.m33 * this.m33 + mat.m34 * this.m43);
- var m34 = (mat.m31 * this.m14 + mat.m32 * this.m24
- + mat.m33 * this.m34 + mat.m34 * this.m44);
-
- var m41 = (mat.m41 * this.m11 + mat.m42 * this.m21
- + mat.m43 * this.m31 + mat.m44 * this.m41);
- var m42 = (mat.m41 * this.m12 + mat.m42 * this.m22
- + mat.m43 * this.m32 + mat.m44 * this.m42);
- var m43 = (mat.m41 * this.m13 + mat.m42 * this.m23
- + mat.m43 * this.m33 + mat.m44 * this.m43);
- var m44 = (mat.m41 * this.m14 + mat.m42 * this.m24
- + mat.m43 * this.m34 + mat.m44 * this.m44);
-
- this.m11 = m11;
- this.m12 = m12;
- this.m13 = m13;
- this.m14 = m14;
-
- this.m21 = m21;
- this.m22 = m22;
- this.m23 = m23;
- this.m24 = m24;
-
- this.m31 = m31;
- this.m32 = m32;
- this.m33 = m33;
- this.m34 = m34;
-
- this.m41 = m41;
- this.m42 = m42;
- this.m43 = m43;
- this.m44 = m44;
-}
-
-CanvasMatrix4.prototype.ortho = function(left, right, bottom, top, near, far)
-{
- var tx = (left + right) / (left - right);
- var ty = (top + bottom) / (top - bottom);
- var tz = (far + near) / (far - near);
-
- var matrix = new CanvasMatrix4();
- matrix.m11 = 2 / (left - right);
- matrix.m12 = 0;
- matrix.m13 = 0;
- matrix.m14 = 0;
- matrix.m21 = 0;
- matrix.m22 = 2 / (top - bottom);
- matrix.m23 = 0;
- matrix.m24 = 0;
- matrix.m31 = 0;
- matrix.m32 = 0;
- matrix.m33 = -2 / (far - near);
- matrix.m34 = 0;
- matrix.m41 = tx;
- matrix.m42 = ty;
- matrix.m43 = tz;
- matrix.m44 = 1;
-
- this.multRight(matrix);
-}
-
-CanvasMatrix4.prototype.frustum = function(left, right, bottom, top, near, far)
-{
- var matrix = new CanvasMatrix4();
- var A = (right + left) / (right - left);
- var B = (top + bottom) / (top - bottom);
- var C = -(far + near) / (far - near);
- var D = -(2 * far * near) / (far - near);
-
- matrix.m11 = (2 * near) / (right - left);
- matrix.m12 = 0;
- matrix.m13 = 0;
- matrix.m14 = 0;
-
- matrix.m21 = 0;
- matrix.m22 = 2 * near / (top - bottom);
- matrix.m23 = 0;
- matrix.m24 = 0;
-
- matrix.m31 = A;
- matrix.m32 = B;
- matrix.m33 = C;
- matrix.m34 = -1;
-
- matrix.m41 = 0;
- matrix.m42 = 0;
- matrix.m43 = D;
- matrix.m44 = 0;
-
- this.multRight(matrix);
-}
-
-CanvasMatrix4.prototype.perspective = function(fovy, aspect, zNear, zFar)
-{
- var top = Math.tan(fovy * Math.PI / 360) * zNear;
- var bottom = -top;
- var left = aspect * bottom;
- var right = aspect * top;
- this.frustum(left, right, bottom, top, zNear, zFar);
-}
-
-CanvasMatrix4.prototype.lookat = function(eyex, eyey, eyez, centerx, centery, centerz, upx, upy, upz)
-{
- var matrix = new CanvasMatrix4();
-
- // Make rotation matrix
-
- // Z vector
- var zx = eyex - centerx;
- var zy = eyey - centery;
- var zz = eyez - centerz;
- var mag = Math.sqrt(zx * zx + zy * zy + zz * zz);
- if (mag) {
- zx /= mag;
- zy /= mag;
- zz /= mag;
- }
-
- // Y vector
- var yx = upx;
- var yy = upy;
- var yz = upz;
-
- // X vector = Y cross Z
- xx = yy * zz - yz * zy;
- xy = -yx * zz + yz * zx;
- xz = yx * zy - yy * zx;
-
- // Recompute Y = Z cross X
- yx = zy * xz - zz * xy;
- yy = -zx * xz + zz * xx;
- yx = zx * xy - zy * xx;
-
- // cross product gives area of parallelogram, which is < 1.0 for
- // non-perpendicular unit-length vectors; so normalize x, y here
-
- mag = Math.sqrt(xx * xx + xy * xy + xz * xz);
- if (mag) {
- xx /= mag;
- xy /= mag;
- xz /= mag;
- }
-
- mag = Math.sqrt(yx * yx + yy * yy + yz * yz);
- if (mag) {
- yx /= mag;
- yy /= mag;
- yz /= mag;
- }
-
- matrix.m11 = xx;
- matrix.m12 = xy;
- matrix.m13 = xz;
- matrix.m14 = 0;
-
- matrix.m21 = yx;
- matrix.m22 = yy;
- matrix.m23 = yz;
- matrix.m24 = 0;
-
- matrix.m31 = zx;
- matrix.m32 = zy;
- matrix.m33 = zz;
- matrix.m34 = 0;
-
- matrix.m41 = 0;
- matrix.m42 = 0;
- matrix.m43 = 0;
- matrix.m44 = 1;
- matrix.translate(-eyex, -eyey, -eyez);
-
- this.multRight(matrix);
-}
-
-// Support functions
-CanvasMatrix4.prototype._determinant2x2 = function(a, b, c, d)
-{
- return a * d - b * c;
-}
-
-CanvasMatrix4.prototype._determinant3x3 = function(a1, a2, a3, b1, b2, b3, c1, c2, c3)
-{
- return a1 * this._determinant2x2(b2, b3, c2, c3)
- - b1 * this._determinant2x2(a2, a3, c2, c3)
- + c1 * this._determinant2x2(a2, a3, b2, b3);
-}
-
-CanvasMatrix4.prototype._determinant4x4 = function()
-{
- var a1 = this.m11;
- var b1 = this.m12;
- var c1 = this.m13;
- var d1 = this.m14;
-
- var a2 = this.m21;
- var b2 = this.m22;
- var c2 = this.m23;
- var d2 = this.m24;
-
- var a3 = this.m31;
- var b3 = this.m32;
- var c3 = this.m33;
- var d3 = this.m34;
-
- var a4 = this.m41;
- var b4 = this.m42;
- var c4 = this.m43;
- var d4 = this.m44;
-
- return a1 * this._determinant3x3(b2, b3, b4, c2, c3, c4, d2, d3, d4)
- - b1 * this._determinant3x3(a2, a3, a4, c2, c3, c4, d2, d3, d4)
- + c1 * this._determinant3x3(a2, a3, a4, b2, b3, b4, d2, d3, d4)
- - d1 * this._determinant3x3(a2, a3, a4, b2, b3, b4, c2, c3, c4);
-}
-
-CanvasMatrix4.prototype._makeAdjoint = function()
-{
- var a1 = this.m11;
- var b1 = this.m12;
- var c1 = this.m13;
- var d1 = this.m14;
-
- var a2 = this.m21;
- var b2 = this.m22;
- var c2 = this.m23;
- var d2 = this.m24;
-
- var a3 = this.m31;
- var b3 = this.m32;
- var c3 = this.m33;
- var d3 = this.m34;
-
- var a4 = this.m41;
- var b4 = this.m42;
- var c4 = this.m43;
- var d4 = this.m44;
-
- // Row column labeling reversed since we transpose rows & columns
- this.m11 = this._determinant3x3(b2, b3, b4, c2, c3, c4, d2, d3, d4);
- this.m21 = - this._determinant3x3(a2, a3, a4, c2, c3, c4, d2, d3, d4);
- this.m31 = this._determinant3x3(a2, a3, a4, b2, b3, b4, d2, d3, d4);
- this.m41 = - this._determinant3x3(a2, a3, a4, b2, b3, b4, c2, c3, c4);
-
- this.m12 = - this._determinant3x3(b1, b3, b4, c1, c3, c4, d1, d3, d4);
- this.m22 = this._determinant3x3(a1, a3, a4, c1, c3, c4, d1, d3, d4);
- this.m32 = - this._determinant3x3(a1, a3, a4, b1, b3, b4, d1, d3, d4);
- this.m42 = this._determinant3x3(a1, a3, a4, b1, b3, b4, c1, c3, c4);
-
- this.m13 = this._determinant3x3(b1, b2, b4, c1, c2, c4, d1, d2, d4);
- this.m23 = - this._determinant3x3(a1, a2, a4, c1, c2, c4, d1, d2, d4);
- this.m33 = this._determinant3x3(a1, a2, a4, b1, b2, b4, d1, d2, d4);
- this.m43 = - this._determinant3x3(a1, a2, a4, b1, b2, b4, c1, c2, c4);
-
- this.m14 = - this._determinant3x3(b1, b2, b3, c1, c2, c3, d1, d2, d3);
- this.m24 = this._determinant3x3(a1, a2, a3, c1, c2, c3, d1, d2, d3);
- this.m34 = - this._determinant3x3(a1, a2, a3, b1, b2, b3, d1, d2, d3);
- this.m44 = this._determinant3x3(a1, a2, a3, b1, b2, b3, c1, c2, c3);
-}
diff --git a/WebKitSite/blog-files/webgl/resources/utils3d.js b/WebKitSite/blog-files/webgl/resources/utils3d.js
deleted file mode 100644
index 0537410..0000000
--- a/WebKitSite/blog-files/webgl/resources/utils3d.js
+++ /dev/null
@@ -1,565 +0,0 @@
-/*
- * Copyright (C) 2009 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- * notice, this list of conditions and the following disclaimer in the
- * documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-//
-// initWebGL
-//
-// Initialize the Canvas element with the passed name as a WebGL object and return the
-// WebGLRenderingContext.
-//
-// Load shaders with the passed names and create a program with them. Return this program
-// in the 'program' property of the returned context.
-//
-// For each string in the passed attribs array, bind an attrib with that name at that index.
-// Once the attribs are bound, link the program and then use it.
-//
-// Set the clear color to the passed array (4 values) and set the clear depth to the passed value.
-// Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
-//
-// A console function is added to the context: console(string). This can be replaced
-// by the caller. By default, it maps to the window.console() function on WebKit and to
-// an empty function on other browsers.
-//
-function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
-{
- var canvas = document.getElementById(canvasName);
- var gl = canvas.getContext("experimental-webgl");
- if (!gl) {
- alert("No WebGL context found");
- return null;
- }
-
- // Add a console
- gl.console = ("console" in window) ? window.console : { log: function() { } };
-
- // create our shaders
- var vertexShader = loadShader(gl, vshader);
- var fragmentShader = loadShader(gl, fshader);
-
- if (!vertexShader || !fragmentShader)
- return null;
-
- // Create the program object
- gl.program = gl.createProgram();
-
- if (!gl.program)
- return null;
-
- // Attach our two shaders to the program
- gl.attachShader (gl.program, vertexShader);
- gl.attachShader (gl.program, fragmentShader);
-
- // Bind attributes
- for (var i in attribs)
- gl.bindAttribLocation (gl.program, i, attribs[i]);
-
- // Link the program
- gl.linkProgram(gl.program);
-
- // Check the link status
- var linked = gl.getProgramParameter(gl.program, gl.LINK_STATUS);
- if (!linked) {
- // something went wrong with the link
- var error = gl.getProgramInfoLog (gl.program);
- gl.console.log("Error in program linking:"+error);
-
- gl.deleteProgram(gl.program);
- gl.deleteProgram(fragmentShader);
- gl.deleteProgram(vertexShader);
-
- return null;
- }
-
- gl.useProgram(gl.program);
-
- gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
- gl.clearDepth(clearDepth);
-
- gl.enable(gl.DEPTH_TEST);
- gl.enable(gl.BLEND);
- gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
- return gl;
-}
-
-//
-// loadShader
-//
-// 'shaderId' is the id of a <script> element containing the shader source string.
-// Load this shader and return the WebGLShader object corresponding to it.
-//
-function loadShader(ctx, shaderId)
-{
- var shaderScript = document.getElementById(shaderId);
- if (!shaderScript) {
- ctx.console.log("*** Error: shader script '"+shaderId+"' not found");
- return null;
- }
-
- if (shaderScript.type == "x-shader/x-vertex")
- var shaderType = ctx.VERTEX_SHADER;
- else if (shaderScript.type == "x-shader/x-fragment")
- var shaderType = ctx.FRAGMENT_SHADER;
- else {
- ctx.console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");
- return null;
- }
-
- // Create the shader object
- var shader = ctx.createShader(shaderType);
- if (shader == null) {
- ctx.console.log("*** Error: unable to create shader '"+shaderId+"'");
- return null;
- }
-
- // Load the shader source
- ctx.shaderSource(shader, shaderScript.text);
-
- // Compile the shader
- ctx.compileShader(shader);
-
- // Check the compile status
- var compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
- if (!compiled) {
- // Something went wrong during compilation; get the error
- var error = ctx.getShaderInfoLog(shader);
- ctx.console.log("*** Error compiling shader '"+shaderId+"':"+error);
- ctx.deleteShader(shader);
- return null;
- }
-
- return shader;
-}
-
-//
-// makeBox
-//
-// Create a box with vertices, normals and texCoords. Create VBOs for each as well as the index array.
-// Return an object with the following properties:
-//
-// normalObject WebGLBuffer object for normals
-// texCoordObject WebGLBuffer object for texCoords
-// vertexObject WebGLBuffer object for vertices
-// indexObject WebGLBuffer object for indices
-// numIndices The number of indices in the indexObject
-//
-function makeBox(ctx)
-{
- // box
- // v6----- v5
- // /| /|
- // v1------v0|
- // | | | |
- // | |v7---|-|v4
- // |/ |/
- // v2------v3
- //
- // vertex coords array
- var vertices = new WebGLFloatArray(
- [ 1, 1, 1, -1, 1, 1, -1,-1, 1, 1,-1, 1, // v0-v1-v2-v3 front
- 1, 1, 1, 1,-1, 1, 1,-1,-1, 1, 1,-1, // v0-v3-v4-v5 right
- 1, 1, 1, 1, 1,-1, -1, 1,-1, -1, 1, 1, // v0-v5-v6-v1 top
- -1, 1, 1, -1, 1,-1, -1,-1,-1, -1,-1, 1, // v1-v6-v7-v2 left
- -1,-1,-1, 1,-1,-1, 1,-1, 1, -1,-1, 1, // v7-v4-v3-v2 bottom
- 1,-1,-1, -1,-1,-1, -1, 1,-1, 1, 1,-1 ] // v4-v7-v6-v5 back
- );
-
- // normal array
- var normals = new WebGLFloatArray(
- [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, // v0-v1-v2-v3 front
- 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
- 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, // v0-v5-v6-v1 top
- -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, // v1-v6-v7-v2 left
- 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, // v7-v4-v3-v2 bottom
- 0, 0,-1, 0, 0,-1, 0, 0,-1, 0, 0,-1 ] // v4-v7-v6-v5 back
- );
-
-
- // texCoord array
- var texCoords = new WebGLFloatArray(
- [ 1, 1, 0, 1, 0, 0, 1, 0, // v0-v1-v2-v3 front
- 0, 1, 0, 0, 1, 0, 1, 1, // v0-v3-v4-v5 right
- 1, 0, 1, 1, 0, 1, 0, 0, // v0-v5-v6-v1 top
- 1, 1, 0, 1, 0, 0, 1, 0, // v1-v6-v7-v2 left
- 0, 0, 1, 0, 1, 1, 0, 1, // v7-v4-v3-v2 bottom
- 0, 0, 1, 0, 1, 1, 0, 1 ] // v4-v7-v6-v5 back
- );
-
- // index array
- var indices = new WebGLUnsignedByteArray(
- [ 0, 1, 2, 0, 2, 3, // front
- 4, 5, 6, 4, 6, 7, // right
- 8, 9,10, 8,10,11, // top
- 12,13,14, 12,14,15, // left
- 16,17,18, 16,18,19, // bottom
- 20,21,22, 20,22,23 ] // back
- );
-
- var retval = { };
-
- retval.normalObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
- ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
-
- retval.texCoordObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
- ctx.bufferData(ctx.ARRAY_BUFFER, texCoords, ctx.STATIC_DRAW);
-
- retval.vertexObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
- ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
-
- ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
-
- retval.indexObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
- ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
- ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
-
- retval.numIndices = indices.length;
-
- return retval;
-}
-
-//
-// makeSphere
-//
-// Create a sphere with the passed number of latitude and longitude bands and the passed radius.
-// Sphere has vertices, normals and texCoords. Create VBOs for each as well as the index array.
-// Return an object with the following properties:
-//
-// normalObject WebGLBuffer object for normals
-// texCoordObject WebGLBuffer object for texCoords
-// vertexObject WebGLBuffer object for vertices
-// indexObject WebGLBuffer object for indices
-// numIndices The number of indices in the indexObject
-//
-function makeSphere(ctx, radius, lats, longs)
-{
- var geometryData = [ ];
- var normalData = [ ];
- var texCoordData = [ ];
- var indexData = [ ];
-
- for (var latNumber = 0; latNumber <= lats; ++latNumber) {
- for (var longNumber = 0; longNumber <= longs; ++longNumber) {
- var theta = latNumber * Math.PI / lats;
- var phi = longNumber * 2 * Math.PI / longs;
- var sinTheta = Math.sin(theta);
- var sinPhi = Math.sin(phi);
- var cosTheta = Math.cos(theta);
- var cosPhi = Math.cos(phi);
-
- var x = cosPhi * sinTheta;
- var y = cosTheta;
- var z = sinPhi * sinTheta;
- var u = 1-(longNumber/longs);
- var v = latNumber/lats;
-
- normalData.push(x);
- normalData.push(y);
- normalData.push(z);
- texCoordData.push(u);
- texCoordData.push(v);
- geometryData.push(radius * x);
- geometryData.push(radius * y);
- geometryData.push(radius * z);
- }
- }
-
- for (var latNumber = 0; latNumber < lats; ++latNumber) {
- for (var longNumber = 0; longNumber < longs; ++longNumber) {
- var first = (latNumber * (longs+1)) + longNumber;
- var second = first + longs + 1;
- indexData.push(first);
- indexData.push(second);
- indexData.push(first+1);
-
- indexData.push(second);
- indexData.push(second+1);
- indexData.push(first+1);
- }
- }
-
- var retval = { };
-
- retval.normalObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
- ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(normalData), ctx.STATIC_DRAW);
-
- retval.texCoordObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
- ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(texCoordData), ctx.STATIC_DRAW);
-
- retval.vertexObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
- ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(geometryData), ctx.STATIC_DRAW);
-
- retval.numIndices = indexData.length;
- retval.indexObject = ctx.createBuffer();
- ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
- ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indexData), ctx.STREAM_DRAW);
-
- return retval;
-}
-
-//
-// loadObj
-//
-// Load a .obj file from the passed URL. Return an object with a 'loaded' property set to false.
-// When the object load is complete, the 'loaded' property becomes true and the following
-// properties are set:
-//
-// normalObject WebGLBuffer object for normals
-// texCoordObject WebGLBuffer object for texCoords
-// vertexObject WebGLBuffer object for vertices
-// indexObject WebGLBuffer object for indices
-// numIndices The number of indices in the indexObject
-//
-function loadObj(ctx, url)
-{
- var obj = { loaded : false };
- obj.ctx = ctx;
- var req = new XMLHttpRequest();
- req.obj = obj;
- req.onreadystatechange = function () { processLoadObj(req) };
- req.open("GET", url, true);
- req.send(null);
- return obj;
-}
-
-function processLoadObj(req)
-{
- req.obj.ctx.console.log("req="+req)
- // only if req shows "complete"
- if (req.readyState == 4) {
- doLoadObj(req.obj, req.responseText);
- }
-}
-
-function doLoadObj(obj, text)
-{
- vertexArray = [ ];
- normalArray = [ ];
- textureArray = [ ];
- indexArray = [ ];
-
- var vertex = [ ];
- var normal = [ ];
- var texture = [ ];
- var facemap = { };
- var index = 0;
-
- var lines = text.split("\n");
- for (var lineIndex in lines) {
- var line = lines[lineIndex].replace(/[ \t]+/g, " ").replace(/\s\s*$/, "");
-
- // ignore comments
- if (line[0] == "#")
- continue;
-
- var array = line.split(" ");
- if (array[0] == "v") {
- // vertex
- vertex.push(parseFloat(array[1]));
- vertex.push(parseFloat(array[2]));
- vertex.push(parseFloat(array[3]));
- }
- else if (array[0] == "vt") {
- // normal
- texture.push(parseFloat(array[1]));
- texture.push(parseFloat(array[2]));
- }
- else if (array[0] == "vn") {
- // normal
- normal.push(parseFloat(array[1]));
- normal.push(parseFloat(array[2]));
- normal.push(parseFloat(array[3]));
- }
- else if (array[0] == "f") {
- // face
- if (array.length != 4) {
- obj.ctx.console.log("*** Error: face '"+line+"' not handled");
- continue;
- }
-
- for (var i = 1; i < 4; ++i) {
- if (!(array[i] in facemap)) {
- // add a new entry to the map and arrays
- var f = array[i].split("/");
- var vtx, nor, tex;
-
- if (f.length == 1) {
- vtx = parseInt(f[0]) - 1;
- nor = vtx;
- tex = vtx;
- }
- else if (f.length = 3) {
- vtx = parseInt(f[0]) - 1;
- tex = parseInt(f[1]) - 1;
- nor = parseInt(f[2]) - 1;
- }
- else {
- obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
- return null;
- }
-
- // do the vertices
- var x = 0;
- var y = 0;
- var z = 0;
- if (vtx * 3 + 2 < vertex.length) {
- x = vertex[vtx*3];
- y = vertex[vtx*3+1];
- z = vertex[vtx*3+2];
- }
- vertexArray.push(x);
- vertexArray.push(y);
- vertexArray.push(z);
-
- // do the textures
- x = 0;
- y = 0;
- if (tex * 2 + 1 < texture.length) {
- x = texture[tex*2];
- y = texture[tex*2+1];
- }
- textureArray.push(x);
- textureArray.push(y);
-
- // do the normals
- x = 0;
- y = 0;
- z = 1;
- if (nor * 3 + 2 < normal.length) {
- x = normal[nor*3];
- y = normal[nor*3+1];
- z = normal[nor*3+2];
- }
- normalArray.push(x);
- normalArray.push(y);
- normalArray.push(z);
-
- facemap[array[i]] = index++;
- }
-
- indexArray.push(facemap[array[i]]);
- }
- }
- }
-
- // set the VBOs
- obj.normalObject = obj.ctx.createBuffer();
- obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.normalObject);
- obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(normalArray), obj.ctx.STATIC_DRAW);
-
- obj.texCoordObject = obj.ctx.createBuffer();
- obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.texCoordObject);
- obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(textureArray), obj.ctx.STATIC_DRAW);
-
- obj.vertexObject = obj.ctx.createBuffer();
- obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.vertexObject);
- obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(vertexArray), obj.ctx.STATIC_DRAW);
-
- obj.numIndices = indexArray.length;
- obj.indexObject = obj.ctx.createBuffer();
- obj.ctx.bindBuffer(obj.ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject);
- obj.ctx.bufferData(obj.ctx.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indexArray), obj.ctx.STREAM_DRAW);
-
- obj.loaded = true;
-}
-
-//
-// loadImageTexture
-//
-// Load the image at the passed url, place it in a new WebGLTexture object and return the WebGLTexture.
-//
-function loadImageTexture(ctx, url)
-{
- var texture = ctx.createTexture();
- texture.image = new Image();
- texture.image.onload = function() { doLoadImageTexture(ctx, texture.image, texture) }
- texture.image.src = url;
- return texture;
-}
-
-function doLoadImageTexture(ctx, image, texture)
-{
- ctx.enable(ctx.TEXTURE_2D);
- ctx.bindTexture(ctx.TEXTURE_2D, texture);
- ctx.texImage2D(ctx.TEXTURE_2D, 0, image);
- ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
- ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR_MIPMAP_LINEAR);
- ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
- ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
- ctx.generateMipmap(ctx.TEXTURE_2D)
- ctx.bindTexture(ctx.TEXTURE_2D, null);
-}
-
-//
-// Framerate object
-//
-// This object keeps track of framerate and displays it as the innerHTML text of the
-// HTML element with the passed id. Once created you call snapshot at the end
-// of every rendering cycle. Every 500ms the framerate is updated in the HTML element.
-//
-Framerate = function(id)
-{
- this.numFramerates = 10;
- this.framerateUpdateInterval = 500;
- this.id = id;
-
- this.renderTime = -1;
- this.framerates = [ ];
- self = this;
- var fr = function() { self.updateFramerate() }
- setInterval(fr, this.framerateUpdateInterval);
-}
-
-Framerate.prototype.updateFramerate = function()
-{
- var tot = 0;
- for (var i = 0; i < this.framerates.length; ++i)
- tot += this.framerates[i];
-
- var framerate = tot / this.framerates.length;
- framerate = Math.round(framerate);
- document.getElementById(this.id).innerHTML = "Framerate:"+framerate+"fps";
-}
-
-Framerate.prototype.snapshot = function()
-{
- if (this.renderTime < 0)
- this.renderTime = new Date().getTime();
- else {
- var newTime = new Date().getTime();
- var t = newTime - this.renderTime;
- var framerate = 1000/t;
- this.framerates.push(framerate);
- while (this.framerates.length > this.numFramerates)
- this.framerates.shift();
- this.renderTime = newTime;
- }
-}
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list