o3d-webgl: adding shader test demo.

Review URL: http://codereview.chromium.org/2830003 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@51186 0039d316-1c4b-4281-b951-d872f2087c98
author: luchen@google.com <luchen@google.com@0039d316-1c4b-4281-b951-d872f2087c98> 2010-06-29 23:03:09 +0000
committer: luchen@google.com <luchen@google.com@0039d316-1c4b-4281-b951-d872f2087c98> 2010-06-29 23:03:09 +0000
commit: f621b79f64f6784d0c192ec17975292306af4275 (patch)
tree: 54b725da91ac36b65c5370033b29dd67b2fd36ae /o3d
parent: 08dc3d4c9c729c71ad05332c0aeb9fe4a48410a8 (diff)
download: chromium_src-f621b79f64f6784d0c192ec17975292306af4275.zip
chromium_src-f621b79f64f6784d0c192ec17975292306af4275.tar.gz
chromium_src-f621b79f64f6784d0c192ec17975292306af4275.tar.bz2
15 files changed, 1746 insertions, 1 deletions
diff --git a/o3d/samples/o3d-webgl-samples/shader-test.html b/o3d/samples/o3d-webgl-samples/shader-test.html
new file mode 100644
index 0000000..021c1c9
--- /dev/null
+++ b/o3d/samples/o3d-webgl-samples/shader-test.html
@@ -0,0 +1,407 @@
+<!--
+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.
+-->
+
+<!--
+O3D Tutorial
+
+In this tutorial, we load a scene file and then apply various shaders to it.
+-->
+<!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>
+Shader Test
+</title>
+<style type="text/css">
+  html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+</style>
+<!-- Include sample javascript library functions-->
+<script type="text/javascript" src="../o3d-webgl/base.js"></script>
+<script type="text/javascript" src="../o3djs/base.js"></script>
+
+<!-- Our javascript code -->
+<script type="text/javascript" id="o3dscript">
+o3djs.base.o3d = o3d;
+o3djs.require('o3djs.webgl');
+o3djs.require('o3djs.util');
+o3djs.require('o3djs.rendergraph');
+o3djs.require('o3djs.pack');
+o3djs.require('o3djs.math');
+o3djs.require('o3djs.camera');
+o3djs.require('o3djs.effect');
+o3djs.require('o3djs.loader');
+
+/**
+ * NOTE: O3D-WebGL is unable to load bump maps in .dds format. We omit the
+ * bump map examples here.
+ */
+
+// Events
+// init() once the page has finished loading.
+// unload() when the page is unloaded.
+window.onload = init;
+window.onunload = unload;
+
+// global variables
+var g_o3d;
+var g_client;
+var g_viewInfo;
+var g_o3dElement;
+var g_pack;
+var g_root;
+var g_math;
+var g_timeMult = 1;
+var g_finished = false;  // for selenium testing
+var g_currentTimeParam;
+var g_clock = 0;
+var g_shaderSelection = 0;
+var g_rotateOn = true;
+var g_o3dWidth;  // width of our client area
+var g_o3dHeight;  // height of our client area
+var g_shaders = [
+  {file: 'diffuse',               name: 'Diffuse'},
+  {file: 'checker',               name: 'Checker'},
+  {file: 'texture-only',          name: 'Texture'},
+  {file: 'texture-colormult',     name: 'Texture with Color Multiplier'},
+  {file: 'tangent',               name: 'Tangent'},
+  {file: 'binormal',              name: 'Binormal'},
+  {file: 'normal',                name: 'Normal'},
+  {file: 'solid-color',           name: 'Solid Color'},
+  {file: 'vertex-color',          name: 'Vertex Color'},
+  {file: 'phong-with-colormult',  name: 'Blinn-Phong with Color Multiplier'},
+  {file: 'toon',                  name: 'Toon'}
+  ];
+var g_effects = [];
+var g_bumpTextureSampler;
+var g_colorRampSampler;
+
+// Our view and projection matrices
+// The view matrix transforms objects from world space to view space.
+var g_viewMatrix;
+// The projection matrix projects objects from view space to the screen.
+var g_projMatrix;
+
+/**
+ * Returns the path of where the file is located
+ * with the trailing slash
+ */
+function getCurrentPath() {
+  var path = window.location.href;
+  var index = path.lastIndexOf('/');
+  return path.substring(0, index + 1);
+}
+
+/**
+ * Turn rotation on.
+ */
+function turnRotateOn() {
+  g_rotateOn = true;
+}
+
+/**
+ * Turn rotation off.
+ */
+function turnRotateOff() {
+  g_rotateOn = false;
+}
+
+/**
+ * This is the code to animate the rotation.
+ * @param {o3d.RenderEvent} render_event The render event.
+ */
+function onrender(render_event) {
+  var elapsedTime = render_event.elapsedTime * g_timeMult;
+  var newWidth = g_client.width;
+  var newHeight = g_client.height;
+  if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) {
+    g_o3dWidth = newWidth;
+    g_o3dHeight = newHeight;
+    setupCamera(g_pack, g_root);
+  }
+
+  g_clock += elapsedTime * (g_rotateOn ? 1 : 0);
+  g_root.identity();
+  g_root.rotateY(g_clock);
+
+  g_currentTimeParam.value = g_clock;
+}
+
+/**
+ * Sets the camera based on the imported file.
+ * @param {!o3d.Pack} pack Pack to create context in.
+ * @param {!o3d.Transform} root Root of tree to search for camera info.
+ */
+function setupCamera(pack, root) {
+  // Get a CameraInfo (an object with a view and projection matrix)
+  // using our javascript library function
+  var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras(root,
+                                                                g_o3dWidth,
+                                                                g_o3dHeight);
+
+  // Copy the view and projection to the draw context.
+  g_viewInfo.drawContext.view = cameraInfo.view;
+  g_viewInfo.drawContext.projection = cameraInfo.projection;
+}
+
+/**
+ * Our callback is called once the scene has been loaded into memory
+ * from the web or locally.
+ * @param {!o3d.Pack} pack Variable referring to the scene's pack.
+ * @param {!o3d.Transform} parent Transform parent.
+ * @param {*} exception null if loading succeeded.
+ */
+function sceneCallback(pack, parent, exception) {
+  if (exception) {
+    alert('Could not load scene\n' + exception);
+    return;
+  }
+  setupCamera(pack, parent);
+
+  // Start with diffuse as default
+  applyShader(pack, 0);
+
+  // Add some vertex colors because the teapot does not have any
+  // and yet the vertex color shader requires them.
+  var streamBanks = pack.getObjectsByClassName('o3d.StreamBank');
+  for (var ss = 0; ss < streamBanks.length; ++ss) {
+    var streamBank = streamBanks[ss];
+    if (!streamBank.getVertexStream(g_o3d.Stream.COLOR, 0)) {
+      var positionField = streamBank.getVertexStream(g_o3d.Stream.POSITION,
+                                                     0).field;
+      var buffer = positionField.buffer;
+      var numElements = buffer.numElements;
+      var colorField = buffer.createField('FloatField', 4);
+      var colors = [];
+      for (var nn = 0; nn < numElements; ++nn) {
+        colors.push((nn * 40 / numElements) % 1,
+                    (nn * 61 / numElements) % 1,
+                    (nn * 83 / numElements) % 1,
+                    1);
+      }
+      colorField.setAt(0, colors);
+      streamBank.setVertexStream(g_o3d.Stream.COLOR, 0, colorField, 0);
+    }
+  }
+
+  // Generate draw elements and setup material draw lists.
+  o3djs.pack.preparePack(pack, g_viewInfo);
+}
+
+/**
+ * Looks up a Param and if it exists sets its value.
+ * @param {!o3d.ParamObject} object object to look for param on.
+ * @param {string} name name of Param to look up.
+ * @param {*} value Value to set param.
+ */
+function setParam(object, paramName, value) {
+  var param = object.getParam(paramName);
+  if (param) {
+    param.value = value;
+  }
+}
+
+/**
+ * Apply the desired shader to our scene.
+ * @param {!o3d.Pack} pack Variable referring to the scene's pack.
+ * @param {number} shaderNumber Index into g_effects of which shader to use.
+ */
+function applyShader(pack, shaderNumber) {
+  var materials = pack.getObjectsByClassName('o3d.Material');
+  // Make the change to each material. For our teapot, there is only one
+  // material.
+  for (var m = 0; m < materials.length; m++) {
+    var material = materials[m];
+    g_effects[shaderNumber].createUniformParameters(material);
+    material.effect = g_effects[shaderNumber];
+
+    // Set our shader values
+    var colorParamValue = [0.8, 0.8, 0.8, 1];
+    var lightPosParamValue = [600, 600, 1000];
+
+    setParam(material, 'lightPos', lightPosParamValue);
+    setParam(material, 'lightWorldPos', lightPosParamValue);
+    setParam(material, 'cameraEye', [197.58, -63.5702, 0]);
+    setParam(material, 'color', colorParamValue);
+    setParam(material, 'colorMult', [.75, .75, 75., 1]);
+    setParam(material, 'useTexture', 0);
+    setParam(material, 'lightIntensity', [0.8, 0.8, 0.8, 1]);
+    setParam(material, 'ambientIntensity', [0.2, 0.2, 0.2, 1]);
+    setParam(material, 'emissive', [0, 0, 0, 1]);
+    setParam(material, 'ambient', [1, 1, 1, 1]);
+    setParam(material, 'diffuse', colorParamValue);
+    setParam(material, 'specular', [0.5, 0.5, 0.5, 1]);
+    setParam(material, 'shininess', 50);
+    setParam(material, 'AmbientSampler', g_bumpTextureSampler);
+    setParam(material, 'DiffuseSampler', g_bumpTextureSampler);
+    setParam(material, 'texSampler0', g_bumpTextureSampler);
+    setParam(material, 'colorRamp', g_colorRampSampler);
+
+    var timeParam = material.getParam('inputTime');
+    if (timeParam) {
+      timeParam.bind(g_currentTimeParam);
+    }
+  }
+}
+
+/**
+ * Creates our client area by looking for <div>s with an id that starts with
+ * "o3d".
+ */
+function init() {
+  o3djs.webgl.makeClients(initStep2);
+}
+
+/**
+ * Initializes O3D and loads the scene into the transform graph.
+ */
+function initStep2(clientElements) {
+  // Initialize global variables and libraries.
+  g_o3dElement = clientElements[0];
+  g_o3d = g_o3dElement.o3d;
+  g_math = o3djs.math;
+  g_client = g_o3dElement.client;
+
+  // Get the width and height of our client area. We will need this to create
+  // a projection matrix.
+  g_o3dWidth  = g_client.width;
+  g_o3dHeight = g_client.height;
+
+  // Creates a pack to manage our resources/assets
+  g_pack = g_client.createPack();
+
+  // Create the render graph for a view.
+  g_viewInfo = o3djs.rendergraph.createBasicView(
+      g_pack,
+      g_client.root,
+      g_client.renderGraphRoot);
+
+  // Creates a transform to put our data on.
+  g_root = g_pack.createObject('Transform');
+
+  // Connects our root to the client's root.
+  g_root.parent = g_client.root;
+
+  var paramObject = g_pack.createObject('ParamObject');
+  g_currentTimeParam = paramObject.createParam('timeParam','ParamFloat');
+
+  // Load effects and fill out options.
+  options = '<select id="shaderSelect" name="shaderSelect"' +
+            ' onChange="changeShader()">'
+  for(var s = 0; s < g_shaders.length; s++) {
+    g_effects[s] = g_pack.createObject('Effect');
+    var shaderString = '../shaders/' + g_shaders[s].file + '-glsl.shader';
+    o3djs.effect.loadEffect(g_effects[s], shaderString);
+    options += '<option value="' + s + '"' + (s == 0 ? ' selected' : '') +
+               '>' + g_shaders[s].name + '</option>';
+  }
+  options += '</select>';
+  document.getElementById('shaderDiv').innerHTML = options;
+
+  var loader = o3djs.loader.createLoader(initStep3);
+
+  var rampWidth = 64;
+  var texture = g_pack.createTexture2D(
+      rampWidth, 1, g_o3d.Texture.XRGB8, 1, false);
+  var pixels = [];
+  for (var ii = 0; ii < rampWidth; ++ii) {
+    var level = ii > rampWidth * 0.5 ? 1 : 0.3;
+    pixels.push(level, level, level);
+  }
+  texture.set(0, pixels);
+  g_colorRampSampler = g_pack.createObject('Sampler');
+  g_colorRampSampler.texture = texture;
+  g_colorRampSampler.addressModeU = g_o3d.Sampler.CLAMP;
+
+  loader.loadTexture(g_pack, '../assets/rock_texture.jpg',
+                     function(texture, exception) {
+                       if (exception) {
+                         alert(exception);
+                       } else {
+                         g_bumpTextureSampler = g_pack.createObject('Sampler');
+                         g_bumpTextureSampler.texture = texture;
+                         g_bumpTextureSampler.mipFilter = g_o3d.Sampler.LINEAR;
+                       }
+                     });
+  var scenePath = getCurrentPath() + '../assets/teapot/scene.json';
+  loader.loadScene(g_client, g_pack, g_root, scenePath, sceneCallback);
+  loader.finish();
+}
+
+function initStep3() {
+  o3djs.event.addEventListener(g_o3dElement, 'mousedown', turnRotateOff);
+  o3djs.event.addEventListener(g_o3dElement, 'mouseup', turnRotateOn);
+
+  g_rotateOn = true;
+
+  // Tell our example to rotate.
+  g_client.setRenderCallback(onrender);
+
+  g_finished = true;  // for selenium testing.
+}
+
+/**
+ * Swaps which shader we are using and applies it.
+ */
+function changeShader() {
+  var shaderNumber = document.getElementById("shaderSelect").value;
+  g_shaderSelection = parseFloat(shaderNumber);
+  applyShader(g_pack, g_shaderSelection);
+}
+
+/**
+ * Removes 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 id="h">Shader Test</h1>
+This example is useful for testing a shader or checking a scene. Clicking on the scene will temporarily stop rotation.
+<br/>
+<!-- Start of O3D plugin -->
+<div id="o3d" style="width: 100%; height: 80%;"></div>
+<!-- End of O3D plugin -->
+<p>
+<div id='shaderDiv'></div>
+</body>
+</html>
diff --git a/o3d/samples/o3d-webgl-samples/yuv2rgb.html b/o3d/samples/o3d-webgl-samples/yuv2rgb.html
new file mode 100644
index 0000000..64b4035
--- /dev/null
+++ b/o3d/samples/o3d-webgl-samples/yuv2rgb.html
@@ -0,0 +1,203 @@
+<!--
+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.
+-->
+
+<!--
+
+O3D YUV to RGB conversion Tutorial
+
+In this sample we convert from a Y'UV420p encoded video frame to an
+RGB texture using a shader to do the conversion on the video hardware.
+-->
+<!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>YUV to RGB Conversion in a shader.</title>
+<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.rendergraph');
+o3djs.require('o3djs.primitives');
+o3djs.require('o3djs.material');
+o3djs.require('o3djs.io');
+
+// Events
+// Run the init() once the page has finished loading.
+window.onload = init;
+
+// global variables
+var g_o3d;
+var g_math;
+var g_client;
+var g_pack;
+var g_viewInfo;
+var g_finished = false;  // for selenium testing
+
+/**
+ * Creates the client area and sets up the secondary init entry point.
+ */
+function init() {
+  o3djs.webgl.makeClients(initStep2);
+}
+
+/**
+ * Initializes O3D, loads the effect, and draws the quad that
+ * will display the texture.
+ *
+ * @param {Array} clientElements Array of o3d object elements.
+ */
+function initStep2(clientElements) {
+  // Initialize global variables and libraries.
+  var o3dElement = clientElements[0];
+  g_o3d = o3dElement.o3d;
+  g_math = o3djs.math;
+  g_client = o3dElement.client;
+
+  // Create a pack to manage our resources/assets
+  g_pack = g_client.createPack();
+
+  // Create the render graph for a view.
+  g_viewInfo = o3djs.rendergraph.createBasicView(
+      g_pack,
+      g_client.root,
+      g_client.renderGraphRoot);
+
+  // Setup an orthographic projection
+  // Offset by half a pixel to avoid roundoff errors.
+  g_viewInfo.drawContext.projection = g_math.matrix4.orthographic(
+    -g_client.width * 0.5 + 0.5,
+    g_client.width * 0.5 + 0.5,
+    -g_client.height * 0.5 - 0.5,
+    g_client.height * 0.5 - 0.5,
+    0.1,
+    1000);
+
+  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
+      [0, 500, 0],
+      [0, 0, 0],
+      [0, 0, -1]);
+
+  // Create a material.
+  var myMaterial = o3djs.material.createMaterialFromFile(
+      g_pack,
+      '../shaders/yuv2rgb-glsl.shader',
+      g_viewInfo.performanceDrawList);
+
+  // Creates a quad using the effect that has a 1:1 aspect ratio.
+  var myShape = o3djs.primitives.createPlane(g_pack,
+                                             myMaterial,
+                                             720,  // width
+                                             720,  // height
+                                             1,    // quads across
+                                             1);   // quads down
+
+
+  // Get the material's sampler parameter
+  var sampler_param = myMaterial.getParam('textureSampler');
+  var sampler = g_pack.createObject('Sampler');
+  sampler.addressModeU = g_o3d.Sampler.WRAP;
+  sampler.addressModeV = g_o3d.Sampler.WRAP;
+  sampler.magFilter = g_o3d.Sampler.POINT;
+  sampler.minFilter = g_o3d.Sampler.POINT;
+
+  // Be sure to turn off MIP-mapping, since that causes problems when
+  // jumping around the image the way we are.
+  sampler.mipFilter = g_o3d.Sampler.NONE;
+  sampler_param.value = sampler;
+
+  // Set the source image width
+  var width_param = myMaterial.getParam('imageWidth');
+  width_param.value = 720.0;
+
+  // Set the source image height
+  var height_param = myMaterial.getParam('imageHeight');
+  height_param.value = 486.0;
+
+  // Load our Y'UV420p texture, encoded as a greyscale PNG image. This
+  // happens asynchronously.
+  var url = o3djs.util.getCurrentURI() + '../assets/shaving_cream.png';
+  o3djs.io.loadTexture(g_pack, url, function(texture, exception) {
+    if (exception) {
+      alert(exception);
+      return;
+    }
+    sampler.texture = texture;
+    // adjust the scale of our transform to match the aspect ratio of
+    // the texture. Of course we could also have waited until now to build
+    // our quad and set its width and height to match instead of scaling
+    // here.
+    var textureWidth = texture.width;
+
+    // Account for additional data on bottom of image.
+    var textureHeight = texture.height * 2.0 / 3.0;
+    var hScale = 1;
+    var vScale = 1;
+    if (textureWidth > textureHeight) {
+      vScale = textureHeight / textureWidth;
+    } else if (textureHeight > textureWidth) {
+      hScale = textureWidth / textureHeight;
+    }
+    // We now attach our quad to the root of the transform graph.  We do
+    // this after the texture has loaded, otherwise we'd be attempting
+    // to display something invalid.
+    var root = g_client.root;
+    root.addShape(myShape);
+    root.scale(hScale, 1, vScale);
+
+    g_finished = true;  // for selenium testing.
+  });
+}
+</script>
+</head>
+<body>
+<h1>YUV to RGB Conversion</h1>
+<p>This how to do image colorspace and format conversion in a shader.</p>
+<p>Here is the YUV encoded image (treated as an 8-bit greyscale image):</p>
+<p><img src="../assets/shaving_cream.png" style="width: 720px; height: 729px"
+        alt="YUV encoded image"/></p>
+<p>Here is the original image, encoded as a JPEG image:</p>
+<p><img src="../assets/shaving_cream.jpg" style="width: 720px; height: 486px"
+        alt="Original JPG encoded image"/></p>
+<p>Here is the O3D plugin loading the YUV image, and converting it
+to RGB in the shader on the fly.</p>
+<p>Note: With O3D-WebGL, we cannot get an exact translation back to the original
+image due to WebGL behavior that does not occur in the plugin. See shader for
+more details.</p>
+<!-- Start of O3D plugin -->
+<div id="o3d" style="width: 720px; height: 486px"></div>
+<!-- End of O3D plugin -->
+</body>
+</html>
diff --git a/o3d/samples/o3d-webgl/buffer.js b/o3d/samples/o3d-webgl/buffer.js
index 52520d2..d07583f 100644
--- a/o3d/samples/o3d-webgl/buffer.js
+++ b/o3d/samples/o3d-webgl/buffer.js
@@ -68,6 +68,12 @@ o3d.Buffer.prototype.gl_buffer_ = 0;
  */
 o3d.Buffer.prototype.ArrayType = WebGLFloatArray;
 
+o3d.Buffer.prototype.__defineGetter__('numElements',
+    function() {
+      return (!this.array_) ? 0 : this.array_.length / this.totalComponents;
+    }
+);
+
 /**
  * Allocates memory for the data to be stored in the buffer based on
  * the types of fields set on the buffer.
@@ -112,11 +118,37 @@ o3d.Buffer.prototype.resize = function(numElements) {
  */
 o3d.Buffer.prototype.createField =
     function(fieldType, numComponents) {
+  // Check if array has already been allocated. If so, we need to reshuffle
+  // the data currently stored.
+  var alreadyAllocated = this.array_ && this.array_.length > 0;
+  var savedData = [];
+  var numElements = this.numElements;
+
+  // Make copies of the existing field data.
+  if (alreadyAllocated) {
+    for (var i = 0; i < this.fields_.length; i++) {
+      savedData[i] = this.fields_[i].getAt(0, numElements);
+    }
+  }
+
+  // Create the new field.
   var f = new o3d.Field();
   f.buffer = this;
   f.numComponents = numComponents;
   f.size = numComponents * (fieldType=='UByteNField' ? 1 : 4);
   this.fields_.push(f);
+
+  // Resize the buffer with the new field, and replace data.
+  if (alreadyAllocated) {
+    this.allocateElements(numElements);
+    for (var i = 0; i < this.fields_.length; i++) {
+      var fieldData = savedData[i];
+      if (fieldData) {
+        this.fields_[i].setAt(0, fieldData);
+      }
+    }
+  }
+
   return f;
 };
 
@@ -132,6 +164,8 @@ o3d.Buffer.prototype.createField =
  */
 o3d.Buffer.prototype.removeField =
     function(field) {
+  // TODO(luchen): Removing fields does not require a reshuffling, but may want
+  // to do it anyways to save space.
   var i = 0;
   for (var j = 0; j < this.fields_.length; ++j) {
     if (this.fields_[i] == field)
@@ -220,7 +254,7 @@ o3d.inherit('VertexBufferBase', 'Buffer');
  * Modifying this copy has no effect on the buffer.
  */
 o3d.VertexBufferBase.prototype.get = function() {
-  return this.getAtHelper_(0, this.array_.length / this.totalComponents,
+  return this.getAtHelper_(0, this.numElements,
       0, this.totalComponents);
 };
 
diff --git a/o3d/samples/shaders/binormal-glsl.shader b/o3d/samples/shaders/binormal-glsl.shader
new file mode 100644
index 0000000..58fbb27
--- /dev/null
+++ b/o3d/samples/shaders/binormal-glsl.shader
@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec3 binormal;
+
+// input parameters for our pixel shader
+// also the output parameters for our vertex shader
+varying vec3 v_binormal;
+
+void main() {
+  gl_Position = worldViewProjection * position;
+  v_binormal = binormal;
+}
+
+// #o3d SplitMarker
+
+varying vec3 v_binormal;
+
+void main() {
+  gl_FragColor = vec4(normalize(v_binormal) * 0.5 + vec3(0.5, 0.5, 0.5), 1.0);
+}
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/bump-glsl.shader b/o3d/samples/shaders/bump-glsl.shader
new file mode 100644
index 0000000..0144923
--- /dev/null
+++ b/o3d/samples/shaders/bump-glsl.shader
@@ -0,0 +1,140 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+uniform mat4 worldInverseTranspose;
+uniform mat4 world;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec4 normal;
+attribute vec4 tangent;
+attribute vec4 binormal;
+attribute vec2 texCoord0;
+
+// input parameters for our pixel shader
+// also the output parameters for our vertex shader
+varying vec2 v_texCoord;
+varying vec3 v_normal;
+varying vec3 v_binormal;
+varying vec3 v_tangent;
+varying vec3 v_worldPosition;
+
+void main() {
+
+  // Transform position into clip space.
+  gl_Position = worldViewProjection * position;
+
+  // Transform the tangent frame into world space.
+  v_tangent = (worldInverseTranspose * tangent).xyz;
+  v_binormal = (worldInverseTranspose * binormal).xyz;
+  v_normal = (worldInverseTranspose * normal).xyz;
+
+  // Pass through the texture coordinates.
+  v_texCoord = texCoord0;
+
+  // Calculate surface position in world space. Used for lighting.
+  v_worldPosition = (world * position).xyz;
+}
+
+// #o3d SplitMarker
+
+// whether to use texture
+uniform float useTexture;
+
+uniform mat4 viewInverse;
+
+uniform vec3 lightWorldPos;
+uniform vec4 lightIntensity;
+uniform vec4 ambientIntensity;
+uniform vec4 emissive;
+uniform vec4 ambient;
+uniform vec4 diffuse;
+uniform vec4 specular;
+uniform float shininess;
+
+uniform sampler2D AmbientSampler;
+uniform sampler2D DiffuseSampler;
+uniform sampler2D BumpSampler;
+
+varying vec2 v_texCoord;
+varying vec3 v_normal;
+varying vec3 v_binormal;
+varying vec3 v_tangent;
+varying vec3 v_worldPosition;
+
+vec4 lit(float l ,float h, float m) {
+  return vec4(1.0,
+              max(l, 0.0),
+              (l > 0.0) ? pow(max(0.0, h), m) : 0.0,
+              1.0);
+}
+
+void main() {
+  // Construct a transform from tangent space into world space.
+  mat3 tangentToWorld = mat3(v_tangent,
+                             v_binormal,
+                             v_normal);
+
+  // Read the tangent space normal from the normal map and remove the bias so
+  // they are in the range [-0.5,0.5]. There is no need to scale by 2 because
+  // the vector will soon be normalized.
+  vec3 tangentNormal = texture2D(BumpSampler, v_texCoord.xy).xyz -
+      vec3(0.5, 0.5, 0.5);
+
+  // Transform the normal into world space.
+  vec3 worldNormal =(tangentToWorld * tangentNormal);
+  worldNormal = normalize(worldNormal);
+
+  // Read the diffuse and ambient colors.
+  vec4 textureAmbient = vec4(1, 1, 1, 1);
+  vec4 textureDiffuse = vec4(1, 1, 1, 1);
+  if (useTexture == 1.0) {
+    textureAmbient = texture2D(AmbientSampler, v_texCoord.xy);
+    textureDiffuse = texture2D(DiffuseSampler, v_texCoord.xy);
+  }
+
+  // Apply lighting in world space in case the world transform contains scaling.
+  vec3 surfaceToLight = normalize(lightWorldPos.xyz -
+      v_worldPosition.xyz);
+  vec3 surfaceToView = normalize(viewInverse[3].xyz - v_worldPosition);
+  vec3 halfVector = normalize(surfaceToLight + surfaceToView);
+  vec4 litResult = lit(dot(worldNormal, surfaceToLight),
+                         dot(worldNormal, halfVector), shininess);
+  vec4 outColor = ambientIntensity * ambient * textureAmbient;
+  outColor += lightIntensity * (diffuse * textureDiffuse * litResult.y +
+      specular * litResult.z);
+  outColor += emissive;
+  gl_FragColor = vec4(outColor.rgb, diffuse.a * textureDiffuse.a);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/checker-glsl.shader b/o3d/samples/shaders/checker-glsl.shader
new file mode 100644
index 0000000..bb143e9
--- /dev/null
+++ b/o3d/samples/shaders/checker-glsl.shader
@@ -0,0 +1,107 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+uniform mat4 worldInverseTranspose;
+uniform mat4 world;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec4 normal;
+attribute vec2 texCoord0;
+
+// input parameters for our pixel shader
+varying vec2 v_texcoord;
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+/**
+ * Our vertex shader. In the vertex shader, we calculate the lighting.
+ * Then we'll combine it with our checker pattern input the pixel shader.
+ */
+void main() {
+  gl_Position = worldViewProjection * position;
+
+  // Transform normal into world space, where we can do lighting
+  // calculations even if the world transform contains scaling.
+  v_normal = (worldInverseTranspose * normal).xyz;
+
+  // Calculate surface position in world space.
+  v_worldPosition = (world * position).xyz;
+  v_texcoord = texCoord0;
+}
+
+// #o3d SplitMarker
+
+varying vec2 v_texcoord;
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+// Default and light position
+uniform vec4 ambientIntensity;
+uniform vec4 ambient;
+uniform vec4 diffuse;
+uniform vec3 lightWorldPos;
+uniform vec3 cameraEye;
+
+// function for getting the checker pattern
+vec4 checker(vec2 uv) {
+  float checkSize = 4.0;
+  float fmodResult = mod(floor(checkSize * uv.x) + floor(checkSize * uv.y),
+                          2.0);
+  if (fmodResult < 1.0) {
+    return vec4(0, 1, 1, 1);  // turquiose
+  } else {
+    return vec4(1, 0, 1, 1);  // magenta
+  }
+}
+
+/**
+ * Our pixel shader. We take the lighting color we got from the vertex shader
+ * 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
+ */
+void main() {
+  vec3 surfaceToLight = normalize(lightWorldPos - v_worldPosition);
+  vec3 worldNormal = normalize(v_normal);
+
+  // Apply diffuse lighting in world space in case the world transform
+  // contains scaling.
+  vec4 check = checker(v_texcoord);
+  float directionalIntensity = clamp(dot(worldNormal, surfaceToLight), 0.0,
+      1.0);
+  vec4 outColor = (ambientIntensity * ambient +
+      directionalIntensity * diffuse) * check;
+  gl_FragColor = vec4(outColor.rgb, diffuse.a);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/diffuse-glsl.shader b/o3d/samples/shaders/diffuse-glsl.shader
new file mode 100644
index 0000000..3ad9c23
--- /dev/null
+++ b/o3d/samples/shaders/diffuse-glsl.shader
@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+uniform mat4 worldInverseTranspose;
+uniform mat4 world;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec4 normal;
+
+// input parameters for our pixel shader
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+/**
+ * Our vertex shader.
+ */
+void main() {
+  // Transform position into clip space.
+  gl_Position = worldViewProjection * position;
+
+  // Transform normal into world space, where we can do lighting
+  // calculations even if the world transform contains scaling.
+  v_normal = (worldInverseTranspose * normal).xyz;
+
+  // Calculate surface position in world space.
+  v_worldPosition = (world * position).xyz;
+}
+
+// #o3d SplitMarker
+
+uniform vec4 ambientIntensity;
+uniform vec4 lightIntensity;
+uniform vec4 ambient;
+uniform vec4 diffuse;
+uniform vec3 lightWorldPos;
+
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+/**
+ * Our pixel shader.
+ */
+void main() {
+  vec3 surfaceToLight = normalize(lightWorldPos - v_worldPosition);
+
+  vec3 worldNormal = normalize(v_normal);
+
+  // Apply diffuse lighting in world space in case the world transform
+  // contains scaling.
+  vec4 directionalIntensity = lightIntensity *
+      clamp(dot(worldNormal, surfaceToLight), 0.0, 1.0);
+  vec4 outColor = ambientIntensity * ambient + directionalIntensity * diffuse;
+  gl_FragColor = vec4(outColor.rgb, diffuse.a);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/normal-glsl.shader b/o3d/samples/shaders/normal-glsl.shader
new file mode 100644
index 0000000..bb60a12
--- /dev/null
+++ b/o3d/samples/shaders/normal-glsl.shader
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec3 normal;
+
+// input parameters for our pixel shader
+// also the output parameters for our vertex shader
+varying vec3 v_normal;
+
+void main() {
+  gl_Position = worldViewProjection * position;
+  v_normal = normal;
+}
+
+// #o3d SplitMarker
+
+varying vec3 v_normal;
+
+void main() {
+  gl_FragColor = vec4(normalize(v_normal) * 0.5 + vec3(0.5, 0.5, 0.5), 1);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/phong-with-colormult-glsl.shader b/o3d/samples/shaders/phong-with-colormult-glsl.shader
new file mode 100644
index 0000000..5f6568a
--- /dev/null
+++ b/o3d/samples/shaders/phong-with-colormult-glsl.shader
@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+uniform mat4 worldViewProjection;
+uniform mat4 world;
+uniform mat4 worldInverseTranspose;
+
+attribute vec4 position;
+attribute vec4 normal;
+
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+void main() {
+  gl_Position = worldViewProjection * position;
+
+  vec3 worldPosition = (world * position).xyz;
+  v_normal = (worldInverseTranspose * normal).xyz;
+  v_worldPosition = worldPosition;
+}
+
+// #o3d SplitMarker
+
+uniform mat4 viewInverse;
+uniform vec3 lightWorldPos;
+uniform vec4 ambientIntensity;
+uniform vec4 lightIntensity;
+uniform vec4 emissive;
+uniform vec4 ambient;
+uniform vec4 colorMult;
+uniform vec4 diffuse;
+uniform vec4 specular;
+uniform float shininess;
+
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+vec4 lit(float l ,float h, float m) {
+  return vec4(1.0,
+              max(l, 0.0),
+              (l > 0.0) ? pow(max(0.0, h), m) : 0.0,
+              1.0);
+}
+
+void main() {
+  vec3 surfaceToLight = normalize(lightWorldPos - v_worldPosition);
+  vec3 worldNormal = normalize(v_normal);
+  vec3 surfaceToView = normalize(viewInverse[3].xyz - v_worldPosition);
+  vec3 halfVector = normalize(surfaceToLight + surfaceToView);
+  vec4 litResult = lit(dot(worldNormal, surfaceToLight),
+                         dot(worldNormal, halfVector), shininess);
+
+  vec4 outColor = ambientIntensity * ambient * colorMult;
+  outColor += lightIntensity * (diffuse * colorMult * litResult.y +
+      specular * litResult.z);
+  outColor += emissive;
+  gl_FragColor = vec4(outColor.rgb, diffuse.a * colorMult.a);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/solid-color-glsl.shader b/o3d/samples/shaders/solid-color-glsl.shader
new file mode 100644
index 0000000..63d6e96
--- /dev/null
+++ b/o3d/samples/shaders/solid-color-glsl.shader
@@ -0,0 +1,62 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+
+/**
+ * Vertex Shader
+ */
+void main() {
+  /**
+   * We transform each vertex by the world view projection matrix to bring
+   * it from world space to projection space.
+   *
+   * We return its color unchanged.
+   */
+  gl_Position = worldViewProjection * position;
+}
+
+// #o3d SplitMarker
+
+uniform vec4 color;
+
+/**
+ * Pixel Shader - pixel shader does nothing but return the color.
+ */
+void main() {
+  gl_FragColor = color;
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/tangent-glsl.shader b/o3d/samples/shaders/tangent-glsl.shader
new file mode 100644
index 0000000..ece63db
--- /dev/null
+++ b/o3d/samples/shaders/tangent-glsl.shader
@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec3 tangent;
+
+// input parameters for our pixel shader
+// also the output parameters for our vertex shader
+varying vec3 v_tangent;
+
+void main() {
+  gl_Position = worldViewProjection * position;
+  v_tangent = tangent;
+}
+
+// #o3d SplitMarker
+
+varying vec3 v_tangent;
+
+void main() {
+  gl_FragColor = vec4(normalize(v_tangent) * 0.5 + vec3(0.5, 0.5, 0.5), 1);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/texture-colormult-glsl.shader b/o3d/samples/shaders/texture-colormult-glsl.shader
new file mode 100644
index 0000000..eb2d2f1
--- /dev/null
+++ b/o3d/samples/shaders/texture-colormult-glsl.shader
@@ -0,0 +1,67 @@
+/*
+ * 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.
+ */
+
+uniform mat4 worldViewProjection;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec2 texCoord0;
+
+// input parameters for our pixel shader
+varying vec2 v_texCoord;
+
+/**
+ * Our vertex shader.
+ */
+void main() {
+  gl_Position = worldViewProjection * position;
+  v_texCoord = texCoord0;
+}
+
+// #o3d SplitMarker
+
+// This parameter lets us adjust the color and fade things in or out.
+uniform vec4 colorMult;
+
+// The texture sampler is used to access the texture bitmap in the fragment
+// shader.
+uniform sampler2D texSampler0;
+
+varying vec2 v_texCoord;
+
+/* Given the texture coordinates, our pixel shader grabs the corresponding
+ * color from the texture.
+ */
+void main() {
+  gl_FragColor = texture2D(texSampler0, v_texCoord) * colorMult;
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/texture-only-glsl.shader b/o3d/samples/shaders/texture-only-glsl.shader
new file mode 100644
index 0000000..ffea320
--- /dev/null
+++ b/o3d/samples/shaders/texture-only-glsl.shader
@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+uniform mat4 worldViewProjection;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec2 texCoord0;
+
+// input parameters for our pixel shader
+varying vec2 v_texCoord;
+
+/**
+ * Our vertex shader.
+ */
+void main() {
+  gl_Position = worldViewProjection * position;
+  v_texCoord = texCoord0;
+}
+
+// #o3d SplitMarker
+
+// The texture sampler is used to access the texture bitmap in the fragment
+// shader.
+uniform sampler2D texSampler0;
+
+varying vec2 v_texCoord;
+
+/* Given the texture coordinates, our pixel shader grabs the corresponding
+ * color from the texture.
+ */
+void main() {
+  gl_FragColor = texture2D(texSampler0, v_texCoord);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/toon-glsl.shader b/o3d/samples/shaders/toon-glsl.shader
new file mode 100644
index 0000000..69a521c
--- /dev/null
+++ b/o3d/samples/shaders/toon-glsl.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.
+ */
+
+// The 4x4 world view projection matrix.
+uniform mat4 worldViewProjection;
+uniform mat4 worldInverseTranspose;
+uniform mat4 world;
+
+// input parameters for our vertex shader
+attribute vec4 position;
+attribute vec4 normal;
+
+// input parameters for our pixel shader
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+/**
+ * Our vertex shader.
+ */
+void main() {
+  // Transform position into clip space.
+  gl_Position = worldViewProjection * position;
+
+  // calculations even if the world transform contains scaling.
+  v_normal = (worldInverseTranspose * normal).xyz;
+
+  // Calculate surface position in world space.
+  v_worldPosition = (world * position).xyz;
+}
+
+// #o3d SplitMarker
+
+varying vec3 v_normal;
+varying vec3 v_worldPosition;
+
+uniform vec4 ambientIntensity;
+uniform vec4 lightIntensity;
+uniform vec4 ambient;
+uniform vec4 diffuse;
+uniform vec3 lightWorldPos;
+
+uniform sampler2D colorRamp;
+
+/**
+ * Our pixel shader.
+ */
+void main() {
+  vec3 surfaceToLight = normalize(lightWorldPos - v_worldPosition);
+
+  vec3 worldNormal = normalize(v_normal);
+
+  // Apply diffuse lighting in world space in case the world transform
+  // contains scaling.
+  vec4 directionalIntensity = lightIntensity *
+      texture2D(colorRamp,
+                vec2(clamp(dot(worldNormal, surfaceToLight), 0.0, 1.0), 0.5));
+  vec4 outColor = ambientIntensity * ambient + directionalIntensity * diffuse;
+  gl_FragColor = vec4(outColor.rgb, diffuse.a);
+}
+
+// #o3d MatrixLoadOrder RowMajor
diff --git a/o3d/samples/shaders/yuv2rgb-glsl.shader b/o3d/samples/shaders/yuv2rgb-glsl.shader
new file mode 100644
index 0000000..8efcdb6
--- /dev/null
+++ b/o3d/samples/shaders/yuv2rgb-glsl.shader
@@ -0,0 +1,230 @@
+/*
+ * 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 shader takes a Y'UV420p image as a single greyscale plane, and
+// converts it to RGB by sampling the correct parts of the image, and
+// by converting the colorspace to RGB on the fly.
+
+// Projection matrix for the camera.
+uniform mat4 worldViewProjection;
+
+// These are the input/output parameters for our vertex shader
+attribute vec4 position;
+attribute vec2 texCoord0;
+
+// These are the input/output parameters for our pixel shader.
+varying vec2 v_texcoord;
+
+/**
+ * The vertex shader does nothing but returns the position of the
+ * vertex using the world view projection matrix.
+ */
+void main() {
+  gl_Position = worldViewProjection * position;
+  v_texcoord = texCoord0;
+}
+
+// #o3d SplitMarker
+
+// These represent the image dimensions of the SOURCE IMAGE (not the
+// Y'UV420p image).  This is the same as the dimensions of the Y'
+// portion of the Y'UV420p image.  They are set from JavaScript.
+uniform float imageWidth;
+uniform float imageHeight;
+
+// This is the texture sampler where the greyscale Y'UV420p image is
+// accessed.
+uniform sampler2D textureSampler;
+
+varying vec2 v_texcoord;
+
+/**
+ * This fetches an individual Y pixel from the image, given the current
+ * texture coordinates (which range from 0 to 1 on the source texture
+ * image).  They are mapped to the portion of the image that contains
+ * the Y component.
+ *
+ * @param position This is the position of the main image that we're
+ *        trying to render, in parametric coordinates.
+ */
+float getYPixel(vec2 position) {
+  position.y = (position.y * 2.0 / 3.0) + (1.0 / 3.0);
+  return texture2D(textureSampler, position).x;
+}
+
+/**
+ * This does the crazy work of calculating the planar position (the
+ * position in the byte stream of the image) of the U or V pixel, and
+ * then converting that back to x and y coordinates, so that we can
+ * account for the fact that V is appended to U in the image, and the
+ * complications that causes (see below for a diagram).
+ *
+ * @param position This is the position of the main image that we're
+ *        trying to render, in pixels.
+ *
+ * @param planarOffset This is an offset to add to the planar address
+ *        we calculate so that we can find the U image after the V
+ *        image.
+ */
+vec2 mapCommon(vec2 position, float planarOffset) {
+  planarOffset += (imageWidth * floor(position.y / 2.0)) / 2.0 +
+                  floor((imageWidth - 1.0 - position.x) / 2.0);
+  float x = floor(imageWidth - 1.0 - floor(mod(planarOffset, imageWidth)));
+  float y = floor(floor(planarOffset / imageWidth));
+  return vec2((x + 0.5) / imageWidth, (y + 0.5) / (1.5 * imageHeight));
+}
+
+/**
+ * This is a helper function for mapping pixel locations to a texture
+ * coordinate for the U plane.
+ *
+ * @param position This is the position of the main image that we're
+ *        trying to render, in pixels.
+ */
+vec2 mapU(vec2 position) {
+  float planarOffset = (imageWidth * imageHeight) / 4.0;
+  return mapCommon(position, planarOffset);
+}
+
+/**
+ * This is a helper function for mapping pixel locations to a texture
+ * coordinate for the V plane.
+ *
+ * @param position This is the position of the main image that we're
+ *        trying to render, in pixels.
+ */
+vec2 mapV(vec2 position) {
+  return mapCommon(position, 0.0);
+}
+
+/**
+ * Given the texture coordinates, our pixel shader grabs the right
+ * value from each channel of the source image, converts it from Y'UV
+ * to RGB, and returns the result.
+ *
+ * Each U and V pixel provides color information for a 2x2 block of Y
+ * pixels.  The U and V planes are just appended to the Y image.
+ *
+ * For images that have a height divisible by 4, things work out nicely.
+ * For images that are merely divisible by 2, it's not so nice
+ * (and YUV420 doesn't work for image sizes not divisible by 2).
+ *
+ * Here is a 6x6 image, with the layout of the planes of U and V.
+ * Notice that the V plane starts halfway through the last scanline
+ * that has U on it.
+ *
+ * 1  +---+---+---+---+---+---+
+ *    | Y | Y | Y | Y | Y | Y |
+ *    +---+---+---+---+---+---+
+ *    | Y | Y | Y | Y | Y | Y |
+ *    +---+---+---+---+---+---+
+ *    | Y | Y | Y | Y | Y | Y |
+ *    +---+---+---+---+---+---+
+ *    | Y | Y | Y | Y | Y | Y |
+ *    +---+---+---+---+---+---+
+ *    | Y | Y | Y | Y | Y | Y |
+ *    +---+---+---+---+---+---+
+ *    | Y | Y | Y | Y | Y | Y |
+ * .3 +---+---+---+---+---+---+
+ *    | U | U | U | U | U | U |
+ *    +---+---+---+---+---+---+
+ *    | U | U | U | V | V | V |
+ *    +---+---+---+---+---+---+
+ *    | V | V | V | V | V | V |
+ * 0  +---+---+---+---+---+---+
+ *    0                       1
+ *
+ * Here is a 4x4 image, where the U and V planes are nicely split into
+ * separable blocks.
+ *
+ * 1  +---+---+---+---+
+ *    | Y | Y | Y | Y |
+ *    +---+---+---+---+
+ *    | Y | Y | Y | Y |
+ *    +---+---+---+---+
+ *    | Y | Y | Y | Y |
+ *    +---+---+---+---+
+ *    | Y | Y | Y | Y |
+ * .3 +---+---+---+---+
+ *    | U | U | U | U |
+ *    +---+---+---+---+
+ *    | V | V | V | V |
+ * 0  +---+---+---+---+
+ *    0               1
+ *
+ */
+void main() {
+  // Calculate what image pixel we're on, since we have to calculate
+  // the location in the image stream, using floor in several places
+  // which makes it hard to use parametric coordinates.
+  vec2 pixelPosition = vec2(floor(imageWidth * v_texcoord.x),
+                                floor(imageHeight * v_texcoord.y));
+  pixelPosition -= vec2(0.5, 0.5);
+  // We can use the parametric coordinates to get the Y channel, since it's
+  // a relatively normal image.
+  float yChannel = getYPixel(v_texcoord);
+
+  // As noted above, the U and V planes are smashed onto the end of
+  // the image in an odd way (in our 2D texture mapping, at least), so
+  // these mapping functions take care of that oddness.
+  float uChannel = texture2D(textureSampler, mapU(pixelPosition)).x;
+  float vChannel = texture2D(textureSampler, mapV(pixelPosition)).x;
+
+  // This does the colorspace conversion from Y'UV to RGB as a matrix
+  // multiply.  It also does the offset of the U and V channels from
+  // [0,1] to [-.5,.5] as part of the transform.
+  vec4 channels = vec4(yChannel, uChannel, vChannel, 1.0);
+
+  mat4 conversion = mat4(1.0,  0.0,    1.402, -0.701,
+                         1.0, -0.344, -0.714,  0.529,
+                         1.0,  1.772,  0.0,   -0.886,
+                         0, 0, 0, 0);
+  vec3 rgb = (channels * conversion).xyz;
+
+  // This is another Y'UV transform that can be used, but it doesn't
+  // accurately transform my source image.  Your images may well fare
+  // better with it, however, considering they come from a different
+  // source, and because I'm not sure that my original was converted
+  // to Y'UV420p with the same RGB->YUV (or YCrCb) conversion as
+  // yours.
+  //
+  // vec4 channels = vec4(yChannel, uChannel, vChannel, 1.0);
+  // float3x4 conversion = float3x4(1.0,  0.0,      1.13983, -0.569915,
+  //                                1.0, -0.39465, -0.58060,  0.487625,
+  //                                1.0,  2.03211,  0.0,     -1.016055);
+  // float3 rgb = mul(conversion, channels);
+
+  // Note: The output cannot fully replicate the original image. This is partly
+  // because WebGL has limited NPOT (non-power-of-two) texture support and also
+  // due to sRGB color conversions that occur in WebGL but not in the plugin.
+  gl_FragColor = vec4(rgb, 1.0);
+}
+// #o3d MatrixLoadOrder RowMajor
+\ No newline at end of file
author	luchen@google.com <luchen@google.com@0039d316-1c4b-4281-b951-d872f2087c98>	2010-06-29 23:03:09 +0000
committer	luchen@google.com <luchen@google.com@0039d316-1c4b-4281-b951-d872f2087c98>	2010-06-29 23:03:09 +0000
commit	f621b79f64f6784d0c192ec17975292306af4275 (patch)
tree	54b725da91ac36b65c5370033b29dd67b2fd36ae /o3d
parent	08dc3d4c9c729c71ad05332c0aeb9fe4a48410a8 (diff)
download	chromium_src-f621b79f64f6784d0c192ec17975292306af4275.zip chromium_src-f621b79f64f6784d0c192ec17975292306af4275.tar.gz chromium_src-f621b79f64f6784d0c192ec17975292306af4275.tar.bz2