WebGLRenderer.dispose() does not release passed in canvas

Questions
,
1

Hi!
I have a main page with a canvas element called “MyCanvas”. I use this canvas element to AJAX load small Three JS games. If the first game uses WebGLRenderer antialias=false, the next game loaded is also using the same antialias setting even if I dispose the renderer and set the second game to antialias=true. However, if I use a unique canvas element for each game, I can set a different antialias setting and it works.

I thought WebGLRenderer.dispose() would “let go” of the canvas. So my question is, how can I use the same canvas with different antialias settings?

2

Most likely it is not possible to reuse the canvas with different attributes. The 3D context of the canvas is created by the getContext method. According to the documentation:

Later calls to this method on the same canvas element, with the same contextType argument, will always return the same drawing context instance as was returned the first time the method was invoked. It is not possible to get a different drawing context object on a given canvas element.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

WebGL context attributes are set during context creation and cannot be changed afterwards. At least there is no official API method for this.

For your case, I have two suggestions:

  • Simple: have two canvases - one with antialias context and another with non-antialias context. When you load a Three.js game, use the appropriate canvas.
  • Complex: because a game may also use different values for other attributes (e.g. stencil, depth, …) it is better to have a separate canvas for different sets of attributes … I mean – reuse old canvas if it has the same attributes, and create a new one only of they differ.
3

Hi!
Thank you for your suggestions. I will go with the two canvases option. Tried it and it works for me.

1 Like