| 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 shows how to create a separable convolution shader using |
| 34 render targets. The kernel here is a Gaussian blur, but the same code |
| 35 could be used for any kernel. |
| 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 O3D: Convolution Shader Sample |
| 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 <script type="text/javascript" id="o3dscript"> |
| 49 o3djs.base.o3d = o3d; |
| 50 o3djs.require('o3djs.webgl'); |
| 51 o3djs.require('o3djs.util'); |
| 52 o3djs.require('o3djs.math'); |
| 53 o3djs.require('o3djs.camera'); |
| 54 o3djs.require('o3djs.rendergraph'); |
| 55 o3djs.require('o3djs.pack'); |
| 56 o3djs.require('o3djs.primitives'); |
| 57 o3djs.require('o3djs.scene'); |
| 58 |
| 59 // Events |
| 60 // init() once the page has finished loading. |
| 61 window.onload = init; |
| 62 window.onunload = uninit; |
| 63 |
| 64 // constants. |
| 65 var RENDER_TARGET_WIDTH = 512; |
| 66 var RENDER_TARGET_HEIGHT = 512; |
| 67 |
| 68 // global variables |
| 69 var g_o3d; |
| 70 var g_client; |
| 71 var g_math; |
| 72 var g_pack; |
| 73 var g_teapotRoot; |
| 74 var g_renderGraphRoot; |
| 75 var g_clock = 0; |
| 76 var g_timeMult = 1; |
| 77 var g_finished = false; // for selenium testing. |
| 78 |
| 79 /** |
| 80 * Loads a scene into the transform graph. |
| 81 * @param {!o3d.Pack} pack Pack to load scene into. |
| 82 * @param {string} fileName filename of the scene. |
| 83 * @param {!o3d.Transform} parent parent node in the transform graph to |
| 84 * which to load the scene into. |
| 85 * @param {!o3djs.rendergraph.ViewInfo} viewInfo whose view and projection will |
| 86 * be set from the scene after it's loaded. |
| 87 */ |
| 88 function loadScene(pack, fileName, parent, viewInfo) { |
| 89 // Get our full path to the scene. |
| 90 var scenePath = o3djs.util.getCurrentURI() + fileName; |
| 91 |
| 92 // Load the scene given the full path, and call the callback function |
| 93 // when its done loading. |
| 94 o3djs.scene.loadScene(g_client, pack, parent, scenePath, callback); |
| 95 |
| 96 /** |
| 97 * Our callback is called once the scene has been loaded into memory from the |
| 98 * web or locally. |
| 99 * @param {!o3d.Pack} pack The pack that was passed in above. |
| 100 * @param {!o3d.Transform} parent The parent that was passed in above. |
| 101 * @param {*} exception null if loading succeeded. |
| 102 */ |
| 103 function callback(pack, parent, exception) { |
| 104 if (exception) { |
| 105 alert('Could not load: ' + fileName + '\n' + exception); |
| 106 return; |
| 107 } |
| 108 // Get a CameraInfo (an object with a view and projection matrix) |
| 109 // using our javascript library function |
| 110 var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras( |
| 111 parent, |
| 112 RENDER_TARGET_WIDTH, |
| 113 RENDER_TARGET_HEIGHT); |
| 114 |
| 115 // Copy the view and projection to the passed in viewInfo structure.. |
| 116 viewInfo.drawContext.view = cameraInfo.view; |
| 117 viewInfo.drawContext.projection = cameraInfo.projection; |
| 118 |
| 119 // Generate draw elements and setup material draw lists. |
| 120 o3djs.pack.preparePack(pack, viewInfo); |
| 121 |
| 122 g_finished = true; // for selenium testing. |
| 123 } |
| 124 } |
| 125 |
| 126 /** |
| 127 * Creates the client area. |
| 128 */ |
| 129 function init() { |
| 130 o3djs.webgl.makeClients(initStep2); |
| 131 } |
| 132 |
| 133 /** |
| 134 * Initializes O3D and loads the scene into the transform graph. |
| 135 * @param {Array} clientElements Array of o3d object elements. |
| 136 */ |
| 137 function initStep2(clientElements) { |
| 138 // Initializes global variables and libraries. |
| 139 var o3d = clientElements[0]; |
| 140 g_o3d = o3d.o3d; |
| 141 g_math = o3djs.math; |
| 142 g_client = o3d.client; |
| 143 |
| 144 // Creates a pack to manage our resources/assets. |
| 145 g_pack = g_client.createPack(); |
| 146 |
| 147 // Create the texture required for the color render-target. |
| 148 var texture1 = g_pack.createTexture2D(RENDER_TARGET_WIDTH, |
| 149 RENDER_TARGET_HEIGHT, |
| 150 g_o3d.Texture.XRGB8, 1, true); |
| 151 |
| 152 // Create the texture required for the color render-target. |
| 153 var texture2 = g_pack.createTexture2D(RENDER_TARGET_WIDTH, |
| 154 RENDER_TARGET_HEIGHT, |
| 155 g_o3d.Texture.XRGB8, 1, true); |
| 156 |
| 157 g_teapotRoot = g_pack.createObject('Transform'); |
| 158 |
| 159 var renderGraphRoot = g_client.renderGraphRoot; |
| 160 |
| 161 var xSigma = 4.0, ySigma = 4.0; |
| 162 var xKernel = buildKernel(xSigma); |
| 163 var yKernel = buildKernel(ySigma); |
| 164 |
| 165 var renderSurfaceSet1 = createRenderSurfaceSet(texture1); |
| 166 var renderSurfaceSet2 = createRenderSurfaceSet(texture2); |
| 167 |
| 168 // Create the render graph for the teapot view, drawing the teapot into |
| 169 // texture1 (via renderSurfaceSet1). |
| 170 var teapotViewInfo = o3djs.rendergraph.createBasicView( |
| 171 g_pack, |
| 172 g_teapotRoot, |
| 173 renderSurfaceSet1, |
| 174 [1, 1, 1, 1]); |
| 175 |
| 176 // Create a Y convolution pass that convolves texture1 into texture2, using |
| 177 // the X kernel. |
| 178 var renderNode1 = createConvolutionPass(texture1, |
| 179 renderSurfaceSet2, |
| 180 xKernel, |
| 181 1.0 / texture1.width, |
| 182 0.0); |
| 183 |
| 184 // Create a Y convolution pass that convolves texture2 into the framebuffer, |
| 185 // using the Y kernel. |
| 186 var renderNode2 = createConvolutionPass(texture2, |
| 187 g_client.renderGraphRoot, |
| 188 yKernel, |
| 189 0.0, |
| 190 1.0 / texture2.height); |
| 191 |
| 192 // Load the scene into the transform graph as a child g_teapotRoot |
| 193 loadScene(g_pack, '../assets/teapot/scene.json', g_teapotRoot, |
| 194 teapotViewInfo); |
| 195 |
| 196 // Set a render callback. |
| 197 g_client.setRenderCallback(onRender); |
| 198 } |
| 199 |
| 200 // We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize |
| 201 // anyway. |
| 202 function gauss(x, sigma) { |
| 203 return Math.exp(- (x * x) / (2.0 * sigma * sigma)); |
| 204 } |
| 205 |
| 206 function buildKernel(sigma) { |
| 207 var kMaxKernelSize = 25; |
| 208 var kernelSize = 2 * Math.ceil(sigma * 3.0) + 1; |
| 209 if (kernelSize > kMaxKernelSize) { |
| 210 kernelSize = kMaxKernelSize; |
| 211 } |
| 212 var halfWidth = (kernelSize - 1) * 0.5 |
| 213 var values = new Array(kernelSize); |
| 214 var sum = 0.0; |
| 215 for (var i = 0; i < kernelSize; ++i) { |
| 216 values[i] = gauss(i - halfWidth, sigma); |
| 217 sum += values[i]; |
| 218 } |
| 219 // Now normalize the kernel. |
| 220 for (var i = 0; i < kernelSize; ++i) { |
| 221 values[i] /= sum; |
| 222 } |
| 223 return values; |
| 224 } |
| 225 |
| 226 function createConvolutionMaterial(viewInfo, kernelSize) { |
| 227 var convFXString = document.getElementById('convFX').value; |
| 228 convFXString = convFXString.replace(/KERNEL_WIDTH/g, kernelSize); |
| 229 var convEffect = g_pack.createObject('Effect'); |
| 230 convEffect.loadFromFXString(convFXString); |
| 231 |
| 232 var convMaterial = g_pack.createObject('Material'); |
| 233 convMaterial.drawList = viewInfo.performanceDrawList; |
| 234 convMaterial.effect = convEffect; |
| 235 convEffect.createUniformParameters(convMaterial); |
| 236 return convMaterial; |
| 237 } |
| 238 |
| 239 function createRenderSurfaceSet(texture) { |
| 240 var renderSurface = texture.getRenderSurface(0); |
| 241 |
| 242 // Create the depth-stencil buffer required when rendering this pass. |
| 243 var depthSurface = g_pack.createDepthStencilSurface(RENDER_TARGET_WIDTH, |
| 244 RENDER_TARGET_HEIGHT); |
| 245 |
| 246 var renderSurfaceSet = g_pack.createObject('RenderSurfaceSet'); |
| 247 renderSurfaceSet.renderSurface = renderSurface; |
| 248 renderSurfaceSet.renderDepthStencilSurface = depthSurface; |
| 249 renderSurfaceSet.parent = g_client.renderGraphRoot; |
| 250 return renderSurfaceSet; |
| 251 } |
| 252 |
| 253 function createConvolutionPass(srcTexture, renderGraphRoot, kernel, x, y) { |
| 254 // Create a root Transform for the convolution scene. |
| 255 var root = g_pack.createObject('Transform'); |
| 256 |
| 257 // Create a basic view for the convolution scene. |
| 258 var viewInfo = o3djs.rendergraph.createBasicView( |
| 259 g_pack, |
| 260 root, |
| 261 renderGraphRoot, |
| 262 [1, 1, 1, 1]); |
| 263 |
| 264 var material = createConvolutionMaterial(viewInfo, kernel.length); |
| 265 var quadShape = o3djs.primitives.createPlane(g_pack, |
| 266 material, |
| 267 2.0, |
| 268 2.0, |
| 269 1, |
| 270 1); |
| 271 |
| 272 // Attach the quad to the root of the convolution graph. |
| 273 root.addShape(quadShape); |
| 274 |
| 275 // Rotate the view so we're looking at the XZ plane (where our quad is) |
| 276 // Point the camera along the -Y axis |
| 277 var target = [0, -1, 0]; |
| 278 // Put the camera at the origin. |
| 279 var eye = [0, 0, 0]; |
| 280 // Define the up-vector as +Z |
| 281 var up = [0, 0, 1]; |
| 282 viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up); |
| 283 |
| 284 // Create an orthographic projection. |
| 285 viewInfo.drawContext.projection = |
| 286 g_math.matrix4.orthographic(-1, 1, -1, 1, -1, 1); |
| 287 |
| 288 // Generate draw elements and setup material draw lists for the |
| 289 // convolution scene. |
| 290 o3djs.pack.preparePack(g_pack, viewInfo); |
| 291 |
| 292 setConvolutionParameters(material, srcTexture, kernel, kernel.length, x, y); |
| 293 return renderGraphRoot; |
| 294 } |
| 295 |
| 296 function setConvolutionParameters(material, texture, kernel, kernelSize, |
| 297 xIncrement, yIncrement) { |
| 298 var imageParam = material.getParam('image'); |
| 299 var kernelParam = material.getParam('kernel'); |
| 300 var imageIncrement = material.getParam('imageIncrement'); |
| 301 var sampler = g_pack.createObject('Sampler'); |
| 302 sampler.texture = texture; |
| 303 sampler.addressModeU = g_o3d.Sampler.CLAMP; |
| 304 sampler.addressModeV = g_o3d.Sampler.CLAMP; |
| 305 sampler.minFilter = g_o3d.Sampler.POINT; |
| 306 sampler.magFilter = g_o3d.Sampler.POINT; |
| 307 sampler.mipFilter = g_o3d.Sampler.NONE; |
| 308 imageParam.value = sampler; |
| 309 imageIncrement.value = [xIncrement, yIncrement]; |
| 310 var paramArray = g_pack.createObject('ParamArray'); |
| 311 var halfWidth = (kernelSize - 1) * 0.5; |
| 312 for (var i = 0; i < kernelSize; ++i) { |
| 313 var element = paramArray.createParam(i, 'ParamFloat'); |
| 314 element.value = kernel[i]; |
| 315 } |
| 316 kernelParam.value = paramArray; |
| 317 } |
| 318 |
| 319 /** |
| 320 * Called every frame. |
| 321 * @param {o3d.RenderEvent} renderEvent Rendering Information. |
| 322 */ |
| 323 function onRender(renderEvent) { |
| 324 var elapsedTime = renderEvent.elapsedTime; |
| 325 g_clock += elapsedTime * g_timeMult; |
| 326 |
| 327 g_teapotRoot.identity(); |
| 328 g_teapotRoot.rotateX(g_clock); |
| 329 g_teapotRoot.rotateY(g_clock * 1.3); |
| 330 } |
| 331 |
| 332 /** |
| 333 * Cleanup before exiting. |
| 334 */ |
| 335 function uninit() { |
| 336 if (g_client) { |
| 337 g_client.cleanup(); |
| 338 } |
| 339 } |
| 340 </script> |
| 341 </head> |
| 342 <body> |
| 343 <h1>Convolution Shader Example</h1> |
| 344 <p>This sample shows how to do 2D image processing using render targets. This |
| 345 sample uses a convolution shader to do a 2D Gaussian blur, but the |
| 346 same code could be used for any separable convolution kernel.</p> |
| 347 <br/> |
| 348 <!-- Start of O3D plugin --> |
| 349 <div id="o3d" style="width: 512px; height: 512px;"></div> |
| 350 <!-- End of O3D plugin --> |
| 351 <!-- |
| 352 We embed the code for our effect inside this hidden textarea. |
| 353 Effects contain the functions that define |
| 354 the vertex and pixel shaders used by our shape. |
| 355 --> |
| 356 <!-- Don't render the textarea --> |
| 357 <div style="display:none"> |
| 358 <textarea id="convFX" name="convFX" cols="80" rows="20"> |
| 359 uniform mat4 worldViewProjection; |
| 360 uniform vec2 imageIncrement; |
| 361 |
| 362 attribute vec4 position; |
| 363 attribute vec2 texCoord0; |
| 364 |
| 365 varying vec2 v_imageCoord; |
| 366 |
| 367 void main() { |
| 368 gl_Position = worldViewProjection * position; |
| 369 |
| 370 // Offset image coords by half of kernel width, in image texels |
| 371 v_imageCoord = texCoord0 - |
| 372 (float(KERNEL_WIDTH - 1) / 2.0) * imageIncrement; |
| 373 } |
| 374 |
| 375 // #o3d SplitMarker |
| 376 |
| 377 uniform sampler2D image; |
| 378 uniform float kernel[ KERNEL_WIDTH ]; |
| 379 uniform vec2 imageIncrement; |
| 380 |
| 381 varying vec2 v_imageCoord; |
| 382 |
| 383 void main() { |
| 384 vec2 imageCoordTmp = v_imageCoord; |
| 385 vec4 sum = vec4(0.0, 0.0, 0.0, 0.0); |
| 386 for (int i = 0; i < KERNEL_WIDTH; ++i) { |
| 387 sum += texture2D(image, imageCoordTmp) * kernel[i]; |
| 388 imageCoordTmp += imageIncrement; |
| 389 } |
| 390 gl_FragColor = sum; |
| 391 } |
| 392 |
| 393 // #o3d MatrixLoadOrder RowMajor |
| 394 </textarea> |
| 395 </div> |
| 396 </body> |
| 397 |
| 398 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2803007:
o3d-webgl: convolution shader and error texture. (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/o3d/