<!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 type="text/javascript" src="common/webgl-utils.js"></script> <script type="text/javascript" src="debug/webgl-debug.js"></script> <script type="text/javascript" src="cros_fps.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_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"> precision mediump float; 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; var g = {}; // globals var g_crosFpsCounter = new crosFpsCounter(); var then = 0.0; var lastJSRenderTime = 0.0; function init() { var gl = initWebGL("example"); if (!gl) { return; } g.program = simpleSetup(gl, "vshader", "fshader", [ "vPosition", "vTexCoord", "vNormal"], [ 0, 0, 0, 1 ], 10000); gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 0, 1); gl.uniform1i(gl.getUniformLocation(g.program, "sampler2d"), 0); if (g.program) { g.u_normalMatrixLoc = gl.getUniformLocation(g.program, "u_normalMatrix"); g.u_modelViewProjMatrixLoc = gl.getUniformLocation(g.program, "u_modelViewProjMatrix"); } g.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; var requestId; function reshape(ctx) { var canvas = document.getElementById('example'); if (canvas.width == width && canvas.height == height) return; width = canvas.width; height = canvas.height; ctx.viewport(0, 0, width, height); g.perspectiveMatrix = new J3DIMatrix4(); g.perspectiveMatrix.perspective(30, width/height, 1, 10000); g.perspectiveMatrix.lookat(0,0,20, 0, 0, 0, 0, 1, 0); } 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, g.sphere.vertexObject); ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0); ctx.bindBuffer(ctx.ARRAY_BUFFER, g.sphere.normalObject); ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0); ctx.bindBuffer(ctx.ARRAY_BUFFER, g.sphere.texCoordObject); ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0); ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, g.sphere.indexObject); // generate the model-view matrix var mvMatrix = new J3DIMatrix4(); mvMatrix.translate(x,y,z); 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 J3DIMatrix4(mvMatrix); normalMatrix.invert(); normalMatrix.transpose(); normalMatrix.setUniform(ctx, g.u_normalMatrixLoc, false); // construct the model-view * projection matrix var mvpMatrix = new J3DIMatrix4(g.perspectiveMatrix); mvpMatrix.multiply(mvMatrix); mvpMatrix.setUniform(ctx, g.u_modelViewProjMatrixLoc, false); ctx.bindTexture(ctx.TEXTURE_2D, texture); ctx.drawElements(ctx.TRIANGLES, g.sphere.numIndices, ctx.UNSIGNED_SHORT, 0); } function drawPicture(ctx) { var now = new Date().getTime(); if (then != 0.0) { g_crosFpsCounter.update(then, now - then, lastJSRenderTime); } then = now; 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[index]; if (currentAngles[index] > 360) currentAngles[index] -= 360; } } } ctx.bindTexture(ctx.TEXTURE_2D, null); framerate.snapshot(); lastJSRenderTime = new Date().getTime() - then; } function start() { var c = document.getElementById("example"); var w = Math.floor(window.innerWidth * 0.9); var h = Math.floor(window.innerHeight * 0.9); //c = WebGLDebugUtils.makeLostContextSimulatingCanvas(c); // tell the simulator when to lose context. //c.loseContextInNCalls(1500); c.addEventListener('webglcontextlost', handleContextLost, false); c.addEventListener('webglcontextrestored', handleContextRestored, false); c.width = w; c.height = h; var ctx = init(); if (!ctx) { return; } 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) requestId = window.requestAnimFrame(f, c); }; f(); function handleContextLost(e) { e.preventDefault(); clearLoadingImages(); if (requestId !== undefined) { window.cancelAnimFrame(requestId); requestId = undefined; } } function handleContextRestored() { init(); f(); } } </script> <style type="text/css"> canvas { border: 2px solid black; } </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>