Update samples to use more utility functions where

appropriate.

A few places used pseudoRandom. That is in math.js
now so they use that.

Other places there is now 
o3djs.material.createBasicMaterial and 
o3djs.material.createMaterialFromFile that save
10-20 lines per sample.

This CL will require new reference images.

There are 2 other things I'd like to consider.

#1) Changing every sample that uses shaders/texture-only.shader
to use o3djs.material.createConstantMaterial or some variation.

The problem with o3djs.material.createConstantMaterial is it 
requires you pass it a texture if you want a constant textured
material. All the samples create the material first, then 
later add the texture.

So, I could add a new o3djs.material.createTextureOnlyMaterial.

At the same time that would mean changing those samples from
setting stuff on 'texSampler0' to 'emissive'

#2) I'd like to change the shader builder so it stops 
adding "Sampler" to textured materials.  As it is if 
the material uses a color it makes the param called "diffuse" 
but if it's a texture it makes it "diffuseSampler".

That sucks because it means the code has to do crap like

var param = material.getParam('diffuse');
if (param) {
  // it's a color
} else {
  param = material.getParam('diffuseSampler');
  if (param) {
    // it's a texture.
  }
}

If we stopped that silliness we could just do

var param = material.getParam('diffuse');
if (param) {
  if (param.isA('o3d.ParamTexture')) {
    // it's textured.
  } else {
    // it's not.
  }
}

Unfortunately to fix this requires changing the o3dConverter
as well since it uses those conventions.  Should we do this?

Review URL: http://codereview.chromium.org/182024

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@25015 0039d316-1c4b-4281-b951-d872f2087c98

1 files changed, 34 insertions, 38 deletions

diff --git a/o3d/samples/skinning.html b/o3d/samples/skinning.html
index 79d1cdc..64c7954 100644
--- a/o3d/samples/skinning.html
+++ b/o3d/samples/skinning.html
@@ -50,7 +50,7 @@ Skinning.
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.primitives');
 
 // Events
@@ -59,6 +59,10 @@ o3djs.require('o3djs.primitives');
 window.onload = init;
 window.onunload = unload;
 
+// constants
+var NUM_BONES = 11;
+var BONE_SPACING = 20;
+
 // global variables
 var g_o3d;
 var g_math;
@@ -105,31 +109,11 @@ function initStep2(clientElements) {
       0.1,
       10000);
 
-  // Create and load the effect.
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/phong-with-colormult.shader');
-
-  // Create a Material for the effect.
-  var material = g_pack.createObject('Material');
-
-  // Apply our effect to this material.
-  material.effect = effect;
-
-  // Set the material's drawList
-  material.drawList = g_viewInfo.performanceDrawList;
-
-  // Create the params the effect needs on the material.
-  effect.createUniformParameters(material);
-
-  // Set the material parameters.
-  material.getParam('lightWorldPos').value = [1000, 1000, 0];
-  material.getParam('lightIntensity').value = [1, 1, 1, 1];
-  material.getParam('ambientIntensity').value = [0.1, 0.1, 0.1, 1];
-  material.getParam('ambient').value = [1, 1, 1, 1];
-  material.getParam('diffuse').value = [1, 0.2, 1, 1];
-  material.getParam('specular').value = [0.5, 0.5, 0.5, 1];
-  material.getParam('shininess').value = 50;
-  material.getParam('colorMult').value = [1, 1, 1, 1];
+  // Create a material.
+  var material = o3djs.material.createBasicMaterial(
+      g_pack,
+      g_viewInfo,
+      [1, 0.2, 1, 1]);
 
   // Create a cylinder.
   var vertexInfo = o3djs.primitives.createCylinderVertices(
@@ -153,15 +137,15 @@ function initStep2(clientElements) {
   skinEval.matrices = matrices;
   skinEval.skin = skin;
 
-  // Create 11 matrices on our ParamArray.
-  matrices.resize(11, 'o3d.ParamMatrix4');
+  // Create matrices on our ParamArray.
+  matrices.resize(NUM_BONES, 'o3d.ParamMatrix4');
 
   // Create 11 transforms for the bones and parent them into a chain.
-  for (var ii = 0; ii <= 10; ++ii) {
+  for (var ii = 0; ii < NUM_BONES; ++ii) {
     var transform = g_pack.createObject('Transform');
     g_transforms[ii] = transform;
     if (ii > 0) {
-      transform.translate(0, 20, 0);
+      transform.translate(0, BONE_SPACING, 0);
     }
     transform.parent = ii == 0 ? g_client.root : g_transforms[ii - 1];
     // Bind the world matrix of the transform to the corresponding matrix in the
@@ -188,14 +172,26 @@ function initStep2(clientElements) {
   var numVertices = positionStream.numElements();
   for (var ii = 0; ii < numVertices; ++ii) {
     // Choose the bones to influence the vertex based on its height.
-    var y = positionStream.getElementVector(ii)[1] / 20;
-    var influence = y % 1;
-    var bone = Math.floor(y);
-    var bone_2 = bone + 1;
-    if (bone_2 > 10) {
-      bone_2 = 10;
+    // boneArea will be a fractional value between 2 bones based on the Y
+    // position of the vertex. In other words, if the y Position of the vertex
+    // 63 and the bones are 20 units apart then boneArea will = 6.15 meaning
+    // it's between bones 6 and 7
+    var boneArea = positionStream.getElementVector(ii)[1] / BONE_SPACING;
+
+    // Pull out the fractional part of boneArea
+    var influence = boneArea % 1;
+
+    // Compute the bone indicies
+    var bone1 = Math.floor(boneArea);
+    var bone2 = bone1 + 1;
+    if (bone2 >= NUM_BONES) {
+      bone2 = NUM_BONES - 1;
     }
-    skin.setVertexInfluences(ii, [bone, 1 - influence, bone_2, influence]);
+
+    // Now make each vertex be influenced by these two bones. In the example
+    // above where boneArea was 6.15 we let bone1 influence the vertex by
+    // (1 - 0.15) or 0.85 and bone2 influence it by 0.15.
+    skin.setVertexInfluences(ii, [bone1, 1 - influence, bone2, influence]);
   }
 
   // Create a SourceBuffer for the Skin and set the vertices on it.
@@ -252,7 +248,7 @@ function onrender(renderEvent) {
   for (var ii = 1; ii < g_transforms.length; ++ii) {
     var transform = g_transforms[ii];
     transform.identity();
-    transform.translate(0, 20, 0);
+    transform.translate(0, BONE_SPACING, 0);
     transform.rotateX(rotation);
   }
 }