Cleanup best practices

[thisispete]

I've been working with version 8.5, and I have some memory leaks when adding and removing canvases from the dom, overtime I get progressively worse framerates.

Are there any best-practices for cleanup?

I have something like:

const loop = new AnimationLoop({
    onCreateContext(props) {
      const gl = instrumentGLContext(canvas.getContext("webgl"));
      return gl;
    },
    onInitialize(animationProps) {
      const { gl } = animationProps;
      model = new Model(gl, {
        fs: fragmentShader,
        vs: vertexShader,
        attributes: {
          position: new Buffer(gl, verticies)
        },
        uniforms,
        modules,
        vertexCount
      });
      if (blend) {
        setParameters(gl, {
          blend: true,
          blendFunc: [gl.SRC_ALPHA_SATURATE, gl.ONE_MINUS_SRC_ALPHA]
        });
      }
      return animationProps;
    },
    onRender({ gl, time }) {
      clear(gl, { color: [0, 0, 0, 0] });
      uniforms.width = gl.canvas.clientWidth;
      uniforms.height = gl.canvas.clientHeight;
      if (animated) {
        uniforms.time = time / 1e3;
      }
      model.draw({ uniforms });
    }
  });
  loop.start();
});

I dug around in the function signatures and found a onFinalize method but it never seems to get called. I also tried calling loop.stop() loop.delete() before removing the canvas from the dom..

any tips?

[ibgreen]

We could look into why onFinalize isn't called but generally working with multiple canvases is the achilles heel of WebGL. It creates a new WebGL context for every canvas, and there is no method available for destroying a WebGL context. So all the GPU and CPU overhead that goes with that keeps accreting.

I don't know enough about the structure of your application but you should be aware of the fundamental limitations.

[thisispete]

thanks, I was not aware there was no proper destroy for WebGL context! I will have to re-factor my app to re-use the same canvas or something like that it seems.