| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright 2009, Google Inc. |
| 3 All rights reserved. |
| 4 |
| 5 Redistribution and use in source and binary forms, with or without |
| 6 modification, are permitted provided that the following conditions are |
| 7 met: |
| 8 |
| 9 * Redistributions of source code must retain the above copyright |
| 10 notice, this list of conditions and the following disclaimer. |
| 11 * Redistributions in binary form must reproduce the above |
| 12 copyright notice, this list of conditions and the following disclaimer |
| 13 in the documentation and/or other materials provided with the |
| 14 distribution. |
| 15 * Neither the name of Google Inc. nor the names of its |
| 16 contributors may be used to endorse or promote products derived from |
| 17 this software without specific prior written permission. |
| 18 |
| 19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 30 --> |
| 31 |
| 32 <!-- |
| 33 O3D Vertex Shader Animation Example. |
| 34 |
| 35 Demonstrates using a vertex shader for simple animation. The shader moves the |
| 36 vertices in a sin wave based on the parameter "time" and the world position |
| 37 of the vertices. |
| 38 --> |
| 39 |
| 40 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 41 "http://www.w3.org/TR/html4/loose.dtd"> |
| 42 <html> |
| 43 <head> |
| 44 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 45 <title> |
| 46 Vertex Shader Animation |
| 47 </title> |
| 48 <style type="text/css"> |
| 49 html, body { |
| 50 height: 100%; |
| 51 margin: 0; |
| 52 padding: 0; |
| 53 border: none; |
| 54 } |
| 55 </style> |
| 56 <script type="text/javascript" src="../o3d-webgl/base.js"></script> |
| 57 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 58 <script type="text/javascript" id="o3dscript"> |
| 59 o3djs.base.o3d = o3d; |
| 60 o3djs.require('o3djs.webgl'); |
| 61 o3djs.require('o3djs.util'); |
| 62 o3djs.require('o3djs.math'); |
| 63 o3djs.require('o3djs.rendergraph'); |
| 64 o3djs.require('o3djs.primitives'); |
| 65 o3djs.require('o3djs.material'); |
| 66 |
| 67 // global variables |
| 68 var g_o3d; |
| 69 var g_o3dElement; |
| 70 var g_math; |
| 71 var g_client; |
| 72 var g_pack; |
| 73 var g_viewInfo; |
| 74 var g_timeParam; |
| 75 |
| 76 /** |
| 77 * Creates the client area. |
| 78 */ |
| 79 function init() { |
| 80 // These are here so that they are visible to both the browser (so |
| 81 // selenium sees them) and the embedded V8 engine. |
| 82 window.g_clock = 0; |
| 83 window.g_timeMult = 1; |
| 84 window.g_finished = false; // for selenium testing. |
| 85 |
| 86 // Comment out the line below to run the sample in the browser |
| 87 // JavaScript engine. This may be helpful for debugging. |
| 88 o3djs.util.setMainEngine(o3djs.util.Engine.V8); |
| 89 o3djs.webgl.makeClients(initStep2); |
| 90 } |
| 91 |
| 92 /** |
| 93 * Initializes O3D, loads the effect, and creates the quads. |
| 94 * @param {Array} clientElements Array of o3d object elements. |
| 95 */ |
| 96 function initStep2(clientElements) { |
| 97 // Initialize global variables and libraries. |
| 98 g_o3dElement = clientElements[0]; |
| 99 g_o3d = g_o3dElement.o3d; |
| 100 g_math = o3djs.math; |
| 101 |
| 102 // Set window.g_client as well. Otherwise when the sample runs in |
| 103 // V8, selenium won't be able to find this variable (it can only see |
| 104 // the browser environment). |
| 105 window.g_client = g_client = g_o3dElement.client; |
| 106 |
| 107 // Create a pack to manage our resources/assets |
| 108 g_pack = g_client.createPack(); |
| 109 |
| 110 // Create the render graph for a view. |
| 111 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 112 g_pack, |
| 113 g_client.root, |
| 114 g_client.renderGraphRoot); |
| 115 |
| 116 // Create a material. |
| 117 var material = o3djs.material.createMaterialFromFile( |
| 118 g_pack, |
| 119 '../shaders/phong-vertex-anim-glsl.shader', |
| 120 g_viewInfo.performanceDrawList); |
| 121 |
| 122 // Set the material parameters. |
| 123 material.getParam('lightWorldPos').value = [-40, 100, 0]; |
| 124 material.getParam('lightIntensity').value = [1, 1, 1, 1]; |
| 125 material.getParam('ambientIntensity').value = [0.1, 0.1, 0.1, 1]; |
| 126 material.getParam('ambient').value = [1, 1, 1, 1]; |
| 127 material.getParam('diffuse').value = [1, 1, 1, 1]; |
| 128 material.getParam('specular').value = [1, 1, 1, 1]; |
| 129 material.getParam('shininess').value = 50; |
| 130 |
| 131 g_timeParam = material.getParam('time'); |
| 132 |
| 133 // Create the view matrix which tells the camera which way to point to. |
| 134 var eye = [10, 50, 20]; |
| 135 var target = [2, 0, -2]; |
| 136 var up = [0, 0, -1]; |
| 137 var view_matrix = g_math.matrix4.lookAt(eye, target, up); |
| 138 |
| 139 g_viewInfo.drawContext.view = view_matrix; |
| 140 |
| 141 var shape = o3djs.primitives.createPlane(g_pack, material, |
| 142 10, 10, 100, 100); |
| 143 for (var xx = 0; xx < 5; xx++) { |
| 144 for (var yy = 0; yy < 4; yy++) { |
| 145 var index = yy * 3 + xx; |
| 146 |
| 147 // Make a transform for each quad. |
| 148 var transform = g_pack.createObject('Transform'); |
| 149 transform.translate((xx - 2) * 12, 0, (2 - yy) * -12); |
| 150 transform.addShape(shape); |
| 151 transform.parent = g_client.root; |
| 152 transform.createParam('diffuse', 'ParamFloat4').value = [xx * 0.2, |
| 153 yy * 0.25, |
| 154 0.5, |
| 155 1]; |
| 156 } |
| 157 } |
| 158 |
| 159 // Setup an onrender callback for animation. |
| 160 g_client.setRenderCallback(onrender); |
| 161 |
| 162 window.g_finished = true; // for selenium testing. |
| 163 } |
| 164 |
| 165 function updateProjectionMatrix() { |
| 166 // Create our projection matrix, with a vertical field of view of 45 degrees |
| 167 // a near clipping plane of 0.1 and far clipping plane of 100. |
| 168 g_viewInfo.drawContext.projection = g_math.matrix4.perspective( |
| 169 g_math.degToRad(45), |
| 170 g_client.width / g_client.height, |
| 171 0.1, |
| 172 100); |
| 173 } |
| 174 |
| 175 // spin the camera. |
| 176 function onrender(render_event) { |
| 177 // Get the number of seconds since the last render. |
| 178 var elapsedTime = render_event.elapsedTime; |
| 179 // Update g_clock in the browser and cache a V8 copy that can be |
| 180 // accessed efficiently. g_clock must be in the browser for selenium. |
| 181 var clock = window.g_clock + elapsedTime * window.g_timeMult; |
| 182 window.g_clock = clock; |
| 183 |
| 184 updateProjectionMatrix(); |
| 185 |
| 186 g_timeParam.value = clock * 4; |
| 187 } |
| 188 |
| 189 function unload() { |
| 190 if (g_client) { |
| 191 g_client.cleanup(); |
| 192 } |
| 193 } |
| 194 |
| 195 </script> |
| 196 </head> |
| 197 <body onload="init()" onunload="unload()"> |
| 198 <h1>Vertex Shader Animation Example</h1> |
| 199 <!-- Start of O3D plugin --> |
| 200 <div id="o3d" style="width: 100%; height: 80%"></div> |
| 201 <!-- End of O3D plugin --> |
| 202 </body> |
| 203 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2821003:
o3d-webgl: vertex shader and vertex animation demo (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/o3d/