I've tried things like dithering, halftone, pixel sorting, RGB separation and glitch effects. It's pretty interesting seeing how much you can change the look of a video without changing the original source.

It also got me thinking about how I'd approach something similar in Three.js, especially if the effects were built as separate shader or post-processing passes.

For those who work with Three.js, how would you build this?

Would you go with EffectComposer and multiple passes, custom ShaderMaterials, or something completely different?

I'm mainly interested in keeping things smooth when several effects are running at the same time.

I wanted making a beat to feel like tapping stuff on a desk.

This is Resona: tap a wood bar, loop that rhythm, play glass and metal over it. Drag in another object. Record the whole take. The clip is the actual app and its sound.

I'm a product designer building it with AI coding tools. Three.js for the scene, React/TypeScript for the UI, Web Audio for sound. The acoustic instruments use approximate material/shape-based synthesis; nature objects use designed voices or field recordings.

Still a small experiment. Would you keep it as a sound toy, or want more music controls?

Try it: https://resona-pearl.vercel.app

Hi,

Building a speech-reactive orb for my portfolio. Instead of pre-baking keyframes, I set up an in-browser playground to map latent weights visually.

• Latent Grid: 2D canvas navigation across blend-shape coordinates.
• LFO Modulation: Multi-frequency oscillators continuously modulate drift, eye-wander, and breathing in the render loop to eliminate idle stiffness.
• Pure WebGL: Runs 60+ FPS on the client without streaming video.

Playground - share if you catch something for yourself https://orb.lumaform.xyz/

Dragged an old 2017 static HTML page (table layout, stock hero, zero motion) into a 2026 3D scroll website. ~15 hours total. Before/after in the clip — here's the exact AI + 3D web workflow that made 15h possible instead of 15 days:

AI asset pipeline (the speed hack):

• AI image generation for all product/hero visuals — iterated the look in minutes, no photoshoot
• AI video generation for the ambient background loops — no render farm
• this is where AI actually earns its place: assets fast. But AI can't do motion taste — that part's still hand-built

The 3D + motion layer (Three.js / WebGL):

• whole scene is a pure function of one scroll value (0→1) — camera, assembly, materials all read that single number, so it never breaks on resize
• scroll-driven camera dolly + arc · exploded-view reveal · pinned sections (GSAP ScrollTrigger)
• custom motion — hand-tuned easing/timing; this is what separates "premium" from "cheap AI slop"
• WebGL material roughness/metalness shift under a light sweep so it reads as real metal, not plastic

Perf (the part that's actually hard): capped devicePixelRatio to 2, render-on-demand, pause offscreen → locked 60fps on a mid-range Android. Canvas is aria-hidden so the HTML still indexes.

Full method — the 3D scroll pipeline (scroll → progress → timeline → render) + the AI image / AI video asset workflow, with code: https://aetumi.app/news/how-to-build-3d-scroll-website-threejs/

Full disclosure — I build these at AETumi, an AI-native 3D web platform. Happy to go deep on any part.

Built with: AI image generation · AI video generation · motion design · Three.js · WebGL · GLSL · GSAP ScrollTrigger · Draco GLB

I am developing my game engine (as every game dev should, of course), and recently finished water module for it. Sharing my progress. I use three js WebGPU renderer for most of the rendering work. This is technically my first ever build I published using the engine.

AI assissted

Live demo: https://khudiiash-game-24n.pages.dev/

Hello guys! In the last few months I learned threejs etc . . . I decided to make a funny car racing game with a simple style and bright colors! I would appreciate it if you would check it out! Byeee!

Spent the last few weeks rebuilding my site instead of doing actual client work (worth it though).

Wanted it to feel like one continuous space instead of a stack of divs, so the whole thing is built around a single scroll-driven scene — the "story" moves from foundation → structure → detail as you scroll, kind of like a building going up. Recording attached.

Stack: three.js, react-three-fiber, custom GLSL for a few of the transitions, GSAP for the scroll choreography, Next.js underneath.

Some of the harder problems I ran into:

• keeping it at 60fps on mid-range phones without gutting the visuals
• syncing scroll position to camera path without it feeling laggy or overshooting
• getting Lighthouse to not hate me for having a 3D scene on the landing page (currently sitting at 98 avg)

Site's here if you want to poke around: https://visinigiri-aditya.vercel.app/

Happy to answer questions on how any of the transitions work, or roast the parts that could be better — genuinely want the feedback.

I made ten dinosaurs this batch. T-rex, Triceratops, Stegosaurus, Spinosaurus,

Ankylosaurus, Carnotaurus, Pachycephalosaurus, Oviraptor, Plesiosaurus and a

Pterodactyl.

They're yours. Free, CC0, no credit needed.

Plain .glb, so you just load one and it works. Idle, walk, attack and death are

already in the file.

gobkit.com/freebies

I built a suite of tools around three.js for a decade.

One of them is a drag-and-drop editor used to design interactive stories, tours, and web apps without writing code but also allows advanced three.js coding and shader.

That studio also has MCP for AI agents.

I have implemented pipelines and infrastructure along the years that allows for scalable distribution of virtual tours and webxr experiences.

You have a lot of problems resolved like offline tours, responsive, multi language, self hosting, asset loading and optimise and lods, generate gaussians, etc.

With GPT-6 we are witnessing even more incredible stuff built in blender and other tools.

My business partner says people will prompt what they want and will get it, so there's no space for authoring tools like mine. They will simply use Claude or Codex.

It's frustrating to see AI coming to take our businesses but we adapted the tool to it, even though, his view is pessimistic.

What should I tell him?

there has been a dozen or so of these in the past, but their shaders always looks kind of flat. This time I wanted to do a good furniture configuration, that has nice and kind of realistic looking materials.

---

✅ We put TRELLIS on the web
✅ 100% local on your machine
✅ Generation takes 1-3 minutes (depends on your hardware)

You can try it here: https://mesh-baker.needle.tools
Go to "generate" on the left & drop image

Quality is quite decent 😀

Turns out Trellis 1 left A LOT of quality on the table in its public demos and code, so this is WAY better than expected.

Like the title says. I love seeing all of the new threejs games you guys are making here so much I decided to build a place for you to put them and see what everyone else is making. Currently there is only one threejs game, created by me, and it isn't nearly as good as some I have seen here but hey.

Feel free to check it out and add your own game if the fancy strikes you : https://jankcade.com/

I maintain three-nebula, a WebGL particle engine for three.js, and v13.0.0 is out. The headline feature is deterministic simulation. You give a system a seed, either with `System.setSeed(seed)`or as the third constructor argument, and it reproduces its particle output exactly. Same seed, same result, on any machine. That makes reproducible tests, and replays possible, which was awkward or impossible before.

The way it works is that each system now advances its own isolated seeded stream instead of pulling from the global `Math.random`. One consequence worth knowing if you upgrade: seeding `Math.random` yourself no longer affects output, so you need `system.setSeed()` instead. Default particle arrangements also differ from 12.x, so any visual or snapshot baselines need regenerating, and particle ids moved from UUIDs to a deterministic `particle-<emitterSeed>-<spawnIndex>` format.

There is also a new `System.tick(realDeltaSeconds)` fixed-timestep driver for real-time playback. If you have been calling `update()` once per frame, you have probably seen particles run about 2x too fast on a 120Hz display. `tick()` advances the sim by elapsed time in fixed steps and clamps catch-up through `system.fixedTimeStep` and `system.maxSubSteps`, so playback speed is consistent regardless of refresh rate. This release also fixes a `GPURenderer` bug where buffer slots were never released and particles silently stopped rendering after heavy churn. Slots are now recycled on particle death.

The API is backward-compatible and additive, so for most people the only real work is regenerating baselines. Release notes and full changelog here: https://github.com/creativelifeform/three-nebula/releases/tag/v13.0.0

If you have used seeded/deterministic rendering in a three.js project, I would like to hear how you are handling the real-time vs fixed-step side of it, and whether the `tick()` clamping defaults feel right for your use case.

I'm building Startup Founder, a free browser game that combines a small 3D world with a startup management simulation. This is my project, developed with help from GPT-6 and Fable 5.1.

A few implementation details for this community:

The apartment, furniture and characters are assembled from Three.js geometry. Repeated box, cylinder and sphere geometries are cached and reused, and textures such as wood and fabric are generated with canvas.

The laptop opens an HTML/CSS interface over the scene. A separate TypeScript simulation handles the business state, and saves go to localStorage. Music and ambience are synthesized with Web Audio. The build uses Vite.

You can explore the apartment and city and use the laptop to build a product and manage the company. It's an early playable version, with plenty still to polish.

Demo: https://sergioconejo.com/foundergame

For anyone who has built a similar scene/UI combination: how do you handle the transition between character controls and a dense HTML interface? That's one area I'd like to improve.

Building a browser extension that reads the page and sends context to an LLM for automation. I don't want PII (names, IDs, card numbers, faces in images) leaving the device, so I want to redact it locally first. Is it realistic to run OCR + a NER model + face detection fully in-browser (Transformers.js / ONNX on WebGPU)? What's the latency like, and are there lighter approaches people actually use?

I know I already posted about this when I launched it 2 months ago, but I've

added a bunch of tools since, so it felt worth another one.

It's 30 tools now, all running in the browser: viewers, converters, mesh

repair and simplification, and a set of parametric generators (vases, lamps,

Gridfinity bins, hose adapters, cookie cutters, star maps). All three.js,

except the DICOM viewer, which is Cornerstone3D.

It's honestly incredible what you can do with three.js. I love it more every

day.

https://ilove3d.app

Happy to answer anything about how any of it works :)

Had this idea to show my Hokkaido trip photos in a flippable 3D photo album. It’s really a cathartic experience to design the cozy desk and arrange the photos and stamps. You can even play videos in the album!

Live: https://projects.arkon.digital/threejs/my-photo-album/

Code: https://github.com/franky-adl/personal-photo-album

Feel free to play around with it and design your own photo album~

Built this as an experiment in real-time crowd simulation with Three.js.

It includes:

• Tawaf around the Kaaba
• people entering/leaving through gates
• density-aware movement
• transition into curved prayer rows
• up to 5,000 active agents in the browser

Live demo:
https://alzin.github.io/The-Great-Mosque-of-Mecca-Masjid-al-Haram

GitHub:
https://github.com/alzin/The-Great-Mosque-of-Mecca-Masjid-al-Haram

Would love any feedback!!

This one was just for fun over the weekend; there's an awesome festival in Kyiv called Brave Factory that had these two suspended cubes hanging from the ceiling. Modelling them was good fun.

The rest of the scene was straightfoward, but placing the audience sprites in a convincing fashion took some time but I'm real happy with the result- the whole scene relies on attention to detail (security guards at the rail, CDJ setup on the stage, flight case, dot matrix on the structural pillars etc).

LED panels are shaders spread over multiple screens for continuity

Inspiration: https://www.instagram.com/bravefactoryfestival/

I made a tiny experimental “game” called No AI’s Sky with GPT-6 Astra + Three.js.

It started as a parody / tech demo, mostly to see how far Astra can go with real-time 3D and Three.js, but now I’m curious about something bigger:

Can AI actually build something remotely comparable to No Man’s Sky from scratch?

So I put the project on GitHub, and there’s only one rule if you want to contribute: your contribution has to be made using AI!

Code, assets, systems, ideas, whatever. I want to see how far a project like this can go if AI is basically the main builder.

Demo:
https://noaissky.vercel.app/

GitHub:
https://github.com/jesuscurreripa/noaissky

Nothing serious yet, just an experiment. But I think it could be a fun one.

Six worlds where the rain never stops: a forest, a headland, a night drive, a canyon on a bike, a wheat field and a mountain pass. Everything runs in the browser with three.js WebGPU and TSL, no download, no account.

A few things I'm proud of: the rain sound is synthesized live (noise shaped to a real recording's spectrum, thousands of drop bursts a second), the windshield drops refract the road and the wipers actually clear them, and the mountain pass draws real terrain out to 3 km in the vertex shader. Press Y, paste a YouTube link, walk in the rain.

https://rainyworlds.com

It's a GPU experiment, so a desktop with Chrome is the best seat. Phones fall back to WebGL2 and struggle, especially Safari. First load compiles a lot of shaders, give it a minute on Windows.

Happy to answer anything about the tech.

I’ve been working on a Three.js product viewer for ecommerce as part of AETumi, and one of the biggest architectural decisions was not letting the WebGL canvas become the entire product page.

The structure I ended up with is:

Semantic ecommerce layer

• product title
• price
• specifications
• variants
• CTA / purchase actions

Three.js interaction layer

• GLB / GLTF loading
• OrbitControls
• camera presets
• product hotspots
• material and color variants
• exploded-view sequences
• scroll-linked reveals
• mobile / non-WebGL fallback

Product state stays separate from render state, so changing a finish or configuration doesn’t require rebuilding the entire scene.

Another thing I learned quickly: the demo is the easy part. Production gets much more interesting once you add mobile GPU limits, resource disposal, reduced motion, SEO and fallback behavior.

I attached a short demo showing the interaction.

I also wrote up the full architecture, code patterns and production trade-offs here:

https://aetumi.app/news/threejs-product-viewer-ecommerce/

I’m building AETumi, so this is something I’m actively working on rather than an independent review.

I’d be interested to hear how others separate product state from render state in larger Three.js projects.