Can three.js work with IEWEBGL plugin?

[shermanlsh]

three.js is a very good library for webgl, but till now IE don't support the WEBGL, IE covers about 60% of browser now, someone else distribute a webgl plugin for IE, but can three.js work with the IEWEBGL plugin? if so, how it works? thank you very much.

[mrdoob]

I don't think anyone has tried it. Considering that you seem interested... do you mind trying it?

[bsabiston]

I thought I saw a news item this weekend that IE had sunk to 15%?

[Iter-Ator]

@shermanlsh IEWebGL should work with three.js, but you have to modify the code a bit, because IEWebGL creates the 3D canvas in a different way.

WebGLHelper.CreateGLCanvasInline('WebGLCanvasId', OnCanvasCreated, OnCanvasFailed)

The WebGLHelper libary is located in here: http://iewebgl.com/Scripts/webglhelper.js

If you take a closer look on the code, you will find, how WebGLHelper.CreateGLCanvas works:

WebGLHelper.CreateGLCanvas = function (el, id, replace, okHandler, failHandler) {
  if (WebGLHelper.IsIE()) {
    var usePlugin;
    try {
      usePlugin = WebGLRenderingContext.hasOwnProperty('iewebgl');
    } catch (e) {
      usePlugin = true;
    }

    if (usePlugin) {
      return WebGLHelper.CreatePluginCanvas(el, id, replace, okHandler);
    } else {
      return WebGLHelper.CreateNativeCanvas(el, id, replace, okHandler, failHandler);
    }
  } else {
    return WebGLHelper.CreateNativeCanvas(el, id, replace, okHandler, failHandler);
  }
}

@mrdoob @alteredq : I haven't tested IEWebGL with three.js yet, but I think it will be a great feature, if the users would be able to run the three.js webgl project in IE.

http://iewebgl.com/Faq.aspx http://iewebgl.com/Developer.aspx

[Iter-Ator]

I'm working on it. ;-)

[shermanlsh]

great, if you have any result, please let me know, I want to get it.

[Iter-Ator]

I tried it in many different ways, but none of them worked.

I don't get any error message on the console, it just isn't rendered. To run three.js project in IE would be great, but it's impossible at the moment (or I did something wrong)

[shermanlsh]

I have tried it, the IEWEBGL can only work with three.js on the CanvasRender, the WebGLRender doesn't work. I will put the code later, I don't know if this is useful? because a large model run with CanvasRender is too slow, WebGl is must for complex project.

[Iter-Ator]

CanvasRender works with the native canvas support of IE9 IEWebGL doesn't support canvas 2D:

Q: Does IEWebGL implement 2d context ?
A: No, IE9+ supports 2d context natively, and it is very complex to make fully standard-compatible implementation of 2d context for IE8, so IEWebGL provide only WebGL context.

[gonzoramos]

I also share @adamika2000 experience with trying to run three.js using iewebgl. on ie9 i get a weird error, and in ie10 i get no errors and nothing gets rendered ... i contacted the iewebgl guys and they say that in theory three.js should work on ie10. I am not sure the work that needs to happen to integrate the two though.

I also feel that having three.js working in ie10 with iewebgl would be great. any way we can help debug things?

[Iter-Ator]

@gonzoramos I tried everything, but still nothing. Using webglhelper.js also didn't helped.

I uploaded my last try here: http://armacham.tk

[mrdoob]

@gonzoramos I think SoftwareRenderer has more potential than iewebgl+WebGLRenderer.

[arkasia]

@mrdoob The metro version of IE10 can't run plugins, so we can't use iewebgl there, but in desktop ie10 and 9 iewebgl is much faster then softwarerenderer. If you look at iewebgl copperlicht demos, you will see, it's fast enough.

I hope, somebody will find, why it doesn't work :-)

Unfortunately IE will never support WebGl. They will maybe come up with a directx stuff.

[gonzoramos]

I concur with @arkasia, I the SoftwareRenderer is just not fast enough :(

I think is valuable to have the discussion about what has potential or what does not, as long as we explore both options. How can we help?

[mrdoob]

Ah wait, I thought you guys were talking about JebGL.

Sure, would be good to know why IEWebGL is not playing along. No errors on the console?

[Iter-Ator]

@mrdoob No error message. It just simply isn't rendered.

[gonzoramos]

Reading my previous comment it looked like I was dismissing the effort put on the SoftwareRender. Quite the oposite!

I love three.js and I want it to become a widespread platform for everybody to produce amazing content on the web. Through iewebgl there is a chance to reach a lot of high-framerate (>40 fps, actually the softwarerenderer demo gives 15fps) scenarios where chrome and other webgl-enabled browsers are not an option and I would love for that to happen.

[gonzoramos]

@mrdoob No console errors, just a console out saying something like webrenderer49

[mrdoob]

on ie9 i get a weird error, and in ie10 i get no errors and nothing gets rendered ...

...

just a console out saying something like webrenderer49

Always better to share the actual messages, and not your opinion or interpretation :)

[chandlerprall]

Looks like IEWebGL isn't a 100% drop-in replacement - http://iewebgl.com/Developer.aspx#CreatingTutorial

[gonzoramos]

@mrdoob indeed :)

here is the actual console error on ie9. i am working on the dev branch, which I compiled unminimized...

SCRIPT87: Could not complete the operation due to error 8070000c. three.js, line 19757 character 2

which translates to

// default plugins (order is important)

this.shadowMapPlugin = new THREE.ShadowMapPlugin();
this.addPrePlugin( this.shadowMapPlugin );
this.addPostPlugin( new THREE.SpritePlugin() ); << this is the line
this.addPostPlugin( new THREE.LensFlarePlugin() );

[mrdoob]

That's indeed a bit more useful ;) I guess I'll have to get a Windows machine with IE10 and test...

[gonzoramos]

@mrdoob great! Just to confirm, the SCRIPT87 error y refer above occurs on IE9. IE10's console shows no errors (and no content is rendered)

[iewebgl]

Hello everybody.

As the developers of IEWebGL we also want to fix all possible issues, preventing Three.js to run on IEWebGL. So if anybody have suggestions or can point us to wrong behavior of the plugin, please let us know. At the present time we tried some demos from Three.js repository. After a couple lines of modifications, we have no console errors, but also nothing is rendered, although rendering loop runs OK. We will continue investigation and will publish results and proposed fixes (if they are required) here.

[mrdoob]

Thanks for taking a look at this @iewebgl! It sure will be more effective for you to take a look at this than us.

[iewebgl]

@mrdoob @gonzoramos @adamika2000 @chandlerprall @shermanlsh

Now it works in IE9 and IE10. It was just a matter of proper initialization. Because of asynchronous nature of plugin loading process in IE, we need to load three.js script asynchronously too, because it has some startup code, that checks presense of TypedArray objects, which are not available in IE9 until IEWebGL is loaded. We use require.js for that.

We have also done a one-line patch for THREE.js (THREE.BinaryLoader to be precise), to support receiving binary data in IE9, as it does not support XHR with "arraybuffer" response, we have a workaround for that in IEWebGL (http://iewebgl.com/Developer.aspx#NonStandardBehaviour). So BinaryLoader.js lines 80-83 should look like:

var buffer = xhr.response;
if (!buffer) buffer = (new Uint8Array(xhr.responseBody)).buffer;
THREE.BinaryLoader.prototype.createBinModel( buffer, callback, texturePath, json.materials );

There is a problem with Detector class, We don't know how to fix it right, so we've just commented it out, and use WebGL support detection from our WebGLHelper.js.

Several demos are available: http://iewebgl.com/Engines.aspx#ThreeJS. If somebody experience problems using THREE.js with IEWebGL, please tell us.

[mrdoob]

Great news! Glad that you get it to work.

Just one question regarding the code change:

if ( !buffer ) buffer = ( new Uint8Array( xhr.responseBody ) ).buffer;

I'm currently trying to avoid the !buffer pattern. What would be the correct one here?

if ( buffer === undefined ) buffer = ( new Uint8Array( xhr.responseBody ) ).buffer;

or...

if ( buffer === null ) buffer = ( new Uint8Array( xhr.responseBody ) ).buffer;

?

[iewebgl]

@mrdoob

if ( buffer === undefined ) buffer = ( new Uint8Array( xhr.responseBody ) ).buffer;

is the correct one

[mrdoob]

Great. Thanks!