Support IEWebGL about seriously.js

[brianchirls]

It looks like it wouldn't work as is. As far as I can tell, IEWebGL uses an <object> element in place of a canvas. Seriously.js requires "Target" nodes to be a <canvas> element. I suppose it's possible to use duck typing instead to allow an <object> element with a .getContextmethod, assuming everything else works the same as native WebGL.

As long as you're going to require users to install a plugin, why not just use Chrome Frame?

[Xogede]

Thanks for the answer! I have a local application where the UI is done by embedding Internet Explorer 9. I chose IE because of the ease of communication using ActiveX, and also because it worked way smoother for my workloads than other browsers. Seriously.js, especially the hue-saturation filter, would greatly enhance its uses.
IEWebGL seems to have a setting that allows local video files to be played (http://iewebgl.com/Developer.aspx#SpecialSettings), allowing it to be used in such a context.

I could try to remove the canvas element checks myself in a local copy, but I figured it wouldn't hurt to ask about official IEWebGL support first.

[brianchirls]

Couldn't hurt to fork and create new branch.

Maybe try a polyfill on the canvas element that creates a new <object> element and a WebGLRenderingContext using the IEWebGL plugin. Something like...

(function() {
  var canvas = document.createElement('canvas');
  var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  if (gl) {
    return;
  }

  var originalGetContext = window.HTMLCanvasElement.prototype.getContext;

  window.HTMLCanvasElement.prototype.getContext = function(contextType) {
    if (contextType !== 'experimental-webgl' && contextType !== 'webgl') {
      return originalGetContext.call(this, contextType);
    }

    // <object style="width:100%;height:100%" id="glCanvas" type="application/x-webgl"></object>
    var element = document.createElement('object');
    element.setAttribute('type', 'application/x-webgl');
    element.setAttribute('width', this.width);
    element.setAttribute('height', this.height);
    //todo: position this object element on top of the canvas element.
    gl = element.getContext(contextType);
    return gl;
  };
}());

You'd have a lot of work to do to keep the object element in the right place, but this might help you use the existing code - in particular the unit tests, which will really help you make sure everything is working right. Many of the unit tests explicitly create a canvas element, and you'd have to rewrite them all to get them using an object instead.

[brianchirls]

It's probably worth reading an analogous thread on three.js where they tried the same thing.
mrdoob/three.js#2173

[brianchirls]

I'm going to close this for now, since there hasn't been activity in over a year. IE is on it's way to full WebGL support, and this is outside the scope of Seriously.js. I have added a new feature that allows for different source types to be defined as plugins. I may one day make targets pluggable as well, which might make something like this easier.