Share Context with WebGLRenderer

Questions
1

I try to share a previously created webgl context with a threejs WebGLRenderer.
It works to add the context as a param to the renderer like this:

const gl = canvas.getContext('webgl')
...
const renderer = new THREE.WebGLRenderer({context: gl})

But everything which is drawn before the renderer.render() is not visible anymore.
Please see this codepen: https://codepen.io/ascii-husky/pen/oNgMvpg

Do I need to set some parameter on the renderer to compose the objects from threejs over everything drawn before?

Thanks!

2

You can try with:

renderer.autoClear = false;

3

What you are doing in your code is not recommended/supported since you produce a bad mismatch between actual and cached WebGL state information.

three.js as any other 3D engine caches WebGL state information in order to minimize the amount of WebGL state changes and thus API calls. If you perform state changes via the raw WebGL context object, the internal caching gets out of sync. Hence, the renderer produces an undefined behavior.

You can perform certain state change via renderer.state (which represents an instance of the WebGLState class). But it’s not possible to define custom buffer data.

1 Like
4

@Mugen87, @vujadin

Thanks for the clarification.