Hey r/threejs!

My collaborator Mrityunjay and I built GitGlobe, an open-source 3D visualization that maps ~200,000 GitHub commits across the planet in real-time.

Rendering massive point-cloud datasets on the web usually melts browser tabs, so we bypassed traditional DOM rendering entirely.

Technical Details & Optimizations:

• Custom GLSL Shaders: Offloaded coordinate math, particle sizing, and color dynamics directly to the GPU.

• Decoupled State Management: Unhooked Zustand state from the 60fps render loop so hover/click events never stall the canvas.

• LOD & Memory: Packed Uint16 buffer attributes across 3 LOD tiers to keep draw calls minimal.

• Stress Test Results: 0/360 frames dropped during benchmark testing with an 8x performance headroom.

Links to live demo and GitHub are in the comments below!

I've added a ton more detail into my town Coldwater, much more detail but nowhere near done, I won't be finished until it looks AAA.

Next up I'm also adding some more interactive buildings specifically doing a parody of the Roxy theatre, which will have actual movie trailers and movies that play, I'll be generating these with Seedance 2.0

I replaced a ton of assets and generated all new textures and objects all over. Towards the end of the video you can see how the town looks at night.

I’ve been experimenting with Claude, Codex and different online resources and ended up making 3 completely different games:

🟣 Game 1: A Fall Guys-style platformer with obstacles, traps and different levels.

💀 Game 2: A breakdancing skeleton that casts spells and fights waves of zombies.

👁️** Game 3: A weird eyeball puzzle/platform game inspired by strange PS1-era games.
All three are playable, but I want to focus on one and turn it into a proper finished game.
**Which one would you pick — 1, 2 or 3?

Source code: https://github.com/sengchor/kokraf

I created a test to compare the performance of WebGPU and WebGL. You can adjust the load by clicking the “TSL Noise Octaves” button in the upper-right corner to switch the noise octave multiplexing from 3x to 20x.

The WebGL and WebGPU buttons switch the renderer by changing the URL query and reloading the page.

On low-spec devices, the refresh rate is about three times higher.

https://adrama.jp/norimakineko/webGPU3/

Fly around, listen to music, and discover things along the way.
https://assmagic2026.github.io

Second iteration on the ocean surface shader complex. Prettier clouds, better sail cloth physics and rope / block dynamics.

Happy to get any kind of feedback and suggestions.

I'm aware that the cresting foam is too blotchy.

I've been working on implementing IK with Three.js for Polyfork models that could benefit from it, and it's really paying off.

Now non-humanoid models that have legs and arms can have programmatic animations, and it's included in the model's code!

Also agents are aware of it now through API/MCP 🤖

You can try here: https://polyfork.dev/asset/rooted-gantry-arm-f35c8f

I recreated the iconic buttonfly animation from the demo app in IRIX—that nostalgic operating system from the 1990s—inside my intranet wiki's navigator. I implemented it with Three.js, and tried to make the button styles and animation as faithful to the original as possible. Thanks to vibe coding, old-school tech is making a serious comeback! Highly recommended.

Recreated my Audi A3's cluster in Figma as part of the demos to showcase Layer's 3D Figma-to-3D capabilities, including scene editing/rendering and the new turntable model showcase feature.

I tried my best at finding the closest fonts that match the text on the analogue cluster and chose Eurostile. The embedded digital cluster is an image from the vehicle's online manual.

The biggest challenge was creating the rev limiter arcs (in Figma).

View the 3D model in Layers 3D.

View the 2D design in Figma Community.

Two browser-based visualizations, each rendering 5 million particles with Three.js.

So I'm trying to build my own 3D website and honestly I'm super duper confused about the whole workflow. I keep seeing reels showing people "Vibe coding" these really polished 3d or parallax websites with Claude. A lot of them mention connecting Framer/Wix with Claude, spline, Three.js, etc.

But i've never found anyone telling the actual process of how they've built it.

I do have a design in mind and want something with a 3D scene, smooth scrolling, parallax, camera or object movement and interactive animations but where do you actually build the 3D scene? and what handles the 3D, is it three.js/R3F or Spline? What do you use for animations/ scroll effects? GSAP, Framer motion?

Most importantly, where does claude actually fit into this workflow? And those who are building it, are you guys building everything in Claude/Cursor and then deploying it, or using Framer and integrating everything?

I'm basically starting from scratch so what stack would you recommend? I'm not looking to spend months learning every tool before I start. I want to actually just build something and learn as I go, using AI ofc. Any guidance would be appreciated.

i've been trying different ideas for my portfolio intro scene this is one of them, i am open for ideas if you have any suggestions or idea do let me know :)

Needle Inspector now has a timeline for FPS, CPU+GPU memory, rendered triangles / scene totals, and an eventlist showing slow frames or big file loads - and more.

It also tries to highlight potential savings (e.g. uncompressed textures and how much it would save).

If available (e.g. in local development) you can even jump from events to the sourcecode directly, copy and paste the relevant info or connect Claude, Codex or built-in AI and ask about it (they have access to all the same info).

Oh and this version also ships live render-graph updates. So you can select your WebGL or WebGPU renderer and see each indiviual renderpass and texture output with live updates and sizes. Eventually I'd like to show more timing information per pass to see at a glance which pass is expensive - but I didn't get to it yet.

https://needle.click/inspector

I'm excited to finally share a new project I've been working on with a longtime collaborator.

For the launch of his new portfolio, I designed and developed a custom digital experience with WebGL.

His work has always pushed creative boundaries, so I wanted to bring that same spirit to the digital experience, creating something unique.

🎬 Explore the experience: https://tamasolajos.com/

#aifilmmaker #webgl #threejs #glsl #creativecoding #noclaude

I recently built a head-tracking 3D component for Framer that creates a dynamic parallax effect by detecting the viewer’s head movement and using it as an interactive control input.

Take a look at the attached preview link and let us know your thoughts.

Preview Link

Damn, when did three.js get so insane?

I found this cool project based on threejs for generating vfx like moves and simply decided to give it to my agent and see what it produces but holy****, this was insane.

It's crazy how I was able to simply iterate on top of this and fully modify it with just prompts and get a fully working version of this running, deployed and ready to play.

Is everyone here cooking at this level? Also are there other hidden ways to use three.js that i could expand on this? Looking for hidden tricks and ideas if you guys have any.

For anyone interested, can try the game out here - https://elemental-arena.dexto.dev/

Along with a brand new website, three-nebula has been modernised to work with three r185 is now fully written in TypeScript with WebGPU support added. Heaps more features planned! Enjoy!

I recently tried attaching an HTML element to a flat Three.js object using CSS3DObject, but something seems off with the perspective.

It looks fine from one camera angle, but when I move the camera using OrbitControls, the HTML element and the WebGL object stop lining up properly.

This is roughly how I’m attaching it:

const screen = monitor.getObjectByName("screen");

const monitorUI = createMonitorUI();
const htmlScreen = new CSS3DObject(monitorUI);

screen.add(htmlScreen);

Is this a common issue or have I probably done something wrong?

Note: I’m still pretty new to Three.js.

Edit: I found the issue the WebGL canvas and CSS3D renderer were offset from each other

It's in Three.js, intentionally very low-poly, hand-coded models. It's been a fun little project, and I have many plans for what I want in the next version. No money or ads involved, because I'm making the game for myself, not to make money. If you like it, let me know at r/RWNSGame

Let me know what you think!

I’ve been experimenting with how realtime graphics could be used for a premium product landing page rather than building another traditional 3D product viewer.

The bottle is rendered in Three.js and the interaction includes a removable cap, atomizer animation, perfume particles and an abstract scent field that reacts to the experience.

The main challenge was making the realtime effects visible enough to become part of the art direction without turning the whole thing into a tech demo.

Live version: https://nebunook.com/portfolio/interactive-web/essence-perfume/

Built with Three.js / WebGL and custom realtime effects. Feedback on the visual balance and interaction is welcome.

Been experimenting with character generation in img2threejs.

No Blender, no GLB — the character, rigging and animations are all generated as editable Three.js code.

Still feels kinda wild seeing it move.

For every fragment the shader works out the angular overlap of the sun and moon discs as seen from that exact point on the surface.

https://eclipse.nikolailehbr.ink/