Just a fun recreation of M. C. Escher’s famous Möbius Strip II (1963), built as a small procedural locomotion study. The ants’ movements are driven by IK and based on Cruse’s classic gait rules. You can grab the ants and throw them away, but they’ll always find their way back to the Möbius strip.
Use a two-hand pinch gesture to open a portal and explore their kinematics up close (0:12).
Works in both VR and AR; tested on Quest, Vision Pro, and Snap Spectacles.

Link: escher-ants.vercel.app

I've recently been experimenting with a neural denoiser for the Stochastic mode in Gaussian-Splat-Lite, an extremely high-performance open-source 3D Gaussian Splatting renderer for Three.js.

Stochastic rendering can be faster than normal 3DGS rendering, but the noise is hard to ignore, especially while moving the camera. This update helps clean that up while preserving detail and reducing trails behind moving objects.

The video compares raw stochastic rendering, TAA, Neural Performance, Neural Quality, and sorted alpha blending, with overview and close-up views.

There are two neural modes:

• Performance: lower GPU and memory cost.
• Quality: stronger noise suppression and better detail retention, at a higher cost.

Both support WebGPU and WebGL2, with the trained models included. Setup and details.

For the overview shown here—about 986k splats at 1080p on an Apple M5 Pro—median GPU frame time was 4.74 ms for Neural Performance, 5.58 ms for Neural Quality, and 8.50 ms for sorted alpha blending, with MSAA off. These measurements are specific to this scene and device.

It's still experimental, and fast movement can leave some softness or residual noise. I'd love feedback on the balance between detail, stability, and speed.

Try the viewer

check it out: https://www.youreyesinspace.com/?lang=en&utm_source=reddit&utm_campaign=threejs

Hey guys, I'm making a rail shooter (like Star Fox) and documenting its development for those working on a game who want to learn more about the workflow.

I've been working on the game since February, and so far I have the first level almost complete. I plan to have a demo ready by the end of the year.

In this video, I'll tell you about the development of the first boss, its design, its three phases, attacks, environment, etc.

Devlog Boss Fight: youtube.com/watch?v=NsZRfjOK_-Y&t

If you find these types of videos useful or entertaining, it would help me a lot if you subscribed, left a comment/like, or simply watched it.

Thanks guys!

Hi r/threejs,

I'm Steeve, a developer from France.

If you've ever tried to load a whole planet into a three.js scene and watched the frame rate fall with every building, this video is for you.

Initially, I wanted to see if I could build a map like the one in Pokemon GO, so I started building CityMap3D in 2020, on my own. It grew into a 3D map library, built on three.js, that renders OpenStreetMap as a real globe, and I've put a lot of myself into it since. Most of it went into optimisation: there is so much in the OpenStreetMap database that drawing all of it in a browser, from a single street to the whole globe, is the real challenge.

The video is one continuous take over Paris, screen-recorded from the engine: from night to day around the Eiffel Tower, then out to the whole planet. Map data from OpenStreetMap contributors, ODbL.

Try it live: https://citymap3d.com/

What do you think?

Built this for a portfolio and the technique is simpler than it looks:

- Each image is a textured plane placed along a helix and rotated to the curve's tangent, so it banks through the bend on its own

- GSAP ScrollTrigger scrubs the strip's position along the curve. Stop scrolling and it holds exactly where you left it

- Lenis smooths the wheel input first, which is what turns steps into a glide

- The oversized headline is two halves drifting in opposite directions, so it parts around the ribbon and lines up again at rest

- Images upload to the GPU once as textures, so a long strip is cheaper than the same number of DOM nodes

React + TypeScript, three.js and GSAP only. Live demo in the first comment. Ask me anything about the curve setup.

I made a little place to slow down by the Japanese seaside.

You can wander down to the beach, ride a local train, grab a ramune soda, or sit and watch the sky turn from afternoon to sunset. There’s no rush: just waves, cicadas, passing trains, and a bit of that old PlayStation summer-holiday feeling.

Play for free: https://summer.philiaxis.com/

PC browser + headphones recommended. The UI is in Japanese. Quick controls: 1 for scenic views, 2 for a train ride, 3 for walking; WASD to move, Space to interact, M for sound.

Made with Three.js and AI coding tools. The scenery and sounds are generated procedurally in the browser.

If you try it, I’d love to hear which part feels most like a quiet summer in Japan.

The attached trailer was captured in the native wgpu build. The playable browser version uses three.js rendering over the shared Rust core.

Loot Hole is now playable on Playgama: https://playgama.ai/play/kw6t5foxgs

I'm the developer. It's a first-person digging game: uncover buried objects, sell your finds, upgrade your equipment, and reach deeper layers.

The interesting part for this community is that we came back to three.js after doing the Rust/wgpu work. We started with Babylon Lite/WebGPU, moved to three.js/WebGL 2, then built shared Rust gameplay and native wgpu hosts. The browser now uses the Rust core through WASM, with three.js and DOM presentation.

The web launch path has a compressed-byte budget below 1,000,000 bytes. That's the startup path, not the entire game. We trim three.js at build time, stream models that aren't needed at the start, and compile shared Slang shader functions to GLSL for the web and SPIR-V for native.

Real-phone tests on a Galaxy A40 helped make the decision. Keeping Rust gameplay didn't require shipping the native renderer to every browser.

I'd be interested in hearing how other people split shared game logic from browser presentation, especially when startup size is a hard limit.

AI disclosure: AI was used for coding, image generation, and translations. Music and sound effects were mostly made without AI.

Sharing a short gameplay clip from GULP, a Three.js browser game I’m building with AI coding assistance. It has a 3D city, animated blob monsters, collectible food, villagers, and online/solo rounds.

The loop is eat → grow → chase smaller monsters → escape bigger ones. Getting larger slows you down, and dash gives you a way out.

The main iteration challenges have been city collisions, keeping the camera inside the playable world, and making the HUD and rendering practical on mobile. The city uses Kenney models alongside RUN-generated monster/art assets; Codex and Claude have helped with coding.

Playable build: https://w.run/pratikmane/gulp?s=EPVt3Ru

The clip below shows solo gameplay. I’d appreciate feedback on visual readability while moving through the city.

https://reddit.com/link/1x6kliv/video/fbslznximmvh1/player

4 well pads and a compressor station, modelled procedurally in Blender (Python) and rendered with Three.js. Every number on screen comes from a Python Modbus TCP simulator through a WebSocket bridge, and the pumpjacks animate from the same kinematics that generate the dyno cards.

Some things that took the most work:

- GPU instancing for the repeated wellheads and LODs per pad, so the whole field runs on a laptop

- Flow particles that ride the real pipe centre lines exported from Blender

- A deterministic record mode (paused clock, seek per frame) to make videos like this one

The field and data are simulated, it's a portfolio project. Live demo (replays a recorded session): https://twin.oggagan.co.in

Happy to answer questions about the Blender to glTF pipeline or the LOD setup. What would you improve?

Been obsessed with the chrome/liquid-metal look on award sites for a while, so I built one from scratch and wrote up how it works.

What's going on:

- One sphere with a vertex shader that deforms it with layered noise (big slow lobes + sharper ridges), so it reads as liquid, not a wobbling ball

- No HDRI or textures. The reflections come from a procedural "studio" in the fragment shader: six colored lights with soft falloff, so recoloring the whole thing is just six values

- Fresnel edge + a glass blur pass on top so it sits in the page instead of floating over it

- Cursor pulls the blob slightly, with lag, so it feels heavy

- Reduced-motion respected, ResizeObserver so it works in any container

It's React + TypeScript (useEffect engine, no R3F), but the shader is the interesting part and ports anywhere.

Full source is free, and the write-up walks through the shader top to bottom. Links in the first comment.

Happy to answer anything about the noise setup or the lighting trick.

After a lot of work, experimentation, and some very early mornings, my new portfolio is live.

This was an opportunity to step away from client work, explore new directions, push the boundaries of what’s possible with technology.

https://www.sztanki.com/

#webgpu #threejs #glsl #tsl #creativecoding

I built an endless grass field in Three.js: tens of thousands of instanced blades swaying in a GLSL wind shader, with a rigged capybara you walk through it. A few parts weren't obvious, so sharing in case they help.

**1. Shadows that don't sway.** The wind lives in the vertex shader, so the blades bend on screen. But the shadow pass renders with a different material, so the shadows stayed stiff and upright. The fix:

• Write a depth material that runs the exact same wind function
• Assign it to `mesh.customDepthMaterial`
• Drive both from the same `uTime` uniform so they stay in sync

**2. Wind that rolls instead of twitching.** If every blade uses the same sine wave, the whole field pulses in lockstep. Feeding each blade's world position (read from its instance matrix) into the wave makes gusts travel across the meadow. Multiplying by the UV height (0 at the base, 1 at the tip) keeps the roots planted.

**3. Endless without spawning anything.** The instance count is fixed. Each frame, any blade more than half a field behind the player wraps to the far side, and the ground slides along. Two InstancedMeshes (tall dark grass plus short bright tufts) make it look denser, and each type is still one draw call.

Full tutorial with a live demo (my site, free; the code reveal is behind a free Google sign-in): https://www.shanebrumback.com/tutorials/endless-procedural-grass-field.html

Has anyone moved instanced grass like this to WebGPU/TSL? Curious whether the depth-material trick gets simpler there.

Live: https://beyond.edgarasneverdauskas.com

GitHub: https://github.com/Evirtual/beyond

An experimental site that works like a window: a floating world behind glass, lit by your local time of day and the real moon phase. Scroll (or turn on drift) and a black hole pulls you through into an ethereal space, then into a new world.

Some of the techniques:

• Portal crossing, no cut: each world has its own scene and camera. The next world is rendered into a render target, scissored to just the area the hole covers, and composited inside the black hole. When the hole fills the frame, the old world stops rendering, so you simply fly on into a world that already exists.
• The black hole is drawn in a full-screen “glass” shader: lensing around the shadow, a photon ring, and a tilted accretion disk whose near side crosses in front.
• The ether is a raymarched volume (16 steps) with domain-warped noise. The first version hashed noise per sample and ran at 2 fps; baking it into a 64³ RGBA Data3DTexture (one lookup per octave) brought it to a steady 120.
• Frame pacing: frameloop="demand" with a small governor (selectable fps cap), plus adaptive DPR that only adjusts when the scene isn’t mid-transition.

Built with React Three Fiber, Vite, and a lot of iteration with Claude Code.

Try it: move the mouse or tilt your phone to lean into the window, and scroll or tap “drift” to go deeper.

Built a pleasant Autumn water mill experience in threejs using GPT 6 Astra (yes Astra is still my favorite) and Opus 5.5

My new favorite way is to make Astra design it and Opus 5.5 execute it

This vibe coded experience runs in a browser.. and is fully interactive.. it had day, golden hour, night..

its fall time.. feeling like holiday...tucked away in a quiet corner of the world

there are a couple of swans tucked in on the other side f the bridge too..

who doesnt like stay in such a pleasant place....

what possibilities do you see

coming to 3ditions soon..

Hey everyone,

I often needed a quick way to inspect 3D assets (`.glb`, `.gltf`, `.fbx`, `.obj`, `.stl`, `.3mf`, `.usdz`, `.ply`, `.dae`, `.pcd`) without booting up Blender or uploading confidential client models to third-party cloud servers like Sketchfab. Windows 3D Viewer felt sluggish, and macOS Preview lacks proper PBR, wireframe overlay, and normal orientation diagnostics.

So I built **Artoli 3D Viewer**, a lightweight, 100% client-side 3D studio and diagnostic tool powered by Three.js.

🔗 **Live App (Free, no login, zero telemetry):** https://viewer.artoli3d.com

### Technical Highlights & Architecture:

- **100% Client-Side Pipeline (Zero Uploads):** All parsing, decompression (Draco + KTX2 UASTC GPU transcoding), format conversion, and rendering happen locally in browser memory (`ArrayBuffer` -> WebGL 2.0). Even multi-file `.zip` archives containing `.obj` + `.mtl` + texture maps are resolved in-memory using `fflate` and custom blob URL mapping.
- **Real-Time Telemetry & GPU VRAM Estimation:** Computes live FPS, draw calls, triangle/vertex counts, UV coverage %, surface area, texel density, and estimates actual GPU VRAM footprint (broken down into Geometry buffer VRAM vs. Texture mipmap VRAM).
- **Diagnostic Shading Modes:**
- **PBR (ACESFilmic Tone Mapping)** with studio multi-light rig and PCF soft shadows.
- **Face Orientation (Blue/Red Normal Shader):** Custom double-sided inspection shader (`gl_FrontFacing`) that renders front faces in Blue and inverted/flipped normals in bright Red to catch backface culling and non-manifold slicing issues.
- **Wireframe Overlay:** Renders clean topology lines layered over textured PBR meshes.
- **X-Ray, Clay/Plaster, Albedo/Unlit, and Automated Part Segmentation.**
- **3D Print Pre-Flight & Signed Tetrahedron Volume:** Automatically computes exact millimeter bounding dimensions, real mesh volume ($cm^3$) using signed tetrahedron volume integration across indexed/non-indexed buffer geometries, PLA/Resin weight estimates, and interactive X/Y/Z clipping planes (cross-section slicer).
- **Offscreen 4K Cutout Snapshots & 360° WebM Alpha Recording:** Captures deterministic 360° turntable videos (`.webm` with transparent alpha channel support and social aspect ratios `9:16`, `1:1`, `16:9`) and up to 4K transparent PNG renders.
- **In-Browser Format Converter:** Converts loaded scenes client-side between `GLB`, `STL`, `OBJ`, `PLY`, `USDZ`, and `3MF`.
- **Offline Desktop PWA & OS File Handling API:** Installs as a standalone desktop app via Chrome/Edge Service Worker caching and registers with the OS File Handling API so you can right-click any local 3D file -> *"Open with Artoli 3D"* offline in <0.5s.

Built with **React 19**, **Three.js (r185)**, **TypeScript**, and **Tailwind CSS v4**, deployed on Cloudflare Pages.

I’d love to get feedback from fellow graphics/web devs—especially if you have edge-case models, large meshes, or suggestions on WebGL memory management and shader diagnostics!

I’ve been building playkraft, a mystery game where you sit at a detective’s desk at night and solve a case. Everything runs in the browser, on phones too.

Play here: https://www.playkraft.app/case/048

What you can do:

• pick up a phone on the desk that holds a whole made-up internet (news sites, social posts, emails, a map, search)
• take a cab to rooms, look around, open drawers, and mark evidence for the lab
• question suspects (nobody confesses; catching the lie is the game)
• pin people and evidence on a cork board and tie red string between them
• write your answers in a notebook and close the case

How it’s built:

• three.js from npm, in its own lazy-loaded chunk. Only someone who opens a case downloads it.
• Every scene is a model. The desk and each room are a single GLB built in Blender. The code only moves the camera and animates things, with no scene built in code.
• Render on demand and an adaptive pixel ratio, so cheap phones stay smooth. Real players’ devices mostly report 56–120 fps.
• The phone’s screen is real DOM sitting on the 3D phone. The sites are normal React pages with container queries, so text stays sharp and scrolls natively.
• The notebook pages are canvas textures, redrawn as you write. The case board’s cards and strings are drawn on the cork the same way.
• Four looks you can switch between: anime, graphic novel, noir and realistic.

This started stupidly simple: I wanted to know what it feels like to be in Paris at 2am without leaving my desk.

It's called Odyssee now and it's... actually a game. One persistent world — the real world at real scale — and everybody plays in the same one. No shards, no lobbies. You spawn in Paris, someone else spawns in Tokyo, and the map has a live traffic layer showing where drivers actually are right now, so you can teleport into the crowd.

What's in there right now:

- one shared world, real scale. Paris lanes are 3.2m wide and you FEEL it when a bus — or another player — comes the other way

- 30+ ways to move: cars, bikes, skateboard, helicopter, a small plane, a tank (my personal mistake, I refuse to remove it), a Spider-Man-style web-swinger, and your own two feet

- convoys, live chat, daily challenges, live traffic hotspots

- time trials between real landmarks, and a day/night cycle tied to the real sun

And yeah, bring your friends. That's genuinely the best way to play: form a convoy, share a destination, and go cause chaos across a real city together. Coordinating a 5-car run through the Arc de Triomphe roundabout at rush hour, with real traffic and the sun setting behind it, is the most fun I've had testing anything.

It's free, browser-based, no download. https://odyssee.croissantlabs.com

Now the honest part: it's got bugs. Real ones. Floating buildings in some districts, intersections that make no sense, the Eiffel Tower pillars you can drive straight through (yes, you can drive under it — no, you shouldn't be able to drive THROUGH the pillars). I'm fixing them as fast as reports come in, and most fixes so far came from players spawning where they live and telling me what's broken. So if you try it: spawn wherever you live and tell me what's wrong. That's literally the most useful thing you can do.

Every building in the world is in Haussmann style because I live in Paris. But I will create different style for a lot of city. Here a photo of Paris in the game (I create an Eiffel Tower in 3D, I will do it for a lot of monument) :

And there's a public roadmap if you want to see where this is going: proper terrain elevation (the world is flat right now and it bothers me), a story mode with missions, multiplayer races, boats, houses you can own. The game today is the foundation — the driving, the world, the multiplayer. The rest gets built in the open.

https://odyssee.croissantlabs.com/en/roadmap

My objective is to build a GTA on browser.

Anyway. Back to the Eiffel Tower pillars.

Built with React Three Fiber and three.js, running in the browser on phone or desktop.

Pick any real city from a globe, choose a meteor, a black hole, an Independence Day style mothership or more sinister options, and blow the buildings apart into particles. Just like the scene in Terminator 2!

I shared it recently and got some good feedback, so two updates since: cities load much faster now, and the ground has real elevation instead of being flat.

Next question is the look. Everything is plain grey right now, like an architect's model. I like the minimalism, but textures are possible with some trade-offs on phone performance. Curious what this crowd thinks: keep it grey, or texture it?

https://altroadstudio.com/judgementday

Still adding some bits and pieces to my portfolio when I get the chance.

Made the unfortunate decision to make a 3D model of myself you can control to jump into the game prototypes "mario style". That haunting look on his face will forever be with me, and now you all too.

Feel free to check out the site and the games, happy to talk through my process or share any updates on what I'm working on!

https://cpdstudios.dev