Websites/webkit.org/blog-files/webgl/ManyPlanetsDeep.html - WebKit - Git at Google

 <!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>
	<!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>