Dual-language ShaderEffect (GLSL + WGSL) and post effects on the WebGPU renderer — 20.0.0

packages/examples/src/examples/aquarium/ExampleAquarium.tsx

@@ -94,6 +94,42 @@ vec4 apply(vec4 color, vec2 uv) {
 }
 `;
 
+// the WGSL twin — same logic and uniform names. The WebGPU capture is
+// top-down (row 0 = the top of the frame, matching the quad's UV), so the
+// GLSL body's Y flip for the Y-up framebuffer copy is dropped.
+const WATER_FRAGMENT_WGSL = `
+struct AquariumUniforms {
+	uTime : f32,
+	uStrength : f32,
+};
+@group(3) @binding(0) var<uniform> fx : AquariumUniforms;
+@group(3) @binding(1) var uScene : texture_2d<f32>;
+@group(3) @binding(2) var uSceneSampler : sampler;
+@group(3) @binding(3) var uNoise : texture_2d<f32>;
+@group(3) @binding(4) var uNoiseSampler : sampler;
+
+fn apply(color : vec4f, uv : vec2f) -> vec4f {
+	let s = uv;
+
+	// two noise layers scrolling apart -> a living flow field
+	let f1 = textureSample(uNoise, uNoiseSampler, s * 1.6 + vec2f(fx.uTime * 0.03, fx.uTime * 0.05)).rg;
+	let f2 = textureSample(uNoise, uNoiseSampler, s * 2.7 - vec2f(fx.uTime * 0.04, fx.uTime * 0.02)).rg;
+	let flow = f1 + f2 - vec2f(1.0);
+
+	// refract the captured scene at the displaced screen coord
+	let scene = textureSample(uScene, uSceneSampler, clamp(s + flow * fx.uStrength, vec2f(0.0), vec2f(1.0))).rgb;
+
+	// the water texture (the sprite's own), gently scrolled, as a wet sheen
+	let water = textureSample(uTexture, uSampler, uv * 0.6 + flow * 0.02).rgb;
+	var outc = scene * (vec3f(0.75) + 0.5 * water);
+
+	// caustic sparkle where the flow layers pinch together
+	let caustic = pow(max(f1.r * f2.g, 0.0), 3.0) * 1.2;
+	outc = outc + vec3f(0.10, 0.20, 0.24) * caustic;
+	return vec4f(outc, 1.0);
+}
+`;
+
 // a fish that swims horizontally and turns around at the tank edges
 class Fish extends Sprite {
 	private speed: number;
@@ -318,7 +354,11 @@ const createGame = async () => {
 	loader.preload(
 		[
 			{ name: "aquariumAtlas", type: "image", src: `${base}aquarium.webp` },
-			{ name: "aquariumWater", type: "shader", data: WATER_FRAGMENT },
+			{
+				name: "aquariumWater",
+				type: "shader",
+				data: { glsl: WATER_FRAGMENT, wgsl: WATER_FRAGMENT_WGSL },
+			},
 		],
 		() => {
 			state.change(state.PLAY);

packages/examples/src/examples/aseprite/ExampleAseprite.tsx

@@ -3,80 +3,78 @@
  * Copyright (C) 2011 - 2026 AltByte Pte Ltd — MIT License.
  * See `packages/examples/LICENSE.md` for full license + asset credits.
  */
-import * as me from "melonjs";
-import { useEffect } from "react";
+import type * as me from "melonjs";
+import { createExampleComponent } from "../utils";
 import { createGame } from "./game";
 import { paladin } from "./play";
 
-export const ExampleAseprite = () => {
-	useEffect(() => {
-		// `game` is undefined until the first Application finishes init()
-		if (!me.game?.isInitialized) {
-			void createGame();
-		}
-	}, []);
+const Game = createExampleComponent(createGame);
 
+export const ExampleAseprite = () => {
 	return (
-		// float above the fixed #screen overlay (see index.css), like the
-		// tiledMapLoader / spine selectors — in normal flow the game surface
-		// paints over the controls
-		<div
-			style={{
-				position: "absolute",
-				top: 44,
-				left: 16,
-				zIndex: 1000,
-				display: "flex",
-				alignItems: "center",
-				gap: 8,
-			}}
-		>
-			<div>Animation:</div>
-			<select
-				name="animation_name"
-				id="animation_name"
-				defaultValue="run front"
+		<>
+			<Game />
+			{/* float above the fixed #screen overlay (see index.css), like the
+			    tiledMapLoader / spine selectors — in normal flow the game surface
+			    paints over the controls */}
+			<div
 				style={{
-					padding: "6px 12px",
-					fontSize: 14,
-					background: "#1a1a1a",
-					color: "#e0e0e0",
-					border: "1px solid #444",
-					borderRadius: 4,
-				}}
-				onChange={(event) => {
-					// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-					(paladin.renderable as me.Sprite).setCurrentAnimation(
-						event.target.value,
-					);
+					position: "absolute",
+					top: 44,
+					left: 16,
+					zIndex: 1000,
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
 				}}
 			>
-				<option value="step">step</option>
-				<option value="idle defesa">idle defesa</option>
-				<option value="SHit">SHit</option>
-				<option value="Delay">Delay</option>
-				<option value="release">release</option>
-				<option value="Idle fight">Idle fight</option>
-				<option value="run front">run front</option>
-				<option value="run back">run back</option>
-				<option value="morte">morte</option>
-				<option value="Skill 1 - Trust-dash">Skill 1 - Trust-dash</option>
-				<option value="Hurt">Hurt</option>
-				<option value="Delay c">Delay c</option>
-				<option value="Delay Front atk">Delay Front atk</option>
-				<option value="CF1">CF1</option>
-				<option value="RF1">RF1</option>
-				<option value="Sit">Sit</option>
-				<option value="standup">standup</option>
-				<option value="idle back">idle back</option>
-				<option value="skill back">skill back</option>
-				<option value="skill front">skill front</option>
-				<option value="War Cry">War Cry</option>
-				<option value="slide">slide</option>
-				<option value="Magnum Break">Magnum Break</option>
-				<option value="fallen">fallen</option>
-				<option value="Ress">Ress</option>
-			</select>
-		</div>
+				<div>Animation:</div>
+				<select
+					name="animation_name"
+					id="animation_name"
+					defaultValue="run front"
+					style={{
+						padding: "6px 12px",
+						fontSize: 14,
+						background: "#1a1a1a",
+						color: "#e0e0e0",
+						border: "1px solid #444",
+						borderRadius: 4,
+					}}
+					onChange={(event) => {
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+						(paladin.renderable as me.Sprite).setCurrentAnimation(
+							event.target.value,
+						);
+					}}
+				>
+					<option value="step">step</option>
+					<option value="idle defesa">idle defesa</option>
+					<option value="SHit">SHit</option>
+					<option value="Delay">Delay</option>
+					<option value="release">release</option>
+					<option value="Idle fight">Idle fight</option>
+					<option value="run front">run front</option>
+					<option value="run back">run back</option>
+					<option value="morte">morte</option>
+					<option value="Skill 1 - Trust-dash">Skill 1 - Trust-dash</option>
+					<option value="Hurt">Hurt</option>
+					<option value="Delay c">Delay c</option>
+					<option value="Delay Front atk">Delay Front atk</option>
+					<option value="CF1">CF1</option>
+					<option value="RF1">RF1</option>
+					<option value="Sit">Sit</option>
+					<option value="standup">standup</option>
+					<option value="idle back">idle back</option>
+					<option value="skill back">skill back</option>
+					<option value="skill front">skill front</option>
+					<option value="War Cry">War Cry</option>
+					<option value="slide">slide</option>
+					<option value="Magnum Break">Magnum Break</option>
+					<option value="fallen">fallen</option>
+					<option value="Ress">Ress</option>
+				</select>
+			</div>
+		</>
 	);
 };

packages/examples/src/examples/blendModes/ExampleBlendModes.tsx

@@ -37,7 +37,6 @@ const createGame = async () => {
 		const app = new Application(canvasW, canvasH, {
 			parent: "screen",
 			renderer: video.AUTO,
-			preferWebGL1: false,
 		});
 		await app.init();
 	} catch {

packages/examples/src/examples/clipping/ExampleClipping.tsx

@@ -40,7 +40,7 @@ class OverflowingRect extends Renderable {
 		renderer.setColor(this.color);
 		renderer.fillRect(0, 0, this.width, this.height);
 		renderer.setColor("#ffffff");
-		renderer.setLineWidth(3);
+		renderer.lineWidth = 3;
 		renderer.strokeRect(0, 0, this.width, this.height);
 	}
 }
@@ -96,7 +96,7 @@ class ClipOutline extends Renderable {
 
 	draw(renderer: Parameters<Renderable["draw"]>[0]) {
 		renderer.setColor(this.color);
-		renderer.setLineWidth(3);
+		renderer.lineWidth = 3;
 		renderer.strokeRect(this.pos.x, this.pos.y, this.width, this.height);
 	}
 }

packages/examples/src/examples/heatHaze/ExampleHeatHaze.tsx

@@ -51,6 +51,31 @@ vec4 apply(vec4 color, vec2 uv) {
 }
 `;
 
+// the WGSL twin — same logic and uniform names. The WebGPU capture is
+// top-down (row 0 = the top of the frame, matching the quad's UV), so the
+// GLSL Y flip is dropped: the floor weight becomes (0.15 + y) and the
+// upward scroll flips sign, everything else carries over.
+const HAZE_FRAGMENT_WGSL = `
+struct HazeUniforms {
+	uTime : f32,
+	uStrength : f32,
+};
+@group(3) @binding(0) var<uniform> fx : HazeUniforms;
+@group(3) @binding(1) var uScene : texture_2d<f32>;
+@group(3) @binding(2) var uSceneSampler : sampler;
+@group(3) @binding(3) var uNoise : texture_2d<f32>;
+@group(3) @binding(4) var uNoiseSampler : sampler;
+
+fn apply(color : vec4f, uv : vec2f) -> vec4f {
+	let s = uv;
+	let n1 = textureSample(uNoise, uNoiseSampler, vec2f(s.x * 2.0, s.y * 1.6 + fx.uTime * 0.18)).r;
+	let n2 = textureSample(uNoise, uNoiseSampler, vec2f(s.x * 3.3 + 0.5, s.y * 2.2 + fx.uTime * 0.11)).r;
+	let wob = (n1 + n2 - 1.0) * fx.uStrength * (0.15 + s.y); // stronger near the floor
+	let d = clamp(s + vec2f(wob, wob * 0.35), vec2f(0.0), vec2f(1.0));
+	return vec4f(textureSample(uScene, uSceneSampler, d).rgb, 1.0);
+}
+`;
+
 // an embossed metal-ish tile: a base colour with a bevel highlight/shadow, so
 // the normal-mapped relief reads clearly under the moving light
 const tileAlbedo = (size: number, hue: number) => {
@@ -238,7 +263,13 @@ const createGame = async () => {
 	state.set(state.PLAY, new PlayScreen());
 
 	loader.preload(
-		[{ name: "heatHaze", type: "shader", data: HAZE_FRAGMENT }],
+		[
+			{
+				name: "heatHaze",
+				type: "shader",
+				data: { glsl: HAZE_FRAGMENT, wgsl: HAZE_FRAGMENT_WGSL },
+			},
+		],
 		() => {
 			state.change(state.PLAY);
 		},

packages/examples/src/examples/masking/ExampleMasking.tsx

@@ -25,7 +25,6 @@ const createGame = async () => {
 			parent: "screen",
 			scaleMethod: "fit",
 			renderer: video.AUTO,
-			preferWebGL1: false,
 		});
 		await app.init();
 	} catch {

packages/examples/src/examples/platformer-matter/createGame.ts

@@ -79,7 +79,6 @@ export const createGame = async () => {
 		parent: "screen",
 		scaleMethod: "flex-width",
 		renderer: video.AUTO,
-		preferWebGL1: false,
 		subPixel: false,
 		highPrecisionShader: false,
 		physic: new MatterAdapter({ gravity: { x: 0, y: 5 } }),

packages/examples/src/examples/platformer-matter/play.ts

@@ -13,7 +13,6 @@ import {
 	type ShaderEffect,
 	Stage,
 	VignetteEffect,
-	WebGLRenderer,
 } from "melonjs";
 import { VirtualJoypad } from "./entities/controls";
 import UIContainer from "./entities/HUD";
@@ -57,17 +56,17 @@ export class PlayScreen extends Stage {
 			app.world.addChild(this.virtualJoypad);
 		}
 
-		// Vignette post-effect (WebGL only). Cache the effect across resets
-		// so we don't stack a new VignetteEffect per restart. Same goes for
+		// Vignette post-effect, cached across resets so we don't stack a
+		// new VignetteEffect per restart. No backend check needed: on a
+		// renderer without a programmable pipeline (Canvas) the effect
+		// self-disables and the scene renders without it. Same goes for
 		// the color grading — set from the identity each time so contrast
 		// and saturation don't compound on each level reload.
-		if (app.renderer instanceof WebGLRenderer) {
-			if (!this.vignette) {
-				this.vignette = new VignetteEffect(app.renderer);
-			}
-			if (!app.viewport.postEffects.includes(this.vignette)) {
-				app.viewport.addPostEffect(this.vignette);
-			}
+		if (!this.vignette) {
+			this.vignette = new VignetteEffect(app.renderer);
+		}
+		if (!app.viewport.postEffects.includes(this.vignette)) {
+			app.viewport.addPostEffect(this.vignette);
 		}
 		app.viewport.colorMatrix
 			.copy(IDENTITY_COLOR_MATRIX)

packages/examples/src/examples/platformer/createGame.ts

@@ -30,7 +30,6 @@ export const createGame = async () => {
 		parent: "screen",
 		scaleMethod: "flex-width",
 		renderer: video.AUTO,
-		preferWebGL1: false,
 		subPixel: false,
 		highPrecisionShader: false,
 	});

packages/examples/src/examples/platformer/play.ts

@@ -11,7 +11,6 @@ import {
 	plugin,
 	Stage,
 	VignetteEffect,
-	WebGLRenderer,
 } from "melonjs";
 import { VirtualJoypad } from "./entities/controls";
 import UIContainer from "./entities/HUD";
@@ -52,11 +51,10 @@ export class PlayScreen extends Stage {
 		}
 
 		// vignette post-effect + built-in color grading (always applied last).
-		// VignetteEffect is WebGL-only; on the Canvas renderer just skip it
-		// and let the color grading still apply.
-		if (app.renderer instanceof WebGLRenderer) {
-			app.viewport.addPostEffect(new VignetteEffect(app.renderer));
-		}
+		// No backend check needed: on a renderer without a programmable
+		// pipeline (Canvas) the effect self-disables and the scene renders
+		// without it, while the color grading still applies.
+		app.viewport.addPostEffect(new VignetteEffect(app.renderer));
 		app.viewport.colorMatrix.contrast(1.1).saturate(1.1);
 
 		// play some music

packages/examples/src/examples/plinko-planck/createGame.ts

@@ -39,7 +39,6 @@ export const createGame = async () => {
 		scaleMethod: "fit",
 		scaleTarget,
 		renderer: video.AUTO,
-		preferWebGL1: false,
 		subPixel: false,
 		highPrecisionShader: false,
 		// Anti-aliasing smooths every procedural draw call — the peg

packages/examples/src/examples/pool-matter/createGame.ts

@@ -30,7 +30,6 @@ export const createGame = async () => {
 		parent: "screen",
 		scaleMethod: "fit",
 		renderer: video.AUTO,
-		preferWebGL1: false,
 		subPixel: false,
 		highPrecisionShader: false,
 		// Anti-aliasing smooths the painted edges on the table sprite,

packages/examples/src/examples/svgShapes/ExampleSVGShapes.tsx

@@ -19,7 +19,6 @@ const createGame = async () => {
 		const app = new Application(1024, 840, {
 			parent: "screen",
 			renderer: video.WEBGL,
-			preferWebGL1: false,
 			blendMode: "normal",
 		});
 		await app.init();