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 This sample attempts to show what the error texture is, how to set it and |
| 34 how turning it off will generate helpful error information. |
| 35 --> |
| 36 <html> |
| 37 <head> |
| 38 <title>Error Texture</title> |
| 39 <script type="text/javascript" src="../o3d-webgl/base.js"></script> |
| 40 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 41 <script type="text/javascript" id="o3dscript"> |
| 42 o3djs.base.o3d = o3d; |
| 43 o3djs.require('o3djs.webgl'); |
| 44 o3djs.require('o3djs.math'); |
| 45 o3djs.require('o3djs.rendergraph'); |
| 46 o3djs.require('o3djs.primitives'); |
| 47 o3djs.require('o3djs.effect'); |
| 48 |
| 49 // Events |
| 50 // Run the init() once the page has finished loading. |
| 51 // and unload() when the page is unloaded. |
| 52 window.onload = init; |
| 53 window.onunload = unload; |
| 54 |
| 55 // global variables |
| 56 var g_o3d; |
| 57 var g_math; |
| 58 var g_client; |
| 59 var g_pack; |
| 60 var g_viewInfo; |
| 61 var g_texture; |
| 62 var g_errorMsgElement; |
| 63 |
| 64 /** |
| 65 * Creates the client area. |
| 66 */ |
| 67 function init() { |
| 68 o3djs.webgl.makeClients(initStep2); |
| 69 } |
| 70 |
| 71 /** |
| 72 * Initializes O3D, loads the effect, and sets up some quads. |
| 73 * @param {Array} clientElements Array of o3d object elements. |
| 74 */ |
| 75 function initStep2(clientElements) { |
| 76 // Initialize global variables and libraries. |
| 77 var o3dElement = clientElements[0]; |
| 78 g_o3d = o3dElement.o3d; |
| 79 g_math = o3djs.math; |
| 80 g_client = o3dElement.client; |
| 81 |
| 82 g_errorMsgElement = |
| 83 document.getElementById('errorMsg'); |
| 84 |
| 85 // Turn of the error callback that o3djs.base.init setup. |
| 86 g_client.clearErrorCallback(); |
| 87 |
| 88 // Let us render on demand. |
| 89 g_client.renderMode = g_o3d.Client.RENDERMODE_ON_DEMAND; |
| 90 |
| 91 // Create a pack to manage our resources/assets |
| 92 g_pack = g_client.createPack(); |
| 93 |
| 94 // Create the render graph for a view. |
| 95 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 96 g_pack, |
| 97 g_client.root, |
| 98 g_client.renderGraphRoot); |
| 99 |
| 100 var clientWidth = g_client.width; |
| 101 var clientHeight = g_client.height; |
| 102 g_viewInfo.drawContext.projection = g_math.matrix4.orthographic( |
| 103 -clientWidth * 0.5, |
| 104 clientWidth * 0.5, |
| 105 -clientHeight * 0.5, |
| 106 clientHeight * 0.5, |
| 107 0.001, |
| 108 1000); |
| 109 |
| 110 g_viewInfo.drawContext.view = g_math.matrix4.lookAt( |
| 111 [0, 500, 0], // eye |
| 112 [0, 0, 0], // target |
| 113 [0, 0, -1]); // up |
| 114 |
| 115 // Create and load the effect. |
| 116 var effect = g_pack.createObject('Effect'); |
| 117 o3djs.effect.loadEffect(effect, '../shaders/texture-only-glsl.shader'); |
| 118 |
| 119 // Create a Material for the effect. |
| 120 var myMaterial = g_pack.createObject('Material'); |
| 121 |
| 122 // Set the material's drawList |
| 123 myMaterial.drawList = g_viewInfo.zOrderedDrawList; |
| 124 |
| 125 // Apply our effect to this material. |
| 126 myMaterial.effect = effect; |
| 127 |
| 128 // Creates a quad using the effect. |
| 129 var shape = o3djs.primitives.createPlane(g_pack, |
| 130 myMaterial, |
| 131 1, |
| 132 1, |
| 133 1, |
| 134 1); |
| 135 |
| 136 var pixels = []; |
| 137 for (var y = 0; y < 32; ++y) { |
| 138 for (var x = 0; x < 32; ++x) { |
| 139 var offset = (y * 32 + x) * 3; // rgb |
| 140 var u = x / 32 * Math.PI * 0.5; |
| 141 var v = y / 32 * Math.PI * 0.5; |
| 142 pixels[offset + 0] = 0; // red |
| 143 pixels[offset + 1] = Math.floor(y / 8) % 2; // green |
| 144 pixels[offset + 2] = Math.floor(x / 8) % 2; // blue |
| 145 } |
| 146 } |
| 147 var texture = g_pack.createTexture2D(32, 32, g_o3d.Texture.XRGB8, 1, false); |
| 148 texture.set(0, pixels); |
| 149 |
| 150 // display the quad 4 times with situations |
| 151 // by overriding the sampler on each instance. |
| 152 for (var s = 0; s < 4; ++s) { |
| 153 // create a transform for an instance |
| 154 var transform = g_pack.createObject('Transform'); |
| 155 transform.translate((s - 1.5) * 140, 0, 0); |
| 156 transform.scale(128, 1, 128), |
| 157 transform.parent = g_client.root; |
| 158 transform.addShape(shape); |
| 159 |
| 160 // case 0: Correct Texture. |
| 161 // case 1: ParamSampler and Sampler but no Texture |
| 162 // case 2: ParamSampler but no Sampler, |
| 163 // case 3: No ParamSampler. |
| 164 if (s <= 2) { |
| 165 // Create a ParamSampler on the transform with the same name as in |
| 166 // the effect so this param will be used instead of the one on the |
| 167 // material. |
| 168 var samplerParam = transform.createParam('texSampler0', 'ParamSampler'); |
| 169 |
| 170 if (s <= 1) { |
| 171 var sampler = g_pack.createObject('Sampler'); |
| 172 sampler.name = "s2d"; |
| 173 samplerParam.value = sampler; |
| 174 sampler.addressModeU = g_o3d.Sampler.CLAMP; |
| 175 sampler.addressModeV = g_o3d.Sampler.CLAMP; |
| 176 if (s == 0) { |
| 177 sampler.texture = texture; |
| 178 } |
| 179 } |
| 180 } |
| 181 } |
| 182 |
| 183 g_client.setPostRenderCallback(onRender); |
| 184 |
| 185 // Render once now that things are setup. |
| 186 render(); |
| 187 } |
| 188 |
| 189 function setToUserTexture() { |
| 190 var pixels = []; |
| 191 for (var y = 0; y < 32; ++y) { |
| 192 for (var x = 0; x < 32; ++x) { |
| 193 var offset = (y * 32 + x) * 3; // rgb |
| 194 var u = x / 32 * Math.PI * 0.5; |
| 195 var v = y / 32 * Math.PI * 0.5; |
| 196 pixels[offset + 0] = Math.cos(u); // red |
| 197 pixels[offset + 1] = Math.sin(v); // green |
| 198 pixels[offset + 2] = Math.sin(u); // blue |
| 199 } |
| 200 } |
| 201 var texture = g_pack.createTexture2D(32, 32, g_o3d.Texture.XRGB8, 1, false); |
| 202 texture.set(0, pixels); |
| 203 |
| 204 g_client.setErrorTexture(texture); |
| 205 // Render once now that things are setup. |
| 206 render(); |
| 207 } |
| 208 |
| 209 function setToNoTexture() { |
| 210 g_client.setErrorTexture(null); |
| 211 render(); |
| 212 |
| 213 } |
| 214 |
| 215 function hide0() { |
| 216 var child = g_client.root.children[1]; |
| 217 child.visible = !child.visible; |
| 218 render(); |
| 219 } |
| 220 |
| 221 function hide1() { |
| 222 var child = g_client.root.children[2]; |
| 223 child.visible = !child.visible; |
| 224 render(); |
| 225 } |
| 226 |
| 227 function reportError(msg) { |
| 228 g_errorMsgElement.innerHTML = g_client.lastError; |
| 229 g_client.clearLastError(); |
| 230 g_client.clearErrorCallback(); |
| 231 } |
| 232 |
| 233 function render() { |
| 234 // Render once now that things are setup. |
| 235 g_client.setErrorCallback(reportError); |
| 236 g_client.render(); |
| 237 } |
| 238 |
| 239 function onRender() { |
| 240 } |
| 241 |
| 242 /** |
| 243 * Removes any callbacks so they don't get called after the page has unloaded. |
| 244 */ |
| 245 function unload() { |
| 246 g_client.cleanup(); |
| 247 } |
| 248 </script> |
| 249 </head> |
| 250 <body> |
| 251 <h1>Error Texture.</h1> |
| 252 <br/> |
| 253 Demonstrates how missing textures are handled. |
| 254 <div> |
| 255 <!-- Start of O3D plugin --> |
| 256 <div id="o3d" style="width: 800px; height: 600px;"></div> |
| 257 <!-- End of O3D plugin --> |
| 258 </div> |
| 259 <br/> |
| 260 <input type="button" value="User Texture" onClick="setToUserTexture()"/> |
| 261 <input type="button" value="No Texture" onClick="setToNoTexture()"/> |
| 262 <input type="button" value="hide 0" onClick="hide0()"/> |
| 263 <input type="button" value="hide 1" onClick="hide1()"/> |
| 264 <table><tr><td>Error: </td><td id="errorMsg">-</td></tr></table> |
| 265 </html> |
OLD | NEW |