OpenGL’s pipeline is fixed-function but programmable via shaders:
const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
Start with a framework for speed, but drop down to raw WebGL/OpenGL when you need to optimize a specific bottleneck.
Finally, the Web Worker issues the actual drawArrays or drawElements commands via OffscreenCanvas. The result is then composited back to the main canvas element.
| Approach | Best for | |----------|----------| | | Cross-platform apps, small-to-medium scenes, full control in browser | | Remote native OpenGL + WebRTC | Heavy scenes, ray tracing, large datasets, professional rendering | | WebSocket control of local native OpenGL | Internal tools, interactive installations, multi-display setups |