diff options
Diffstat (limited to 'WebCore/manual-tests/webgl/ManyPlanetsDeep.html')
| -rw-r--r-- | WebCore/manual-tests/webgl/ManyPlanetsDeep.html | 202 |
1 files changed, 0 insertions, 202 deletions
diff --git a/WebCore/manual-tests/webgl/ManyPlanetsDeep.html b/WebCore/manual-tests/webgl/ManyPlanetsDeep.html deleted file mode 100644 index e5bb773..0000000 --- a/WebCore/manual-tests/webgl/ManyPlanetsDeep.html +++ /dev/null @@ -1,202 +0,0 @@ -<!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 u_modelViewMatrix; - uniform mat4 u_modelViewProjMatrix; - uniform mat4 u_normalMatrix; - uniform vec3 lightDir; - - attribute vec3 vNormal; - attribute vec4 vTexCoord; - attribute vec4 vPosition; - - varying float v_Dot; - varying vec2 v_texCoord; - - void main() - { - gl_Position = u_modelViewProjMatrix * vPosition; - v_texCoord = vTexCoord.st; - 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"> - uniform sampler2D sampler2d; - - varying float v_Dot; - varying vec2 v_texCoord; - - void main() - { - vec4 color = texture2D(sampler2d,v_texCoord); - color += vec4(0.1,0.1,0.1,1); - gl_FragColor = vec4(color.xyz * v_Dot, color.a); - } - </script> - - <script> - const numRowCols = 4; - const numLayers = 3; - const layoutWidth = 10; - const layoutHeight = 8; - const globeSize = 25; - const minIncAngle = 0.2; - const maxIncAngle = 2; - - function init() - { - var gl = initWebGL("example", "vshader", "fshader", - [ "vNormal", "vTexCoord", "vPosition"], - [ 0, 0, 0, 1 ], 10000); - - gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1); - gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0); - - gl.enable(gl.TEXTURE_2D); - - gl.sphere = makeSphere(gl, 1, 30, 30); - - // get the images - earthTexture = loadImageTexture(gl, "resources/earthmap1k.jpg"); - marsTexture = loadImageTexture(gl, "resources/mars500x250.png"); - - return gl; - } - - width = -1; - height = -1; - - function reshape(ctx) - { - var canvas = document.getElementById('example'); - if (canvas.clientWidth == width && canvas.clientHeight == height) - return; - - width = canvas.clientWidth; - height = canvas.clientHeight; - - ctx.viewport(0, 0, width, height); - - ctx.perspectiveMatrix = new CanvasMatrix4(); - ctx.perspectiveMatrix.lookat(0,0,20, 0, 0, 0, 0, 1, 0); - ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000); - } - - function drawOne(ctx, angle, x, y, z, scale, texture) - { - // setup VBOs - ctx.enableVertexAttribArray(0); - ctx.enableVertexAttribArray(1); - ctx.enableVertexAttribArray(2); - - ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.sphere.vertexObject); - ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0); - - ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.sphere.normalObject); - ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0); - - ctx.bindBuffer(ctx.ARRAY_BUFFER, ctx.sphere.texCoordObject); - ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0); - - 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); - mvMatrix.translate(x,y,z); - ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false, mvMatrix.getAsCanvasFloatArray()); - - // 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()); - - // 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.bindTexture(ctx.TEXTURE_2D, texture); - ctx.drawElements(ctx.TRIANGLES, ctx.sphere.numIndices, ctx.UNSIGNED_SHORT, 0); - } - - function drawPicture(ctx) - { - reshape(ctx); - ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); - - var startX = -layoutWidth/2; - var startY = -layoutHeight/2; - var startZ = 0; - var incX = layoutWidth / (numRowCols-1); - var incY = layoutHeight / (numRowCols-1); - var incZ = -5; - - for (i = 0; i < numLayers; ++i) { - for (j = 0; j < numRowCols; ++j) { - for (k = 0; k < numRowCols; ++k) { - var index = i * numLayers * numRowCols + j * numRowCols + k; - - drawOne(ctx, currentAngles[index], - startX + incX * k, - startY + incY * j, - startZ + incZ * i, - showEarth[index] ? 1 : 0.6, showEarth[index] ? earthTexture : marsTexture); - - currentAngles[index] += incAngles[i]; - if (currentAngles[index] > 360) - currentAngles[index] -= 360; - } - } - } - - ctx.bindTexture(ctx.TEXTURE_2D, 0); - ctx.flush(); - - framerate.snapshot(); - } - - function start() - { - var ctx = init(); - currentAngles = [ ]; - incAngles = [ ]; - showEarth = [ ]; - - for (var i = 0; i < numRowCols * numRowCols * numLayers; ++i) { - currentAngles[i] = 0; - incAngles[i] = Math.random() * (maxIncAngle - minIncAngle) + minIncAngle; - showEarth[i] = Math.random() > 0.5; - } - - framerate = new Framerate("framerate"); - - var f = function() { drawPicture(ctx) }; - setInterval(f, 10); - } - </script> - <style type="text/css"> - canvas { - border: 2px solid black; - width:90%; - height:90%; - } - </style> - </head> - <body onload="start()"> - <canvas id="example"> - There is supposed to be an example drawing here, but it's not important. - </canvas> - <div id="framerate"></div> - </body> -</html> |