Building WebGL libraries that work with each other in the same webgl context.

[trusktr]

Description of the problem

It's difficult and complex these days to mix WebGL libraries together, to draw things using different libraries in the same webgl context. (examples of difficulties: mrdoob/three.js#8147, pixijs/pixijs#3230, pixijs/pixijs#3345, pixijs/pixijs#1366, pixijs/pixijs#298, #233)

For example, suppose we would like to render Three, Babylon, and Pixi objects into the same WebGL context, in the same 3D space.

It is currently very difficult to do this because each WebGL library manages state of the context in their own ways, and these private internals often change and break solutions that people come up with because there's no standard way to do it.

Pixi.js v4 goes through efforts to make Pixi compatible with Three.js, so that it can render in a Three scene, but this is obviously fragile.

Solution

Enter Regl to the party.

Maybe if the foundations for each library (Three, Babylon, Pixi, Two, etc) were built on Regl, we'd have a common way of rendering to a single context.

Regl makes an abstraction just on top of raw WebGL for managing WebGL state. It doesn't render for you all the things that Three.js can, it only provides the minimal foundation for working with raw WebGL in a stateful way that is easy to manage.

It seems that libraries like Three, Babylon, PlayCanvas, Pixi, Two, etc, could benefit from using a standardized way for managing WebGL state, which would make it easy to combine renderings from any of these libraries into the same WebGL context.

---

What are your thoughts on refactoring the foundation of Two.js to use Regl for managing WebGL state? Does Regl offer enough flexibility for Two.js to do what it needs to do on top of Regl?

[jonobr1]

Thanks for sharing this! I've never heard of regl, but it looks really interesting and I definitely would love to spruce up the WebGLRenderer. I can't specifically say that I will or won't implement this library, but I definitely agree with you that making the GL context more accessible / flexible is something the Two.js library should offer so you, the developer, can do additional customization.

[sandsfish]

+1

[jonobr1]

This example shows how to mix PIXI and Three: https://jsfiddle.net/psgvteg0/10/

I don't imagine it would be anything different for using Two.js instead of (or on top of) this example. When using the WebGLRenderer in Two.js you can access the GL context by accessing:

two.renderer.ctx

Also, for those that come to this looking to not mix contexts, but to send a Two.js scene to Three.js to render as a texture: this is very common! Here's an example: https://codepen.io/jonobr1/pen/RwjPVZg