Melonjs Renderer Backends
Use this skill when a feature works on one machine and not another, when choosing or...
Install
npx skills add melonjs/melonJS --skill melonjs-renderer-backends -g -a claude-code -y- Repository
- melonjs/melonJS6.4k
- Category
- Writing
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 2,242 tokens
- Runs scripts
- No, instructions only
What it does
Use this skill when a feature works on one machine and not another, when choosing or pinning a renderer, or when writing code that must degrade gracefully. Covers the WebGPU to WebGL 2 to Canvas fallback ladder, what each backend supports, capability detection, and the subsystems that warn once and then stop working on Canvas. Triggers on: video.AUTO, video.WEBGPU, video.WEBGL, video.CANVAS, renderer.type, supportsDepthBuffer, shaderLanguage, WebGPU, WebGL2, Canvas fallback, context loss, backend, works on my machine.
Renderer backends and graceful degradation
video.AUTOpicks a backend at runtime. The same code runs on a different renderer depending on the machine, and several subsystems degrade to nothing rather than erroring. This is the root cause of most "works on my machine" reports.
The ladder
video.AUTO (the default) tries WebGPU → WebGL 2 → Canvas and uses the first
that initialises.
const app = new Application(800, 600, {
parent: "screen",
renderer: video.AUTO, // or video.WEBGPU / video.WEBGL / video.CANVAS
});
await app.init();
WebGL 1 is not in the ladder, 20.x made WebGL 2 the baseline, and pinning
video.WEBGL rejects on a WebGL-1-only device rather than degrading.
What each backend can do
| WebGPU | WebGL 2 | Canvas | |
|---|---|---|---|
| sprites, tilemaps, text | ✅ | ✅ | ✅ |
| blend modes | ✅ | ✅ | ✅ except "none" |
| shaders and post effects | ✅ | ✅ | ❌ inert |
Light2d glow (drawLight) | ✅ | ✅ | ✅ cached radial gradient |
normal-map lighting, Light3d | ✅ | ✅ | ❌ inert |
Mesh | ✅ | ✅ | ⚠️ CPU-projected, no depth |
Camera3d / depth sorting | ✅ | ✅ | ❌ warns, renders wrong |
InstancedMesh | ✅ | ✅ | ⚠️ one draw per instance |
| GPU tilemap rendering | ✅ | ✅ | ❌ per-tile CPU path |
The Canvas column is the problem: none of it throws. Each of those paths warns once and then degrades or no-ops, so the game runs and looks wrong.
