| 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 Demo |
| 34 |
| 35 This sample uses a custom vertex shader to quickly adjust the positions and |
| 36 normals of many vertices in a plane to achieve a ripple effect without iterating |
| 37 through the vertices in javascript. |
| 38 --> |
| 39 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 40 "http://www.w3.org/TR/html4/loose.dtd"> |
| 41 <html> |
| 42 <head> |
| 43 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 44 <title> |
| 45 Vertex Shader |
| 46 </title> |
| 47 <script type="text/javascript" src="../o3d-webgl/base.js"></script> |
| 48 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 49 <script type="text/javascript" id="o3dscript"> |
| 50 o3djs.base.o3d = o3d; |
| 51 o3djs.require('o3djs.webgl'); |
| 52 o3djs.require('o3djs.util'); |
| 53 o3djs.require('o3djs.math'); |
| 54 o3djs.require('o3djs.rendergraph'); |
| 55 o3djs.require('o3djs.primitives'); |
| 56 o3djs.require('o3djs.effect'); |
| 57 |
| 58 // global variables |
| 59 var g_o3dElement; |
| 60 var g_client; |
| 61 var g_o3d; |
| 62 var g_math; |
| 63 var g_pack; |
| 64 var g_viewInfo; |
| 65 var g_clockParam; |
| 66 |
| 67 /** |
| 68 * Creates the client area. |
| 69 */ |
| 70 function init() { |
| 71 // These are here so that they are visible to both the browser (so |
| 72 // selenium sees them) and the embedded V8 engine. |
| 73 window.g_clock = 0; |
| 74 window.g_timeMult = 1; |
| 75 window.g_finished = false; // for selenium testing. |
| 76 |
| 77 // Comment out the line below to run the sample in the browser |
| 78 // JavaScript engine. This may be helpful for debugging. |
| 79 o3djs.util.setMainEngine(o3djs.util.Engine.V8); |
| 80 |
| 81 o3djs.webgl.makeClients(initStep2, 'LargeGeometry'); |
| 82 } |
| 83 |
| 84 |
| 85 /** |
| 86 * Initializes global variables, positions camera, creates the material, and |
| 87 * draws the plane. |
| 88 * @param {Array} clientElements Array of o3d object elements. |
| 89 */ |
| 90 function initStep2(clientElements) { |
| 91 // Init global variables. |
| 92 initGlobals(clientElements); |
| 93 |
| 94 // Set up the view and projection transformations. |
| 95 initContext(); |
| 96 |
| 97 // Add the shapes to the transform hierarchy. |
| 98 createPlane(); |
| 99 |
| 100 // Setup render callback. |
| 101 g_client.setRenderCallback(onRender); |
| 102 |
| 103 window.g_finished = true; // for selenium testing. |
| 104 } |
| 105 |
| 106 |
| 107 /** |
| 108 * Initializes global variables and libraries. |
| 109 * @param {Array} clientElements An array of o3d object elements assumed |
| 110 * to have one entry. |
| 111 */ |
| 112 function initGlobals(clientElements) { |
| 113 g_o3dElement = clientElements[0]; |
| 114 g_o3d = g_o3dElement.o3d; |
| 115 g_math = o3djs.math; |
| 116 |
| 117 // Set window.g_client as well. Otherwise when the sample runs in |
| 118 // V8, selenium won't be able to find this variable (it can only see |
| 119 // the browser environment). |
| 120 window.g_client = g_client = g_o3dElement.client; |
| 121 |
| 122 // Create a pack to manage the objects created. |
| 123 g_pack = g_client.createPack(); |
| 124 |
| 125 // Create the render graph for a view. |
| 126 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 127 g_pack, |
| 128 g_client.root, |
| 129 g_client.renderGraphRoot); |
| 130 } |
| 131 |
| 132 |
| 133 /** |
| 134 * Sets up reasonable view and projection matrices. |
| 135 */ |
| 136 function initContext() { |
| 137 // Set up a perspective transformation for the projection. |
| 138 g_viewInfo.drawContext.projection = g_math.matrix4.perspective( |
| 139 g_math.degToRad(30), // 30 degree frustum. |
| 140 g_client.width / g_client.height, // Aspect ratio. |
| 141 1, // Near plane. |
| 142 5000); // Far plane. |
| 143 |
| 144 // Set up our view transformation to look towards the world origin where the |
| 145 // cube is located. |
| 146 g_viewInfo.drawContext.view = g_math.matrix4.lookAt( |
| 147 [4, 4, 4], // eye |
| 148 [0, 0, 0], // target |
| 149 [0, 1, 0]); // up |
| 150 } |
| 151 |
| 152 |
| 153 /** |
| 154 * Creates an effect using the shaders in the textarea in the document, applies |
| 155 * the effect to a new material, binds the uniform parameters of the shader |
| 156 * to parameters of the material, and sets certain parameters: the light and |
| 157 * camera position. |
| 158 * @return {Material} The material. |
| 159 */ |
| 160 function createMaterial() { |
| 161 // Create a new, empty Material and Effect object. |
| 162 var material = g_pack.createObject('Material'); |
| 163 var effect = g_pack.createObject('Effect'); |
| 164 |
| 165 // Load shader string from document. |
| 166 var shaderString = document.getElementById('effect').value; |
| 167 effect.loadFromFXString(shaderString); |
| 168 |
| 169 // Apply the effect to this material. |
| 170 material.effect = effect; |
| 171 |
| 172 // Bind uniform parameters declared in shader to parameters of material. |
| 173 effect.createUniformParameters(material); |
| 174 |
| 175 // Set the material's drawList. |
| 176 material.drawList = g_viewInfo.performanceDrawList; |
| 177 |
| 178 // Set light and camera positions for the pixel shader. |
| 179 material.getParam('lightWorldPos').value = [3, 10, 0]; |
| 180 material.getParam('cameraWorldPos').value = [1, 3, 12]; |
| 181 |
| 182 // Look up clock param. |
| 183 g_clockParam = material.getParam('clock'); |
| 184 |
| 185 return material; |
| 186 } |
| 187 |
| 188 |
| 189 /** |
| 190 * Creates the plane using the primitives utility library, and adds it to the |
| 191 * transform graph at the root node. |
| 192 */ |
| 193 function createPlane() { |
| 194 // This will create a plane subdivided into 80,000 triangles. |
| 195 var plane = o3djs.primitives.createPlane( |
| 196 g_pack, createMaterial(), 4, 4, 200, 200); |
| 197 |
| 198 // Add the shape to the transform hierarchy. |
| 199 g_client.root.addShape(plane); |
| 200 } |
| 201 |
| 202 |
| 203 /** |
| 204 * Updates the clock for the animation. |
| 205 * @param {!o3d.RenderEvent} renderEvent Rendering Information. |
| 206 */ |
| 207 function onRender(renderEvent) { |
| 208 var elapsedTime = renderEvent.elapsedTime; |
| 209 |
| 210 // Update g_clock in the browser and cache a V8 copy that can be |
| 211 // accessed efficiently. g_clock must be in the browser for selenium. |
| 212 var clock = window.g_clock + elapsedTime * window.g_timeMult; |
| 213 window.g_clock = clock; |
| 214 |
| 215 g_clockParam.value = clock; |
| 216 } |
| 217 |
| 218 |
| 219 /** |
| 220 * Cleanup before exiting. |
| 221 */ |
| 222 function unload() { |
| 223 if (g_client) { |
| 224 g_client.cleanup(); |
| 225 } |
| 226 } |
| 227 </script> |
| 228 </head> |
| 229 <body onload="init()" onunload="unload()"> |
| 230 <h1>Vertex Shader</h1> |
| 231 This sample uses a custom vertex shader to quickly adjust the positions and |
| 232 normals of many vertices in a plane to achieve a ripple effect without iterating |
| 233 through the vertices in javascript. |
| 234 <br/> |
| 235 <!-- Start of O3D plugin --> |
| 236 <div id="o3d" style="width: 600px; height: 600px;"></div> |
| 237 <!-- End of O3D plugin --> |
| 238 |
| 239 <!-- Text area to hold the shaders --> |
| 240 <textarea id="effect" name="effect" cols="80" rows="20" |
| 241 style="display: none;"> |
| 242 uniform mat4 world; |
| 243 uniform mat4 worldViewProjection; |
| 244 uniform mat4 worldInverseTranspose; |
| 245 |
| 246 uniform float clock; |
| 247 |
| 248 // Input parameters for the vertex shader. |
| 249 attribute vec4 position; |
| 250 attribute vec3 normal; |
| 251 attribute vec4 color; |
| 252 |
| 253 // Input parameters for the pixel shader (also the output parameters for the |
| 254 // vertex shader.) |
| 255 varying vec3 v_objectPosition; |
| 256 varying vec3 v_normal; |
| 257 varying vec4 v_color; |
| 258 |
| 259 /** |
| 260 * A function defining the shape of the wave. Takes a single vec2 as an |
| 261 * argument the entries of which are the x and z components of a point in the |
| 262 * plane. Returns the height of that point. |
| 263 * |
| 264 * @param {vec2} v The x and z components of the point in a single vec2. |
| 265 */ |
| 266 float wave(vec2 v) { |
| 267 float d = length(v); |
| 268 return 0.15 * sin(15.0 * d - 5.0 * clock) / (1.0 + d * d); |
| 269 } |
| 270 |
| 271 |
| 272 /** |
| 273 * vertexShaderFunction - The vertex shader perturbs the vertices of the plane |
| 274 * to achieve the ripples. Then it applies the worldViewProjection matrix. |
| 275 * |
| 276 * @param input.position Position vector of vertex in object coordinates. |
| 277 * @param input.normal Normal of vertex in object coordinates. |
| 278 * @param input.color Color of vertex. |
| 279 */ |
| 280 void main() { |
| 281 vec4 p = position; |
| 282 |
| 283 // The height of the point p is adjusted according to the wave function. |
| 284 p.y = wave(p.xz); |
| 285 |
| 286 // Step size used to approximate the partial derivatives of the wave function. |
| 287 float h = 0.001; |
| 288 |
| 289 // We take the derivative numerically so that the wave function can be |
| 290 // modified and the normal will still be correct. |
| 291 vec3 n = normalize(vec3( |
| 292 wave(vec2(p.x - h, p.z)) - wave(vec2(p.x + h, p.z)), 2.0 * h, |
| 293 wave(vec2(p.x, p.z - h)) - wave(vec2(p.x, p.z + h)))); |
| 294 |
| 295 gl_Position = worldViewProjection * p; |
| 296 v_objectPosition = (world * p).xyz; |
| 297 v_normal = (worldInverseTranspose * vec4(n, 1.0)).xyz; |
| 298 v_color = color; |
| 299 } |
| 300 |
| 301 // #o3d SplitMarker |
| 302 |
| 303 uniform float clock; |
| 304 uniform vec3 lightWorldPos; |
| 305 uniform vec3 cameraWorldPos; |
| 306 |
| 307 varying vec3 v_objectPosition; |
| 308 varying vec3 v_normal; |
| 309 varying vec4 v_color; |
| 310 |
| 311 /** |
| 312 * This pixel shader is meant to be minimal since the vertex shader is |
| 313 * the focus of the sample. |
| 314 */ |
| 315 void main() { |
| 316 vec3 p = v_objectPosition; // The point in question. |
| 317 vec3 l = normalize(lightWorldPos - p); // Unit-length vector toward light. |
| 318 vec3 n = normalize(v_normal); // Unit-length normal vector. |
| 319 vec3 v = normalize(cameraWorldPos - p); // Unit-length vector toward camera. |
| 320 vec3 r = normalize(-reflect(v, n)); // Reflection of v across n. |
| 321 |
| 322 vec3 q = (lightWorldPos - p); |
| 323 float ldotr = dot(r, l); |
| 324 float specular = clamp(ldotr, 0.0, 1.0) / |
| 325 (1.0 + length(q - length(q) * ldotr * r)); |
| 326 |
| 327 // Fixed color to be a blue-green; could use v_color instead below. |
| 328 gl_FragColor = vec4(0, 0.6, 0.7, 1) * dot(n, l) + specular; |
| 329 } |
| 330 |
| 331 // #o3d MatrixLoadOrder RowMajor |
| 332 </textarea> |
| 333 </body> |
| 334 </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/