Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can three.js work with IEWEBGL plugin? #2173

Closed
shermanlsh opened this issue Jul 9, 2012 · 28 comments
Closed

Can three.js work with IEWEBGL plugin? #2173

shermanlsh opened this issue Jul 9, 2012 · 28 comments
Labels

Comments

@shermanlsh
Copy link

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
Copy link
Owner

mrdoob commented Jul 9, 2012

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

@bsabiston
Copy link

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

@Iter-Ator
Copy link

@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
Copy link

I'm working on it. ;-)

@shermanlsh
Copy link
Author

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

@Iter-Ator
Copy link

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
Copy link
Author

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
Copy link

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
Copy link

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
Copy link

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

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

@mrdoob
Copy link
Owner

mrdoob commented Jul 12, 2012

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

@arkasia
Copy link

arkasia commented Jul 12, 2012

@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
Copy link

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
Copy link
Owner

mrdoob commented Jul 13, 2012

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
Copy link

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

@gonzoramos
Copy link

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
Copy link

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

@mrdoob
Copy link
Owner

mrdoob commented Jul 14, 2012

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
Copy link
Contributor

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

@gonzoramos
Copy link

@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
Copy link
Owner

mrdoob commented Jul 19, 2012

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

@gonzoramos
Copy link

@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
Copy link

iewebgl commented Jul 30, 2012

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
Copy link
Owner

mrdoob commented Jul 30, 2012

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
Copy link

iewebgl commented Aug 2, 2012

@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
Copy link
Owner

mrdoob commented Aug 4, 2012

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
Copy link

iewebgl commented Aug 6, 2012

@mrdoob

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

is the correct one

@mrdoob
Copy link
Owner

mrdoob commented Aug 6, 2012

Great. Thanks!

wvl pushed a commit to wvl/three.js that referenced this issue Nov 28, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants