summaryrefslogtreecommitdiffstats
path: root/o3d/samples/sobel.html
diff options
context:
space:
mode:
Diffstat (limited to 'o3d/samples/sobel.html')
-rw-r--r--o3d/samples/sobel.html342
1 files changed, 342 insertions, 0 deletions
diff --git a/o3d/samples/sobel.html b/o3d/samples/sobel.html
new file mode 100644
index 0000000..f325c48
--- /dev/null
+++ b/o3d/samples/sobel.html
@@ -0,0 +1,342 @@
+<!--
+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 Sobel edge-detect image processing shader,
+using render targets.
+-->
+<!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: Sobel Shader Sample
+</title>
+<!-- Include sample javascript library functions-->
+<script type="text/javascript" src="o3djs/base.js"></script>
+<script type="text/javascript">
+o3djs.require('o3djs.util');
+o3djs.require('o3djs.math');
+o3djs.require('o3djs.rendergraph');
+o3djs.require('o3djs.pack');
+o3djs.require('o3djs.camera');
+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, and prepares its elements for
+ * insertion into the render 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 who's 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 texture = 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 renderSurfaceSet = createRenderSurfaceSet(texture);
+
+ // Create the render graph for the teapot view, drawing the teapot into
+ // texture (via renderSurfaceSet).
+ var teapotViewInfo = o3djs.rendergraph.createBasicView(
+ g_pack,
+ g_teapotRoot,
+ renderSurfaceSet,
+ [1, 1, 1, 1]);
+
+ var renderNode = createSobelPass(texture, g_client.renderGraphRoot);
+
+ // 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);
+}
+
+function createSobelMaterial(viewInfo, kernelSize) {
+ var convFXString = document.getElementById('convFX').value;
+ 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, g_pack);
+
+ // 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 createSobelPass(srcTexture, renderGraphRoot) {
+ // Create a root Transform for the image processing scene.
+ var root = g_pack.createObject('Transform');
+
+ // Create a basic view for the image processing scene.
+ var viewInfo = o3djs.rendergraph.createBasicView(
+ g_pack,
+ root,
+ renderGraphRoot,
+ [1, 1, 1, 1]);
+
+ var material = createSobelMaterial(viewInfo);
+ var quadShape = o3djs.primitives.createPlane(g_pack,
+ material,
+ 2.0,
+ 2.0,
+ 1,
+ 1);
+
+ // Attach the quad to the image processing scene.
+ 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
+ // image processing scene.
+ o3djs.pack.preparePack(g_pack, viewInfo);
+
+ setSobelParameters(material, srcTexture);
+ return renderGraphRoot;
+}
+
+function setSobelParameters(material, texture) {
+ var imageParam = material.getParam('image');
+ 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 = [1.0 / texture.width, 1.0 / texture.height];
+ var paramArray = g_pack.createObject('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>Sobel Edge Detection Shader Example</h1>
+<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 worldViewProj : WorldViewProjection;
+sampler2D image;
+float2 imageIncrement;
+
+struct VertexShaderInput {
+ float4 position : POSITION;
+ float2 imageCoord : TEXCOORD0;
+};
+
+struct PixelShaderInput {
+ float4 position : POSITION;
+ float2 imageCoord : TEXCOORD0;
+};
+
+PixelShaderInput SobelVS(VertexShaderInput input) {
+ PixelShaderInput output;
+ output.position = mul(input.position, worldViewProj);
+ output.imageCoord = input.imageCoord;
+ return output;
+}
+
+float lum(float4 c) {
+ return dot(c.rgb, float3(0.3, 0.59, 0.11));
+}
+
+float4 SobelPS(PixelShaderInput input) : COLOR {
+ float2 imageCoord = input.imageCoord;
+ float t00 = lum(tex2D(image, imageCoord + imageIncrement * float2(-1, -1)));
+ float t10 = lum(tex2D(image, imageCoord + imageIncrement * float2( 0, -1)));
+ float t20 = lum(tex2D(image, imageCoord + imageIncrement * float2( 1, -1)));
+ float t01 = lum(tex2D(image, imageCoord + imageIncrement * float2(-1, 0)));
+ float t21 = lum(tex2D(image, imageCoord + imageIncrement * float2( 1, 0)));
+ float t02 = lum(tex2D(image, imageCoord + imageIncrement * float2(-1, 1)));
+ float t12 = lum(tex2D(image, imageCoord + imageIncrement * float2( 0, 1)));
+ float t22 = lum(tex2D(image, imageCoord + imageIncrement * float2( 1, 1)));
+ float2 grad;
+ grad.x = t00 + 2.0 * t01 + t02 - t20 - 2.0 * t21 - t22;
+ grad.y = t00 + 2.0 * t10 + t20 - t02 - 2.0 * t12 - t22;
+ float len = length(grad);
+ return float4(len, len, len, 1.0);
+}
+
+// #o3d VertexShaderEntryPoint SobelVS
+// #o3d PixelShaderEntryPoint SobelPS
+// #o3d MatrixLoadOrder RowMajor
+</textarea>
+</div>
+</body>
+
+</html>
generated by cgit v1.1 at 2025-02-13 17:48:10 +0000