123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <!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/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">
- #ifdef GL_ES
- precision mediump float;
- #endif
-
- 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.width == width && canvas.height == height)
- return;
- width = canvas.width;
- height = canvas.height;
-
- ctx.viewport(0, 0, width, height);
- 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)
- {
- // 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 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, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
-
- // construct the model-view * projection matrix
- 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);
- }
-
- 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 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 = [ ];
- 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;
- }
- </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>
|