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

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: #8147, pixijs/pixi.js#3230, pixijs/pixi.js#3345, pixijs/pixi.js#1366, pixijs/pixi.js#298, jonobr1/two.js#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.


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 Three.js to use Regl for managing WebGL state? Does Regl offer enough flexibility for Three.js to do what it needs to do on top of Regl?

Author: Fantashit

1 thought on “Building WebGL libraries that work with each other in the same webgl context.

  1. Just my 2cts: I really like regl but I’m not sure we want to include such big dependency on three.js when:

    • The project is marked as “completed”: regl-project/regl#423
    • Many people seem to have problems understanding its core (regl-project/regl#200) so I believe we can’t afford adding an important dependency without really understanding what is going on there and how to change it and evolve it as we need.
    • It looks like WebGL2.0 is not making it to regl (regl-project/regl#378)

Comments are closed.