summaryrefslogtreecommitdiffstats
path: root/o3d/samples/convolution.html
diff options
context:
space:
mode:
Diffstat (limited to 'o3d/samples/convolution.html')
-rw-r--r--o3d/samples/convolution.html397
1 files changed, 0 insertions, 397 deletions
diff --git a/o3d/samples/convolution.html b/o3d/samples/convolution.html
deleted file mode 100644
index cada227..0000000
--- a/o3d/samples/convolution.html
+++ /dev/null
@@ -1,397 +0,0 @@
-<!--
-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="o3djs/base.js"></script>
-<script type="text/javascript" id="o3dscript">
-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.util.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.o3dtgz', 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">
-float4x4 worldViewProjection : WorldViewProjection;
-sampler2D image;
-float kernel[KERNEL_WIDTH];
-float2 imageIncrement;
-
-struct VertexShaderInput {
- float4 position : POSITION;
- float2 imageCoord : TEXCOORD0;
-};
-
-struct PixelShaderInput {
- float4 position : POSITION;
- float2 imageCoord : TEXCOORD0;
-};
-
-PixelShaderInput ConvolutionVS(VertexShaderInput input) {
- PixelShaderInput output;
- output.position = mul(input.position, worldViewProjection);
-
- // Offset image coords by half of kernel width, in image texels
- output.imageCoord = input.imageCoord -
- ((KERNEL_WIDTH - 1) / 2) * imageIncrement;
-
- return output;
-}
-
-float4 ConvolutionPS(PixelShaderInput input) : COLOR {
- float2 imageCoord = input.imageCoord;
- float4 sum = float4(0.0, 0.0, 0.0, 0.0);
- for (int i = 0; i < KERNEL_WIDTH; ++i) {
- sum += tex2D(image, imageCoord) * kernel[i];
- imageCoord += imageIncrement;
- }
- return sum;
-}
-
-// #o3d VertexShaderEntryPoint ConvolutionVS
-// #o3d PixelShaderEntryPoint ConvolutionPS
-// #o3d MatrixLoadOrder RowMajor
-</textarea>
-</div>
-</body>
-
-</html>