greggman / twgl.js

A Tiny WebGL helper Library
http://twgljs.org
MIT License
2.61k stars 258 forks source link

Suggestion to add examples with .removeX() / .dispose() #169

Open munrocket opened 4 years ago

munrocket commented 4 years ago

Seems that we need an examples with textures, framebuffers etc.

gl.deleteBuffer(buffer)
gl.deleteFramebuffer(fb)
gl.deleteProgram(programm)
gl.deleteRenderbuffer(rb)
gl.deleteShader(shader)
gl.deleteTexture(texture)

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/deleteTexture

kdziamura commented 4 years ago

These methods mark items as unavailable as I understand (from the end-user perspective). Should the user track objects produced by TWGL manually, or maybe it makes sense to implement some general method to dispose of both WebGL raw data and TWGL objects?

munrocket commented 4 years ago

Since twgl is thin wrapper on vanilla webgl probably enough just an example, but I didn't look carefully.

greggman commented 4 years ago

Most things are pretty straight forward.

const tex = twgl.createTexture(...);
gl.deleteTexture(tex);
const textures = twgl.createTextures(...);
Object.values(textures).forEach(tex => gl.deleteTexture(tex));
const fbi = twgl.createFrameBufferInfo(...);
gl.deleteFramebuffer(fbi.framebuffer);
for (const attachment of fbi.attachments) {
  if (attachment instanceof WebGLRenderbuffer) {
    gl.deleteRenderbuffer(attachment);
  } else {
    gl.deleteTexture(attachment);
  }
}
const bufferInfo = twgl.createBufferInfoFromArrays(...);
for (const attrib of Object.values(bufferInfo.attribs)) {
  gl.deleteBuffer(attrib.buffer);
}
if (bufferInfo.indices) {
  gl.deleteBuffer(indices);
}

Maybe it would be okay to add functions to do that. The problem is twgl doesn't know how you used them.

you can do this

const bufferInfo1 = twgl.createBufferInfromFromArrays(gl, {
  position: positions,
});

const bufferInfo2 = twgl.createBufferFromArrays(gl, {
   position: { buffer: bufferInfo1.position.buffer },   // use the position buffer from bufferInfo1
});

Similarly you can do this

const fbi1 = twgl.createFramebufferInfo(gl);   // makes an RGBA/UNSIGNED_BYTE color buffer and a depth renderbuffer
const fb2 = twgl.createFramebufferInfo(gl, [
  { format: gl.RGBA, },
  { attach: gl.DEPTH_ATTACHMENT, attachment: fbt1.attachments[1]  },  // reuse same depth buffer
]);

But twgl has no way to track those things are being used twice so if delete functions are added you just have to be aware when you can't use them whereas creation has no such issues.