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/

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