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

27 files changed, 204 insertions, 627 deletions

diff --git a/o3d/samples/2d.html b/o3d/samples/2d.html
index 864bbdc..2faa3d0 100644
--- a/o3d/samples/2d.html
+++ b/o3d/samples/2d.html
@@ -104,7 +104,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.loader');
 
 
@@ -165,16 +165,6 @@ var g_map = [
 var g_randSeed = 0;
 
 /**
- * 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() {
@@ -283,20 +273,11 @@ function initStep2(clientElements) {
   setScreenOriginToTopLeft();
   //setScreenOriginToCenter();
 
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/texture-colormult.shader');
-
-  // Create a Material for the effect.
-  var material = g_pack.createObject('Material');
-
-  // Apply the effect to this material.
-  material.effect = effect;
-
-  // Set the material's drawList for translucent things.
-  material.drawList = g_viewInfo.zOrderedDrawList;
-
-  // Create the parameters the effect needs on the material.
-  effect.createUniformParameters(material);
+  // Load an effect file and create an effect and material with it.
+  var material = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/texture-colormult.shader',
+      g_viewInfo.zOrderedDrawList);
 
   // Set the material params which act as the default. We'll override these with
   // params on transforms.
@@ -350,7 +331,7 @@ function initStep3() {
     g_squares[ii] = new Image(g_textures[4], false);
     g_things[ii] = new Image(g_textures[ii % 3], false);
     g_pillars[ii] = new Image(g_textures[6], true);
-    g_pillarScale[ii] = pseudoRandom() * 1.5 + 0.5;
+    g_pillarScale[ii] = g_math.pseudoRandom() * 1.5 + 0.5;
   }
 
   for (var yy = 0; yy < g_tilesDown; ++yy) {
diff --git a/o3d/samples/animation.html b/o3d/samples/animation.html
index 92dc49d..52e2ca4 100644
--- a/o3d/samples/animation.html
+++ b/o3d/samples/animation.html
@@ -49,7 +49,7 @@ Animation.
 <script type="text/javascript" id="o3dscript">
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
 
@@ -201,43 +201,12 @@ function initStep2(clientElements) {
       [0, 0, 0],      // Target.
       [0, 1, 0]);     // Up.
 
-  var effect = g_pack.createObject('Effect');
-  effect.loadFromFXString(document.getElementById('shader').value);
-
-  // 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 for translucent objects.
-  material.drawList = g_viewInfo.zOrderedDrawList;
-
-  // Create the parameters the effect needs on the material.
-  effect.createUniformParameters(material);
-
-  // Set the light position
-  var light_pos_param = material.getParam('light_pos');
-  light_pos_param.value = [100, 75, 400];
-
-  // Set the phong components of the light source
-  var light_ambient_param = material.getParam('light_ambient');
-  var light_diffuse_param = material.getParam('light_diffuse');
-  var light_specular_param = material.getParam('light_specular');
-
-  light_ambient_param.value = [0.1, 0.1, 0.1, 1]; // Gray
-  light_diffuse_param.value = [1, 1, 1, 1]; // White
-  light_specular_param.value = [0.5, 0.5, 0.5, 1]; // White
-
-  // Set the shininess of the material (for specular lighting)
-  var shininess_param = material.getParam('shininess');
-  shininess_param.value = 5.0;
-
-  // Position of the camera.
-  // (should be the same as the 'eye' position given below)
-  var camera_pos_param = material.getParam('camera_pos');
-  // Camera is at (0, 0, 3).
-  camera_pos_param.value = [0, 0, 3];
+  // Create a basic material
+  var material = o3djs.material.createBasicMaterial(
+      g_pack,
+      g_viewInfo,
+      [1, 1, 1, 1],
+      true);
 
   var data = [ { paramName: 'translateY',
                  endOutput: 50,
@@ -272,7 +241,7 @@ function initStep2(clientElements) {
     transform.addShape(shape);
 
     // Change the color of each one
-    transform.createParam('colorMult', 'ParamFloat4').value = data[ii].color;
+    transform.createParam('diffuse', 'ParamFloat4').value = data[ii].color;
 
     switch (ii) {
       case 0:
@@ -291,7 +260,7 @@ function initStep2(clientElements) {
       case 3: {
         var paramOp = attach1FloatOfFloat4Animation(g_pack,
                                                     transform,
-                                                    'colorMult',
+                                                    'diffuse',
                                                     'input3',
                                                     0.5,
                                                     1);
@@ -315,97 +284,5 @@ Once the scene is setup no Javascript is running.
 <!-- Start of O3D plugin -->
 <div id="o3d" style="width: 800px; height: 600px"></div>
 <!-- End of O3D plugin -->
-<!-- Don't render the textarea -->
-<div style="display:none">
-<textarea id="shader" name="fx" cols="80" rows="20">
-// The 4x4 world view projection matrix.
-float4x4 worldViewProjection : WorldViewProjection;
-float4x4 worldInverseTranspose : WorldInverseTranspose;
-float4x4 world : World;
-
-// positions of the light and camera
-float3 light_pos;
-float3 camera_pos;
-
-// lighting components of the light source
-float4 light_ambient;
-float4 light_diffuse;
-float4 light_specular;
-
-//  shininess of the material. (for specular lighting)
-float shininess;
-
-float4 colorMult;
-
-// input parameters for our vertex shader
-struct a2v {
-  float4 pos : POSITION;
-  float3 normal : NORMAL;
-  float4 col : COLOR;
-};
-
-// input parameters for our pixel shader
-// also the output parameters for our vertex shader
-struct v2f {
-  float4 pos : POSITION;
-  float4 pos2 : TEXCOORD0;
-  float3 norm : TEXCOORD1;
-  float3 light : TEXCOORD2;
-  float4 col : COLOR;
-};
-
-/**
- * vsMain - our vertex shader
- *
- * @param IN.pos Position vector of vertex
- * @param IN.normal Normal of vertex
- * @param IN.col Color of vertex
- */
-v2f vsMain(a2v IN) {
-  /**
-   * We use the standard phong illumination equation here.
-   * We restrict (clamp) the dot products so that we
-   * don't get any negative values.
-   * All vectors are normalized for proper calculations.
-   *
-   * The output color is the summation of the
-   * ambient, diffuse, and specular contributions.
-   *
-   * Note that we have to transform each vertex and normal
-   * by the view projection matrix first.
-   */
-  v2f OUT;
-
-  OUT.pos = mul(IN.pos, worldViewProjection);
-  OUT.pos2 = OUT.pos;
-  OUT.norm = mul(float4(IN.normal, 0), worldInverseTranspose).xyz;
-  OUT.light = light_pos - mul(IN.pos, world).xyz;
-  OUT.col = IN.col;
-  return OUT;
-}
-/**
- * psMain - pixel shader
- *
- * @param IN.pos Position vector of vertex
- * @param IN.col Color of vertex
- */
-float4 psMain(v2f IN): COLOR {
-  float3 light = normalize(IN.light);
-  float3 normal = normalize(IN.norm);
-  float3 r = normalize(reflect(normal, light));
-  float3 v = normalize(IN.pos2.xyz);
-  float4 litR = lit(dot(normal, light), dot(r, v), shininess);
-  return float4(((light_ambient + light_diffuse * litR.y) * colorMult +
-  light_specular * litR.z).xyz, colorMult.w);
-}
-
-// Here we tell our effect file *which* functions are
-// our vertex and pixel shaders.
-
-// #o3d VertexShaderEntryPoint vsMain
-// #o3d PixelShaderEntryPoint psMain
-// #o3d MatrixLoadOrder RowMajor
-</textarea>
-</div>
 </body>
 </html>
diff --git a/o3d/samples/archive-textures.html b/o3d/samples/archive-textures.html
index 7b7b4ea..f150bff9 100644
--- a/o3d/samples/archive-textures.html
+++ b/o3d/samples/archive-textures.html
@@ -48,7 +48,7 @@ o3djs.require('o3djs.math');
 o3djs.require('o3djs.io');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.texture');
 
 // Events
@@ -71,18 +71,12 @@ var g_textureCount = 0;
 var g_x = -200.0;
 var g_y = -200.0;
 
-function makeShape(texture, effect) {
-  // Create a Material for the effect.
-  var myMaterial = g_pack.createObject('Material');
-
-  // Set the material's drawList for opaque objects.
-  myMaterial.drawList = g_viewInfo.performanceDrawList;
-
-  // Apply our effect to this material.
-  myMaterial.effect = effect;
-
-  // Create the parameters the effect needs on the material.
-  effect.createUniformParameters(myMaterial);
+function makeShape(texture) {
+  // Create a material.
+  var myMaterial = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/texture-only.shader',
+      g_viewInfo.performanceDrawList);
 
   // Creates a quad.
   var myShape = o3djs.primitives.createPlane(g_pack,
@@ -92,10 +86,10 @@ function makeShape(texture, effect) {
                                              1,  // quads across
                                              1);  // quads down
 
-  // Get the material's sampler parameter and put a sampler on it.
+  // Get the material's sampler parameter, get the sampler on it and set its
+  // texture.
   var sampler_param = myMaterial.getParam('texSampler0');
-  var sampler = g_pack.createObject('Sampler');
-  sampler_param.value = sampler;
+  var sampler = sampler_param.value;
 
   // Set the texture to use.
   sampler.texture = texture;
@@ -142,9 +136,8 @@ function init() {
 /**
  * Spawns a raw-data request, creating a textured quad for each true
  * in the downloaded archive_textures.tar.gz file.
- * @param {Object} effect O3D effect object for created quads.
  */
-function createArchiveRequest(effect) {
+function createArchiveRequest() {
   // Start a request for loading the tar.gz archive containing a bunch of
   // image files.  We'll then make textures from each one...
   var loadInfo = o3djs.io.loadArchiveAdvanced(
@@ -161,7 +154,7 @@ function createArchiveRequest(effect) {
           // request so that it can verify that a page refresh during a
           // download does not crash or hang the browser.
           if (g_repeatDownload) {
-            createArchiveRequest(effect);
+            createArchiveRequest();
           }
           g_finished = true;
         } else {
@@ -207,7 +200,7 @@ function createArchiveRequest(effect) {
     g_fileCount++;
 
     if (texture) {
-      var shape = makeShape(texture, effect);
+      var shape = makeShape(texture);
     }
   }
 }
@@ -264,11 +257,7 @@ function startLoad() {
         [0, 0, 0],   // target
         [0, 0, -1]); // up
 
-    // Create and load the effect.
-    var effect = g_pack.createObject('Effect');
-    o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');
-
-    createArchiveRequest(effect);
+    createArchiveRequest();
   }, 200);
 }
 
diff --git a/o3d/samples/beachdemo/beachdemo.js b/o3d/samples/beachdemo/beachdemo.js
index 901cfd9..54c0edd 100644
--- a/o3d/samples/beachdemo/beachdemo.js
+++ b/o3d/samples/beachdemo/beachdemo.js
@@ -356,15 +356,6 @@ function dumpCameraInfo() {
                   g_math.radToDeg(g_camera.fieldOfView) + '};\n');
 }
 
-/**
- * Returns a deterministic pseudorandom number bewteen 0 and 1.
- * @return {number} a random number between 0 and 1.
- */
-function pseudoRandom() {
-  return (g_randSeed = (134775813 * g_randSeed + 1) % g_randRange) /
-         g_randRange;
-}
-
 // ***************************** Mouse functions *******************************
 
 /**
@@ -1079,16 +1070,17 @@ function toggleSimpleMaterials(e) {
         var effect = material.effect;
         g_materialSwapTable[material.clientId] = effect;
         if (!g_simpleEffects[effect.clientId]) {
-          pseudoRandom();  // eat a random number to get pleasing colors.
-          pseudoRandom();  // eat a random number to get pleasing colors.
+          // eat some random number to get pleasing colors.
+          g_math.pseudoRandom();
+          g_math.pseudoRandom();
           var newEffect = g_mainPack.createObject('Effect');
           newEffect.loadFromFXString(
               o3djs.util.getElementContentById('simpleshader'));
           newEffect.createUniformParameters(newEffect);
           newEffect.getParam('simpleColor').value = [
-              pseudoRandom(),
-              pseudoRandom(),
-              pseudoRandom(),
+              g_math.pseudoRandom(),
+              g_math.pseudoRandom(),
+              g_math.pseudoRandom(),
               1];
           g_simpleEffects[effect.clientId] = newEffect;
         }
@@ -2072,10 +2064,11 @@ function initStep2(clientElements) {
   g_clipHeightParam = g_globalParams.createParam('clipHeight', 'ParamFloat');
   g_proxyOffsetParam = g_globalParams.createParam('offset', 'ParamFloat');
 
-  g_particleSystem = o3djs.particles.createParticleSystem(g_mainPack,
-                                                          g_mainViewInfo,
-                                                          g_globalClockParam,
-                                                          pseudoRandom);
+  g_particleSystem = o3djs.particles.createParticleSystem(
+      g_mainPack,
+      g_mainViewInfo,
+      g_globalClockParam,
+      g_math.pseudoRandom);
 
   // Since we set the state for the draw pass to 'AlphaReference' = 0.7
   // We need to set it back to 0.0 for the particles.
@@ -2350,7 +2343,7 @@ function setupWater() {
       for (var yy = 0; yy < info.height; ++yy) {
         for (var xx = 0; xx < info.width; ++xx) {
           for (var cc = 0; cc < 3; ++cc) {
-            pixels.push(pseudoRandom());
+            pixels.push(g_math.pseudoRandom());
           }
         }
       }
diff --git a/o3d/samples/bitmap-draw-image.html b/o3d/samples/bitmap-draw-image.html
index 30d2835..a50b1d6 100644
--- a/o3d/samples/bitmap-draw-image.html
+++ b/o3d/samples/bitmap-draw-image.html
@@ -48,7 +48,7 @@ o3djs.require('o3djs.math');
 o3djs.require('o3djs.loader');

 o3djs.require('o3djs.rendergraph');

 o3djs.require('o3djs.primitives');

-o3djs.require('o3djs.effect');

+o3djs.require('o3djs.material');

 

 // Events

 // Run the init() once the page has finished loading.

@@ -66,18 +66,12 @@ var g_target;
 var g_up;

 var g_bitmaps = [];  // bitmaps by URL.

 

-function makeShape(texture, effect) {

-  // Create a Material for the effect.

-  var myMaterial = g_pack.createObject('Material');

-

-  // Set the material's drawList for opaque objects.

-  myMaterial.drawList = g_viewInfo.performanceDrawList;

-

-  // Apply our effect to this material.

-  myMaterial.effect = effect;

-

-  // Create the parameters the effect needs on the material.

-  effect.createUniformParameters(myMaterial);

+function makeShape(texture) {

+  // Create a material.

+  var myMaterial = o3djs.material.createMaterialFromFile(

+      g_pack,

+      'shaders/texture-only.shader',

+      g_viewInfo.performanceDrawList);

 

   // Creates a quad.

   var myShape = o3djs.primitives.createPlane(g_pack,

@@ -87,10 +81,10 @@ function makeShape(texture, effect) {
                                              1,  // quads across

                                              1);  // quads down

 

-  // Get the material's sampler parameter and put a sampler on it.

+  // Get the material's sampler parameter, get the sampler on it and set its

+  // texture.

   var sampler_param = myMaterial.getParam('texSampler0');

-  var sampler = g_pack.createObject('Sampler');

-  sampler_param.value = sampler;

+  var sampler = sampler_param.value;

 

   // Set the texture to use.

   sampler.texture = texture;

@@ -178,10 +172,6 @@ function initStep2(clientElements) {
   g_viewInfo.drawContext.view = view_matrix;

   g_viewInfo.drawContext.projection = proj_matrix;

 

-  // Create and load the effect.

-  var effect = g_pack.createObject('Effect');

-  o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');

-

   var loader = o3djs.loader.createLoader(callback);

   loadBitmap(loader, 'shaving_cream_300x300.jpg');

   loadBitmap(loader, 'four_pixel.png');

@@ -220,7 +210,7 @@ function initStep2(clientElements) {
     texture.drawImage(bitmap1, 0, 0, 0, 300, 300, 1, 0, 0, 150, 150);

     texture.drawImage(bitmap2, 0, 0, 0, 2, 2, 2, 0, 0, 75, 75);

 

-    makeShape(texture, effect);

+    makeShape(texture);

   }

   o3djs.event.addEventListener(o3dElement, 'wheel', scrollMe);

 }

diff --git a/o3d/samples/canvas-fonts.html b/o3d/samples/canvas-fonts.html
index edae578..7f9af5f 100644
--- a/o3d/samples/canvas-fonts.html
+++ b/o3d/samples/canvas-fonts.html
@@ -49,8 +49,6 @@ O3D Canvas
 <script type="text/javascript" id="o3dscript">
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
-o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
 o3djs.require('o3djs.canvas');
 o3djs.require('o3djs.rendergraph');
 
diff --git a/o3d/samples/canvas-texturedraw.html b/o3d/samples/canvas-texturedraw.html
index c1331a82..ce2723f 100644
--- a/o3d/samples/canvas-texturedraw.html
+++ b/o3d/samples/canvas-texturedraw.html
@@ -49,8 +49,6 @@ O3D Canvas
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.io');
 o3djs.require('o3djs.math');
-o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
 o3djs.require('o3djs.canvas');
 o3djs.require('o3djs.rendergraph');
 
@@ -74,8 +72,6 @@ var g_canvasWidth = 700;
 var g_canvasHeight = 500;
 var g_borderWidth = 50;
 var g_borderHeight = 50;
-var g_pluginWidth;
-var g_pluginHeight;
 var g_clientWidth;
 var g_clientHeight;
 
@@ -153,7 +149,6 @@ function changeBrushTexture() {
       if (g_brushTexture) {
         g_pack.removeObject(g_brushTexture);
       }
-
       g_brushTexture = texture;
     }
   });
diff --git a/o3d/samples/canvas.html b/o3d/samples/canvas.html
index ea73f0f..280608d 100644
--- a/o3d/samples/canvas.html
+++ b/o3d/samples/canvas.html
@@ -48,8 +48,6 @@ O3D Canvas
 <script type="text/javascript" id="o3dscript">
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
-o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
 o3djs.require('o3djs.canvas');
 o3djs.require('o3djs.rendergraph');
 
diff --git a/o3d/samples/checkers.html b/o3d/samples/checkers.html
index 54530e4..219bc6f 100644
--- a/o3d/samples/checkers.html
+++ b/o3d/samples/checkers.html
@@ -48,7 +48,7 @@ This sample demonstates usage of primitive functions and simple 3d animation tec
 <script type="text/javascript" id="o3dscript">
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.rendergraph');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.primitives');
 o3djs.require('o3djs.arcball');
 o3djs.require('o3djs.picking');
@@ -164,7 +164,10 @@ function initGlobals(clientElements) {
     clearColor);
 
   // Create a material for the objects rendered.
-  g_material = createPhongMaterial([1, 1, 1, 1]);
+  g_material = o3djs.material.createBasicMaterial(
+      g_pack,
+      g_viewInfo,
+      [1, 1, 1, 1]);
 
   // Initialize checkers piece and square data.
   g_boardSize = 8;
@@ -240,36 +243,6 @@ function initContext() {
 }
 
 /**
- * Creates a phong material based on the given single color.
- * @param {!o3djs.math.Vector4} baseColor An array with 4 entries,
- * the R,G,B, and A components of a color.
- * @return {!o3d.Material} A phong material whose overall pigment
- * is baseColor.
- */
-function createPhongMaterial(baseColor) {
-  // Create a new, empty Material object.
-  var material = g_pack.createObject('Material');
-
-  var lightPosition = [1000, 2000, 3000];
-  o3djs.effect.attachStandardShader(
-      g_pack, material, lightPosition, 'phong');
-
-  material.drawList = g_viewInfo.performanceDrawList;
-
-  // Assign parameters to the phong material.
-  material.getParam('emissive').value = [0, 0, 0, 1];
-  material.getParam('ambient').value =
-     [.1 * baseColor[0], .1 * baseColor[1], .1 * baseColor[2], 1];
-  material.getParam('diffuse').value =
-     [.9 * baseColor[0], .9 * baseColor[1], .9 * baseColor[2], 1];
-  material.getParam('specular').value = [.5, .5, .5, 1];
-  material.getParam('shininess').value = 50;
-  material.getParam('lightColor').value = [1, 1, 1, 1];
-
-  return material;
-}
-
-/**
  * Creates a Coord object used to hold a set of 2D coordinates.
  *
  * @private
diff --git a/o3d/samples/culling.html b/o3d/samples/culling.html
index 4e5816b..dbc3606 100644
--- a/o3d/samples/culling.html
+++ b/o3d/samples/culling.html
@@ -55,7 +55,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // global variables
 var g_timeMult = 1.0;
@@ -119,7 +119,7 @@ function createInstances(pack, shape) {
                   (x - UNITS_ACROSS_GROUP * 0.5) * UNIT_SPACING,
                   (y - UNITS_ACROSS_GROUP * 0.5) * UNIT_SPACING,
                   (z - UNITS_ACROSS_GROUP * 0.5) * UNIT_SPACING);
-              transform.createParam('colorMult', 'ParamFloat4').value = [
+              transform.createParam('diffuse', 'ParamFloat4').value = [
                   (g * UNITS_ACROSS_GROUP + x) * (1 / TOTAL_ACROSS),
                   (h * UNITS_ACROSS_GROUP + y) * (1 / TOTAL_ACROSS),
                   (i * UNITS_ACROSS_GROUP + z) * (1 / TOTAL_ACROSS),
@@ -207,29 +207,10 @@ function initStep2(clientElements) {
       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 for opaque objects.
-  material.drawList = g_viewInfo.performanceDrawList;
-
-  // Create the parameters 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, 1, 1, 1];
-  material.getParam('specular').value = [0.5, 0.5, 0.5, 1];
-  material.getParam('shininess').value = 50;
+  var material = o3djs.material.createBasicMaterial(
+      g_pack,
+      g_viewInfo,
+      [1, 1, 1, 1]);
 
   // Create 2 spheres.
   var shape1 = o3djs.primitives.createSphere(
diff --git a/o3d/samples/customcamera.html b/o3d/samples/customcamera.html
index 3ce9597..9a3b03c 100644
--- a/o3d/samples/customcamera.html
+++ b/o3d/samples/customcamera.html
@@ -64,7 +64,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // Events
 // Run the init() function once the page has finished loading.
@@ -127,22 +127,11 @@ function initStep2(clientElements) {
   g_animate = false;
   g_animateAngle = 0;
 
-  // Create and load the effect.
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/vertex-color.shader');
-
-  // Create a material for it.
-  var myMaterial = g_pack.createObject('Material');
-
-  // Set the material's drawList
-  myMaterial.drawList = g_viewInfo.performanceDrawList;
-
-  // Apply our effect to this material. The effect tells the 3D hardware
-  // which shader to use.
-  myMaterial.effect = effect;
-
-  // Create the parameters the effect needs on the material.
-  effect.createUniformParameters(myMaterial);
+  // Create a material.
+  var myMaterial = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/vertex-color.shader',
+      g_viewInfo.performanceDrawList);
 
   // Create a cube.
   var cube = o3djs.primitives.createRainbowCube(g_pack, myMaterial, 1);
diff --git a/o3d/samples/displayfps.html b/o3d/samples/displayfps.html
index c873eff..a67fbe07 100644
--- a/o3d/samples/displayfps.html
+++ b/o3d/samples/displayfps.html
@@ -54,7 +54,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.fps');
 
 // Events
@@ -112,19 +112,10 @@ function initStep2(clientElements) {
                                             g_client.renderGraphRoot);
 
   // Create a material.
-  var myMaterial = g_pack.createObject('Material');
-
-  // Set the material's drawList for opaque objects.
-  myMaterial.drawList = g_viewInfo.performanceDrawList;
-
-  // Create and load the effect.
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/vertex-color.shader');
-
-  // Apply our effect to this material and create the params the effect needs
-  // on the material.
-  myMaterial.effect = effect;
-  effect.createUniformParameters(myMaterial);
+  var myMaterial = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/vertex-color.shader',
+      g_viewInfo.performanceDrawList);
 
   // Draw a cube using the effect we have loaded.
   var myShape = o3djs.primitives.createRainbowCube(g_pack,
diff --git a/o3d/samples/fullscreen.html b/o3d/samples/fullscreen.html
index fdb9bcd..a737c1f 100644
--- a/o3d/samples/fullscreen.html
+++ b/o3d/samples/fullscreen.html
@@ -80,20 +80,11 @@ var g_o3dElement;
  * orthographic projection on which we'll be displaying the banner.
  */
 function createBannerSurfaceAndClickableRegion(clientHeight, viewInfo) {
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');
-
-  // Create a Material for the effect.
-  var material = g_pack.createObject('Material');
-
-  // Apply our effect to this material.
-  material.effect = effect;
-
-  // Create the params the effect needs on the material.
-  effect.createUniformParameters(material);
-
-  // Set the drawlist for z-ordering.
-  material.drawList = viewInfo.zOrderedDrawList;
+  // Create a material.
+  var material = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/texture-only.shader',
+      viewInfo.zOrderedDrawList);
 
   // Create a 2d plane for images. createPlane makes an XZ plane by default
   // so we pass in matrix to rotate it to an XY plane. We could do
diff --git a/o3d/samples/generate-texture.html b/o3d/samples/generate-texture.html
index 159ffbd..18417cc 100644
--- a/o3d/samples/generate-texture.html
+++ b/o3d/samples/generate-texture.html
@@ -46,7 +46,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // global variables
 var g_o3d;
@@ -117,20 +117,10 @@ function initStep2(clientElements) {
     one_channel_texture: {name: 'one-channel-texture.shader'}};
   for (var key in effectInfos) {
     var info = effectInfos[key];
-    var effect = g_pack.createObject('Effect');
-    o3djs.effect.loadEffect(effect, 'shaders/' + info.name);
-
-    // Create a Material for the effect.
-    var material = g_pack.createObject('Material');
-
-    // Set the material's drawList for transparent objects.
-    material.drawList = g_viewInfo.zOrderedDrawList;
-
-    // Apply the effect to this material.
-    material.effect = effect;
-
-    // Create the params that effect requires on the material.
-    effect.createUniformParameters(material);
+    var material = o3djs.material.createMaterialFromFile(
+        g_pack,
+        'shaders/' + info.name,
+        g_viewInfo.zOrderedDrawList);
 
     // Create a quad.
     var shape = o3djs.primitives.createPlane(g_pack,
diff --git a/o3d/samples/hud-2d-overlay.html b/o3d/samples/hud-2d-overlay.html
index 9c95126..e22eb7f 100644
--- a/o3d/samples/hud-2d-overlay.html
+++ b/o3d/samples/hud-2d-overlay.html
@@ -51,7 +51,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.loader');
 
 // Events
@@ -106,16 +106,6 @@ var g_selectedIndex = 0;
 var g_randSeed = 0;
 
 /**
- * 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() {
@@ -191,17 +181,10 @@ function initStep2(clientElements) {
       5000);              // Far plane.
 
   for (var ii = 0; ii < g_materialUrls.length; ++ii) {
-    var effect = g_pack.createObject('Effect');
-    o3djs.effect.loadEffect(effect, g_materialUrls[ii]);
-
-    // Create a Material for the effect.
-    var material = g_pack.createObject('Material');
-
-    // Apply our effect to this material.
-    material.effect = effect;
-
-    // Create the params the effect needs on the material.
-    effect.createUniformParameters(material);
+    var material = o3djs.material.createMaterialFromFile(
+        g_pack,
+        g_materialUrls[ii],
+        g_viewInfo.performanceDrawList);
 
     // Set the default params. We'll override these with params on transforms.
     material.getParam('colorMult').value = [1, 1, 1, 1];
@@ -349,11 +332,11 @@ function createBuilding(x, z) {
   transform.addShape(g_cubeShape);
   transform.parent = g_3dRoot;
   transform.translate(x, 0, z);
-  transform.scale(1, pseudoRandom() * 3 + 1, 1);
+  transform.scale(1, g_math.pseudoRandom() * 3 + 1, 1);
   transform.createParam('colorMult', 'ParamFloat4').value = [
-    pseudoRandom() * 0.6 + 0.4,
-    pseudoRandom() * 0.6 + 0.4,
-    pseudoRandom() * 0.6 + 0.4,
+    g_math.pseudoRandom() * 0.6 + 0.4,
+    g_math.pseudoRandom() * 0.6 + 0.4,
+    g_math.pseudoRandom() * 0.6 + 0.4,
     1];
 }
 
diff --git a/o3d/samples/instance-override.html b/o3d/samples/instance-override.html
index f700a9d..8366a4d 100644
--- a/o3d/samples/instance-override.html
+++ b/o3d/samples/instance-override.html
@@ -52,7 +52,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // Events
 // init() once the page has finished loading.
@@ -81,7 +81,7 @@ function createInstances(pack, shape) {
         transform.translate((x - 4.5) * 100,
                             (y - 4.5) * 100,
                             (z - 4.5) * 100);
-        transform.createParam('colorMult', 'ParamFloat4').value = [
+        transform.createParam('diffuse', 'ParamFloat4').value = [
             x * 0.1,
             y * 0.1,
             z * 0.1,
@@ -126,30 +126,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, 1, 1, 1];
-  material.getParam('specular').value = [0.5, 0.5, 0.5, 1];
-  material.getParam('shininess').value = 50;
+  // Create a material.
+  var material = o3djs.material.createBasicMaterial(
+    g_pack,
+    g_viewInfo,
+    [1, 1, 1, 1]);
 
   // Create a sphere.
   var shape = o3djs.primitives.createSphere(g_pack, material, 25, 10, 12);
diff --git a/o3d/samples/o3djs/texture.js b/o3d/samples/o3djs/texture.js
index 6571503..e741ed1 100644
--- a/o3d/samples/o3djs/texture.js
+++ b/o3d/samples/o3djs/texture.js
@@ -147,7 +147,7 @@ o3djs.texture.canMakeMipsAndScale = function(format) {
  *     would be 6 bitmaps.

  * @param {boolean} opt_generateMips Whether or not to generate mips. Note, mips

  *    can not be generated for DXT textures although they will be loaded if they

- *    exist in the RawData.

+ *    exist in the RawData. Default = true.

  * @return {!o3d.Texture} The created texture.

  */

 o3djs.texture.createTextureFromBitmaps = function(

@@ -167,7 +167,8 @@ o3djs.texture.createTextureFromBitmaps = function(
   var targetMips = mipMaps;

   var dstWidth = srcWidth;

   var dstHeight = srcHeight;

-  if (opt_generateMips && o3djs.texture.canMakeMipsAndScale(format) &&

+  if ((typeof opt_generateMips === 'undefined' || opt_generateMips) &&

+      o3djs.texture.canMakeMipsAndScale(format) &&

       mipMaps == 1 && maxMips > 1) {

     targetMips = maxMips;

   }

diff --git a/o3d/samples/particles.html b/o3d/samples/particles.html
index da38c53..2b4710c 100644
--- a/o3d/samples/particles.html
+++ b/o3d/samples/particles.html
@@ -92,17 +92,6 @@ function loadTexture(loader, url, index) {
 }
 
 /**
- * Returns a deterministic pseudorandom number bewteen 0 and 1
- * @return {number} a random number between 0 and 1
- */
-var g_randSeed = 0;
-var g_randRange = Math.pow(2, 32);
-function pseudoRandom() {
-  return (g_randSeed = (134775813 * g_randSeed + 1) % g_randRange) /
-         g_randRange;
-}
-
-/**
  * Creates the client area.
  */
 function init() {
@@ -165,10 +154,11 @@ function initStep3() {
   // Normally we wouldn't pass in a random function but for selenium we need
   // the particle system to produce the exact same results each time so
   // we're passing in a predictable random function.
-  g_particleSystem = o3djs.particles.createParticleSystem(g_pack,
-                                                          g_viewInfo,
-                                                          g_clockParam,
-                                                          pseudoRandom);
+  g_particleSystem = o3djs.particles.createParticleSystem(
+      g_pack,
+      g_viewInfo,
+      g_clockParam,
+      g_math.pseudoRandom);
   setupFlame();
   setupNaturalGasFlame();
   setupSmoke();
@@ -376,7 +366,7 @@ function setupGoogle() {
     velocity: [1, 0, 1]},
     function(particleIndex, parameters) {
       //var index = particleIndex;
-      var index = Math.floor(pseudoRandom() * positions.length);
+      var index = Math.floor(g_math.pseudoRandom() * positions.length);
       index = Math.min(index, positions.length - 1);
       parameters.position[0] = positions[index][0];
       parameters.position[1] = positions[index][1];
@@ -452,8 +442,9 @@ function setupBall() {
     colorMult: [1, 1, 0.5, 1], colorMultRange: [0, 0, 0.5, 0],
     billboard: false},
     function(particleIndex, parameters) {
-      var matrix = g_math.matrix4.rotationY(pseudoRandom() * Math.PI * 2);
-      g_math.matrix4.rotateX(matrix, pseudoRandom() * Math.PI);
+      var matrix = g_math.matrix4.rotationY(
+          g_math.pseudoRandom() * Math.PI * 2);
+      g_math.matrix4.rotateX(matrix, g_math.pseudoRandom() * Math.PI);
       var position = g_math.matrix4.transformDirection(matrix, [0, 100, 0]);
       parameters.position = position;
       parameters.orientation = o3djs.quaternions.rotationToQuaternion(matrix);
@@ -483,13 +474,16 @@ function setupCube() {
     billboard: false},
     function(particleIndex, parameters) {
       var matrix = g_math.matrix4.rotationY(
-          Math.floor(pseudoRandom() * 4) * Math.PI * 0.5);
-      g_math.matrix4.rotateX(matrix,
-                             Math.floor(pseudoRandom() * 3) * Math.PI * 0.5);
+          Math.floor(g_math.pseudoRandom() * 4) * Math.PI * 0.5);
+      g_math.matrix4.rotateX(
+          matrix,
+          Math.floor(g_math.pseudoRandom() * 3) * Math.PI * 0.5);
       parameters.orientation = o3djs.quaternions.rotationToQuaternion(matrix);
       var position = g_math.matrix4.transformDirection(
           matrix,
-          [pseudoRandom() * 200 - 100, 100, pseudoRandom() * 200 - 100]);
+          [g_math.pseudoRandom() * 200 - 100,
+           100,
+           g_math.pseudoRandom() * 200 - 100]);
       parameters.position = position;
     });
   transform.addShape(emitter.shape);
diff --git a/o3d/samples/picking.html b/o3d/samples/picking.html
index 24a652f..f4a73a0 100644
--- a/o3d/samples/picking.html
+++ b/o3d/samples/picking.html
@@ -294,12 +294,10 @@ function initStep2(clientElements) {
   g_debugLine.setColor([0,1,0,1]);
 
   // Create a material for highlighting.
-  g_highlightMaterial = g_pack.createObject('Material');
-  g_highlightMaterial.drawList = g_viewInfo.performanceDrawList;
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/solid-color.shader');
-  g_highlightMaterial.effect = effect;
-  effect.createUniformParameters(g_highlightMaterial);
+  g_highlightMaterial = o3djs.material.createConstantMaterial(
+      g_pack,
+      g_viewInfo,
+      [1, 1, 1, 1]);
   // Setup a state to bring the lines forward.
   var state = g_pack.createObject('State');
   state.getStateParam('PolygonOffset2').value = -1.0;
diff --git a/o3d/samples/primitives.html b/o3d/samples/primitives.html
index 4cc3935..89337a9 100644
--- a/o3d/samples/primitives.html
+++ b/o3d/samples/primitives.html
@@ -49,7 +49,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // global variables
 var g_o3dElement;
@@ -58,8 +58,6 @@ var g_o3d;
 var g_math;
 var g_pack;
 var g_viewInfo;
-
-var g_lightPosition = [5, 5, 7];
 var g_eyePosition = [3, 4, 14];
 
 /**
@@ -131,28 +129,14 @@ function initContext() {
 }
 
 /**
- * Creates a phong material based on the given single color.
+ * Creates a material based on the given single color.
  * @param {Array} baseColor An array with 4 entries, the R,G,B, and A components
  *   of a color.
- * @return {Material} A phong material whose overall pigment is baseColor.
+ * @return {Material} A material whose overall pigment is baseColor.
  */
-function createPhongMaterial(baseColor) {
+function createMaterial(baseColor) {
   // Create a new, empty Material object.
-  var material = g_pack.createObject('Material');
-
-  o3djs.effect.attachStandardShader(
-      g_pack, material, g_lightPosition, 'phong');
-
-  material.drawList = g_viewInfo.performanceDrawList;
-
-  // Assign parameters to the phong material.
-  material.getParam('emissive').value = [0, 0, 0, 1];
-  material.getParam('ambient').value = g_math.mulScalarVector(0.1, baseColor);
-  material.getParam('diffuse').value = g_math.mulScalarVector(0.9, baseColor);
-  material.getParam('specular').value = [.2, .2, .2, 1];
-  material.getParam('shininess').value = 20;
-
-  return material;
+  return o3djs.material.createBasicMaterial(g_pack, g_viewInfo, baseColor);
 }
 
 /**
@@ -162,19 +146,19 @@ function createPhongMaterial(baseColor) {
 function createShapes() {
   var cube = o3djs.primitives.createCube(
       g_pack,
-      createPhongMaterial([0,1,0,1]), // A green phong-shaded material.
+      createMaterial([0,1,0,1]), // A green phong-shaded material.
       Math.sqrt(2));                  // The length of each side of the cube.
 
   var sphere = o3djs.primitives.createSphere(
       g_pack,
-      createPhongMaterial([1,0,0,1]),
+      createMaterial([1,0,0,1]),
       1.0,   // Radius of the sphere.
       30,    // Number of meridians.
       20);    // Number of parallels.
 
   var cylinder = o3djs.primitives.createCylinder(
       g_pack,
-      createPhongMaterial([1,0,1,1]),
+      createMaterial([1,0,1,1]),
       0.5,   // Radius.
       1.5,   // Height.
       20,    // Number of radial subdivisions.
@@ -182,7 +166,7 @@ function createShapes() {
 
   var truncatedCone = o3djs.primitives.createTruncatedCone(
       g_pack,
-      createPhongMaterial([0,0,1,1]),
+      createMaterial([0,0,1,1]),
       0.3,   // Bottom radius.
       0.5,   // Top radius.
       1.5,   // Height.
@@ -191,7 +175,7 @@ function createShapes() {
 
   var cone = o3djs.primitives.createTruncatedCone(
       g_pack,
-      createPhongMaterial([0,1,0,1]),
+      createMaterial([0,1,0,1]),
       0.5,   // Bottom radius.
       0.0,   // Top radius.
       1.5,   // Height.
@@ -200,7 +184,7 @@ function createShapes() {
 
   var plane = o3djs.primitives.createPlane(
       g_pack,
-      createPhongMaterial([0,1,1,1]),
+      createMaterial([0,1,1,1]),
       1,      // Width.
       1.618,  // Depth.
       3,      // Horizontal subdivisions.
@@ -217,13 +201,13 @@ function createShapes() {
 
   var prism = o3djs.primitives.createPrism(
       g_pack,
-      createPhongMaterial([1,1,0,1]),
+      createMaterial([1,1,0,1]),
       polygon,  // The profile polygon to be extruded.
       1);       // The depth of the extrusion.
 
   var disc = o3djs.primitives.createDisc(
       g_pack,
-      createPhongMaterial([1,0,0,1]),
+      createMaterial([1,0,0,1]),
       1,   // Radius.
       7,   // Divisions.
       2,   // Stacks (optional).
diff --git a/o3d/samples/scatter-chart.html b/o3d/samples/scatter-chart.html
index a1f5f8d..6aa7743 100644
--- a/o3d/samples/scatter-chart.html
+++ b/o3d/samples/scatter-chart.html
@@ -50,7 +50,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.quaternions');
 o3djs.require('o3djs.rendergraph');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.primitives');
 o3djs.require('o3djs.arcball');
 o3djs.require('o3djs.event');
@@ -149,7 +149,8 @@ function initGlobals(clientElements) {
       clearColor);
 
   // Create a material for the objects rendered.
-  g_material = createPhongMaterial([1, 1, 1, 1]);
+  g_material = o3djs.material.createBasicMaterial(
+      g_pack, g_viewInfo, [1, 1, 1, 1]);
 
   // Create a cube shape to simulate the scatter points.
   g_cubeShape = o3djs.primitives.createCube(
@@ -192,35 +193,6 @@ function resetView() {
 }
 
 /**
- * Creates a phong material based on the given single color.
- * @param {Array} baseColor An array with 4 entries, the R,G,B, and A components
- *   of a color.
- * @return {!o3d.Material} A phong material whose overall pigment is baseColor.
- */
-function createPhongMaterial(baseColor) {
-  // Create a new, empty Material object.
-  var material = g_pack.createObject('Material');
-
-  var lightPosition = [1000, 2000, 3000];
-  o3djs.effect.attachStandardShader(
-      g_pack, material, lightPosition, 'phong');
-
-  material.drawList = g_viewInfo.performanceDrawList;
-
-  // Assign parameters to the phong material.
-  material.getParam('emissive').value = [0, 0, 0, 1];
-  material.getParam('ambient').value =
-      [.1 * baseColor[0], .1 * baseColor[1], .1 * baseColor[2], 1];
-  material.getParam('diffuse').value =
-      [.9 * baseColor[0], .9 * baseColor[1], .9 * baseColor[2], 1];
-  material.getParam('specular').value = [.5, .5, .5, 1];
-  material.getParam('shininess').value = 50;
-  material.getParam('lightColor').value = [1, 1, 1, 1];
-
-  return material;
-}
-
-/**
  * Create a 3D Scatter object by plotting each data point on a 3D model.
  */
 function createScatterObject() {
diff --git a/o3d/samples/simpletexture.html b/o3d/samples/simpletexture.html
index 9d3052e..efd1734 100644
--- a/o3d/samples/simpletexture.html
+++ b/o3d/samples/simpletexture.html
@@ -48,7 +48,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.io');
 
 // Events
@@ -105,21 +105,11 @@ function initStep2(clientElements) {
       [0, 0, 0],   // target
       [0, 0, -1]); // up
 
-  // Create and load the effect.
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');
-
-  // Create a Material for the effect.
-  var myMaterial = g_pack.createObject('Material');
-
-  // Set the material's drawList
-  myMaterial.drawList = g_viewInfo.performanceDrawList;
-
-  // Apply our effect to this material.
-  myMaterial.effect = effect;
-
-  // Create the params the effect needs on the material.
-  effect.createUniformParameters(myMaterial);
+  // Create a material.
+  var myMaterial = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/texture-only.shader',
+      g_viewInfo.performanceDrawList);
 
   // Create a quad.
   var myShape = o3djs.primitives.createPlane(g_pack,
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);
   }
 }
diff --git a/o3d/samples/texturesamplers.html b/o3d/samples/texturesamplers.html
index ebb76f4..c64d827 100644
--- a/o3d/samples/texturesamplers.html
+++ b/o3d/samples/texturesamplers.html
@@ -49,7 +49,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.event');
 o3djs.require('o3djs.io');
 
@@ -63,7 +63,6 @@ var g_math;
 var g_client;
 var g_pack;
 var g_viewInfo;
-var g_commonEffect;
 var g_eye;
 var g_target;
 var g_up;
@@ -101,10 +100,6 @@ function initStep2(clientElements) {
       g_client.root,
       g_client.renderGraphRoot);
 
-  // Create and load the effect.
-  g_commonEffect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(g_commonEffect, 'shaders/texture-only.shader');
-
   // Create our projection matrix, with a vertical field of view of 45 degrees
   // a near clipping plane of 0.1 and far clipping plane of 100.
   var proj_matrix = g_math.matrix4.perspective(
@@ -129,17 +124,10 @@ function initStep2(clientElements) {
       var index = yy * 3 + xx;
 
       // Create a new Material for the quad.
-      var material = g_pack.createObject('Material');
-
-      // Set the material's drawList
-      material.drawList = g_viewInfo.performanceDrawList;
-      material.effect = g_commonEffect;
-
-      // Create Params on the material for all the uniform parameters needed by
-      // the effect. The one we are really interested in is the Param for the
-      // sampler which will be called "texSampler0"
-      // (the name it has in the shader string).
-      g_commonEffect.createUniformParameters(material);
+      var material = o3djs.material.createMaterialFromFile(
+          g_pack,
+          'shaders/texture-only.shader',
+          g_viewInfo.performanceDrawList);
 
       // Create a quad and position it.
       var verts = o3djs.primitives.createPlaneVertices(1, 1, 1, 1);
@@ -155,17 +143,11 @@ function initStep2(clientElements) {
       transform.translate([(xx - 1) * 1.2, 0, (0.5 - yy) * -1.2]);
       transform.addShape(shape);
 
-      // Find the material used by the shape.
-      var primitive = shape.elements[0];
-      var material = primitive.material;
-      var p = material.params;
-
       // Get the sampler param on the material.
       var samplerParam = material.getParam('texSampler0');
 
-      // Create a new sampler for the material.
-      var sampler = g_pack.createObject('Sampler');
-      samplerParam.value = sampler;
+      // Get the sampler on the sampler param.
+      var sampler = samplerParam.value;
       samplers[index] = sampler;
       transforms[index] = transform;
     }
diff --git a/o3d/samples/vertex-shader-animation.html b/o3d/samples/vertex-shader-animation.html
index 5cc2220..4b1092f 100644
--- a/o3d/samples/vertex-shader-animation.html
+++ b/o3d/samples/vertex-shader-animation.html
@@ -59,7 +59,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // global variables
 var g_o3d;
@@ -111,20 +111,11 @@ function initStep2(clientElements) {
       g_client.root,
       g_client.renderGraphRoot);
 
-  // Create and load the effect.
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/phong-vertex-anim.shader');
-
-  // Create a new Material for the quad.
-  var material = g_pack.createObject('Material');
-
-  // Set the material's drawList
-  material.drawList = g_viewInfo.performanceDrawList;
-  material.effect = effect;
-
-  // Create Params on the material for all the uniform parameters needed by
-  // the effect.
-  effect.createUniformParameters(material);
+  // Create a material.
+  var material = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/phong-vertex-anim.shader',
+      g_viewInfo.performanceDrawList);
 
   // Set the material parameters.
   material.getParam('lightWorldPos').value = [-40, 100, 0];
diff --git a/o3d/samples/yuv2rgb.html b/o3d/samples/yuv2rgb.html
index 4af0d23d..317b731 100644
--- a/o3d/samples/yuv2rgb.html
+++ b/o3d/samples/yuv2rgb.html
@@ -48,7 +48,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 o3djs.require('o3djs.io');
 
 // Events
@@ -107,21 +107,11 @@ function initStep2(clientElements) {
       [0, 0, 0],
       [0, 0, -1]);
 
-  // Create and load the effect and the shader.
-  var effect = g_pack.createObject('Effect');
-  o3djs.effect.loadEffect(effect, 'shaders/yuv2rgb.shader');
-
-  // Create a Material for the effect.
-  var myMaterial = g_pack.createObject('Material');
-
-  // Set the material's drawList
-  myMaterial.drawList = g_viewInfo.performanceDrawList;
-
-  // Apply our effect to this material.
-  myMaterial.effect = effect;
-
-  // Create the params the effect needs on the material.
-  effect.createUniformParameters(myMaterial);
+  // Create a material.
+  var myMaterial = o3djs.material.createMaterialFromFile(
+      g_pack,
+      'shaders/yuv2rgb.shader',
+      g_viewInfo.performanceDrawList);
 
   // Creates a quad using the effect that has a 1:1 aspect ratio.
   var myShape = o3djs.primitives.createPlane(g_pack,
diff --git a/o3d/samples/zsorting.html b/o3d/samples/zsorting.html
index 55826ba..8168aaa 100644
--- a/o3d/samples/zsorting.html
+++ b/o3d/samples/zsorting.html
@@ -49,7 +49,7 @@ o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
+o3djs.require('o3djs.material');
 
 // Events
 // init() once the page has finished loading.
@@ -100,7 +100,7 @@ function createInstances(pack, shape) {
                   (x - UNITS_ACROSS_GROUP * 0.5) * UNIT_SPACING,
                   (y - UNITS_ACROSS_GROUP * 0.5) * UNIT_SPACING,
                   (z - UNITS_ACROSS_GROUP * 0.5) * UNIT_SPACING);
-              transform.createParam('colorMult', 'ParamFloat4').value = [
+              transform.createParam('diffuse', 'ParamFloat4').value = [
                   (g * UNITS_ACROSS_GROUP + x) * (1 / TOTAL_ACROSS),
                   (h * UNITS_ACROSS_GROUP + y) * (1 / TOTAL_ACROSS),
                   (i * UNITS_ACROSS_GROUP + z) * (1 / TOTAL_ACROSS),
@@ -147,30 +147,9 @@ 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.zOrderedDrawList;
-
-  // 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, 1, 1, 1];
-  material.getParam('specular').value = [0.5, 0.5, 0.5, 1];
-  material.getParam('shininess').value = 50;
+  // Create a Material.
+  var material = o3djs.material.createBasicMaterial(
+      g_pack, g_viewInfo, [1, 1, 1, 1], true);
 
   // Create a sphere.
   var shape = o3djs.primitives.createSphere(g_pack, material, 30, 20, 20);