diff options
| -rw-r--r-- | o3d/samples/MANIFEST | 3 | ||||
| -rw-r--r-- | o3d/samples/billboards.html | 265 | ||||
| -rw-r--r-- | o3d/samples/build.scons | 5 | ||||
| -rw-r--r-- | o3d/samples/o3djs/material.js | 2 | ||||
| -rw-r--r-- | o3d/samples/shaders/billboard.shader | 80 | ||||
| -rw-r--r-- | o3d/samples/shaders/green-blue-checker.shader | 81 | ||||
| -rw-r--r-- | o3d/samples/shaders/imposter.shader | 89 | ||||
| -rw-r--r-- | o3d/tests/selenium/sample_list.txt | 1 |
8 files changed, 523 insertions, 3 deletions
diff --git a/o3d/samples/MANIFEST b/o3d/samples/MANIFEST index 65bda21..6eec245 100644 --- a/o3d/samples/MANIFEST +++ b/o3d/samples/MANIFEST @@ -263,10 +263,13 @@ pingpong/instructions.gif pingpong/logo.gif pingpong/o3dPingPong.html shaders/README +shaders/billboard.shader shaders/binormal.shader shaders/bump.shader shaders/checker.shader shaders/diffuse.shader +shaders/green-blue-checker.shader +shaders/imposter.shader shaders/one-channel-texture.shader shaders/normal.shader shaders/phong-vertex-anim.shader diff --git a/o3d/samples/billboards.html b/o3d/samples/billboards.html new file mode 100644 index 0000000..f6ce244 --- /dev/null +++ b/o3d/samples/billboards.html @@ -0,0 +1,265 @@ +<!-- +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. +--> + +<!-- +Billboard example. +--> +<!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> +Billboard Example +</title> +<!-- Include sample javascript library functions--> +<script type="text/javascript" src="o3djs/base.js"></script> + +<!-- Our javascript code --> +<script type="text/javascript"> +o3djs.require('o3djs.util'); +o3djs.require('o3djs.math'); +o3djs.require('o3djs.rendergraph'); +o3djs.require('o3djs.primitives'); +o3djs.require('o3djs.material'); +o3djs.require('o3djs.io'); +o3djs.require('o3djs.loader'); + +// Events +// init() once the page has finished loading. +// unload() when the page is unloaded. +window.onload = init; +window.onunload= unload; + +// global variables +var g_o3dElement; +var g_o3d; +var g_math; +var g_client; +var g_viewInfo; +var g_pack; +var g_root; +var g_globalParams; +var g_o3dElement; +var g_clock = 0; +var g_timeMult = 1; +var g_finished = false; // for selenium testing +var g_cameraRadius = 35; +var g_cameraSpeed = 0.3; +var g_randSeed = 0; +var g_textures = []; + +/** + * Returns a deterministic pseudorandom number bewteen 0 and 1 + * @return {number} a random number between 0 and 1 + */ +function pseudoRandom() { + var range = Math.pow(2, 32); + + return (g_randSeed = (134775813 * g_randSeed + 1) % range) / range; +} + +/** + * Creates the client area. + */ +function init() { + o3djs.util.makeClients(initStep2); +} + +/** + * Initializes O3D and creates one shape. + * @param {Array} clientElements Array of o3d object elements. + */ +function initStep2(clientElements) { + // Initializes global variables and libraries. + g_o3dElement = clientElements[0]; + g_o3d = g_o3dElement.o3d; + g_math = o3djs.math; + g_client = g_o3dElement.client; + + // Creates a pack to manage our resources/assets + g_pack = g_client.createPack(); + + g_root = g_pack.createObject('Transform'); + + g_viewInfo = o3djs.rendergraph.createBasicView( + g_pack, + g_root, + g_client.renderGraphRoot); + + g_viewInfo.drawContext.projection = g_math.matrix4.perspective( + g_math.degToRad(45), // field of view. + g_client.width / g_client.height, // aspect ratio + 0.1, // Near plane. + 5000); // Far plane. + + var loader = o3djs.loader.createLoader(initStep3); + loadTexture(loader, 'purple-flower.png'); + loadTexture(loader, 'pillar.png'); + loader.finish(); +} + +function loadTexture(loader, filename) { + loader.loadTexture(g_pack, + o3djs.util.getAbsoluteURI('assets/' + filename), + rememberTexture); + + function rememberTexture(texture, exception) { + if (exception) { + alert(exception); + } else { + g_textures[filename] = texture; + } + } +} + +function initStep3() { + var redMaterial = o3djs.material.createBasicMaterial( + g_pack, + g_viewInfo, + [0.2, 1, 0.2, 1]); // green + + var checkerMaterial = o3djs.material.createMaterialFromFile( + g_pack, 'shaders/green-blue-checker.shader', + g_viewInfo.performanceDrawList); + + var billboardMaterial = o3djs.material.createMaterialFromFile( + g_pack, 'shaders/billboard.shader', g_viewInfo.zOrderedDrawList); + + var imposterMaterial = o3djs.material.createMaterialFromFile( + g_pack, 'shaders/imposter.shader', g_viewInfo.zOrderedDrawList); + + // Set the textures. + // We don't need to create the params or the samplers because + // createMaterialFromFile has already handled that for us. + var sampler = billboardMaterial.getParam('texSampler0').value; + sampler.texture = g_textures['purple-flower.png']; + sampler.addressModeU = g_o3d.Sampler.CLAMP; + sampler.addressModeV = g_o3d.Sampler.CLAMP; + + sampler = imposterMaterial.getParam('texSampler0').value; + sampler.texture = g_textures['pillar.png']; + sampler.addressModeU = g_o3d.Sampler.CLAMP; + sampler.addressModeV = g_o3d.Sampler.CLAMP; + + // Create and bind standard params so we can see the light parameters + // for the standard shaders globably. + g_globalParams = o3djs.material.createAndBindStandardParams(g_pack); + g_globalParams.lightWorldPos.value = [30, 60, 40]; + g_globalParams.lightColor.value = [1, 1, 1, 1]; + + // Create a ground plane. + var shape = o3djs.primitives.createPlane( + g_pack, checkerMaterial, 100, 100, 10, 10); + + // Put on a transform. + var transform = g_pack.createObject('Transform'); + transform.parent = g_root; + transform.addShape(shape); + + // Create a cylinder. + var cylinderShape = o3djs.primitives.createCylinder( + g_pack, redMaterial, 0.5, 5, 20, 1, + g_math.matrix4.translation([0, 2.5, 0])); + + // Create an XY plane for the billboard. + var purpleFlowerPlane = o3djs.primitives.createPlane( + g_pack, billboardMaterial, 5, 5, 1, 1, + g_math.matrix4.rotationX(g_math.degToRad(90))); + + // Create an XY plane for the imposter. + var pillarPlane = o3djs.primitives.createPlane( + g_pack, imposterMaterial, 5, 5, 1, 1, + g_math.matrix4.rotationX(g_math.degToRad(90))); + + // Create 30 cylinders and put a billboard or imposter on top of each one. + for (var ii = 0; ii < 30; ++ii) { + transform = g_pack.createObject('Transform'); + transform.parent = g_root; + transform.translate((pseudoRandom() - 0.5) * 90, + 0, + (pseudoRandom() - 0.5) * 90); + transform.addShape(cylinderShape); + + var topTransform = g_pack.createObject('Transform'); + topTransform.parent = transform; + topTransform.translate(0, 7, 0); + if (ii % 4 > 1) { + topTransform.addShape(purpleFlowerPlane); + } else { + topTransform.addShape(pillarPlane); + } + } + + // Setup a render callback for per frame processing. + g_client.setRenderCallback(onRender); + + g_finished = true; // for selenium testing. +} + +/** + * Called every frame. + * @param {!o3d.RenderEvent} renderEvent Rendering Information. + */ +function onRender(renderEvent) { + var elapsedTime = renderEvent.elapsedTime; + g_clock += elapsedTime * g_timeMult; + + var eye = [ + Math.sin(g_clock * g_cameraSpeed) * g_cameraRadius, + 20 + 10 * Math.sin(g_clock * g_cameraSpeed * 4), + Math.cos(g_clock * g_cameraSpeed) * g_cameraRadius]; + + g_viewInfo.drawContext.view = g_math.matrix4.lookAt( + eye, + [0, 0, 0], // target + [0, 1, 0]); // up +}; + +/** + * Remove any callbacks so they don't get called after the page has unloaded. + */ +function unload() { + if (g_client) { + g_client.cleanup(); + } +} +</script> +</head> +<body> +<h1>Billboards</h1> +<div> +Flowers always face the camera.<br/> +Pillars rotate around Y toward the camera. +</div> +<div id="o3d" style="width: 800px; height: 600px;"></div> +</body> +</html> diff --git a/o3d/samples/build.scons b/o3d/samples/build.scons index 608b2ad..e98aed29 100644 --- a/o3d/samples/build.scons +++ b/o3d/samples/build.scons @@ -112,12 +112,13 @@ env.Append(BUILDERS = {'SplitSampleHTML' : sample_builder}) # These are the files we process for the interactive sampler. # TODO: We don't currently verify that these samples are included in # interactive_samples.js, which constructs the sampler, or that all the files -# in there are mentioned here. The build script should validate that the lists -# match, and should also run whenever interactive_samples.js changes. +# in there are mentioned here. The build script should parse the +# interactive_samples.js file instead of using this list. samples = [ '2d.html', 'animated-scene.html', 'animation.html', + 'billboards.html', 'canvas-texturedraw.html', 'canvas.html', 'convolution.html', diff --git a/o3d/samples/o3djs/material.js b/o3d/samples/o3djs/material.js index 8e0f00a..db1449d 100644 --- a/o3d/samples/o3djs/material.js +++ b/o3d/samples/o3djs/material.js @@ -350,7 +350,7 @@ o3djs.material.createMaterialFromFile = function(pack, url, drawList) { var material = pack.createObject('Material'); material.effect = effect; material.drawList = drawList; - effect.createUniformParameters(material); + o3djs.effect.createUniformParameters(pack, effect, material); return material; }; diff --git a/o3d/samples/shaders/billboard.shader b/o3d/samples/shaders/billboard.shader new file mode 100644 index 0000000..8402b78 --- /dev/null +++ b/o3d/samples/shaders/billboard.shader @@ -0,0 +1,80 @@ +/* + * 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 Billboard shader always faces the screen. It doesn't have any lighting. + +float4x4 worldView : WorldView; +float4x4 projection : Projection; + +sampler texSampler0; + +// input parameters for our vertex shader +struct VertexShaderInput { + float4 position : POSITION; + float2 texcoord : TEXCOORD; +}; + +// input parameters for our pixel shader +// also the output parameters for our vertex shader +struct PixelShaderInput { + float4 position : POSITION; + float2 texcoord : TEXCOORD; +}; + +/** + * Vertex Shader - vertex shader for phong illumination + */ +PixelShaderInput vertexShaderFunction(VertexShaderInput input) { + PixelShaderInput output; + + // Just add the world position of the transform to input position + // and then multiple by the projection. + output.position = mul(input.position + float4(worldView[3].xyz, 0), + projection); + + output.texcoord = input.texcoord; + return output; +} + +/** + * Pixel Shader + */ +float4 pixelShaderFunction(PixelShaderInput input): COLOR { + return tex2D(texSampler0, input.texcoord); +} + +// Here we tell our effect file *which* functions are +// our vertex and pixel shaders. + +// #o3d VertexShaderEntryPoint vertexShaderFunction +// #o3d PixelShaderEntryPoint pixelShaderFunction +// #o3d MatrixLoadOrder RowMajor + diff --git a/o3d/samples/shaders/green-blue-checker.shader b/o3d/samples/shaders/green-blue-checker.shader new file mode 100644 index 0000000..02b5296 --- /dev/null +++ b/o3d/samples/shaders/green-blue-checker.shader @@ -0,0 +1,81 @@ +// @@REWRITE(insert shader-copyright) +// The 4x4 world view projection matrix. +float4x4 worldViewProjection : WORLDVIEWPROJECTION; +float4x4 worldInverseTranspose : WORLDINVERSETRANSPOSE; +float4x4 world : WORLD; + +// light position +float3 lightWorldPos; +float3 lightColor; + +// input parameters for our vertex shader +struct VertexShaderInput { + float4 position : POSITION; + float4 normal : NORMAL; + float2 texcoord : TEXCOORD0; +}; + +// input parameters for our pixel shader +struct PixelShaderInput { + float4 position : POSITION; + float2 texcoord : TEXCOORD0; + float3 normal : TEXCOORD1; + float3 worldPosition : TEXCOORD2; +}; + +// function for getting the checker pattern +float4 checker(float2 uv) { + float checkSize = 10; + float fmodResult = fmod(floor(checkSize * uv.x) + floor(checkSize * uv.y), + 2.0); + return (fmodResult < 1) ? + float4(0.4, 0.5, 0.5, 1) : + float4(0.6, 0.8, 0.8, 1); +} + +/** + * Our vertex shader. In the vertex shader, we calculate the lighting. + * Then we'll combine it with our checker pattern input the pixel shader. + */ +PixelShaderInput vertexShaderFunction(VertexShaderInput input) { + PixelShaderInput output; + + // Transform position into clip space. + output.position = mul(input.position, worldViewProjection); + + // Transform normal into world space, where we can do lighting + // calculations even if the world transform contains scaling. + output.normal = mul(input.normal, worldInverseTranspose).xyz; + + // Calculate surface position in world space. + output.worldPosition = mul(input.position, world).xyz; + + output.texcoord = input.texcoord; + + return output; +} + +/** + * Our pixel shader. We take the lighting color we got from the vertex sahder + * and combine it with our checker pattern. We only need to use the x + * coordinate of our input.col because we gave it uniform color + */ +float4 pixelShaderFunction(PixelShaderInput input): COLOR { + float3 surfaceToLight = normalize(lightWorldPos - input.worldPosition); + + float3 worldNormal = normalize(input.normal); + + // Apply diffuse lighting in world space in case the world transform + // contains scaling. + float4 check = checker(input.texcoord); + float4 directionalIntensity = saturate(dot(worldNormal, surfaceToLight)); + float4 outColor = directionalIntensity * check; + return float4(outColor.rgb, 1); +} + +// Here we tell our effect file *which* functions are +// our vertex and pixel shaders. + +// #o3d VertexShaderEntryPoint vertexShaderFunction +// #o3d PixelShaderEntryPoint pixelShaderFunction +// #o3d MatrixLoadOrder RowMajor diff --git a/o3d/samples/shaders/imposter.shader b/o3d/samples/shaders/imposter.shader new file mode 100644 index 0000000..5540b31 --- /dev/null +++ b/o3d/samples/shaders/imposter.shader @@ -0,0 +1,89 @@ +/* + * 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 Imposter shader rotates around Y to face the camera. +// It doesn't have any lighting. + +float4x4 world : World; +float4x4 viewInverse : ViewInverse; +float4x4 viewProjection : ViewProjection; + +sampler texSampler0; + +// input parameters for our vertex shader +struct VertexShaderInput { + float4 position : POSITION; + float2 texcoord : TEXCOORD; +}; + +// input parameters for our pixel shader +// also the output parameters for our vertex shader +struct PixelShaderInput { + float4 position : POSITION; + float2 texcoord : TEXCOORD; +}; + +/** + * Vertex Shader - vertex shader for phong illumination + */ +PixelShaderInput vertexShaderFunction(VertexShaderInput input) { + PixelShaderInput output; + + float3 toCamera = normalize(viewInverse[3].xyz - world[3].xyz); + float3 yAxis = float3(0, 1, 0); + float3 xAxis = cross(yAxis, toCamera); + float3 zAxis = cross(xAxis, yAxis); + + float4x4 newWorld = float4x4( + float4(xAxis, 0), + float4(yAxis, 0), + float4(xAxis, 0), + world[3]); + output.position = mul(input.position, mul(newWorld, viewProjection)); + + output.texcoord = input.texcoord; + return output; +} + +/** + * Pixel Shader + */ +float4 pixelShaderFunction(PixelShaderInput input): COLOR { + return tex2D(texSampler0, input.texcoord); +} + +// Here we tell our effect file *which* functions are +// our vertex and pixel shaders. + +// #o3d VertexShaderEntryPoint vertexShaderFunction +// #o3d PixelShaderEntryPoint pixelShaderFunction +// #o3d MatrixLoadOrder RowMajor + diff --git a/o3d/tests/selenium/sample_list.txt b/o3d/tests/selenium/sample_list.txt index e6d4717..9f6958a 100644 --- a/o3d/tests/selenium/sample_list.txt +++ b/o3d/tests/selenium/sample_list.txt @@ -70,6 +70,7 @@ medium 2d screenshot pdiff_threshold(41200) medium animation large animated-scene screenshot timeout(45000) pdiff_threshold(200) large beachdemo/beachdemo screenshot timeout(120000) pdiff_threshold(1900) pdiff_threshold_mac(2100) downsample(1) except(*iexplore, *googlechrome) +medium billboards screenshot pdiff_threshold(1000) medium canvas screenshot pdiff_threshold(4700) pdiff_threshold_mac(14600) medium canvas-fonts screenshot pdiff_threshold(1100) pdiff_threshold_mac(21900) medium canvas-texturedraw |