summaryrefslogtreecommitdiffstats
path: root/o3d/samples/o3d-webgl-samples/convolution.html
diff options
context:
space:
mode:
Diffstat (limited to 'o3d/samples/o3d-webgl-samples/convolution.html')
-rw-r--r--o3d/samples/o3d-webgl-samples/convolution.html398
1 files changed, 398 insertions, 0 deletions
diff --git a/o3d/samples/o3d-webgl-samples/convolution.html b/o3d/samples/o3d-webgl-samples/convolution.html
new file mode 100644
index 0000000..bc09031
--- /dev/null
+++ b/o3d/samples/o3d-webgl-samples/convolution.html
@@ -0,0 +1,398 @@
+<!--
+Copyright 2009, Google Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+ * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+ * Neither the name of Google Inc. nor the names of its
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
+
+<!--
+This sample shows how to create a separable convolution shader using
+render targets. The kernel here is a Gaussian blur, but the same code
+could be used for any kernel.
+-->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>
+O3D: Convolution Shader Sample
+</title>
+<!-- Include sample javascript library functions-->
+<script type="text/javascript" src="../o3d-webgl/base.js"></script>
+<script type="text/javascript" src="../o3djs/base.js"></script>
+<script type="text/javascript" id="o3dscript">
+o3djs.base.o3d = o3d;
+o3djs.require('o3djs.webgl');
+o3djs.require('o3djs.util');
+o3djs.require('o3djs.math');
+o3djs.require('o3djs.camera');
+o3djs.require('o3djs.rendergraph');
+o3djs.require('o3djs.pack');
+o3djs.require('o3djs.primitives');
+o3djs.require('o3djs.scene');
+
+// Events
+// init() once the page has finished loading.
+window.onload = init;
+window.onunload = uninit;
+
+// constants.
+var RENDER_TARGET_WIDTH = 512;
+var RENDER_TARGET_HEIGHT = 512;
+
+// global variables
+var g_o3d;
+var g_client;
+var g_math;
+var g_pack;
+var g_teapotRoot;
+var g_renderGraphRoot;
+var g_clock = 0;
+var g_timeMult = 1;
+var g_finished = false; // for selenium testing.
+
+/**
+ * Loads a scene into the transform graph.
+ * @param {!o3d.Pack} pack Pack to load scene into.
+ * @param {string} fileName filename of the scene.
+ * @param {!o3d.Transform} parent parent node in the transform graph to
+ * which to load the scene into.
+ * @param {!o3djs.rendergraph.ViewInfo} viewInfo whose view and projection will
+ * be set from the scene after it's loaded.
+ */
+function loadScene(pack, fileName, parent, viewInfo) {
+ // Get our full path to the scene.
+ var scenePath = o3djs.util.getCurrentURI() + fileName;
+
+ // Load the scene given the full path, and call the callback function
+ // when its done loading.
+ o3djs.scene.loadScene(g_client, pack, parent, scenePath, callback);
+
+ /**
+ * Our callback is called once the scene has been loaded into memory from the
+ * web or locally.
+ * @param {!o3d.Pack} pack The pack that was passed in above.
+ * @param {!o3d.Transform} parent The parent that was passed in above.
+ * @param {*} exception null if loading succeeded.
+ */
+ function callback(pack, parent, exception) {
+ if (exception) {
+ alert('Could not load: ' + fileName + '\n' + exception);
+ return;
+ }
+ // Get a CameraInfo (an object with a view and projection matrix)
+ // using our javascript library function
+ var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras(
+ parent,
+ RENDER_TARGET_WIDTH,
+ RENDER_TARGET_HEIGHT);
+
+ // Copy the view and projection to the passed in viewInfo structure..
+ viewInfo.drawContext.view = cameraInfo.view;
+ viewInfo.drawContext.projection = cameraInfo.projection;
+
+ // Generate draw elements and setup material draw lists.
+ o3djs.pack.preparePack(pack, viewInfo);
+
+ g_finished = true; // for selenium testing.
+ }
+}
+
+/**
+ * Creates the client area.
+ */
+function init() {
+ o3djs.webgl.makeClients(initStep2);
+}
+
+/**
+ * Initializes O3D and loads the scene into the transform graph.
+ * @param {Array} clientElements Array of o3d object elements.
+ */
+function initStep2(clientElements) {
+ // Initializes global variables and libraries.
+ var o3d = clientElements[0];
+ g_o3d = o3d.o3d;
+ g_math = o3djs.math;
+ g_client = o3d.client;
+
+ // Creates a pack to manage our resources/assets.
+ g_pack = g_client.createPack();
+
+ // Create the texture required for the color render-target.
+ var texture1 = g_pack.createTexture2D(RENDER_TARGET_WIDTH,
+ RENDER_TARGET_HEIGHT,
+ g_o3d.Texture.XRGB8, 1, true);
+
+ // Create the texture required for the color render-target.
+ var texture2 = g_pack.createTexture2D(RENDER_TARGET_WIDTH,
+ RENDER_TARGET_HEIGHT,
+ g_o3d.Texture.XRGB8, 1, true);
+
+ g_teapotRoot = g_pack.createObject('Transform');
+
+ var renderGraphRoot = g_client.renderGraphRoot;
+
+ var xSigma = 4.0, ySigma = 4.0;
+ var xKernel = buildKernel(xSigma);
+ var yKernel = buildKernel(ySigma);
+
+ var renderSurfaceSet1 = createRenderSurfaceSet(texture1);
+ var renderSurfaceSet2 = createRenderSurfaceSet(texture2);
+
+ // Create the render graph for the teapot view, drawing the teapot into
+ // texture1 (via renderSurfaceSet1).
+ var teapotViewInfo = o3djs.rendergraph.createBasicView(
+ g_pack,
+ g_teapotRoot,
+ renderSurfaceSet1,
+ [1, 1, 1, 1]);
+
+ // Create a Y convolution pass that convolves texture1 into texture2, using
+ // the X kernel.
+ var renderNode1 = createConvolutionPass(texture1,
+ renderSurfaceSet2,
+ xKernel,
+ 1.0 / texture1.width,
+ 0.0);
+
+ // Create a Y convolution pass that convolves texture2 into the framebuffer,
+ // using the Y kernel.
+ var renderNode2 = createConvolutionPass(texture2,
+ g_client.renderGraphRoot,
+ yKernel,
+ 0.0,
+ 1.0 / texture2.height);
+
+ // Load the scene into the transform graph as a child g_teapotRoot
+ loadScene(g_pack, '../assets/teapot/scene.json', g_teapotRoot,
+ teapotViewInfo);
+
+ // Set a render callback.
+ g_client.setRenderCallback(onRender);
+}
+
+// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize
+// anyway.
+function gauss(x, sigma) {
+ return Math.exp(- (x * x) / (2.0 * sigma * sigma));
+}
+
+function buildKernel(sigma) {
+ var kMaxKernelSize = 25;
+ var kernelSize = 2 * Math.ceil(sigma * 3.0) + 1;
+ if (kernelSize > kMaxKernelSize) {
+ kernelSize = kMaxKernelSize;
+ }
+ var halfWidth = (kernelSize - 1) * 0.5
+ var values = new Array(kernelSize);
+ var sum = 0.0;
+ for (var i = 0; i < kernelSize; ++i) {
+ values[i] = gauss(i - halfWidth, sigma);
+ sum += values[i];
+ }
+ // Now normalize the kernel.
+ for (var i = 0; i < kernelSize; ++i) {
+ values[i] /= sum;
+ }
+ return values;
+}
+
+function createConvolutionMaterial(viewInfo, kernelSize) {
+ var convFXString = document.getElementById('convFX').value;
+ convFXString = convFXString.replace(/KERNEL_WIDTH/g, kernelSize);
+ var convEffect = g_pack.createObject('Effect');
+ convEffect.loadFromFXString(convFXString);
+
+ var convMaterial = g_pack.createObject('Material');
+ convMaterial.drawList = viewInfo.performanceDrawList;
+ convMaterial.effect = convEffect;
+ convEffect.createUniformParameters(convMaterial);
+ return convMaterial;
+}
+
+function createRenderSurfaceSet(texture) {
+ var renderSurface = texture.getRenderSurface(0);
+
+ // Create the depth-stencil buffer required when rendering this pass.
+ var depthSurface = g_pack.createDepthStencilSurface(RENDER_TARGET_WIDTH,
+ RENDER_TARGET_HEIGHT);
+
+ var renderSurfaceSet = g_pack.createObject('RenderSurfaceSet');
+ renderSurfaceSet.renderSurface = renderSurface;
+ renderSurfaceSet.renderDepthStencilSurface = depthSurface;
+ renderSurfaceSet.parent = g_client.renderGraphRoot;
+ return renderSurfaceSet;
+}
+
+function createConvolutionPass(srcTexture, renderGraphRoot, kernel, x, y) {
+ // Create a root Transform for the convolution scene.
+ var root = g_pack.createObject('Transform');
+
+ // Create a basic view for the convolution scene.
+ var viewInfo = o3djs.rendergraph.createBasicView(
+ g_pack,
+ root,
+ renderGraphRoot,
+ [1, 1, 1, 1]);
+
+ var material = createConvolutionMaterial(viewInfo, kernel.length);
+ var quadShape = o3djs.primitives.createPlane(g_pack,
+ material,
+ 2.0,
+ 2.0,
+ 1,
+ 1);
+
+ // Attach the quad to the root of the convolution graph.
+ root.addShape(quadShape);
+
+ // Rotate the view so we're looking at the XZ plane (where our quad is)
+ // Point the camera along the -Y axis
+ var target = [0, -1, 0];
+ // Put the camera at the origin.
+ var eye = [0, 0, 0];
+ // Define the up-vector as +Z
+ var up = [0, 0, 1];
+ viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up);
+
+ // Create an orthographic projection.
+ viewInfo.drawContext.projection =
+ g_math.matrix4.orthographic(-1, 1, -1, 1, -1, 1);
+
+ // Generate draw elements and setup material draw lists for the
+ // convolution scene.
+ o3djs.pack.preparePack(g_pack, viewInfo);
+
+ setConvolutionParameters(material, srcTexture, kernel, kernel.length, x, y);
+ return renderGraphRoot;
+}
+
+function setConvolutionParameters(material, texture, kernel, kernelSize,
+ xIncrement, yIncrement) {
+ var imageParam = material.getParam('image');
+ var kernelParam = material.getParam('kernel');
+ var imageIncrement = material.getParam('imageIncrement');
+ var sampler = g_pack.createObject('Sampler');
+ sampler.texture = texture;
+ sampler.addressModeU = g_o3d.Sampler.CLAMP;
+ sampler.addressModeV = g_o3d.Sampler.CLAMP;
+ sampler.minFilter = g_o3d.Sampler.POINT;
+ sampler.magFilter = g_o3d.Sampler.POINT;
+ sampler.mipFilter = g_o3d.Sampler.NONE;
+ imageParam.value = sampler;
+ imageIncrement.value = [xIncrement, yIncrement];
+ var paramArray = g_pack.createObject('ParamArray');
+ var halfWidth = (kernelSize - 1) * 0.5;
+ for (var i = 0; i < kernelSize; ++i) {
+ var element = paramArray.createParam(i, 'ParamFloat');
+ element.value = kernel[i];
+ }
+ kernelParam.value = paramArray;
+}
+
+/**
+ * Called every frame.
+ * @param {o3d.RenderEvent} renderEvent Rendering Information.
+ */
+function onRender(renderEvent) {
+ var elapsedTime = renderEvent.elapsedTime;
+ g_clock += elapsedTime * g_timeMult;
+
+ g_teapotRoot.identity();
+ g_teapotRoot.rotateX(g_clock);
+ g_teapotRoot.rotateY(g_clock * 1.3);
+}
+
+/**
+ * Cleanup before exiting.
+ */
+function uninit() {
+ if (g_client) {
+ g_client.cleanup();
+ }
+}
+</script>
+</head>
+<body>
+<h1>Convolution Shader Example</h1>
+<p>This sample shows how to do 2D image processing using render targets. This
+sample uses a convolution shader to do a 2D Gaussian blur, but the
+same code could be used for any separable convolution kernel.</p>
+<br/>
+<!-- Start of O3D plugin -->
+<div id="o3d" style="width: 512px; height: 512px;"></div>
+<!-- End of O3D plugin -->
+<!--
+ We embed the code for our effect inside this hidden textarea.
+ Effects contain the functions that define
+ the vertex and pixel shaders used by our shape.
+-->
+<!-- Don't render the textarea -->
+<div style="display:none">
+<textarea id="convFX" name="convFX" cols="80" rows="20">
+uniform mat4 worldViewProjection;
+uniform vec2 imageIncrement;
+
+attribute vec4 position;
+attribute vec2 texCoord0;
+
+varying vec2 v_imageCoord;
+
+void main() {
+ gl_Position = worldViewProjection * position;
+
+ // Offset image coords by half of kernel width, in image texels
+ v_imageCoord = texCoord0 -
+ (float(KERNEL_WIDTH - 1) / 2.0) * imageIncrement;
+}
+
+// #o3d SplitMarker
+
+uniform sampler2D image;
+uniform float kernel[ KERNEL_WIDTH ];
+uniform vec2 imageIncrement;
+
+varying vec2 v_imageCoord;
+
+void main() {
+ vec2 imageCoordTmp = v_imageCoord;
+ vec4 sum = vec4(0.0, 0.0, 0.0, 0.0);
+ for (int i = 0; i < KERNEL_WIDTH; ++i) {
+ sum += texture2D(image, imageCoordTmp) * kernel[i];
+ imageCoordTmp += imageIncrement;
+ }
+ gl_FragColor = sum;
+}
+
+// #o3d MatrixLoadOrder RowMajor
+</textarea>
+</div>
+</body>
+
+</html>
generated by cgit v1.1 at 2025-01-31 01:35:29 +0000