Two.js and Three.js in same canvas Element

[jackbach]

Hey There ✌️✨

I'm trying to render Two.js and Three.js in the same WebGL canvas.

What I'm trying to do:

1. disable autoclear in both Two.js and Three.js renderers
2. render Two.js scene to canvas
3. render Three.js scene to canvas
4. Clear and go to (2)

I think I'm getting there but i have this error thrown by two.js

WebGL: INVALID_OPERATION: uniformMatrix3fv: location is not from current program

You can see it live in this codepen

Any idea on how to fix this? Thanks 😄

By the way, is this a good idea, or would it be better to use different canvas with alpha?

[jonobr1]

This is a great question. I've never seen anyone mix the two as you are doing... Unfortunately, at this time both Two.js and Three.js internally create their own GL Programs. The result is that you can't mix and match things on the same context.

You can mix and match primitive objects as in the Puzzle Piece Example and you can also render Two.js to a canvas and then apply that to a Three.js scene either through a texture or Render Target. I'm in transit now, but will update this with links when I'm back at a computer with stable internet.

[jackbach]

Interesting, I dont know why I was giving for granted that it would be possible. I made a bit of research and found [this issue in the Pixi.js repo](pixijs/pixijs#1366). Apparently in Three.js `renderer.resetGLState()` resets some flags and makes this possible. Is there a way to do something like that in Two.js? I'm afraid copying pixel data and passing it as a texture to Three.js is not gonna be really performant (had that issue in the past when doing the same thing with a big video). Might end up trying it anyway 😕 Thanks for the quick answer by the way!

…

_____________________________ From: Jono Brandel <notifications@github.com<mailto:notifications@github.com>> Sent: Tuesday, June 20, 2017 6:29 PM Subject: Re: [jonobr1/two.js] Two.js and Three.js in same canvas Element (#226) To: jonobr1/two.js <two.js@noreply.github.com<mailto:two.js@noreply.github.com>> Cc: Jack Bach <jackjackbach@gmail.com<mailto:jackjackbach@gmail.com>>, Author <author@noreply.github.com<mailto:author@noreply.github.com>> This is a great question. I've never seen anyone mix the two as you are doing... Unfortunately, at this time both Two.js and Three.js internally create their own GL Programs. The result is that you can't mix and match things on the same context. You can mix and match primitive objects as in the Puzzle Piece Example and you can also render Two.js to a canvas and then apply that to a Three.js scene either through a texture or Render Target. I'm in transit now, but will update this with links when I'm back at a computer with stable internet. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#226 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAj147m7EesrNbSU4J9FGf4yhTCyfl2Pks5sF_NZgaJpZM4N_uT7>.

[jonobr1]

Interesting! In theory there should be a way, but you might have to modify the Two.js source because at the moment there isn't a way to get the GL program from within the closure of Two.js' WebGL Renderer...

This is kind of random, but have you tried instantiating Three.js first and then passing the canvas to a new instance of Two.js? I don't imagine it will yield any better results, but I'd be interested to know what the errors are -- if they're the same or different.

[jonobr1]

Actually, scratch all of that. You can get access to the program via: two.renderer.program. So, if you can get the program out of Three.js (which I think you have to modify the source for in order to do this). You can set the two.renderer.program to it. Wherever you set that reference also add this code once:

    // look up where the vertex data needs to go.
    program.position = gl.getAttribLocation(this.program, 'a_position');
    program.matrix = gl.getUniformLocation(this.program, 'u_matrix');
    program.textureCoords = gl.getAttribLocation(this.program, 'a_textureCoords');

    var gl = two.renderer.ctx;

    // Copied from Three.js WebGLRenderer
    gl.disable(gl.DEPTH_TEST);

    // Setup some initial statements of the gl context
    gl.enable(gl.BLEND);

    // https://code.google.com/p/chromium/issues/detail?id=316393
    // gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, gl.TRUE);

    gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA,
      gl.ONE, gl.ONE_MINUS_SRC_ALPHA );

And in theory you should be able to render a Two.js scene to that canvas. Don't know how it'll affect the Three.js rendering... Please let me know if you try this out!

[jonobr1]

Moving forward to find the solution for cross library use of the Two.js GL context we'll be having discussion on this thread: #249