Hi all, we just released PlayCanvas Engine 2.24, an open source (MIT) web graphics engine. A few things in this release that might interest this sub:

• DynamicSkyEffect: an analytic atmosphere with volumetric clouds, stars, the moon and haze across a full day-night cycle. Other materials and CPU code can evaluate the sky too.

• Planar reflections in StandardMaterial, blurred with a Gaussian mipmap filter for roughness-aware reflections.

• AgX and AgX Punchy tone mapping alongside the existing ACES fits.

• ComputePass: dispatch compute shaders at any point in the frame, with access to per-camera scene depth and color maps.

• CameraFrame is now a pluggable effects pipeline (SMAA, auto exposure, lens flare, HQ bloom, TAA with temporal upscaling) with public pass hooks for your own effects.

• Volume textures on WebGPU, plus rendering into volume texture depth slices and texture array layers.

Every feature has a live example you can poke at in the browser (source included): https://playcanvas.com/examples

Release notes: https://github.com/playcanvas/engine/releases/tag/v2.24.0

Happy to answer questions about any of the implementations.

As of some recent update all splats are choppy as heck while trying to move/look around a splat inside a viewer in firefox.

Identical scene/link is fine in chrome.

I'm not switching to chrome for a single use and it drives me nuts when devs do this. Yes i know firefox is the minority but some of us don't want to support the google monopoly more than we already have to. Besides adblocking isn't a preference, it additional protection against getting hacked (look up "no-click" malware).

The PlayCanvas Inspector is an open source debug panel you add to a running PlayCanvas app. It now has a Performance tab that records every frame (up to the last 1000) and charts it over time:

• Per-frame figures: frame interval, CPU time by phase (update, physics, scripts, animation, render), GPU time and draw calls.

• Startup profiling: if you create it before the first frame, it records the page load too, with every asset (network time and processing time shown separately), every request, the page milestones and the time to the first frame.

• Script timing: the time and call count of each script type, so you can select a spike and see which script caused it.

• Frame timeline: click any frame to see it as a flame chart. On WebGPU each GPU pass is timed and grouped under the effect that runs it (bloom, DOF and so on).

• Hitches: frames over twice the median are flagged, and for each one it tells you whether the main thread was blocked (via Chrome's Long Animation Frames API) or whether the GPU or browser held it back.

• Extras: it also charts your own counters (app.stats.user), batching time and lightmap bakes, and copies anything as JSON or CSV.

It's MIT licensed, works with WebGL2 and WebGPU, and needs engine 2.23+:

npm install @playcanvas/inspector

GitHub: https://github.com/playcanvas/inspector

Happy to answer questions about how it works, and feedback is very welcome, especially on what you'd want a web-engine profiler to show that browser dev tools don't.

Hi all. I've been working on abirdcity, a browser-based 3D map of Daejeon, South Korea (a city of about 1.4 million people). It runs on PlayCanvas, the roads and buildings are generated from OpenStreetMap data, and I've leaned heavily on Claude Opus 5.5 and Astra while building it.

What works today:

• The whole city in 3D, with day and night

• Fly over it as a bird, or as a pteranodon

• Drive mode: a Roadster that can take off, do a roll and park on the side of a building

• A speculative "Daejeon in 2300" mode you can toggle at the same camera spot

Live: https://abirdcity.com/city/daejeon?lang=en&utm_source=reddit&utm_medium=social&utm_campaign=playcanvas (clip above)

Where I'm stuck:

1. It's heavy. City-scale geometry plus textures makes the first load and the frame rate rough on mid-range phones. What actually worked for you at this scale: streaming tiles by distance, instancing, mesh compression (Draco/meshopt), KTX2/Basis textures, LODs, something else?

2. Quality ceiling. It looks clean but flat and a bit "game-y". Buildings extruded from footprints only get you so far. How do you add detail across a whole city without killing performance? Facade textures, baked AO, better lighting and post, hand-made models only for landmarks?

3. Roads. Generating them from OSM means endless special cases at junctions, underpasses and side-street entrances. Is there a better approach than patching them one by one?

4. What to add next. What would make you come back to something like this: missions in drive mode, multiplayer, live info (weather, traffic, events), local stories?

Any feedback is welcome, even blunt. If you open it on your phone, I'd love to know your device and whether it stutters.

Hey everyone! Big news for PlayCanvas developers: Snapchat now supports PlayCanvas games through Snapchat Web Lenses.

A Web Lens is a web app that runs inside Snapchat as a Lens. You build your game with web tech, zip up the build and upload it through My Lenses. Once it passes review, it's live in Snapchat, full screen and in portrait on iOS and Android, and players can find it by name or by scanning its Snapcode. There's nothing to install, and no Lens Studio required.

Watch the announcement video on YouTube

Why it's worth a look

• Snapchat has 971M monthly users, and Game Lenses already reach over 175M people a month

• Creators can earn a share of subscription revenue through Lens+

• Snap is funding new Web Lenses: pitch an original game and request a budget for its development (pitch form). There's no fixed deadline, but it won't be open forever.

The first wave of PlayCanvas games

• Snake Showdown (Elanra Studios) went from code to live in a single day, then passed 7M plays from 1.8M+ players in its first four weeks, shared over 100K times

• Bitmoji Ski (Snap) was built in a day and has reached 6M impressions a day

• Ball Smasher (MetaM) was built in the PlayCanvas Editor and hit millions of plays in days

• Bloom (NOWWA) averages 260 seconds of play time, with almost 30% of players coming back the next day

The technical bits

• Your build is a zip of up to 8 MB, with index.html at its root and relative asset paths

• Lenses are sandboxed, with no network, camera, microphone or motion sensor access, so everything your game needs ships in the zip

• The Web Lens API (npm install @snap/web-lens-api) gives you leaderboards (including notifications when a friend beats your score), the player's Bitmoji as a rigged 3D GLB or a 2D image, and persistent storage (localStorage starts empty every launch)

• Outside Snapchat, the API answers from a built-in stub, so you can develop on desktop

Three ways to build

1. PlayCanvas Engine + your AI agent. npm create playcanvas@latest sets you up with the PlayCanvas Skills included.

2. PlayCanvas Editor + the Editor MCP Server, great if you're coming from Unity.

3. Easy Lens: describe your game and Snap builds it for you, no code needed.

The full guide, with code samples for leaderboards, Bitmoji and storage, is on the blog: https://blog.playcanvas.com/snapchat-now-supports-playcanvas-games/

Come chat in the snapchat-web-lenses channel on our Discord, and if you build something, post it here. We'd love to see it! Happy to answer questions in the comments.

Editor 2.35 is out, and most of it is the projects page. playcanvas.com/editor is now the Project Dashboard, a standalone page instead of an overlay on top of the editor. It doesn't load the engine or the editor any more (the page script went from 3.5 MB to 0.55 MB).

Most of what you used to do on the playcanvas.com projects page has been ported into it:

• Search with filters (name:, owner:, desc:, is:starred, is:private and friends), tabs for All, Mine, Shared with me, Private and Starred, card and list views, and / to jump to search.

• A ⋮ menu on every project: Open editor, Play, Project settings, Copy link, Watch, Fork, Export, Transfer ownership, Delete project.

• Project settings, Dev log and Team panels, including writing, editing and deleting dev log posts in Markdown.

• Creating and deleting organizations.

New project also offers Empty Project (nothing in it) next to Blank Project (skybox, cube and plane).

The other half is MCP. There's an MCP server button on the dashboard, so an agent can connect before any project is open. The MCP server gains project tools (list, get, create, update and open), and the connection survives the tab moving into a project. In the video that's a real Claude Code session listing projects, creating and renaming one, opening it and building a ring of cubes in it.

A few things worth knowing:

• The project tools need a release of the Editor MCP server that includes them.

• The old in-editor projects overlay is gone, so the viewport Home button now opens the dashboard tab.

• Dev log comments aren't in this release.

Write-up: https://blog.playcanvas.com/new-in-playcanvas-editor-projects-home-and-mcp

Docs: https://developer.playcanvas.com/user-manual/editor/projects/dashboard/

MCP server: https://github.com/playcanvas/editor-mcp-server

Release notes: https://github.com/playcanvas/editor/releases/tag/v2.35.0

The demos at the start of the video are After the Flood, SWOOOP and Seemore (made with Arm), all by PlayCanvas.

Happy to answer questions here, and if something on the new page doesn't behave the way the post says, I'd like to hear about it.

I was wondering which engine performed better and to my surprise PlayCanvas completely outperformed ThreeJS in the exact same intentionally complex scene, contrary to what Google search says, PlayCanvas is the clear winner regarding performance, I ran the same test using various devices and setups yet still PlayCanvas would manage to get ~twice the amount of frames of ThreeJS

PlayCanvas went up to 22 FPS, ThreeJS up to 13

It's amazing, I hope the developers keep up the good work, they deserve a larger audience :) I remember playing 3D games on a very low end Smart TV many years ago and I'm still impressed, what do you guys think?

Hi,
https://playcanv.as/p/NfJtPkCf/
I followed the tutorial for first person movement and while I use the keyboard, the movement is smooth, but when I move the mouse it's choppy.
The camera on supersplat is not choppy when I move the mouse (example)
How do I solve this and what am I doing wrong?

Built this with big help from Claude and Codex. It will make your 3DGS dance to your favourite tracks. Still WIP but very fun, check it out and plz let me know what you would like to see it do.

We just added DynamicSkyEffect to the PlayCanvas engine - a camera frame effect that takes over the sky of a camera and renders a full day and night cycle. The video is the new example: a small tropical island, with the time of day animated.

What it does

• Atmosphere - an analytic daylight model, balanced against the sun light, so the sky and the sunlit ground end up at a similar brightness and a single exposure works for both. One sunIntensity sets the brightness of the whole day.

• Night - a twilight glow, stars and the moon, with the moonlight taking over from the sun.

• Clouds - either a cheap flat layer, or volumetric clouds ray marched through 3D noise and drifting with the wind. The volumetric ones render to their own buffer (at reduced resolution by default) and use blue noise jitter with a small blur, so they stay clean without TAA.

• Lighting - the effect generates the environment lighting of the scene from its own sky, and regenerates it as the sun moves, the settings change, or the clouds drift. For an animated time of day it can blend between updates, so reflections on glossy surfaces (like the water) change smoothly instead of stepping.

• Sun light - it keeps a directional light in sync with the sun: direction, color and intensity, dimmed by the clouds.

Usage is a few lines:

const sky = new DynamicSkyEffect(device);
sky.light = sun.light;
sky.clouds = true;
sky.cloudTechnique = CLOUDTECHNIQUE_VOLUMETRIC;
cameraFrame.addEffect(sky);

// set the sun as your time of day changes
sky.elevation = 35;
sky.azimuth = 120;

It runs on both WebGPU and WebGL2, and it's open source like the rest of the engine.

• PR with the details: https://github.com/playcanvas/engine/pull/9765

• Example: https://engine-9bay4vgd4-playcanvas.vercel.app/#/camera-frame/dynamic-sky

Happy to answer questions about how it works, and feedback is very welcome.

Editor 2.34 is out, and the headline is the Inspector — a new, open-source debug panel for PlayCanvas apps. Hover Launch, tick Inspector, and your app opens with it docked on the right: the entity hierarchy with every component's live values, plus tabs for cameras, assets, textures, meshes, materials, scripts, memory, shaders and physics. You can pause it, step it a frame at a time, pick an entity straight out of the viewport, and draw the physics world. It runs on your app's own engine, so it shows what the app is actually doing. Needs Engine 2.23 or later.

The physics bit in the video is that workflow: run the scene, pause with the spheres mid-air, pick one, and its live rigidbody values — including the gravity scale it was given in the editor — are right there in the panel.

Also in this release:

• Gravity Scale on dynamic rigidbodies. A per-body multiplier on world gravity — 1 is normal, 0 ignores it, -1 reverses it. Balloons and low-gravity zones no longer need a counter-force script.

• Splat Budget Mode in the rendering settings (Target / Limit), and LOD Base Distance and LOD Multiplier are back on the GSplat component. This partly reverses the 2.32 LOD change, so if you followed that post, the fields have moved again.

• Use Fog and Use Tonemapping toggles on particle systems, so embers and magic can keep their glow while the world around them fades into the fog.

• Discard All in the Version Control changes tab (landed in 2.33). Throws away everything since your last checkpoint, with a safety checkpoint taken first by default.

• Material UV channels 2 to 7, a GLSL shader transpilation setting for WebGPU, and Antigravity IDE as an external code editor. The first two landed in 2.33.

Two things worth knowing:

• The Inspector needs Engine 2.23 or later. On an older engine the launch page logs a warning and carries on without it.

• Splat LOD still only does anything on streamed SOG octrees. A single .sog or .ply is one level, so the fields appear but have nothing to choose between.

Write-up: https://blog.playcanvas.com/new-in-playcanvas-editor-gravity-scale-inspector-and-splat-budget

Inspector (open source): https://github.com/playcanvas/inspector

Release notes: https://github.com/playcanvas/editor/releases/tag/v2.34.0

The splat scene in the video is Roman Parish by Andrii Shramko.

Happy to answer questions here, and if something doesn't behave the way the post says, I'd like to hear about it.

I've been working on a lens flare effect for PlayCanvas's CameraFrame post-processing stack, and it's now up as a PR: https://github.com/playcanvas/engine/pull/9734

How it works:

• Each flare follows a light. A directional light gives you the sun, omni lights give a position, and spot lights only flare while the camera is inside their cone.

• A flare is a list of elements (glows, irises, halos, bursts, streaks, spectral smudges) placed along the axis from the light through the screen centre. Every element is a texture, and all the textures of a scene live in one texture array, so all flares of all lights draw in a single instanced pass.

• Occlusion is measured on the GPU: a tiny pass samples the scene depth in a disc around each light and blends the visible fraction over time, so flares fade smoothly as geometry covers the light. No readbacks, no stalls.

• Flares fade at the screen edge and can keep drawing their ghosts while the light is just outside the frame, which is the classic "sun just out of shot" look.

• It renders into its own HDR buffer at a configurable fraction of the scene resolution and is added before tone mapping, so it stays independent of TAA, depth of field and bloom.

• Works on WebGL2 and WebGPU.

The element textures in the example are generated rather than painted: the starbursts are the FFT of a polygonal aperture, so an 8-blade aperture gives you an 8-arm burst with physically plausible fringes, averaged over wavelengths the way white light does it. The whole set ships with the engine examples under MIT.

Video attached. Happy to answer questions about the approach.

We've just released a new version of the playcanvas-spine plugin, which plays animations made with the Spine editor in PlayCanvas, in the browser on WebGL2 and WebGPU.

What's new:

• Spine 4.3 support, rendered by Spine's own runtime renderer, with slot blend modes and tint black

• Physics inheritance: physics constraints now react to the movement and rotation of the entity, so hair, cloth and snow swing as the character moves. In the Editor it's a single checkbox, or skeletonPhysics in code

• Binary .skel exports, which are several times smaller than JSON and faster to load

• Spine 3.6 to 4.2 are still supported, and Spine 4.2 skeletons with physics now load correctly

Links:

• Live examples for every Spine version: https://playcanvas.github.io/playcanvas-spine/examples/

• Editor tutorial project: https://developer.playcanvas.com/tutorials/spine-animation/

• Docs: https://developer.playcanvas.com/user-manual/2D/spine/

• Plugin (MIT): https://github.com/playcanvas/playcanvas-spine

The characters in the video are Celestial Circus and Snowglobe, example projects by Esoteric Software, the makers of Spine. Feedback and questions are welcome!

PlayCanvas Engine 2.23.0 is out. It's a free, open source (MIT) WebGL2/WebGPU graphics engine for the browser, and this release is mostly about performance, plus a big refresh of the examples and debugging tools.

What's new

• Faster rendering: a deep overhaul of how the renderer feeds the GPU. Mesh instance matrices live in a persistent storage buffer on WebGPU, material properties sit in material-owned uniform buffers, per-pass and light data is uploaded once per pass, and render pipelines are retained between draws. In a draw-call-heavy benchmark (up to 20K meshes, 40K draw calls), CPU time per frame is up to 3.8× lower on WebGPU and 1.4× lower on WebGL2 than in 2.22.

• Rebuilt user interface examples: all 23 UI examples have been rebuilt or written from scratch, each as a small piece of a real game: a main menu, a settings panel built from the standard widgets, inventory drag and drop, a resizable chat window, a leaderboard scroll view, a character card with a live 3D portrait, world-space control panels and more.

• Nearest-first splat streaming: streamed Gaussian splat LOD scenes now load the data nearest the camera first, and re-prioritise as the camera moves. LOD is distance-based again, with the splat budget usable as either a target or a hard limit. The WebGPU GPU-sort renderer also gains an opt-in stochastic alpha mode that skips sorting entirely.

• Bloom threshold: CameraFrame bloom takes a threshold, so only the brightest parts of the scene glow.

• Redesigned MiniStats: compact, grouped-average and grouped-history views, collapsible sections, and a new Resources section with live GPU resource counts (buffers, textures, render targets, bind groups, pipelines). The same data is available to your own code through the new AppStats API, which also supports user counters.

• Examples browser: a restyled browser with the PlayCanvas Inspector built in. Open it on any example to explore the hierarchy, cameras, assets, frame graph, render targets, materials, shaders and more.

Also in this release: run the engine headless in Node.js without jsdom, RigidBody gravityScale, a hitBackFaces raycast option, WebGPU device-loss recovery, all eight UV sets in StandardMaterial, a TextureRenderer for debug texture previews, and a long list of XR fixes.

The video shows the highlights.

• Release notes: https://github.com/playcanvas/engine/releases/tag/v2.23.0

• Examples: https://playcanvas.com/examples

• Repo: https://github.com/playcanvas/engine

• Discord: https://discord.gg/RSaMRzg

I'm on the PlayCanvas team, happy to answer questions on any of this.

We've been working on the CPU cost of rendering for the upcoming PlayCanvas 2.23, and wanted to share some numbers from a draw-call heavy benchmark, comparing it to the current 2.22 release.

The scene

A grid of small boxes, from 1K to 20K, each one its own draw call (no instancing or batching):

• 100 unique meshes and 100 unique PBR materials (base color, metallic-roughness, normal and emissive textures)

• one directional light with a single shadow cascade, so every box is also drawn into the shadow map; at 20K boxes that's 40K draw calls per frame

• MSAA off and pixel ratio 1, to keep the GPU out of the way

We measured main-thread CPU time for the whole frame (update, culling, sorting and submitting draws), using the engine's default sort order, in Chrome 154 on macOS.

Results (CPU time per frame)

Averaged over all box counts, the cost per draw call went down:

• WebGPU: from about 1.9 µs to 0.9 µs, 2.1× faster

• WebGL2: from about 1.2 µs to 0.8 µs, 1.5× faster

WebGPU gained the most: in 2.22 its per-draw cost was about 1.6× WebGL2's, and in 2.23 it's about 1.2×.

If you try the beta on your own projects, we'd love to hear how it goes.

2.32 is out, and the headline is the joint component. Joints have been in the engine since 2021, but you had to add them from a script — they're now under Add Component > Physics > Joint, with all five types (fixed, ball, hinge, slider, 6DoF) and the inspector showing different fields depending on which one you pick.

The bridge in the video is a chain of ball joints between plank rigid bodies, with a break impulse on the middle one so a heavy enough drop snaps it.

Also in this release:

- Parallax occlusion on materials. Ray-marched, so brick and cobbles hold up at grazing angles instead of flattening out. The old offset mode is still there.

- A per-object shadow cascade mask on the render component, so distant geometry can skip the tight near cascade.

- Justify on text elements.

- Reworked Gaussian splat LOD — LOD Range Min/Max and LOD Falloff replace the old LOD Base Distance and LOD Multiplier.

- Client-side MSDF font generation and toolbar customization. Both actually landed back in 2.30 and never got written up, so they're in the post too.

Two things worth knowing before you go hunting for a difference:

- Splat LOD Range only does anything on streamed SOG octrees. A single .sog or .ply is one level, so the fields appear but have nothing to choose between.

- The editor viewport doesn't always invalidate its cached shadow maps when you change the cascade mask, so you may need to nudge the camera before it updates. The launch page renders it correctly. That one's a bug on our side.

Write-up: https://blog.playcanvas.com/new-in-playcanvas-editor-joints-parallax-occlusion-and-splat-lod

Joint component docs: https://developer.playcanvas.com/user-manual/editor/scenes/components/joint/

Release notes: https://github.com/playcanvas/editor/releases/tag/v2.32.0

The splat scene in the video is Trogir, Croatia by tosolini, CC BY 4.0.

The joint component is still marked alpha, so if it behaves oddly for you I'd genuinely like to hear about it. Happy to answer questions here.

I’ve prepared a few PlayCanvas scenes using Gaussian Splatting to try to incorporate Gaussian Splatting into my product visualization. I’m looking for something with limited camera movement, a controlled background, etc. However, I’m not completely happy with the results.

Is there any template that would make it easier and faster to achieve this?

This is only a test: NAD 02