diff options
Diffstat (limited to 'WebCore/manual-tests/webgl/ManyPlanetsDeep.html')
| -rw-r--r-- | WebCore/manual-tests/webgl/ManyPlanetsDeep.html | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/WebCore/manual-tests/webgl/ManyPlanetsDeep.html b/WebCore/manual-tests/webgl/ManyPlanetsDeep.html new file mode 100644 index 0000000..e5bb773 --- /dev/null +++ b/WebCore/manual-tests/webgl/ManyPlanetsDeep.html @@ -0,0 +1,202 @@ +<!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> |