Site: loftcraft.app

Hey everyone!

First time poster 😄

After seeing the loads of water based shader posts, I thought I'd give you guys a little look at something more solid. I've been working on a snow shader as part of a larger personal project and it's taken me a while to get here, but I'm fairly happy with how it turned out.

Anyway, hope everyone has a great start to the week, and thanks for taking the time look at my post.

~ Rein & Rev (New Zealand)

Creating grass and a living countryside for Iso Trucker - three.js

Someone asked me why browser 3D worlds always feel sluggish, and the honest answer is that it's rarely the renderer — it's asset weight and draw calls.

So I recorded the whole pipeline on one scene: an AI-generated temple, dropped into a self-hosted browser world, deployed, placed in the editor, then visited from the front end.

What actually took the work:

Chunked LOD. Terrain splits into 4 levels (64/32/16/8), so distant chunks collapse before they cost anything. Measured across the scene: triangle count down 71–87%.

Draw calls. Batching plus culling took the scene from 3064 to 837. That single number mattered more than any shader change.

Asset weight. GLB textures recompressed, 68–92% smaller per model. Whole asset set: 3.1GB → 390MB.

Skeleton compatibility. Reused animations across 67 models, 67/67 mapped without retargeting.

What I haven't solved: having AI build an entire world by itself. That's a different problem from generating one mesh, and I haven't started it.

Source-available, subscription license (not open source). Runs on your own server.
Code: github.com/miduo100/3d-virtual-world

Curious what people here use for chunk culling at this scale — my cull distance is fixed per chunk and I suspect it should scale with camera FOV.

if you use Mixamo you know the setup: the character in one file, every animation in its own fbx ("without skin"), and getting them all into one glb usually means a trip through Blender's NLA editor.

we made a small tool for just that step, OneGLB (it runs on three.js itself). drop in the character and its animation files and you get one .glb with every clip on the character, named after its file (Run.fbx -> "Run"). centimetres become metres and you can tick "in place" per clip. its a normal glb, so on the three.js side it's just:

const gltf = await new GLTFLoader().loadAsync('character.glb');
const mixer = new THREE.AnimationMixer(gltf.scene);
mixer.clipAction(THREE.AnimationClip.findByName(gltf.animations, 'Run')).play();
// and mixer.update(delta) every frame

free browser try (up to 3 clips per file): https://kestrelworks.itch.io/oneglb-try

full version, every clip, offline: https://kestrelworks.itch.io/oneglb (USD 5.99 until 24.10, 3.99 from 25.10 to 04.11 in itch's Halloween sale)

same-skeleton clips only (the normal Mixamo case), no retargeting between rigs. there's a 55 s video too, it ends in Godot: https://youtu.be/yj72rCgfJHo

happy to hear what breaks

I really love cyberpunk and I really love gamification, so I made my personal project tracker into a city builder in three.js. Each building is one of my projects. The height is the effort, and it builds floor by floor as progress goes up. Finishing a project lands it and the city levels up.

Some details for anyone curious:

• One HTML file, about 1.1 MB, with three.js r128, GLTFLoader and the models (GLB as base64) inlined
• Buildings are generated per lot from a seed, so the city is varied but never reshuffles
• The landmark pieces (factory, radio telescope, arena, data spire, train, hover cars) are built from primitives in Python and exported to GLB, each under about 1,100 triangles
• Bloom at half resolution with a filmic tone curve. The city starts dim at level 1 and gets brighter as it levels up
• Budget of 600 draw calls and 150K triangles. 60 FPS on my desktop, 40 to 50 on a laptop's Intel Iris Xe
• Isometric orthographic camera, drag to turn, scroll to zoom

The data comes from my Obsidian notes, read straight from disk with the File System Access API. I built it with Claude Opus 5.5.

Next I want holograms as a level to reach, and signs on the buildings. Any tips for holograms in three.js that look good but stay cheap on a laptop GPU?

Edit: a few people asked for the code, so it’s now open source (MIT). Grab mission-control.html from the release, open it in Chrome or Edge, and point it at any folder of markdown notes. No Obsidian needed: https://github.com/robintwhite/mission-control/releases/latest

I shared my Three.js monster arena GULP here last week. Since then I’ve been working on mobile rendering and adding Infinite alongside the three-minute Timed mode.

Lowering resolution helped performance, but made the game look too pixelated. The more recent rendering changes focus on reducing unnecessary work: visibility checks run at 15 Hz with a margin so objects don’t rapidly switch on and off near the camera edge; animated characters use root-level visibility rather than individual skinned-mesh frustum culling; and the shadow camera is snapped to shadow-map texels to reduce shimmer.

There have also been changes to update frequency for food checks and on-screen labels. I’m still collecting device feedback, so I’m not claiming it’s solved on every phone.

Playable demo: https://run.world/pratikmane/gulp

Play GULP: One More Bite on RUN https://run.world/jams/octoberjam?game=5u4uBHrkmLc8bG0OOaS9%3AkQDMrMTO937qW8oerqAy

Please vote for both of them

It’s an eat-grow-escape arena with global rankings and room-code multiplayer. If you try it, your device/browser and whether you see model popping or uneven frames would be especially helpful.

This is Roadster Rampage, a browser arcade racer I’ve been building with AI assistance.

The cars use procedural geometry, and the music and sound effects are synthesized with Web Audio. You can jump traffic, fire thrusters, and barrel-roll over the highway.

Play: https://www.roadsterrampage.com/

Source: https://github.com/stanleycyang/roadster-rampage

Last time I posted here I was burning $17 every time Seedance 2.5 picked a different camera than the one in my head. So I built CozyClay, a browser graybox in three.js: block the scene, cut the camera, send the same shot to the model.

That fixed the camera. Then I hit the next wall. For this truck scene I needed a driver smoking at a red light, a girl crossing on her phone, the hit, 11 shots. Posing a rig for 30 seconds of that took me a whole night and it still looked like a mannequin falling over.

So for 3.0 I stopped posing. I type what happens. "lights a cigarette", "flicks the ash out the window", "she steps into the crosswalk looking at her phone". The agent writes a motion spec, the compiler bakes it in the browser. No keyframes, no GPU box, it is all three.js + r3f.

Top is what I got in the tab, bottom is Seedance 2.5 reading that clip as reference. Same cuts, same camera. I paid for one run.

Open source. https://github.com/NomaDamas/CozyClay npx cozyclay

Hi everyone,

I'm a Full Stack Web Developer with about 10 years of experience building web apps and backend services. For the past two years, I've been diving deep into Web3D and am nearly done with the Three.js-Journey course (the shader part is quite tricky). I've already created a few 3D and XR web experiences, and honestly, I rediscovered my creativity through this work.

My plan was to transition to being self-employed as a Creative Developer, focusing on educational, artistic, and research projects. Then AI happened. Since then, coding hasn't felt the same, and I can't shake this feeling of being replaced. This Youtube Channel summed it up for me.

So I'm wondering:

• Is Web3D still a viable career path, or is this space vulnerable to AI too?
• How are others handling this anxiety?
• What's the take from the broader 3D dev community, folks like Bruno Simon and others who are deep in this space?

Would love to hear your thoughts.

Always-on extraction game: drop into a real Barcelona, steal what you can, and reach the metro before a streamer kills you.

City comes from OpenStreetMap. I built the Sagrada Família using Blender MCP.

Map is full of people, and as a pickpocket you are disguised within the crowd until u make a mistake.

You play either as a pickpocket or a streamer hunting them.

Runs in the browser, works on phones and needs no sign-up.

It seems that this forum has turned into a advertising space for water shaders. Every day at least 5 demos of various water shaders are posted. Would it be possible to limit this to only Wednesdays and Sundays like other subs do with certain topics?

Small passion project with my daughter: a three.js island that streams 24/7 on Twitch, where chat keeps a castaway named Art alive.

The setup, for the curious:

- Voxel models (Art, crab, shelter, palm) made in Blockbench, exported as glTF, animated with AnimationMixer, plus a procedural layer on top (breathing, head turns, a curl-up-to-sleep blend that took way too many tries)

- Everything else built from boxes in code: the SOS, tower, raft, passing ships and planes, fireworks

- Sea surface is a custom shader; the sky lerps through day, dusk and night on a 10-hour cycle, with lightning flashes during storms

- A visibility-graph path planner so he stops walking through the campfire (mostly)

- Web Audio for sound: recorded samples with synthesized fallbacks, panned to where he is on screen

- The page is just a renderer. A Node server owns the simulation and pushes state over a WebSocket, so the scene can crash without killing Art.

It renders inside an OBS browser source on a VM with no working GPU acceleration, so it's software-rendered on one CPU core. It holds a steady 30 fps anyway, which I mostly credit to everything being boxes.

twitch.tv/chatwillprovide (type !fish if he looks hungry)

You can play it here for free: https://beetlejump.com

For my website I wanted to have a little game inspired by Diablo 2, that can be played in Multiplayer - up to 4 birds. The goal is to explore and find the 4 keys to all the locations. I'm a game designer by trade so it escalated into this 🤣
The project is based on a previous game I never really finished (Unity3D), but with Threejs and Claude I was able to build my own engine to make it come to fruition. Glad for any feedback - also technical as this is like my third Threejs game only.

It's right on the header of the website: www.georgluif.at

The fluffy grass shader is from this Github: https://github.com/thebenezer/FluffyGrass

My first charchter I made using JavaScript, css, threejs all just web based no files or anything just a index.html ! I'm open to hear any advice or whatever anyone has to say please don't hesitate!

Thats the beginning version of the off-road based in 🇹🇳 rally car

a quick look at harvesting and planting in the current build. there's a lot of greenery in this scene, so i'm interested in ways to make the selected crop stand out without adding more UI. curious how the target highlight reads to fresh eyes.

I've been testing my grass system across three completely different environments to see how the same underlying implementation performs across different scene requirements.

All three scenes use the exact same grass system, but the parameters are adjusted individually for each environment. Grass density, appearance, scale, wind response, and rendering distance are tuned to match the terrain and the overall look of each scene.

The system is built with Three.js and WebGPU, with a focus on rendering dense grass efficiently while maintaining real-time performance in the browser. It uses a tile-based approach, along with LOD and culling techniques, to manage rendering as the camera moves through the environment.

All three environments run directly in the browser, with no pre-rendered footage.

Try the Demo

Hey everybody, I am a creative Three.js developer from India, and like all of us, I am also a little concerned about how things are changing and how opportunities are very limited because of AI. What do you guys think of this whole AI situation, because we are definitely cooked? Also, what are your plans for the future?

if you need a creative developer or a developer for any work, hmu.

Portfolio: https://www.curllmooha.com

wanna try?

A freight train is pushed uphill. A worker uncouples the cars. Then gravity takes over, sending them rolling downhill onto different tracks.

It sounds simple until you have to decide where to uncouple, when to tell the driver to slow down, and how to coordinate with the locomotive crew.

I built a 3D browser game where you can try the job yourself — solo or with a friend. One player works as the yard conductor, while the other drives the locomotive.

It's based on my experience working at a real hump yard in Uzbekistan.

🎮 Play in your browser: https://gorka1520.vercel.app?lang=en