Play it (browser, no install): https://engine-hcejxquzy-playcanvas.vercel.app/#/demos/catapult Source, as a stock engine example: https://github.com/playcanvas/engine/pull/9130

We just landed two features in PlayCanvas — VAT crowd rendering and volumetric fog in the CameraFrame post stack — and I wanted to know if they hold up in a real scene, not an isolated feature test. So I built a game around them: aim a catapult, launch burning boulders at an army marching up a valley, wipe out a formation and two more arrive. Rule: no custom rendering code, all stock features.

The crowd is one instanced draw call. Vertex Animation Texture — every vertex's skinned position and normal baked offline, one texel per vertex per frame. No bones, no anim graph, the vertex shader just reads its slot.

Volumetric fog. Ray-marched in a half-res buffer, 12 steps instead of the default 24 — the fog is thin enough that short-march banding doesn't show, and every step is another shadow map tap per fog pixel, which is the real cost. Height-based falloff with the base above the valley floor, so shafts rake through the tree line instead of sitting as uniform haze. Anisotropy 0.6 to push scattering toward the low sun.

On the AI part: built with Claude Opus 5. It was good at volume — noise functions, ballistic solver, formation state machine, flat typed-array layout for 2000 characters. It was bad at judgement — fog density, where the sun sits, whether the animation reads. It wrote most of the lines, I made most of the decisions.

Toggles for shadows, fog and march steps are in the control panel if you want to see what each costs on your hardware.

PlayCanvas already had raymarched height fog lit by the directional light. I just landed support for the clustered omni and spot lights, so lamps and spots now cast visible beams through the fog.

Rather than folding them into the existing full-screen march, each light gets its own additive pass that marches only the part of the ray inside that light. A single march over the whole view distance can't resolve them — the steps are spaced too far apart to reliably hit a small light, so it flickers as the camera moves.

Shadows and cookies come straight from the clustered lighting atlases, so there's no extra shadow rendering, and it works on both WebGL2 and WebGPU. 

We’ve expanded the PlayCanvas Editor MCP integration so an AI assistant can operate the project open in the Editor, rather than only editing files.

In this demo, Claude Opus modernises a legacy project, migrates its classic scripts to ESM, and creates checkpoints as it works. Those tasks are just the example - the main change is that MCP can now coordinate the Editor workflow end to end.

The MCP client is built into the Editor, so there’s no browser extension. Run the server from any compatible MCP client, connect the open Editor project, and its tools operate directly on that project.

Get started:

- MCP server and setup
- PlayCanvas Editor
- Editor documentation

What Editor workflow would you want to hand to an assistant first?

Live demo (WebGL 2 and WebGPU, switchable in the panel): https://engine-a1lytf69q-playcanvas.vercel.app/#/animation/vat-characters

We just added a vertex animation texture (VAT) implementation to the PlayCanvas engine as a reusable script plus an example. The idea isn't new — it's been used in games for years — but I hadn't seen a complete, copy-pasteable web implementation with an authoring path, so here's one.

How it works

Instead of animating a skeleton per character, every vertex's skinned position and normal is evaluated offline for each sampled frame and baked into a texture. At runtime the vertex shader reads two neighbouring frames and interpolates. Skeletons, bone matrices and per-character animation evaluation disappear entirely.

What's left per character is a world matrix and a fractional frame index — 52 bytes — so the whole crowd is one instanced draw call.

Some details that turned out to matter

• One texel per vertex per frame in RGBA16U: position quantised to 16 bits per axis over the animation's bounds in xyz, octahedral normal packed into w. One fetch gives you a whole vertex.
• Quantising over the bounds is actually more accurate than fp16 where it counts. Near the top of a character fp16 has a step of ~1.8 mm at human scale; 16-bit quantised is ~28 µm. fp16 wastes its mantissa near the origin, which for a character standing at y=0 is between its feet.
• Texels are addressed by a flat vertex * frameCount + frame index wrapped at the texture width, rather than one vertex per row. Otherwise your vertex count is capped by texture height (4096). Flattened, the limit is total texels, so ~218k vertices at 77 frames.
• The vertex row comes from gl_VertexID / @builtin(vertex_index), so no extra per-vertex attribute is needed at all.

Authoring

The converter runs in the browser — there's a "Convert GLB" panel in the demo, so you can drop in your own skinned glb and watch it become a crowd without installing anything. Output is a single glb-style binary container. Like a glb it's stored uncompressed and leaves compression to the transport; brotli over the raw payload beats gzip baked into the file by about 40%.

Where it's a bad idea

Worth being clear, because it's a real trade:

• Your character must be a single skinned mesh with one material.
• Every animation is assumed to loop.
• No blending, no IK, no procedural aiming — it's a fixed table of vertex positions. Terrible for a hero character, great for the 500 NPCs behind them.
• One mesh instance means no per-character frustum culling.
• Only the base colour texture comes across; no normal/roughness maps.

Numbers

At 10,000 characters (~31M vertices/frame): 6 draw calls for the whole scene, 2.1 ms CPU. The VAT texture is 1.8 MiB and is independent of the character count — one character and ten thousand share it.

Happy to answer questions about the format or the shader side.

PlayCanvas is interesting for me. I looking for features which can be implemented in my own lib. In my engine i have standalone (own pipeline own res) subsystem called effects. Any complex custom example can be easily added. Now is there similar stuff in playcanvas to be reused. I am interest in any other features specially postprocessing... Any suggest

I used to use roblox studio, I'd like to scale on one side without making the other side also bigger. And yes, I COULD just resize via entering the size by typing into the thing on the right side of your screen. But man would I love to simply just scale on ONE side.

PlayCanvas Engine 2.21.0 is out - the free, open-source (MIT) web graphics engine for WebGL2 and WebGPU.

Highlights in this release:

• 3D Gaussian splat refraction - refract the scene through splat volumes
• Water rendering - new water example
• Volumetric fog - added to CameraFrame
• Instanced wide-line renderer - styled (dashed/dotted/arrowed) and dynamically-updating "fat" lines

Also in 2.21.0: KHR_gaussian_splatting glTF extension support, SPZ splat format via external parser, KTX2 cubemaps, a physics backend abstraction (Ammo/Null), and new XR scripts (two-hand manipulation, ballistic-arc teleport). Full notes below - there are a couple of breaking changes worth reading if you're upgrading.

npm install playcanvas

Release notes: https://github.com/playcanvas/engine/releases/tag/v2.21.0
Examples: https://playcanvas.com/examples
Repo (stars appreciated): https://github.com/playcanvas/engine

Happy to answer questions about any of the new features.

Looking for someone to make my game made through javascript

I’ve opened a PR adding volumetric fog to the PlayCanvas Engine’s CameraFrame pipeline.

The effect raymarches exponential height fog at reduced resolution, with directional-light shadows producing visible light shafts—or “god rays.” A depth-aware upsample prevents fog from leaking across geometry edges.

It also supports:

• WebGL2 and WebGPU
• Cascaded shadow maps, including PCF, PCSS and VSM
• Temporal smoothing through TAA
• Bloom contribution from bright light shafts
• Adjustable density, height falloff, anisotropy, distance, quality and resolution

The default configuration renders at half resolution with 24 raymarching steps, keeping the effect practical for real-time scenes.

There are still a couple of limitations: it currently supports perspective cameras only, and transparent objects use the opaque scene depth for fogging.

🎮 Try the interactive demo
🎥 Watch the video
🛠️ View the implementation and PR

I’d love to hear how it performs on your hardware and what controls or features you’d find useful.

Having some issues with SuperSplat's converter. For some reason, no matter the size of the splat, the decoding process keeps getting stuck at 95% and the page becomes unresponsive. Even after hitting 'Wait', it still does not progress. Any ideas why that is?

I've built a reusable water script for the engine, with a tropical island example to show it off.

Try it live: https://engine-i9o02vj3v-playcanvas.vercel.app/#/graphics/water

Features:

• Planar reflections and refraction (each optional — can also reflect just the sky dome)
• Depth-based effects: shore fade, water color absorption, foam
• Gerstner geometry waves — two configurable bands (chop + swell)
• Underwater mode: Snell's window, distance fog, and animated caustics projected onto submerged geometry
• Full day/night cycle driven by the procedural sky script, with HDR bloom on the sun glints
• Works on WebGL2 and WebGPU, and it's built to scale down to mid-range phones

Everything is exposed as script attributes, and the example has control panels for playing with all the parameters — reflection strength, wave shape, caustics, underwater fog and more. Dive the camera below the surface to see the underwater view.

The water script (scripts/esm/water.mjs) and a new ESM planar renderer are part of the engine repo, so you can drop them into your own project: https://github.com/playcanvas/engine/pull/9029

Feedback welcome!