OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2010, 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 Multiple Lights example. |
| 34 |
| 35 Shows a simple cube with one light on each corner. |
| 36 --> |
| 37 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 38 "http://www.w3.org/TR/html4/loose.dtd"> |
| 39 <html> |
| 40 <head> |
| 41 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 42 <title> |
| 43 Multiple Lights |
| 44 </title> |
| 45 <!-- Include sample javascript library functions--> |
| 46 <script type="text/javascript" src="../o3d-webgl/base.js"></script> |
| 47 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 48 |
| 49 <!-- Our javascript code --> |
| 50 <script type="text/javascript" id="o3dscript"> |
| 51 |
| 52 o3djs.base.o3d = o3d; |
| 53 |
| 54 o3djs.require('o3djs.webgl'); |
| 55 o3djs.require('o3djs.math'); |
| 56 o3djs.require('o3djs.rendergraph'); |
| 57 o3djs.require('o3djs.material'); |
| 58 o3djs.require('o3djs.primitives'); |
| 59 |
| 60 // Events |
| 61 // init() once the page has finished loading. |
| 62 // unload() when the page is unloaded. |
| 63 window.onload = init; |
| 64 window.onunload = unload; |
| 65 |
| 66 // global variables |
| 67 var g_o3d; |
| 68 var g_math; |
| 69 var g_client; |
| 70 var g_viewInfo; |
| 71 var g_pack; |
| 72 var g_transform = null; |
| 73 var g_finished = false; // for selenium testing. |
| 74 var g_clock = 0; |
| 75 var g_timeMult = 1; |
| 76 |
| 77 /** |
| 78 * Creates the client area. |
| 79 */ |
| 80 function init() { |
| 81 o3djs.webgl.makeClients(initStep2); |
| 82 } |
| 83 |
| 84 /** |
| 85 * Initializes O3D and creates one shape. |
| 86 * @param {Array} clientElements Array of o3d object elements. |
| 87 */ |
| 88 function initStep2(clientElements) { |
| 89 // Initializes global variables and libraries. |
| 90 var o3dElement = clientElements[0]; |
| 91 g_o3d = o3dElement.o3d; |
| 92 g_math = o3djs.math; |
| 93 g_client = o3dElement.client; |
| 94 |
| 95 // Creates a pack to manage our resources/assets |
| 96 g_pack = g_client.createPack(); |
| 97 |
| 98 // Create the render graph for a view. |
| 99 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 100 g_pack, |
| 101 g_client.root, |
| 102 g_client.renderGraphRoot); |
| 103 |
| 104 // Set our projection matrix, with a vertical field of view of 45 degrees |
| 105 // a near clipping plane of 0.1 and far clipping plane of 10000. |
| 106 g_viewInfo.drawContext.projection = g_math.matrix4.perspective( |
| 107 g_math.degToRad(45), |
| 108 g_client.width / g_client.height, |
| 109 0.1, |
| 110 10000); |
| 111 |
| 112 // Create a material. |
| 113 var material = g_pack.createObject('Material'); |
| 114 material.drawList = g_viewInfo.performanceDrawList; |
| 115 |
| 116 material.createParam('diffuse', 'ParamFloat4').value = [.5, .5, .5, 1]; |
| 117 |
| 118 // Create some suitable defaults for the material to save the user having |
| 119 // to know all this stuff right off the bat. |
| 120 material.createParam('emissive', 'ParamFloat4').value = [0, 0, 0, 1]; |
| 121 material.createParam('ambient', 'ParamFloat4').value = [0, 0, 0, 0]; |
| 122 material.createParam('specular', 'ParamFloat4').value = [1, 1, 1, 1]; |
| 123 material.createParam('shininess', 'ParamFloat').value = 10; |
| 124 material.createParam('specularFactor', 'ParamFloat').value = 1; |
| 125 o3djs.material.attachStandardEffect( |
| 126 g_pack, |
| 127 material, |
| 128 g_viewInfo, |
| 129 'blinn', |
| 130 {lights: 8}); |
| 131 var materialColorParamList = material.getParam('lightColorList'); |
| 132 var colorParamList = g_pack.createObject('ParamArray'); |
| 133 var materialLightPositionList = material.getParam('lightWorldPosList'); |
| 134 var lightPositionParamList = g_pack.createObject('ParamArray'); |
| 135 // Create a cylinder. |
| 136 var shape = o3djs.primitives.createCube( |
| 137 g_pack, |
| 138 material, |
| 139 150); |
| 140 |
| 141 g_transform = g_pack.createObject('Transform'); |
| 142 // Add the cylinder to the root transform. |
| 143 g_transform.addShape(shape); |
| 144 g_transform.parent = g_client.root; |
| 145 |
| 146 var colors = [ |
| 147 [0, 0, 0, 1], // null light |
| 148 [1, 0, 0, 1], |
| 149 [0, 0, 1, 1], |
| 150 [0, 1, 0, 1], |
| 151 [1, 1, 1, 1], |
| 152 [0, 1, 1, 1], |
| 153 [1, 1, 0, 1], |
| 154 [1, 0, 1, 1]]; |
| 155 var lightDist = 150; |
| 156 for (var i = 0; i < 8; i++) { |
| 157 colorParamList.createParam(i,'ParamFloat4').value = colors[i]; |
| 158 var position = [ |
| 159 (i&1)?lightDist:-lightDist, |
| 160 (i&2)?lightDist:-lightDist, |
| 161 (i&4)?lightDist:-lightDist |
| 162 ]; |
| 163 lightPositionParamList.createParam(i,'ParamFloat3').value = position; |
| 164 } |
| 165 materialLightPositionList.value = lightPositionParamList; |
| 166 materialColorParamList.value = colorParamList; |
| 167 // Setup an onrender callback for animation. |
| 168 g_client.setRenderCallback(onrender); |
| 169 |
| 170 g_finished = true; // for selenium testing. |
| 171 } |
| 172 |
| 173 /** |
| 174 * Called every frame. |
| 175 * @param {!o3d.RenderEvent} renderEvent Info for rendering. |
| 176 */ |
| 177 function onrender(renderEvent) { |
| 178 // Get the number of seconds since the last render. |
| 179 var elapsedTime = renderEvent.elapsedTime; |
| 180 g_clock += elapsedTime * g_timeMult; |
| 181 |
| 182 var x = Math.sin(g_clock * 0.3) * 400; |
| 183 var z = Math.cos(g_clock * 0.3) * 400; |
| 184 var y = Math.sin(g_clock * 0.7) * 200 + 100; |
| 185 |
| 186 // spin the camera. |
| 187 g_viewInfo.drawContext.view = g_math.matrix4.lookAt( |
| 188 [x, y, z], // eye |
| 189 [0, 0, 0], // target |
| 190 [0, 1, 0]); // up |
| 191 } |
| 192 |
| 193 /** |
| 194 * Removes any callbacks so they don't get called after the page has unloaded. |
| 195 */ |
| 196 function unload() { |
| 197 if (g_client) { |
| 198 g_client.cleanup(); |
| 199 } |
| 200 } |
| 201 </script> |
| 202 </head> |
| 203 <body> |
| 204 <h1>Multiple Lights</h1> |
| 205 <!-- Start of O3D plugin --> |
| 206 <div id="o3d" style="width: 600px; height: 400px;"></div> |
| 207 <!-- End of O3D plugin --> |
| 208 </body> |
| 209 </html> |
OLD | NEW |