# Melonjs Effects And Shaders

Use this skill for post-processing effects, custom shaders, blend modes and colour...

- Repository: https://github.com/melonjs/melonJS (6430 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add melonjs/melonJS --skill melonjs-effects-and-shaders -g -a claude-code -y`
Codex: `npx skills add melonjs/melonJS --skill melonjs-effects-and-shaders -g -a codex -y`
Cursor: `npx skills add melonjs/melonJS --skill melonjs-effects-and-shaders -g -a cursor -y`
Gemini CLI: `npx skills add melonjs/melonJS --skill melonjs-effects-and-shaders -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add melonjs/melonJS`

## Description

Use this skill for post-processing effects, custom shaders, blend modes and colour grading in melonJS. Covers the built-in ShaderEffect presets, addPostEffect on renderables and cameras, writing a custom dual-language GLSL/WGSL effect, the screen_texture builtins, and why effects silently do nothing on the Canvas fallback. Triggers on: Tween, easing, animate an effect, ShaderEffect, addPostEffect, removePostEffect, getPostEffect, postEffectNeedsCapture, VignetteEffect, GlowEffect, BlurEffect, PixelateEffect, ScanlineEffect, shader, GLSL, WGSL, uniform, setUniform, setTexture, setTime, blendMode, colorMatrix, screen_texture, toFrameTexture, post effect, filter.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Post effects and custom shaders

> melonJS ships a catalogue of post effects and a dual-language shader system.
> The recurring trap is that every shader path needs a GPU backend and
> **degrades to nothing** on Canvas rather than erroring. Blend modes are the
> exception, those work on all three renderers.

## Applying an effect

Effects attach to a renderable **or** to a camera (for full-screen grading):

```js
import { VignetteEffect, GlowEffect } from "melonjs";

sprite.addPostEffect(new GlowEffect(app.renderer));
app.viewport.addPostEffect(new VignetteEffect(app.renderer));
```

`renderable.shader = …` is **deprecated since 19.2.0**, and its setter destroys
whatever it replaces. Use `addPostEffect` / `getPostEffect` / `removePostEffect`.

### A camera effect covers the HUD too

A camera's post-effect brackets the **entire** world draw, floating children
included. So the obvious way to write a full-screen pass also washes over every
HUD label in that world, which is rarely what you want.

To land a pass *after* the world but *before* the HUD, host the effect on a
screen-filling floating renderable ordered below the HUD's z instead:

```js
const quad = new Sprite(0, 0, { image: anyImage });
quad.anchorPoint.set(0, 0);
quad.scale(viewW / anyImage.width, viewH / anyImage.height);
quad.floating = true;                 // its own uv is now screen space
quad.blendMode = "additive";
quad.addPostEffect(myEffect);
world.addChild(quad, HUD_Z - 10);     // 2D: below the labels. See the note.
```

Two things follow from the quad filling the frame: its own `uv` is screen space
(so a pass like this needs none of the `screen_uv` / `screen_texture` builtins),
and the incoming `color` is the quad's own texture, which a body that paints
from scratch can ignore entirely.

The rest: https://github.com/melonjs/melonJS/blob/HEAD/packages/melonjs/skills/melonjs-effects-and-shaders/SKILL.md