[idea] Update 3D texture tutorial on using textures in framebuffers.

[trusktr]

That would be a nice tutorial.

Right now, in the 3D tutorial, we learn how to pull textures from a separate canvas very easily by modifying the tutorial to simply pass in the HTMLCanvasElement to gl.texImage2D. And we easily know how to render 3D scenes to a 3D canvas, so we can easily being the 3D drawing of one canvas and render it as a texture on the mesh in another canvas.

But I think drawing stuff in a single canvas webgl context may be faster? (I haven't tested). It'd be nice to also describe how to use frame buffers in the 3D texture tutorial.

I believe the Imaging tutorial probably has enough info, and I can piece it together, then maybe I can update the 3D Texture tutorial.

[greggman]

I would prefer rendering to a texture to be a separate article. It's on my list. Rendering to a texture is easy and it is inferable from the image articles but sure, a separate article on how to do it would be useful. It's also significantly faster than copying to a another canvas.

Mostly though rendering to textures is used for shadows and post processing effects (depth of field, bloom, tone mapping) and then more advanced things like deferred rendering, screen space ambient occlusion etc, ...

So that's the progression, first learn how to draw to a texture, then learn why you'd want to.

[greggman]

FYI I added these

https://webglfundamentals.org/webgl/lessons/webgl-data-textures.html

https://webglfundamentals.org/webgl/lessons/webgl-render-to-texture.html

The first one came up as I was writing the 2nd because I felt I needed to explain the formats at least a tiny bit.

[trusktr]

Thanks for the great tutorial!! I think only one thing remains to have the full basics complete: ordered transparency (Three.js has) and/or weighted blended order-independent transparency (Three.js doesn't have yet). https://github.com/mrdoob/three.js/issues/4814

[greggman]

You might find this useful

https://stackoverflow.com/questions/50720534/implementing-depth-testing-for-semi-transparent-objects/50777930#50777930

I'm not 100% confident it's correct (my math sucks) but it looks correct at a glance.