[SCM] WebKit Debian packaging branch, webkit-1.2, updated. upstream/1.1.90-6072-g9a69373
eric at webkit.org
eric at webkit.org
Thu Apr 8 00:34:17 UTC 2010
The following commit has been merged in the webkit-1.2 branch:
commit 0c453022579dc2235a26016a6d74fb48c5f9fc49
Author: eric at webkit.org <eric at webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Sat Dec 12 23:12:31 2009 +0000
2009-12-12 Kenneth Russell <kbr at google.com>
Reviewed by Oliver Hunt.
Update WebGL tests to released versions
https://bugs.webkit.org/show_bug.cgi?id=32457
* fast/canvas/webgl/resources/utils3d.js:
(initWebGL.gl.console.window.console.log):
(initWebGL):
(loadShader):
(makeBox):
(makeSphere):
(processLoadObj):
(doLoadObj):
(doLoadImageTexture):
2009-12-12 Kenneth Russell <kbr at google.com>
Reviewed by Oliver Hunt.
Update WebGL tests to released versions
https://bugs.webkit.org/show_bug.cgi?id=32457
* manual-tests/webgl/Earth.html:
* manual-tests/webgl/ManyPlanetsDeep.html:
* manual-tests/webgl/SpinningBox.html:
* manual-tests/webgl/TeapotPerPixel.html:
* manual-tests/webgl/TeapotPerVertex.html:
* manual-tests/webgl/resources/CanvasMatrix.js:
(CanvasMatrix4.prototype.getAsWebGLFloatArray):
* manual-tests/webgl/resources/utils3d.js:
(initWebGL.gl.console.window.console.log):
(initWebGL):
(loadShader):
(makeBox):
(makeSphere):
(processLoadObj):
(doLoadObj):
(doLoadImageTexture):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@52056 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index ab773cc..e910554 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,20 @@
+2009-12-12 Kenneth Russell <kbr at google.com>
+
+ Reviewed by Oliver Hunt.
+
+ Update WebGL tests to released versions
+ https://bugs.webkit.org/show_bug.cgi?id=32457
+
+ * fast/canvas/webgl/resources/utils3d.js:
+ (initWebGL.gl.console.window.console.log):
+ (initWebGL):
+ (loadShader):
+ (makeBox):
+ (makeSphere):
+ (processLoadObj):
+ (doLoadObj):
+ (doLoadImageTexture):
+
2009-12-12 Eric Carlson <eric.carlson at apple.com>
Reviewed by Darin Adler.
diff --git a/LayoutTests/fast/canvas/webgl/resources/utils3d.js b/LayoutTests/fast/canvas/webgl/resources/utils3d.js
index 61d85b5..dc1e3cb 100644
--- a/LayoutTests/fast/canvas/webgl/resources/utils3d.js
+++ b/LayoutTests/fast/canvas/webgl/resources/utils3d.js
@@ -13,18 +13,21 @@
// 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;
-
- try {gl = canvas.getContext("experimental-webgl") } catch(e) { }
- if (!gl)
- try {gl = canvas.getContext("moz-webgl") } catch(e) { }
+ 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);
@@ -55,7 +58,7 @@ function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth
if (!linked) {
// something went wrong with the link
var error = gl.getProgramInfoLog (gl.program);
- console.log("Error in program linking:"+error);
+ gl.console.log("Error in program linking:"+error);
gl.deleteProgram(gl.program);
gl.deleteProgram(fragmentShader);
@@ -86,7 +89,7 @@ function loadShader(ctx, shaderId)
{
var shaderScript = document.getElementById(shaderId);
if (!shaderScript) {
- console.log("*** Error: shader script '"+shaderId+"' not found");
+ ctx.console.log("*** Error: shader script '"+shaderId+"' not found");
return null;
}
@@ -95,14 +98,14 @@ function loadShader(ctx, shaderId)
else if (shaderScript.type == "x-shader/x-fragment")
var shaderType = ctx.FRAGMENT_SHADER;
else {
- console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");
+ 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) {
- console.log("*** Error: unable to create shader '"+shaderId+"'");
+ ctx.console.log("*** Error: unable to create shader '"+shaderId+"'");
return null;
}
@@ -117,7 +120,7 @@ function loadShader(ctx, shaderId)
if (!compiled) {
// Something went wrong during compilation; get the error
var error = ctx.getShaderInfoLog(shader);
- console.log("*** Error compiling shader '"+shaderId+"':"+error);
+ ctx.console.log("*** Error compiling shader '"+shaderId+"':"+error);
ctx.deleteShader(shader);
return null;
}
@@ -203,12 +206,12 @@ function makeBox(ctx)
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
- ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);
+ 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, 0);
+ ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
retval.numIndices = indices.length;
@@ -261,11 +264,10 @@ function makeSphere(ctx, radius, lats, longs)
}
}
- longs += 1;
for (var latNumber = 0; latNumber < lats; ++latNumber) {
for (var longNumber = 0; longNumber < longs; ++longNumber) {
- var first = (latNumber * longs) + (longNumber % longs);
- var second = first + longs;
+ var first = (latNumber * (longs+1)) + longNumber;
+ var second = first + longs + 1;
indexData.push(first);
indexData.push(second);
indexData.push(first+1);
@@ -325,7 +327,7 @@ function loadObj(ctx, url)
function processLoadObj(req)
{
- console.log("req="+req)
+ req.obj.ctx.console.log("req="+req)
// only if req shows "complete"
if (req.readyState == 4) {
doLoadObj(req.obj, req.responseText);
@@ -374,7 +376,7 @@ function doLoadObj(obj, text)
else if (array[0] == "f") {
// face
if (array.length != 4) {
- console.log("*** Error: face '"+line+"' not handled");
+ obj.ctx.console.log("*** Error: face '"+line+"' not handled");
continue;
}
@@ -395,7 +397,7 @@ function doLoadObj(obj, text)
nor = parseInt(f[2]) - 1;
}
else {
- console.log("*** Error: did not understand face '"+array[i]+"'");
+ obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
return null;
}
@@ -488,7 +490,7 @@ function doLoadImageTexture(ctx, image, texture)
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, 0);
+ ctx.bindTexture(ctx.TEXTURE_2D, null);
}
//
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index af00c0e..ba39cd3 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,27 @@
+2009-12-12 Kenneth Russell <kbr at google.com>
+
+ Reviewed by Oliver Hunt.
+
+ Update WebGL tests to released versions
+ https://bugs.webkit.org/show_bug.cgi?id=32457
+
+ * manual-tests/webgl/Earth.html:
+ * manual-tests/webgl/ManyPlanetsDeep.html:
+ * manual-tests/webgl/SpinningBox.html:
+ * manual-tests/webgl/TeapotPerPixel.html:
+ * manual-tests/webgl/TeapotPerVertex.html:
+ * manual-tests/webgl/resources/CanvasMatrix.js:
+ (CanvasMatrix4.prototype.getAsWebGLFloatArray):
+ * manual-tests/webgl/resources/utils3d.js:
+ (initWebGL.gl.console.window.console.log):
+ (initWebGL):
+ (loadShader):
+ (makeBox):
+ (makeSphere):
+ (processLoadObj):
+ (doLoadObj):
+ (doLoadImageTexture):
+
2009-12-12 Christian Dywan <christian at twotoasts.de>
Reviewed by Dirk Schulze.
diff --git a/WebCore/manual-tests/webgl/Earth.html b/WebCore/manual-tests/webgl/Earth.html
index fa59a20..1c39e9c 100644
--- a/WebCore/manual-tests/webgl/Earth.html
+++ b/WebCore/manual-tests/webgl/Earth.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>Canvas3d example</title>
+ <title>Earth and Mars</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
@@ -105,18 +105,18 @@
mvMatrix.rotate(angle, 0,1,0);
mvMatrix.rotate(30, 1,0,0);
mvMatrix.translate(x,y,z);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
// construct the normal matrix from the model-view matrix
var normalMatrix = new CanvasMatrix4(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
// 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.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
ctx.bindTexture(ctx.TEXTURE_2D, texture);
ctx.drawElements(ctx.TRIANGLES, ctx.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -140,6 +140,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 +158,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebCore/manual-tests/webgl/ManyPlanetsDeep.html b/WebCore/manual-tests/webgl/ManyPlanetsDeep.html
index e5bb773..1c72146 100644
--- a/WebCore/manual-tests/webgl/ManyPlanetsDeep.html
+++ b/WebCore/manual-tests/webgl/ManyPlanetsDeep.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>Canvas3d example</title>
+ <title>Many Planets Deep</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
@@ -113,18 +113,18 @@
mvMatrix.rotate(angle, 0,1,0);
mvMatrix.rotate(30, 1,0,0);
mvMatrix.translate(x,y,z);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
// construct the normal matrix from the model-view matrix
var normalMatrix = new CanvasMatrix4(mvMatrix);
normalMatrix.invert();
normalMatrix.transpose();
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
// 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.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
ctx.bindTexture(ctx.TEXTURE_2D, texture);
ctx.drawElements(ctx.TRIANGLES, ctx.sphere.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -168,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();
currentAngles = [ ];
incAngles = [ ];
@@ -188,8 +195,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebCore/manual-tests/webgl/SpinningBox.html b/WebCore/manual-tests/webgl/SpinningBox.html
index e68711c..cc87698 100644
--- a/WebCore/manual-tests/webgl/SpinningBox.html
+++ b/WebCore/manual-tests/webgl/SpinningBox.html
@@ -1,149 +1,205 @@
<!DOCTYPE html>
<html>
- <head>
- <title>Canvas3d example</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.getAsCanvasFloatArray());
- }
-
- 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.getAsCanvasFloatArray());
-
- 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/CanvasMatrix.js" type="text/javascript"> </script>
+<script src="resources/utils3d.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">
+ 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);
+
+ // 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 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
+ );
+
+ // 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 CanvasMatrix4();
+ 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 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');
+ if (canvas.clientWidth == width && canvas.clientHeight == height)
+ return;
+
+ width = canvas.clientWidth;
+ height = canvas.clientHeight;
+
+ // 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.perspective(30, width/height, 1, 10000);
+ }
+
+ 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);
+
+ // 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());
+
+ // 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());
+
+ // 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/WebCore/manual-tests/webgl/TeapotPerPixel.html b/WebCore/manual-tests/webgl/TeapotPerPixel.html
index 6274c8b..18be554 100644
--- a/WebCore/manual-tests/webgl/TeapotPerPixel.html
+++ b/WebCore/manual-tests/webgl/TeapotPerPixel.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>Canvas3d example</title>
+ <title>Teapot (per-pixel)</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
<script id="vshader" type="x-shader/x-vertex">
@@ -154,7 +154,6 @@
</script>
<script>
- console.log("Hello");
function setDirectionalLight(ctx, program, eyeVector, direction, ambient, diffuse, specular)
{
var lightString = "u_light.";
@@ -283,16 +282,16 @@
mvMatrix.makeIdentity();
mvMatrix.rotate(currentAngle, 0, 1, 0);
mvMatrix.rotate(10, 1,0,0);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
// 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.getAsCanvasFloatArray());
+ 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.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -307,6 +306,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 +324,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebCore/manual-tests/webgl/TeapotPerVertex.html b/WebCore/manual-tests/webgl/TeapotPerVertex.html
index d2544a3..43984f3 100644
--- a/WebCore/manual-tests/webgl/TeapotPerVertex.html
+++ b/WebCore/manual-tests/webgl/TeapotPerVertex.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <title>Canvas3d example</title>
+ <title>Teapot (per-vertex)</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
<script id="vshader" type="x-shader/x-vertex">
@@ -256,16 +256,16 @@
mvMatrix.makeIdentity();
mvMatrix.rotate(currentAngle, 0, 1, 0);
mvMatrix.rotate(10, 1,0,0);
- ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsWebGLFloatArray());
// 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.getAsCanvasFloatArray());
+ 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.getAsCanvasFloatArray());
+ ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvMatrix.getAsWebGLFloatArray());
ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0);
@@ -280,6 +280,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 +298,6 @@
<style type="text/css">
canvas {
border: 2px solid black;
- width:90%;
- height:90%;
}
</style>
</head>
diff --git a/WebCore/manual-tests/webgl/resources/CanvasMatrix.js b/WebCore/manual-tests/webgl/resources/CanvasMatrix.js
index 90fcb3f..ee9465e 100644
--- a/WebCore/manual-tests/webgl/resources/CanvasMatrix.js
+++ b/WebCore/manual-tests/webgl/resources/CanvasMatrix.js
@@ -139,7 +139,7 @@ CanvasMatrix4.prototype.getAsArray = function()
];
}
-CanvasMatrix4.prototype.getAsCanvasFloatArray = function()
+CanvasMatrix4.prototype.getAsWebGLFloatArray = function()
{
return new WebGLFloatArray(this.getAsArray());
}
diff --git a/WebCore/manual-tests/webgl/resources/utils3d.js b/WebCore/manual-tests/webgl/resources/utils3d.js
index 58f520f..dc1e3cb 100644
--- a/WebCore/manual-tests/webgl/resources/utils3d.js
+++ b/WebCore/manual-tests/webgl/resources/utils3d.js
@@ -13,10 +13,21 @@
// 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("webkit-3d");
+ 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);
@@ -47,7 +58,7 @@ function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth
if (!linked) {
// something went wrong with the link
var error = gl.getProgramInfoLog (gl.program);
- console.log("Error in program linking:"+error);
+ gl.console.log("Error in program linking:"+error);
gl.deleteProgram(gl.program);
gl.deleteProgram(fragmentShader);
@@ -58,8 +69,8 @@ function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth
gl.useProgram(gl.program);
- gl.clearColor (clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
- gl.clearDepth (clearDepth);
+ gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
+ gl.clearDepth(clearDepth);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
@@ -78,7 +89,7 @@ function loadShader(ctx, shaderId)
{
var shaderScript = document.getElementById(shaderId);
if (!shaderScript) {
- console.log("*** Error: shader script '"+shaderId+"' not found");
+ ctx.console.log("*** Error: shader script '"+shaderId+"' not found");
return null;
}
@@ -87,14 +98,14 @@ function loadShader(ctx, shaderId)
else if (shaderScript.type == "x-shader/x-fragment")
var shaderType = ctx.FRAGMENT_SHADER;
else {
- console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");
+ 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) {
- console.log("*** Error: unable to create shader '"+shaderId+"'");
+ ctx.console.log("*** Error: unable to create shader '"+shaderId+"'");
return null;
}
@@ -109,7 +120,7 @@ function loadShader(ctx, shaderId)
if (!compiled) {
// Something went wrong during compilation; get the error
var error = ctx.getShaderInfoLog(shader);
- console.log("*** Error compiling shader '"+shaderId+"':"+error);
+ ctx.console.log("*** Error compiling shader '"+shaderId+"':"+error);
ctx.deleteShader(shader);
return null;
}
@@ -195,12 +206,12 @@ function makeBox(ctx)
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
- ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);
+ 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, 0);
+ ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
retval.numIndices = indices.length;
@@ -253,11 +264,10 @@ function makeSphere(ctx, radius, lats, longs)
}
}
- longs += 1;
for (var latNumber = 0; latNumber < lats; ++latNumber) {
for (var longNumber = 0; longNumber < longs; ++longNumber) {
- var first = (latNumber * longs) + (longNumber % longs);
- var second = first + longs;
+ var first = (latNumber * (longs+1)) + longNumber;
+ var second = first + longs + 1;
indexData.push(first);
indexData.push(second);
indexData.push(first+1);
@@ -317,7 +327,7 @@ function loadObj(ctx, url)
function processLoadObj(req)
{
- console.log("req="+req)
+ req.obj.ctx.console.log("req="+req)
// only if req shows "complete"
if (req.readyState == 4) {
doLoadObj(req.obj, req.responseText);
@@ -366,7 +376,7 @@ function doLoadObj(obj, text)
else if (array[0] == "f") {
// face
if (array.length != 4) {
- console.log("*** Error: face '"+line+"' not handled");
+ obj.ctx.console.log("*** Error: face '"+line+"' not handled");
continue;
}
@@ -387,7 +397,7 @@ function doLoadObj(obj, text)
nor = parseInt(f[2]) - 1;
}
else {
- console.log("*** Error: did not understand face '"+array[i]+"'");
+ obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
return null;
}
@@ -480,7 +490,7 @@ function doLoadImageTexture(ctx, image, texture)
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, 0);
+ ctx.bindTexture(ctx.TEXTURE_2D, null);
}
//
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list