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.

Made some improvements to my #threejs pipeline and shader editor, with render passes. Also, direct import of 3d Objects from glTF.

Palash Bansal

3,275 subscribers

55,327 views • 2 years ago •via X (Twitter)

Education Arts Science & Technology #threejs

Anya Rossi• Live Now

Private livecam show

10 Comments

simon harris2 years ago

Is this for asset pipelines or render pipelines? Either way it’s awesome

Palash Bansal2 years ago

Right now for rendering, maybe some geometry nodes and other things can be added later.

Jan2 years ago

damn

Anderson Mancini2 years ago

Fantastic work my friend. 👏🏻👏🏻👏🏻😍

nin2 years ago

This is really nice!!

Phobon2 years ago

Awesome! I think a really good node graph tool for three is something that would be really powerful - this looks super neat 💪

Stanftf.eth2 years ago

What’s the name of this node editor?

Palash Bansal2 years ago

Its in development, still thinking of a name..

ヘブン2 years ago

Excuse me. Is this beautiful editor your own project? I want to know the name of it.

Palash Bansal2 years ago

Yes, I am working on it, will release it soon.

Related Videos

Here's the Blender to Pixel Art pipeline tutorial. This shader should be super helpful for pixel artists learning how to pixel objects that look correct with 3D rotation. It's also just really nice to be able to see how lighting would accurately work on objects that are complex.

Here's the Blender to Pixel Art pipeline tutorial. This shader should be super helpful for pixel artists learning how to pixel objects that look correct with 3D rotation. It's also just really nice to be able to see how lighting would accurately work on objects that are complex.

Dream Mix Games

29,019 views • 11 months ago

Made some major improvements to my WebGPU water shader (thanks Ghislain Girardot for the feedback!) Fixed a bug where waves weren't propagating and implemented JONSWAP spectrum for more realistic wave grouping. Hitting ~70FPS @ 2K res on my Macbook M1 Pro #threejs #webgpu #shaders

Made some major improvements to my WebGPU water shader (thanks Ghislain Girardot for the feedback!) Fixed a bug where waves weren't propagating and implemented JONSWAP spectrum for more realistic wave grouping. Hitting ~70FPS @ 2K res on my Macbook M1 Pro #threejs #webgpu #shaders

Dan Greenheck

18,852 views • 7 months ago

This Sims-like game made with Unreal Engine 5 allows you to import custom 3D objects into your world. What are your thoughts on inZOI? #gamescom2024

This Sims-like game made with Unreal Engine 5 allows you to import custom 3D objects into your world. What are your thoughts on inZOI? #gamescom2024

IGN

181,336 views • 1 year ago

$I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!$

I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!

Danny Limanseta

202,718 views • 3 months ago

made my threejs "pixel screen" shader more generic. give it a 2D grid of pixels and it does the rest. so obviously, bad apple.

made my threejs "pixel screen" shader more generic. give it a 2D grid of pixels and it does the rest. so obviously, bad apple.

Codetard

19,438 views • 10 months ago

Marvel Rivals white rim light effect in blender Eevee from this weekend. Simple camera based with geo nodes and shader editor no lighting involved. Then comped with some chromatic aberration Was doing some render ended up trying that out Nodes screen in thread below🧵

Marvel Rivals white rim light effect in blender Eevee from this weekend. Simple camera based with geo nodes and shader editor no lighting involved. Then comped with some chromatic aberration Was doing some render ended up trying that out Nodes screen in thread below🧵

Paul Ruano-Borbalan

103,737 views • 1 year ago

Trying to pixelize 3d objects with optional color palettes and dithering using WebGL. Using TweakPane for GUI. WebGLで3D形状をピクセル化する試み。 #webgl #threejs

Trying to pixelize 3d objects with optional color palettes and dithering using WebGL. Using TweakPane for GUI. WebGLで3D形状をピクセル化する試み。 #webgl #threejs

Junichiro Horikawa

27,374 views • 1 year ago

🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3D

🧊 Technical Showcase: A full WebGPU 3D engine that maps shader geometry to your DOM elements. Martin's gpu-curtains gives you lights, shadows, compute shaders, glTF, and instancing, but the real trick is how it turns your divs into scrollable, resizable shader planes without any coordinate math. The successor to curtains.js, rebuilt from scratch. 🔗 #WebGPU #CreativeCoding #Shaders #WebDev #3D

WebGL / WebGPU

10,971 views • 5 months ago

I wanted to show some examples of how I usually use (or don't) 3D elements in my drawing process. Sometimes I also use photos of my own hands or objects I have around my house.

I wanted to show some examples of how I usually use (or don't) 3D elements in my drawing process. Sometimes I also use photos of my own hands or objects I have around my house.

Waltzpurgis

21,691 views • 2 months ago

Finally solved all the big things needed to prove occlusion culling is viable in the Hyperfy engine. All culling happens directly at render time and instantly, we've taken over the Three.js render pipeline to use our spatial hierarchy and manually issue renders, postprocessing and shadow passes with both frustum and occlusion culling. Our pipeline now aligns much more closely to unity/unreal because we collect visible objects and issue custom instanced draws on the fly for only those objects every single frame. This is one of the biggest issues engines on the web like three, babylon and playcanvas have and imo the reason people coming from unity/unreal don't take them seriously. There's a lot to unpack here, maybe i'll make a thread soon.

Finally solved all the big things needed to prove occlusion culling is viable in the Hyperfy engine. All culling happens directly at render time and instantly, we've taken over the Three.js render pipeline to use our spatial hierarchy and manually issue renders, postprocessing and shadow passes with both frustum and occlusion culling. Our pipeline now aligns much more closely to unity/unreal because we collect visible objects and issue custom instanced draws on the fly for only those objects every single frame. This is one of the biggest issues engines on the web like three, babylon and playcanvas have and imo the reason people coming from unity/unreal don't take them seriously. There's a lot to unpack here, maybe i'll make a thread soon.

Ash

15,107 views • 1 year ago

My wife and daughter told me about Crocs Jibbitz, so I built a 3D editor to place them naturally and pick your favorites before buying. Ready to integrate into an e-commerce service? Why not it's a prototype anyway, made possible thanks to Omma AI + #threeJS.

My wife and daughter told me about Crocs Jibbitz, so I built a 3D editor to place them naturally and pick your favorites before buying. Ready to integrate into an e-commerce service? Why not it's a prototype anyway, made possible thanks to Omma AI + #threeJS.

Joseph Azar

15,221 views • 18 days ago

Just tried vibecoding with ThreeJS again (after more than 6 months) and I have to say that the models have gotten much better at coding with ThreeJS and creating 3D models from scratch.

Just tried vibecoding with ThreeJS again (after more than 6 months) and I have to say that the models have gotten much better at coding with ThreeJS and creating 3D models from scratch.

Danny Limanseta

204,066 views • 3 months ago

This week, I overhauled concurrent heap defragmentation (akin to garbage collection) in my voxel game, achieving microsecond-level pause times and O(1) scalability across all platforms. Since existing research didn't fit my needs, I built my own defragmentation algorithm from first principles. The new system is a game-changer for the Gamecube and Dreamcast, where memory can easily become a bottleneck. These improvements eliminate stutters, even with millions of allocated objects like chunks and entities. In the first clip, the PC version runs 100,000 objects (render distance: 32) with no issues. The second clip in the reply ramps up to half a million objects (render distance: 64) and still holds steady — pause times stayed rock solid.

This week, I overhauled concurrent heap defragmentation (akin to garbage collection) in my voxel game, achieving microsecond-level pause times and O(1) scalability across all platforms. Since existing research didn't fit my needs, I built my own defragmentation algorithm from first principles. The new system is a game-changer for the Gamecube and Dreamcast, where memory can easily become a bottleneck. These improvements eliminate stutters, even with millions of allocated objects like chunks and entities. In the first clip, the PC version runs 100,000 objects (render distance: 32) with no issues. The second clip in the reply ramps up to half a million objects (render distance: 64) and still holds steady — pause times stayed rock solid.

A Flock of Meese

38,548 views • 1 year ago

I 3D scanned my stump and my ax and my wood and recorded my ax motions and splitting sounds and made it into a super satisfying firewood splitting simulator (vibecoded with Antigravity/Claude in threejs)

I 3D scanned my stump and my ax and my wood and recorded my ax motions and splitting sounds and made it into a super satisfying firewood splitting simulator (vibecoded with Antigravity/Claude in threejs)

Gavin Shapiro 🐧

132,632 views • 1 month ago

follow up with the second prompt "Twelve principles of animation", I made a silly dancefloor to show the different principles, also added some insights, some are actually very hard to render ^^' #genuary #genuary2 #genuary2026

follow up with the second prompt "Twelve principles of animation", I made a silly dancefloor to show the different principles, also added some insights, some are actually very hard to render ^^' #genuary #genuary2 #genuary2026

Nicolas Barradeau

16,899 views • 6 months ago

🕹️ Paris-based creative studio Little Workshop (Little Workshop) just reminded us why browser-based 3D experiences still have so much untapped potential. For Netlify's 5 million developer milestone, they built a full Marble Madness-inspired game that runs flawlessly in the browser. The technical execution is impressive: → Three.js + custom render pipeline for WebGL → Rapier physics engine (Rust via WASM) → Unity → Blender → GLTF pipeline for level design → CSS 3D transforms for UI overlays → Smart keyboard API usage for international layout support. Give it a run. It's both fun and informative. #WebGL #GameDev #ThreeJS #CreativeCoding #Netlify

🕹️ Paris-based creative studio Little Workshop (Little Workshop) just reminded us why browser-based 3D experiences still have so much untapped potential. For Netlify's 5 million developer milestone, they built a full Marble Madness-inspired game that runs flawlessly in the browser. The technical execution is impressive: → Three.js + custom render pipeline for WebGL → Rapier physics engine (Rust via WASM) → Unity → Blender → GLTF pipeline for level design → CSS 3D transforms for UI overlays → Smart keyboard API usage for international layout support. Give it a run. It's both fun and informative. #WebGL #GameDev #ThreeJS #CreativeCoding #Netlify

WebGL / WebGPU

18,949 views • 6 months ago

A mash up of some 3d work over the past month or so for todays #30DayMapChallenge. It's a mix of work brand stuff, personal experiments and some abstract art exploration thrown in for fun. I also updated my website with some projects from this year if you want to see more 3d map fun! #3d #map

Craig Taylor

33,719 views • 2 years ago

This one took me almost 2 years to master, soon every Threejs dev will master it with a simple Import: Smoothed Particle Hydrodynamics Simulation, 2D and 3D, optimized with Spatial Hashing and Compute Shaders. Optimized for WebGPURenderer with complete TSL compatibility!!

This one took me almost 2 years to master, soon every Threejs dev will master it with a simple Import: Smoothed Particle Hydrodynamics Simulation, 2D and 3D, optimized with Spatial Hashing and Compute Shaders. Optimized for WebGPURenderer with complete TSL compatibility!!

Renaud

131,017 views • 9 months ago

I wanted to download and render the full data set but it seems 1TB drive space is not enough to unzip it 😅 So here's the first six layers rendered with 3d-tiles-renderer. I'll eagerly await the streamable version - I'm always ready to render more Mars #threejs #nasajpl #gis

I wanted to download and render the full data set but it seems 1TB drive space is not enough to unzip it 😅 So here's the first six layers rendered with 3d-tiles-renderer. I'll eagerly await the streamable version - I'm always ready to render more Mars #threejs #nasajpl #gis

Garrett Johnson

22,418 views • 6 months ago