client/deps/webgl_mpd/src/ManyPlanetsDeep.html - mirrors/cros/chromiumos/third_party/autotest - 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 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>
	<!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>