Summary
Remove WebGL1 fallback and require WebGL2 as the minimum GPU renderer. WebGL2 has ~97% browser support (Safari 15+, Chrome 56+, Firefox 51+). This would coincide with the WebGPU renderer addition (#1184), giving melonJS three renderer tiers: WebGPU → WebGL2 → Canvas.
Code simplification
- Remove
preferWebGL1 application setting
- Remove
WebGLVersion checks throughout the codebase
- Remove WebGL1 fallback in context creation (
canvas.getContext("webgl") / "experimental-webgl")
- Remove
renderer.WebGLVersion > 1 guards in batchers, shaders, and buffer uploads
- Simplify
IndexBuffer — always use Uint32Array (WebGL2 guarantees OES_element_index_uint)
- Remove WebGL1-specific
bufferData overloads (WebGL2 accepts offset+length)
Shader improvements
- Use GLSL 300 es (
#version 300 es) — modern syntax, better error messages
- Replace
attribute/varying with in/out
- Replace
texture2D() with texture()
- Replace
gl_FragColor with explicit output variable
- Use sampler array indexing (
texture(uSamplers[idx], uv)) — eliminates the if/else chain in multi-texture batching fragment shader
- Use
precision qualifiers per-variable instead of global
Performance improvements
- VAOs (Vertex Array Objects) — save/restore vertex attribute state in one call instead of rebinding per batcher switch. Reduces state changes when alternating between quad/primitive/mesh/spine batchers.
- Instanced rendering (
gl.drawArraysInstanced / gl.drawElementsInstanced) — draw many copies of the same geometry with per-instance attributes. Enables efficient particle systems, bullet patterns, tile rendering.
- Uniform Buffer Objects (UBOs) — share uniform data across shaders without re-uploading per draw call. Useful for projection matrix, global tint, time uniforms.
- Multiple Render Targets (MRT) — render to multiple textures in a single pass. Enables deferred rendering effects, G-buffers.
- Transform Feedback — GPU-side vertex processing for particle simulation without CPU readback.
- Non-power-of-two textures — no restrictions on texture dimensions (WebGL1 required POT for mipmaps/repeat). Remove all
isPowerOfTwo / nextPowerOfTwo guards for texture creation.
texStorage2D — immutable texture allocation, avoids driver reallocation on upload.
- 3D textures / texture arrays — could be used for tilemap rendering (one texture array instead of multiple atlases).
Timeline
Target for the major version that adds WebGPU (#1184). Renderer tiers would be: WebGPU → WebGL2 → Canvas 2D.
References
- Context creation:
src/video/rendertarget/canvasrendertarget.js
- WebGLVersion checks:
src/video/webgl/webgl_renderer.js, batchers, IndexBuffer
- Shader precision:
src/video/webgl/utils/precision.js
- POT checks:
src/video/webgl/batchers/material_batcher.js, src/video/texture/cache.js
Summary
Remove WebGL1 fallback and require WebGL2 as the minimum GPU renderer. WebGL2 has ~97% browser support (Safari 15+, Chrome 56+, Firefox 51+). This would coincide with the WebGPU renderer addition (#1184), giving melonJS three renderer tiers: WebGPU → WebGL2 → Canvas.
Code simplification
preferWebGL1application settingWebGLVersionchecks throughout the codebasecanvas.getContext("webgl")/"experimental-webgl")renderer.WebGLVersion > 1guards in batchers, shaders, and buffer uploadsIndexBuffer— always useUint32Array(WebGL2 guaranteesOES_element_index_uint)bufferDataoverloads (WebGL2 accepts offset+length)Shader improvements
#version 300 es) — modern syntax, better error messagesattribute/varyingwithin/outtexture2D()withtexture()gl_FragColorwith explicit output variabletexture(uSamplers[idx], uv)) — eliminates the if/else chain in multi-texture batching fragment shaderprecisionqualifiers per-variable instead of globalPerformance improvements
gl.drawArraysInstanced/gl.drawElementsInstanced) — draw many copies of the same geometry with per-instance attributes. Enables efficient particle systems, bullet patterns, tile rendering.isPowerOfTwo/nextPowerOfTwoguards for texture creation.texStorage2D— immutable texture allocation, avoids driver reallocation on upload.Timeline
Target for the major version that adds WebGPU (#1184). Renderer tiers would be: WebGPU → WebGL2 → Canvas 2D.
References
src/video/rendertarget/canvasrendertarget.jssrc/video/webgl/webgl_renderer.js, batchers,IndexBuffersrc/video/webgl/utils/precision.jssrc/video/webgl/batchers/material_batcher.js,src/video/texture/cache.js