Skip to content

Drop WebGL1 support #1391

@obiot

Description

@obiot

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions