Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Another media gallery exploration using Three.js InstancedMesh and compute shaders. live demo 👇

Jean Mazouni

2,004 subscribers

13,646 views • 1 year ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Jean Mazouni1 year ago

Live demo

Dr Shad Katuu 🌐5 years ago

Open access ~> "Using Web Analytics to Assess Traffic to the Mandela Portal: The Case of African Countries" in New Review of Information Networking #BigData #DataTrustworthiness #Ghana #GoogleAnalytics #Kenya #NelsonMandela #Nigeria #SouthAfrica #Tanzania

capitalized time1 year ago

@threejs quick feedback on an edge case: if i scroll too far down quickly then back to the top, the scroll breaks good work!!

Jean Mazouni1 year ago

@threejs Interesting, I'm not able to reproduce it, are you using a mouse or trackpad ?

Col' ✦1 year ago

@threejs so coool 🔥

Jean Mazouni1 year ago

@threejs Thanks 🤝

Swati Awasthi1 year ago

@threejs This is such a smooth use of InstancedMesh—crazy efficient and visually clean. Love the shader work too!

Vikas Raj Yadav ˎˊ˗1 year ago

@threejs Wow!!! Such a cool interaction.

Jean Mazouni1 year ago

@threejs Thank you 🙏

doni rizky kurniawan1 year ago

@threejs Could you please share how to make such animation?

Related Videos

Infinit vortex Art Gallery using Three.js Instanced Mesh API + shaders Live demo link ↓

Infinit vortex Art Gallery using Three.js Instanced Mesh API + shaders Live demo link ↓

Jean Mazouni

15,994 views • 1 year ago

First test with #webgpu #threejs #tsl : InstancedMesh, node material, compute shaders and psrdnoise. Demo : Source :

First test with #webgpu #threejs #tsl : InstancedMesh, node material, compute shaders and psrdnoise. Demo : Source :

Kevin Levron

19,378 views • 1 year ago

X-Rays visualizer using Three.js render targets + postprocessing shaders Live demo + github 👇

X-Rays visualizer using Three.js render targets + postprocessing shaders Live demo + github 👇

chakib

27,082 views • 11 months ago

Inspired by 2swap's Klotski visualization video, I asked claude to make interactive state-space adjacency graph visualization, using Three.js and InstancedMesh for optimized rendering. It nearly zero-shot it. Absolutely wild time we live in.

Inspired by 2swap's Klotski visualization video, I asked claude to make interactive state-space adjacency graph visualization, using Three.js and InstancedMesh for optimized rendering. It nearly zero-shot it. Absolutely wild time we live in.

Simo Ryu

29,155 views • 9 months ago

Rendering a 125GB Protomaps vector tile dataset dynamically in Three.js using compute passes and workers

Rendering a 125GB Protomaps vector tile dataset dynamically in Three.js using compute passes and workers

Three.js

78,716 views • 5 days ago

WebGPU + Compute Shaders = 🤯 >500K stars runs at 60fps on my M1 Pro ⚡️ In my latest blog post, I walk through how to build this interactive galaxy simulation 🌌 Source code and live demo link in comments 👇🏻 #threejs #webgl #webgpu #shaders

WebGPU + Compute Shaders = 🤯 >500K stars runs at 60fps on my M1 Pro ⚡️ In my latest blog post, I walk through how to build this interactive galaxy simulation 🌌 Source code and live demo link in comments 👇🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

18,136 views • 6 months ago

10 million particles rendered in real-time using compute shaders in a 3D/immersive space.

10 million particles rendered in real-time using compute shaders in a 3D/immersive space.

Ren Yuan

16,178 views • 1 year ago

webgi - realistic rendering for three.js is now free! With a new website for developers. Instantly create photo-realistic 3D e-commerce experiences without going deep into three.js graphics and shaders. Play around with the demo docs here -

webgi - realistic rendering for three.js is now free! With a new website for developers. Instantly create photo-realistic 3D e-commerce experiences without going deep into three.js graphics and shaders. Play around with the demo docs here -

Palash Bansal

45,087 views • 9 months ago

Another go at implementing realtime GI in three.js demo: #threejs #javascript

Another go at implementing realtime GI in three.js demo: #threejs #javascript

Domenicobrz

29,671 views • 1 year ago

Coded with Grok 4 - An interactive 3D visualizer with real-time audio reactivity, built using Three.js. Demo/code in reply. 👇🔊

Coded with Grok 4 - An interactive 3D visualizer with real-time audio reactivity, built using Three.js. Demo/code in reply. 👇🔊

Techartist

1,475,993 views • 9 months ago

I don't think people realize how versatile WebGPU is! 🤯 In this demo, *both* the semantic search model and Earth shaders are running on WebGPU (via Transformers.js and Three.js, respectively). Pretty insane.

I don't think people realize how versatile WebGPU is! 🤯 In this demo, both the semantic search model and Earth shaders are running on WebGPU (via Transformers.js and Three.js, respectively). Pretty insane.

Xenova

18,317 views • 2 months ago

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

13,326 views • 1 year ago

One Prompt. One Iteration. That’s all it took to vibe code this super sleek 3D orbital gallery using Three.js with Gemini 3.1 Pro in Google AI Studio. Period. Live: Code:

One Prompt. One Iteration. That’s all it took to vibe code this super sleek 3D orbital gallery using Three.js with Gemini 3.1 Pro in Google AI Studio. Period. Live: Code:

The Bugged Dev

45,706 views • 2 months ago

1/5 🧵 Three.js Blocks Physics demos are live 🚀 Three.js-first API, WebGL fallback ✅. Native Mesh/InstancedMesh/BatchedMesh integration. Runs in a Service Worker with instant SharedArrayBuffer sync. Physics is just so fast. Surf Mode is getting better, try it! 👀🎮

1/5 🧵 Three.js Blocks Physics demos are live 🚀 Three.js-first API, WebGL fallback ✅. Native Mesh/InstancedMesh/BatchedMesh integration. Runs in a Service Worker with instant SharedArrayBuffer sync. Physics is just so fast. Surf Mode is getting better, try it! 👀🎮

Renaud

35,169 views • 5 months ago

An interactive 3D visualization using Three.js and WebGL. Button click activates energy pulses in this dynamic cosmic portal with custom shaders and post-processing effects. Source code link in the reply below. 👇🏼

An interactive 3D visualization using Three.js and WebGL. Button click activates energy pulses in this dynamic cosmic portal with custom shaders and post-processing effects. Source code link in the reply below. 👇🏼

Techartist

15,679 views • 11 months ago

Digital Metamorphosis... Interactive real-time 3D particle display of 60,000 points that smoothly morph between shapes with bloom, motion trails and color themes, built with Grok 4 from xAI using Three.js and GLSL shaders.

Digital Metamorphosis... Interactive real-time 3D particle display of 60,000 points that smoothly morph between shapes with bloom, motion trails and color themes, built with Grok 4 from xAI using Three.js and GLSL shaders.

Techartist

13,295 views • 10 months ago

An interactive 3D particle system visualizing dynamic attractors. Coded with Grok 4 from xAI using Three.js and custom GLSL shaders for particle behavior and post-processing effects like Unreal Bloom. Click morphs between generative patterns.

An interactive 3D particle system visualizing dynamic attractors. Coded with Grok 4 from xAI using Three.js and custom GLSL shaders for particle behavior and post-processing effects like Unreal Bloom. Click morphs between generative patterns.

Techartist

14,276,434 views • 11 months ago

An interactive 3D simulation and visualization of a black hole, leveraging Three.js for rendering and custom GLSL shaders to achieve stunning details in the event horizon, starfield, and accretion disk. Coded using newly released Grok 4 from xAI

An interactive 3D simulation and visualization of a black hole, leveraging Three.js for rendering and custom GLSL shaders to achieve stunning details in the event horizon, starfield, and accretion disk. Coded using newly released Grok 4 from xAI

Techartist

2,986,432 views • 11 months ago

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Puneet | Techartist

14,638 views • 1 year ago

Porting over some HLSL point cloud shaders over to spark, a gaussian splatting renderer for Three.js. Some of the effects look a bit messy with 3DGS, but fun to play around with! Also using their new depth of field here which looks really nice. Demo coming soon!

Porting over some HLSL point cloud shaders over to spark, a gaussian splatting renderer for Three.js. Some of the effects look a bit messy with 3DGS, but fun to play around with! Also using their new depth of field here which looks really nice. Demo coming soon!

grade eterna

10,946 views • 11 months ago