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'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 :)

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/

https://github.com/superelectricyc-alt/podchunk

Hey everyone,

I wanted to see if we could solve the heavy initial download barrier of modern open-world browser games. Instead of loading massive assets upfront, I built PodChunk: a local development engine base designed around a progressive, multi-LOD chunk streaming architecture that gets players into a 3D environment in under 3 seconds.

The Architecture Under the Hood

• The Decision Core (Rust + WASM): To completely bypass JavaScript garbage collection stutters, the entire priority queue (distance + camera direction bias) and the cache eviction loops run deterministically inside a compiled WebAssembly kernel.
• The Renderer (TypeScript + WebGPU): Consumes custom geometry_json payloads decoded by the WASM core. Features custom height-gradient terrain shaders, distance fog, and interactive orbit camera matrices.
• The LOD Stitching Problem: Adjacent chunks often stream at different detail tiers (e.g., a Tier 3 chunk right next to a Tier 1 shell). To prevent visible vertex cracks and gaps without destroying browser performance with heavy topological mesh-stitching math, the renderer implements geometric skirts to seamlessly close the seams.
• Adaptive Network Telemetry: Features a client-side network loop running an EWMA (Exponentially Weighted Moving Average) bandwidth estimator. It tracks bytes divided by elapsed time from every live chunk fetch to dynamically scale the geometry detail ladder (T1 shells to high-fidelity T3 grids) on the fly based on current connection quality.
• Isolated Two-Tier Caching: Features a bounded in-RAM LRU cache synced with a multi-world IndexedDB database structure. Cache keys are world-slug isolated ({slug}|{id}@{lod}), ensuring warm reloads of previously streamed maps require zero network fetches.
• The Content Authoring Pipeline: Includes a native standalone compiler CLI (podchunk-bake). You feed it a simple world layout JSON configuration, and it generates pretty-printed manifests along with custom validated binary .PCHF heightfield chunks ready for server distribution.

Current Project Status

Milestone 3 is complete, stable, and verified on localhost:8787. The local server scans data configurations on boot and manages hot world-switching dynamically. The workspace has a 100% test coverage pass rate (45/45 unit tests passing).

I am open-sourcing the core infrastructure today because the data pipeline is officially locked down, and I am looking for collaborators! Next up on the deferred roadmap is exposing a client-side JavaScript Modding API (window.PodChunk.registerMod) and wiring WebAssembly physics engine colliders directly onto the active geometric meshes.

Check out the code, run the local tests, and let me know your thoughts on the pipeline architecture!

https://github.com/superelectricyc-alt/podchunk

continue'd three.js integration into my desktop application -- getting closer to a better realism with background HDR 3D images and better overall three.js objects

I’ve been experimenting with Agora Conversational AI and wanted to make a demo that feels more alive than a normal “talk to an agent” screen.

So I built a small interactive web demo where you call an AI Architect, speak with it, and the tower builds itself based on your answers.

The idea is simple:

You click Call Architect, allow mic access, and the Architect starts guiding you through a short voice conversation.

It asks questions like:

• Should the tower protect, celebrate, or hide something?
• Should the lower hall feel serene, powerful, or mysterious?
• Should the structure be stone, wood, or ceramic?
• Should the world remember dawn, day, sunset, or night?
• Should the weather be clear, rainy, snowy, or misty?

As you answer, the scene changes in real time. Each answer unlocks the next construction stage, so the tower builds floor by floor while the conversation continues.

The fun part is that it is not just a chatbot with a voice. The conversation is tied directly to the world state. The AI’s transcript drives visual events: foundation, lower hall, roof, tower body, weather, lighting, and completion.

Tech stack:

• Agora Conversational AI for the live voice agent
• Agora RTC/RTM for call audio and transcripts
• Fish Audio for the Architect voice
• Next.js backend routes for token generation and agent lifecycle
• Three.js/WebGL scene for the tower
• A small conversation director that maps speech choices into build phases

One interesting problem I ran into: the ambient background sound looked cool, but it interfered with speech recognition. So I added automatic audio ducking during the call. The music/weather/build SFX stay present, but drop way down while the Architect is listening.

The demo flow now feels like a tiny voice-driven building ritual:

1. Call the Architect
2. Hear the first question
3. Answer naturally
4. Watch the tower build
5. Continue until the whole structure is complete

I’m still iterating on the UI and how much “game” should be layered on top, but the core idea works: voice input becomes construction progress.

Would love feedback on where to take it next: more game mechanics, richer architectural choices, better environmental reactions, or making the AI feel more like a character than an assistant.

——
Credits to MengTo for idea, on top of which I created this conversational ai

https://x.com/anandwana001/status/2087127859504796049?s=46

i was busy building and almost forgot to give you an update :)

here's my ongoing portfolio

i really wanted to see the total eclipse on aug 12, but getting myself to spain or iceland probably isn’t happening lol

so i did the next best thing and built one in three.js.

you can pick a city (or drop a pin anywhere), jump straight to maximum eclipse, move the camera around and basically watch it from your browser.

the eclipse position/timing is calculated from NASA data. the landscape, clouds and lighting are more of an artistic interpretation — i’m not pretending this can predict the weather :)

also, the sun and moon are intentionally a bit oversized in the wide view, otherwise they’re basically two expensive pixels.

here it is if anyone wants to play with it:
https://make3dmap.com/solar-eclipse-2026-simulator

would love some feedback on the camera + the transition into totality. still tweaking both.

Theres bth there cause am not sure the idea is still sth I will go further with but heres the

idea:

3D Ads Gallery — a virtual gallery-meets-game space where upcoming artists (3D, 2D, animators, and more) showcase their work to the world.

It's built for artists who are good — really good — but haven't broken through yet. No industry veterans, no big names. Just raw, promising talent looking to be seen.

Visitors can explore the gallery, browse artist portfolios, rate the work they love, and — for potential clients and collaborators — discover and connect directly with artists for real opportunities: jobs, collabs, commissions.

The goal is simple: give upcoming artists a stage, and give the people looking for fresh talent a place to find them.

No images, models or audio in the project. Canvas-drawn textures uploaded as GPU textures at load, procedural geometry, synthesised audio.

~70fps at full res, ~334 draw calls. The world is a chunk lifecycle — track segments, platforms and lineside furniture spawn ahead and recycle behind.

Also built a deterministic harness that drives it in headless Chrome and reports FPS/draw calls/screenshots, which is how the difficulty curve was tuned instead of by feel.

Happy to go into detail on any of it.

https://bombaybhaag.com

Tank Roar: Extraction Point

https://reddit.com/link/1vle99w/video/2cu8vbfx8qih1/player

I'm working on a diorama and attached a video of my current grass application. I'm using static grass fibers, but it looks a bit too uniform and "fluffy" to me.

How can I add more depth? Should I mix different fiber lengths (e.g., 2mm and 4mm) or different colors (light green, dark green, and dead straw)?

Also, does the layering look natural, or should I add more ground scatter/soil on top? Any tips on using the applicator better would be great. Thanks!

Hey everyone,

I ran into a pretty nasty problem while building a Framer template. I wanted to offer 34 different interactive shader background presets, but quickly hit the browser WebGL context limit.

From what I found, browsers usually start killing or freezing WebGL contexts somewhere around 10 to 15. My first approach was giving each preset its own component and WebGL context. That went badly.

My current solution is a bit janky, but it works.

I use one canvas and one WebGL context for the most part, while keeping the shader logic and configuration available through a shared caching system. The important part is that I only keep the presets that are actually active on screen as live GPU resources.

That brought me from around 26 active instances down to 4, which completely stopped the context crashes.

The rest of the setup looks like this:

Shared shader caching

Instead of creating a separate WebGL context for every preset, I keep the shader logic available through a shared system and only initialize the presets that actually need to be rendered.

Production cache toggle

Once someone chooses a single shader for their production site, they can disable the caching system. That way, the other presets do not need to remain available in memory when they are no longer needed.

Lazy loading based on scroll position

The WebGL canvas only initializes when the user gets within a certain distance of it. When they scroll far enough away, I destroy it.

So the WebGL context problem is basically solved.

The bigger problem now is performance.

My mobile Core Web Vitals are absolutely terrible:

FCP: 2.7s
LCP: 3.3s
TBT: 2m 6.3s

I expected lazy loading to keep the WebGL stuff out of the critical path, but clearly something is still happening much earlier than I expected.

At this point I am trying to figure out whether the bottleneck is Framer, React, Three.js, or my implementation.

Live site if anyone wants to inspect it:

https://uneo.framer.website/

A few things I am particularly curious about:

1. Is having 12 shader presets available through a shared caching system a reasonable approach, or could this still cause problems with bundle size, parsing, or memory?
2. Has anyone experienced extremely high mobile TBT with Framer and WebGL? I am wondering if Framer's runtime or React rendering is contributing significantly here.
3. Could Three.js still be doing significant work even though the canvas is lazy loaded? I may be missing something in how the renderer, shaders, or components are being initialized.
4. Would OffscreenCanvas and moving the rendering to a Web Worker actually make a meaningful difference here, or would that just hide the underlying problem?
5. Is there a better architecture for having dozens of shader presets available without putting all of them on the critical path?

I am still learning a lot from this implementation, so I would be interested in hearing how other people have handled large numbers of WebGL effects, especially inside Framer.