Implemented Texture2D.drawImage, along the way cleaned up a number of lingering bugs, moved some texture initialization so subsequent calls to gl.texSubImage2D wouldn't fail.

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

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

14 files changed, 215 insertions, 85 deletions

diff --git a/o3d/samples/o3d-webgl-samples/shadow-map.html b/o3d/samples/o3d-webgl-samples/shadow-map.html
index 2bf81cc..6a2cea3 100644
--- a/o3d/samples/o3d-webgl-samples/shadow-map.html
+++ b/o3d/samples/o3d-webgl-samples/shadow-map.html
@@ -197,7 +197,7 @@ function initRenderGraph() {
   g_renderSurfaceSet.renderDepthStencilSurface = depthSurface;
 
   g_renderSurfaceSet.parent = shadowPassRenderRoot;
-  
+
   // Create a render sub-graph for the shadow map generation.
   g_shadowViewInfo = o3djs.rendergraph.createBasicView(
       g_pack,
@@ -263,7 +263,6 @@ function initMaterials() {
   g_shadowSampler.addressModeU = g_o3d.Sampler.BORDER;
   g_shadowSampler.addressModeV = g_o3d.Sampler.BORDER;
   g_shadowSampler.borderColor = [1, 1, 1, 1];
-
 }
 
 
@@ -587,12 +586,9 @@ function moveLight(delta) {
 
     // Convert texture coords to [0, 1] range.
     projCoords /= projCoords.w;
-    projCoords.x =  0.5 * projCoords.x + 0.5;
-    projCoords.y =  0.5 * projCoords.y + 0.5;
-    projCoords.z =  0.5 * projCoords.z + 0.5;
+    projCoords = 0.5 * projCoords + 0.5;
 
     float depth = projCoords.z;
-
     float light;
 
     // If the rednered point is farther from the light than the distance encoded
diff --git a/o3d/samples/o3d-webgl/bitmap.js b/o3d/samples/o3d-webgl/bitmap.js
index 5e2fcfc..9551051 100644
--- a/o3d/samples/o3d-webgl/bitmap.js
+++ b/o3d/samples/o3d-webgl/bitmap.js
@@ -74,6 +74,24 @@ o3d.Bitmap.SLICE = 7;
 
 
 /**
+ * The scratch canvas object.
+ * @private
+ */
+o3d.Bitmap.scratch_canvas_ = null;
+
+
+/**
+ * Gets a canvas to use for scratch work.
+ * @private
+ */
+o3d.Bitmap.getScratchCanvas_ = function() {
+  if (!o3d.Bitmap.scratch_canvas_)
+    o3d.Bitmap.scratch_canvas_ = document.createElement('CANVAS');
+  return o3d.Bitmap.scratch_canvas_;
+}
+
+
+/**
  * In webgl the bitmap object is represented by an offscreen canvas.
  * @type {Canvas}
  * @private
@@ -89,6 +107,7 @@ o3d.Bitmap.prototype.flipVertically = function() {
 };
 
 
+
 /**
  * Generates mip maps from the source level to lower levels.
  * 
diff --git a/o3d/samples/o3d-webgl/bounding_box.js b/o3d/samples/o3d-webgl/bounding_box.js
index 506dd2c..ec92270 100644
--- a/o3d/samples/o3d-webgl/bounding_box.js
+++ b/o3d/samples/o3d-webgl/bounding_box.js
@@ -72,7 +72,7 @@ o3d.BoundingBox.prototype.maxExtent = [0, 0, 0];
  * Multiplies the bounding box by the given matrix returning a new bounding
  * box.
  * @param {!o3d.math.Matrix4} matrix The matrix to multiply by.
- * @returns {!o3d.BoundingBox}  The new bounding box.
+ * @return {!o3d.BoundingBox}  The new bounding box.
  */
 o3d.BoundingBox.prototype.mul =
     function(matrix) {
@@ -84,7 +84,7 @@ o3d.BoundingBox.prototype.mul =
  * Adds a bounding box to this bounding box returning a bounding box that
  * encompases both.
  * @param {!o3d.BoundingBox} box BoundingBox to add to this BoundingBox.
- * @returns {!o3d.BoundingBox}  The new bounding box.
+ * @return {!o3d.BoundingBox}  The new bounding box.
  */
 o3d.BoundingBox.prototype.add =
     function(box) {
@@ -98,7 +98,7 @@ o3d.BoundingBox.prototype.add =
  * TODO(petersont): this can also take six coordinates as input.
  * @param {!o3d.math.Point3} start position of start of ray in local space.
  * @param {!o3d.math.Point3} end position of end of ray in local space.
- * @returns {!o3d.RayIntersectionInfo}  RayIntersectionInfo. If result.value
+ * @return {!o3d.RayIntersectionInfo}  RayIntersectionInfo. If result.value
  *     is false then something was wrong like using this function with an
  *     uninitialized bounding box. If result.intersected is true then the ray
  *     intersected the box and result.position is the exact point of
@@ -114,7 +114,7 @@ o3d.BoundingBox.prototype.intersectRay =
  * Returns true if the bounding box is inside the frustum.
  * @param {!o3d.math.Matrix4} matrix Matrix to transform the box from its
  *     local space to view frustum space.
- * @returns {boolean}  True if the box is in the frustum.
+ * @return {boolean}  True if the box is in the frustum.
  */
 o3d.BoundingBox.prototype.inFrustum =
     function(matrix) {
diff --git a/o3d/samples/o3d-webgl/buffer.js b/o3d/samples/o3d-webgl/buffer.js
index eb4447b..2417b0a 100644
--- a/o3d/samples/o3d-webgl/buffer.js
+++ b/o3d/samples/o3d-webgl/buffer.js
@@ -73,7 +73,7 @@ o3d.Buffer.prototype.ArrayType = WebGLFloatArray;
  * the types of fields set on the buffer.
  * 
  * @param {number} numElements Number of elements to allocate..
- * @returns {boolean}  True if operation was successful.
+ * @return {boolean}  True if operation was successful.
  */
 o3d.Buffer.prototype.allocateElements =
     function(numElements) {
@@ -106,7 +106,7 @@ o3d.Buffer.prototype.resize = function(numElements) {
  * @param {string} field_type type of data in the field. Valid types
  *     are "FloatField", "UInt32Field", and "UByteNField".
  * @param {number} num_components number of components in the field.
- * @returns {!o3d.Field}  The created field.
+ * @return {!o3d.Field}  The created field.
  */
 o3d.Buffer.prototype.createField =
     function(fieldType, numComponents) {
@@ -166,7 +166,7 @@ o3d.Buffer.prototype.unlock = function() {
  * 
  * @param {!Array.<number>} values contains data to assign to the Buffer
  *     data itself.
- * @returns {boolean}  True if operation was successful.
+ * @return {boolean}  True if operation was successful.
  */
 o3d.Buffer.prototype.set =
     function(values) {
@@ -213,7 +213,7 @@ o3d.VertexBufferBase.prototype.get = function() {
  * 
  * @param {number} start_index index of the element value to get.
  * @param {number} numElements the number of elements to get.
- * @returns {!Array.<number>}  An array of values.
+ * @return {!Array.<number>}  An array of values.
  */
 o3d.VertexBufferBase.prototype.getAt =
     function(start_index, numElements) {
diff --git a/o3d/samples/o3d-webgl/client.js b/o3d/samples/o3d-webgl/client.js
index 95912a9..9e7527c 100644
--- a/o3d/samples/o3d-webgl/client.js
+++ b/o3d/samples/o3d-webgl/client.js
@@ -479,6 +479,14 @@ o3d.Client.prototype.fullscreen = false;
 
 
 /**
+ * Whether content is displayed in full-screen mode or in a plugin window.  The
+ * default is false [not full-screen].
+ * @type {!Array<function(!o3d.Event): void>}
+ */
+o3d.Client.prototype.event_callbacks_ = [];
+
+
+/**
  * Returns the width of the current drawing area [plugin or full-screen] in
  * pixels.
  */
@@ -518,7 +526,16 @@ o3d.Client.prototype.__defineSetter__('height',
  */
 o3d.Client.prototype.initWithCanvas = function(canvas) {
   var gl;
-  try {gl = canvas.getContext("experimental-webgl") } catch(e) { }
+
+  var standard_attributes = {
+    alpha : true,
+    depth : true,
+    stencil : true,
+    antialias : true,
+    premultipliedAlpha : true
+  };
+
+  try {gl = canvas.getContext("experimental-webgl", standard_attributes) } catch(e) { }
   if (!gl)
       try {gl = canvas.getContext("moz-webgl") } catch(e) { }
   if (!gl) {
@@ -526,7 +543,8 @@ o3d.Client.prototype.initWithCanvas = function(canvas) {
       return null;
   }
 
-  canvas.client.gl = gl;
+  this.gl = gl;
+
   gl.client = this;
   gl.displayInfo = {width: canvas.width,
                     height: canvas.height};
@@ -640,7 +658,7 @@ o3d.Client.prototype.clearLostResourcesCallback =
  */
 o3d.Client.prototype.setEventCallback =
     function(type, handler) {
-  this.eventCallbacks[type] = handler;
+  this.event_callbacks_[type] = handler;
 };
 
 
@@ -650,7 +668,7 @@ o3d.Client.prototype.setEventCallback =
  */
 o3d.Client.prototype.clearEventCallback =
     function(type) {
-  this.eventCallbacks[type] = null;
+  this.event_callbacks_[type] = null;
 };
 
 
diff --git a/o3d/samples/o3d-webgl/draw_list.js b/o3d/samples/o3d-webgl/draw_list.js
index a0cffca4..3a39671 100644
--- a/o3d/samples/o3d-webgl/draw_list.js
+++ b/o3d/samples/o3d-webgl/draw_list.js
@@ -98,7 +98,7 @@ o3d.DrawList.prototype.render = function() {
       o3d.Param.SAS
     ];
 
-    material.effect.searchForParams(paramObjects);
+    material.effect.searchForParams_(paramObjects);
     element.render();
   }
 };
diff --git a/o3d/samples/o3d-webgl/effect.js b/o3d/samples/o3d-webgl/effect.js
index f8d7dc5..9822807 100644
--- a/o3d/samples/o3d-webgl/effect.js
+++ b/o3d/samples/o3d-webgl/effect.js
@@ -124,11 +124,31 @@ o3d.EffectStreamInfo.prototype.semanticIndex = 0;
 o3d.Effect = function() {
   o3d.ParamObject.call(this);
   this.program_ = null;
+  this.uniforms_ = {};
+  this.attributes_ = {};
 };
 o3d.inherit('Effect', 'ParamObject');
 
 
 /**
+ * An object mapping the names of uniform variables to objects containing
+ * information about the variable.
+ * @type {Object}
+ * @private
+ */
+o3d.Effect.prototype.uniforms_ = {};
+
+
+/**
+ * An object mapping the names of attributes to objects containing
+ * information about the attribute.
+ * @type {Object}
+ * @private
+ */
+o3d.Effect.prototype.attributes_ = {};
+
+
+/**
  * Indicates whether the vertex shader has been loaded, so we can
  * postpone linking until both shaders are in.
  * 
@@ -158,7 +178,8 @@ o3d.Effect.prototype.bindAttributesAndLinkIfReady = function() {
       this.gl.bindAttribLocation(this.program_, i, attributes[i]);
     }
     this.gl.linkProgram(this.program_);
-    this.getAllUniforms();
+    this.getUniforms_();
+    this.getAttributes_();
   }
 };
 
@@ -213,18 +234,52 @@ o3d.Effect.prototype.loadPixelShaderFromString =
 
 
 /**
+ * Loads a glsl vertex shader and pixel shader from one string.
+ * Assumes the vertex shader and pixel shader are separated by
+ * the text '// #o3d SplitMarker'.
+ * @param {string} shaderString The string.
+ */
+o3d.Effect.prototype.loadFromFXString =
+    function(shaderString) {
+  var splitIndex = shaderString.indexOf('// #o3d SplitMarker');
+  this.loadVertexShaderFromString(shaderString.substr(0, splitIndex));
+  this.loadPixelShaderFromString(shaderString.substr(splitIndex));
+};
+
+
+/**
  * Iterates through the active uniforms of the program and gets the
  * location of each one and stores them by name in the uniforms
  * object.
+ * @private
  */
-o3d.Effect.prototype.getAllUniforms =
+o3d.Effect.prototype.getUniforms_ =
     function() {
-  this.uniforms = {};
+  this.uniforms_ = {};
   var numUniforms = this.gl.getProgramParameter(
       this.program_, this.gl.ACTIVE_UNIFORMS);
   for (var i = 0; i < numUniforms; ++i) {
     var info = this.gl.getActiveUniform(this.program_, i);
-    this.uniforms[info.name] = {info:info,
+    this.uniforms_[info.name] = {info:info,
+        location:this.gl.getUniformLocation(this.program_, info.name)};
+  }
+};
+
+
+/**
+ * Iterates through the active uniforms of the program and gets the
+ * location of each one and stores them by name in the uniforms
+ * object.
+ * @private
+ */
+o3d.Effect.prototype.getAttributes_ =
+    function() {
+  this.attributes_ = {};
+  var numAttributes = this.gl.getProgramParameter(
+      this.program_, this.gl.ACTIVE_ATTRIBUTES);
+  for (var i = 0; i < numAttributes; ++i) {
+    var info = this.gl.getActiveAttrib(this.program_, i);
+    this.attributes_[info.name] = {info:info,
         location:this.gl.getUniformLocation(this.program_, info.name)};
   }
 };
@@ -272,8 +327,8 @@ o3d.Effect.prototype.createUniformParameters =
                   'worldProjectionInverseTranspose': true,
                   'worldViewProjectionInverseTranspose': true};
 
-  for (name in this.uniforms) {
-    var info = this.uniforms[name].info;
+  for (name in this.uniforms_) {
+    var info = this.uniforms_[name].info;
 
     if (sasNames[name])
       continue;
@@ -353,21 +408,28 @@ o3d.Effect.prototype.getParameterInfo = function() {
  *     EffectStreamInfo objects.
  */
 o3d.Effect.prototype.getStreamInfo = function() {
-  var r = [];
-  // TODO(petersont): This is a stub, will remove later and replace with
-  // something that actually gets its streams from the shader.
-  var standard_semantic_index_pairs = [
-    {semantic: o3d.Stream.POSITION, index: 0},
-    {semantic: o3d.Stream.NORMAL, index: 0},
-    {semantic: o3d.Stream.COLOR, index: 0},
-    {semantic: o3d.Stream.TEXCOORD, index: 0}
-  ];
-
-  for (var i = 0; i < standard_semantic_index_pairs.length; ++i) {
-    var p = standard_semantic_index_pairs[i];
-    r.push(new o3d.EffectStreamInfo(p.semantic, p.index));
+  var infoList = [];
+
+  for (var name in this.attributes_) {
+    var attributes = {
+      'position': {semantic: o3d.Stream.POSITION, index: 0},
+      'normal': {semantic: o3d.Stream.NORMAL, index: 0},
+      'tangent': {semantic: o3d.Stream.TANGENT, index: 0},
+      'binormal': {semantic: o3d.Stream.BINORMAL, index: 0},
+      'color': {semantic: o3d.Stream.COLOR, index: 0},
+      'texCoord0': {semantic: o3d.Stream.TEXCOORD, index: 0},
+      'texCoord1': {semantic: o3d.Stream.TEXCOORD, index: 1},
+      'texCoord2': {semantic: o3d.Stream.TEXCOORD, index: 2},
+      'texCoord3': {semantic: o3d.Stream.TEXCOORD, index: 3},
+      'texCoord4': {semantic: o3d.Stream.TEXCOORD, index: 4},
+      'texCoord5': {semantic: o3d.Stream.TEXCOORD, index: 5},
+      'texCoord6': {semantic: o3d.Stream.TEXCOORD, index: 6},
+      'texCoord7': {semantic: o3d.Stream.TEXCOORD, index: 7}};
+    var semantic_index_pair = attributes[name];
+    infoList.push(new o3d.EffectStreamInfo(
+        semantic_index_pair.semantic, semantic_index_pair.index));
   }
-  return r;
+  return infoList;
 };
 
 
@@ -377,17 +439,19 @@ o3d.Effect.prototype.getStreamInfo = function() {
  * the objects nearer the begining of the list.
  * 
  * @param {!Array.<!o3d.ParamObject>} object_list The param objects to search.
+ * @private
  */
-o3d.Effect.prototype.searchForParams = function(object_list) {
+o3d.Effect.prototype.searchForParams_ = function(object_list) {
   var filled_map = {};
-  for (name in this.uniforms) {
+  for (name in this.uniforms_) {
     filled_map[name] = false;
   }
   this.gl.useProgram(this.program_);
+  o3d.Param.texture_index_ = 0;
   for (var i = 0; i < object_list.length; ++i) {
     var obj = object_list[i];
-    for (name in this.uniforms) {
-      var uniformInfo = this.uniforms[name];
+    for (name in this.uniforms_) {
+      var uniformInfo = this.uniforms_[name];
       if (filled_map[name]) {
         continue;
       }
@@ -399,7 +463,7 @@ o3d.Effect.prototype.searchForParams = function(object_list) {
     }
   }
 
-  for (name in this.uniforms) {
+  for (name in this.uniforms_) {
     if (!filled_map[name]) {
       throw ('Uniform param not filled: '+name);
     }
diff --git a/o3d/samples/o3d-webgl/pack.js b/o3d/samples/o3d-webgl/pack.js
index 925e5f7..58f77d9 100644
--- a/o3d/samples/o3d-webgl/pack.js
+++ b/o3d/samples/o3d-webgl/pack.js
@@ -206,21 +206,22 @@ o3d.Pack.prototype.createTexture2D =
   texture.levels = levels;
   texture.texture_ = this.gl.createTexture();
 
-  if (enable_render_surfaces) {
+  if (width != undefined && height != undefined) {
     this.gl.bindTexture(this.gl.TEXTURE_2D, texture.texture_);
     this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height,
         0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
-
-    this.gl.texParameteri(this.gl.TEXTURE_2D, 
-      this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-    this.gl.texParameteri(this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-    this.gl.texParameteri(this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-    this.gl.texParameteri(this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
   }
 
+  this.gl.bindTexture(this.gl.TEXTURE_2D, texture.texture_);
+  this.gl.texParameteri(this.gl.TEXTURE_2D, 
+    this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+  this.gl.texParameteri(this.gl.TEXTURE_2D,
+    this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+  this.gl.texParameteri(this.gl.TEXTURE_2D,
+    this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+  this.gl.texParameteri(this.gl.TEXTURE_2D,
+    this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+
   return texture;
 };
 
diff --git a/o3d/samples/o3d-webgl/param.js b/o3d/samples/o3d-webgl/param.js
index 3b23f58..d888726 100644
--- a/o3d/samples/o3d-webgl/param.js
+++ b/o3d/samples/o3d-webgl/param.js
@@ -749,16 +749,29 @@ o3d.ParamMatrix4.prototype.applyToLocation = function(gl, location) {
 };
 
 /**
+ * A counter to ensure each texture sampler gets a unqiue id.
+ * @private
+ */
+o3d.Param.texture_index_ = 0;
+
+/**
  * Called to specify the value of a uniform variable.
  */
 o3d.ParamSampler.prototype.applyToLocation = function(gl, location) {
-  var i = 0;
+  // When before the effect object assigns values to parameters,
+  // it sets this variable to 0.
+  var i = o3d.Param.texture_index_;
   gl.activeTexture(gl.TEXTURE0 + i);
-  if (!this.value || !this.value.texture || !this.value.texture.texture_) {
-    throw ('Attempt to use texture parameter before texture value set.');
+
+  var value = null;
+
+  if (this.value && this.value.texture && this.value.texture.texture_) {
+    value = this.value.texture.texture_;
   }
-  gl.bindTexture(gl.TEXTURE_2D, this.value.texture.texture_);
+
+  gl.bindTexture(gl.TEXTURE_2D, value);
   gl.uniform1i(location, i);
+  o3d.Param.texture_index_++;
 };
 
 
diff --git a/o3d/samples/o3d-webgl/primitive.js b/o3d/samples/o3d-webgl/primitive.js
index ed45a65..7a757af 100644
--- a/o3d/samples/o3d-webgl/primitive.js
+++ b/o3d/samples/o3d-webgl/primitive.js
@@ -124,6 +124,8 @@ o3d.Primitive.prototype.render = function() {
   var streamBank = this.streamBank;
   var indexBuffer = this.indexBuffer;
 
+  var enabled_attribs = [];
+
   for (var semantic = 0;
        semantic < streamBank.vertexStreams.length;
        ++semantic) {
@@ -139,6 +141,7 @@ o3d.Primitive.prototype.render = function() {
 
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer.gl_buffer_);
         this.gl.enableVertexAttribArray(gl_index);
+        enabled_attribs.push(gl_index);
 
         // TODO(petersont): Change that hard-coded 4 down there.
         this.gl.vertexAttribPointer(
@@ -154,4 +157,8 @@ o3d.Primitive.prototype.render = function() {
                        this.numberPrimitives * 3,
                        this.gl.UNSIGNED_SHORT,
                        0);
+
+  for (var i = 0; i < enabled_attribs.length; ++i) {
+    this.gl.disableVertexAttribArray(enabled_attribs[i]);
+  }
 };
diff --git a/o3d/samples/o3d-webgl/render_surface_set.js b/o3d/samples/o3d-webgl/render_surface_set.js
index 6b4bbec..61692a5a 100644
--- a/o3d/samples/o3d-webgl/render_surface_set.js
+++ b/o3d/samples/o3d-webgl/render_surface_set.js
@@ -88,7 +88,7 @@ o3d.RenderSurfaceSet.prototype.clearFramebufferObjects_ =
 
   this.gl.framebufferRenderbuffer(
       this.gl.FRAMEBUFFER,
-      this.gl.DEPTH_STENCIL_ATTACHMENT,
+      this.gl.DEPTH_ATTACHMENT,
       this.gl.RENDERBUFFER,
       0);
 
diff --git a/o3d/samples/o3d-webgl/shape.js b/o3d/samples/o3d-webgl/shape.js
index ab47b2f..8d82c73 100644
--- a/o3d/samples/o3d-webgl/shape.js
+++ b/o3d/samples/o3d-webgl/shape.js
@@ -94,7 +94,7 @@ o3d.Shape.prototype.addElement = function(element) {
  * @param {o3d.Element} element The element to add.
  */
 o3d.Shape.prototype.removeElement = function(element) {
-  
+  o3d.removeFromArray(this.elements, element);
 };
 
 
@@ -108,15 +108,25 @@ o3d.Shape.prototype.removeElement = function(element) {
 o3d.Shape.prototype.writeToDrawLists =
     function(drawListInfos, world, transform) {
   var elements = this.elements;
+
+  // Iterate through elements of this shape.
   for (var i = 0; i < elements.length; ++i) {
     var element = elements[i];
+
+    // For each element look at the DrawElements for that element.
     for (var j = 0; j < element.drawElements.length; ++j) {
       var drawElement = element.drawElements[j];
-      var materialDrawList = drawElement.material.drawList;
+      var material = drawElement.material || drawElement.owner.material;
+      var materialDrawList = material.drawList;
+
+      // Iterate through the drawlists we might write to.
       for (var k = 0; k < drawListInfos.length; ++k) {
         var drawListInfo = drawListInfos[k];
         var list = drawListInfo.list;
         var context = drawListInfo.context;
+
+        // If any of those drawlists matches the material on the drawElement,
+        // add the drawElement to the list.
         if (materialDrawList == list) {
           list.list_.push({
             view: context.view,
@@ -130,3 +140,5 @@ o3d.Shape.prototype.writeToDrawLists =
     }
   }
 };
+
+
diff --git a/o3d/samples/o3d-webgl/state.js b/o3d/samples/o3d-webgl/state.js
index cf5fea7..e0ab1d7 100644
--- a/o3d/samples/o3d-webgl/state.js
+++ b/o3d/samples/o3d-webgl/state.js
@@ -252,7 +252,7 @@ o3d.State.STENCIL_DECREMENT = 7;
  * Returns a Param for a given state. If the param does not already exist it
  * will be created. If the state_name is invalid it will return null.
  * @param {string} state_name name of the state
- * @returns {o3d.Param}  param or null if no matching state.
+ * @return {o3d.Param}  param or null if no matching state.
  * 
  * Example:
  * 
@@ -501,9 +501,9 @@ o3d.State.prototype.set = function() {
   var stateParams = this.state_params_;
 
   if (stateParams['AlphaBlendEnable'].value) {
-    this.gl.enable(this.gl.ALPHA);
+    this.gl.enable(this.gl.BLEND);
   } else {
-    this.gl.disable(this.gl.ALPHA);
+    this.gl.disable(this.gl.BLEND);
   }
 
   if (stateParams['SeparateAlphaBlendEnable'].value) {
@@ -513,10 +513,15 @@ o3d.State.prototype.set = function() {
         this.convertBlendFunc(stateParams['SourceBlendAlphaFunction'].value),
         this.convertBlendFunc(
             stateParams['DestinationBlendAlphaFunction'].value));
+    this.gl.blendEquationSeparate(
+      this.convertBlendEquation(stateParams['BlendEquation'].value),
+      this.convertBlendEquation(stateParams['BlendAlphaEquation'].value));
   } else {
-    this.gl.blendFuncSeparate(
+    this.gl.blendFunc(
         this.convertBlendFunc(stateParams['SourceBlendFunction'].value),
         this.convertBlendFunc(stateParams['DestinationBlendFunction'].value));
+    this.gl.blendEquation(
+      this.convertBlendEquation(stateParams['BlendEquation'].value));
   }
 
   switch (stateParams['CullMode'].value) {
@@ -533,15 +538,6 @@ o3d.State.prototype.set = function() {
       break;
   }
 
-  if (stateParams['SeparateAlphaBlendEnable'].value) {
-    this.gl.blendEquationSeparate(
-      this.convertBlendEquation(stateParams['BlendEquation'].value),
-      this.convertBlendEquation(stateParams['BlendAlphaEquation'].value));
-  } else {
-    this.gl.blendEquation(
-      this.convertBlendEquation(stateParams['BlendEquation'].value));
-  }
-
   if (stateParams['DitherEnable'].value) {
     this.gl.enable(this.gl.DITHER);
   } else {
diff --git a/o3d/samples/o3d-webgl/texture.js b/o3d/samples/o3d-webgl/texture.js
index 7c5367b..90bda54 100644
--- a/o3d/samples/o3d-webgl/texture.js
+++ b/o3d/samples/o3d-webgl/texture.js
@@ -284,16 +284,6 @@ o3d.Texture2D.prototype.setFromBitmap =
                      0,  // Level.
                      bitmap.canvas_,
                      bitmap.defer_flip_verically_to_texture_);
-
-  this.gl.texParameteri(this.gl.TEXTURE_2D, 
-      this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-  this.gl.texParameteri(this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-  this.gl.texParameteri(this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-  this.gl.texParameteri(this.gl.TEXTURE_2D,
-      this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
-
   if (bitmap.defer_mipmaps_to_texture_) {
     this.generateMips();
   }
@@ -325,7 +315,21 @@ o3d.Texture2D.prototype.drawImage =
     function(source_img, source_mip, source_x, source_y, source_width,
              source_height, dest_mip, dest_x, dest_y, dest_width,
              dest_height) {
-  o3d.notImplemented();
+  var canvas = o3d.Bitmap.getScratchCanvas_();
+  canvas.width = dest_width;
+  canvas.height = dest_height;
+
+  var context = canvas.getContext('2d');
+
+  context.translate(-source_x, -source_y);
+  context.scale(dest_width / source_width,
+                dest_height / source_height);
+
+  context.drawImage(source_img.canvas_,
+      0, 0, source_img.canvas_.width, source_img.canvas_.height);
+
+  this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture_);
+  this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, canvas);
 };