Loading video...

Video Failed to Load

Go Home

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

measure_plan's profile picture

AA

25,093 subscribers

47,343 views • 5 months ago •via X (Twitter)

GamingArtsScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

i made a stained glass cellular automata simulator in threejs
0:26

i made a stained glass cellular automata simulator in threejs

AA

101,400 views • 5 months ago

Took it further with Omma AI, (Spline ) now it works on video, and everything working in a Web Browser. Drop a video, Depth Anything v2 calculates the depth map frame by frame, and Three.js renders a fully lit 3D mesh in real time. Depth estimation on video in the browser +Automatic baking pass + Dynamic lighting reacting to the geometry #vibecoding #threejs #webgl
0:40

Took it further with Omma AI, (Spline ) now it works on video, and everything working in a Web Browser. Drop a video, Depth Anything v2 calculates the depth map frame by frame, and Three.js renders a fully lit 3D mesh in real time. Depth estimation on video in the browser +Automatic baking pass + Dynamic lighting reacting to the geometry #vibecoding #threejs #webgl

Joseph Azar

149,128 views • 5 months ago

its coming along ... infinite world: in the browser, biomes, wind and much more... 🔊 #threejs #webgl
0:29

its coming along ... infinite world: in the browser, biomes, wind and much more... 🔊 #threejs #webgl

HeyOz

50,984 views • 3 years ago

Stained Glass Gothic Window | Using Substance Painter path tool and Translucency #art #Substancepainter #Texturing #Digital3D #digitalart #Material #gamedesign #gameart #Substance #3d #digitalart #Animation
0:53

Stained Glass Gothic Window | Using Substance Painter path tool and Translucency #art #Substancepainter #Texturing #Digital3D #digitalart #Material #gamedesign #gameart #Substance #3d #digitalart #Animation

Javad Rajabzade

62,232 views • 1 year ago

Introducing Gestalt 3D Modeling in the Browser Open Source, powered by ThreeJS Keyboard Shortcuts stolen from Blender Design in your browser, export anywhere ✌️
0:48

Introducing Gestalt 3D Modeling in the Browser Open Source, powered by ThreeJS Keyboard Shortcuts stolen from Blender Design in your browser, export anywhere ✌️

robot

42,380 views • 1 year ago

Softbodies by holtsetio Realtime Tetrahedral FEM Models in the Browser, using WebGPU and written in TSL. Based on the WebGL implementation in TetSim by Johnathon Selstad, upgraded to enable collisions.
0:35

Softbodies by holtsetio Realtime Tetrahedral FEM Models in the Browser, using WebGPU and written in TSL. Based on the WebGL implementation in TetSim by Johnathon Selstad, upgraded to enable collisions.

Three.js

25,516 views • 1 year ago

i built a real-time 3d positional tracker in the browser renders in ~8-10ms
0:37

i built a real-time 3d positional tracker in the browser renders in ~8-10ms

vogel

38,267 views • 1 month ago

made this in blender and react. still surprising how powerful a tool functional composition is. the ticker is solved with minimal effort, same semantics devs would use on the web. this is a side that is generally ignored in webgl/threejs. canvas3d is thought of in terms of scene primitives, math and shaders. these are all good to know. but i see people all the time trying to use these for solving problems that are inherently of a compositional nature, and fail. imperative javascript and oop lack composition. this is the only thing react adds to threejs (and any other platform it renders to), it allows it to compose.
0:29

made this in blender and react. still surprising how powerful a tool functional composition is. the ticker is solved with minimal effort, same semantics devs would use on the web. this is a side that is generally ignored in webgl/threejs. canvas3d is thought of in terms of scene primitives, math and shaders. these are all good to know. but i see people all the time trying to use these for solving problems that are inherently of a compositional nature, and fail. imperative javascript and oop lack composition. this is the only thing react adds to threejs (and any other platform it renders to), it allows it to compose.

☄︎

30,505 views • 2 years ago

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding
2:34

Built a browser shader to teach relativistic effects. Beaming, lensing, Doppler & redshift—live sliders. Based on Koiava's blackhole shader on Shadertoy. I wrapped it in Three.js, added GUI toggles (beaming, redshift, photon ring), Kerr spin cheat. Link in thread. Turn sound on to play with it with the interstellar soundtrack 😀 #PhysicsTwitter #ThreeJS #WebGL #GLSL #Shaders #CreativeCoding

Lisha

16,833 views • 11 months ago

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding
0:48

Glass Marbles! A small experiment in real-time refraction. Combining SVG filters with a WebGL-rendered displacement map to simulate the optical properties of glass spheres. #webgl #svg #shaders #creativecoding

Hans Chiu

11,604 views • 4 months ago

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning
1:05

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

Three.js Resources

15,990 views • 8 months ago

I'm getting so into toon shaders in threejs, this is such a great aesthetic for scifi and runs well in the browser
0:38

I'm getting so into toon shaders in threejs, this is such a great aesthetic for scifi and runs well in the browser

Taylor

48,235 views • 27 days ago

Transform your ideas into 3D with ease! 🎨✨ Tripo AI uses AI to help you create 3D models in no time. is this the future of 3d design? 🚀 Check it out: #Threejs #WebGL #AI
1:22

Transform your ideas into 3D with ease! 🎨✨ Tripo AI uses AI to help you create 3D models in no time. is this the future of 3d design? 🚀 Check it out: #Threejs #WebGL #AI

Three.js Resources

58,819 views • 1 year ago

Cozy creek - threejs 3D experience of a Creek made in GPT 6 Astra This is running in a browser! can you believe it! all thing made in blender..
0:58

Cozy creek - threejs 3D experience of a Creek made in GPT 6 Astra This is running in a browser! can you believe it! all thing made in blender..

Chetan Ankola

346,265 views • 5 days ago

I made a tool that generates UIs with a design system that's copyable as prompts. Everything is a prompt: font pairings, color system, spacing, icon sets, buttons and even webgl & threejs with full code samples. This made explorations with Gemini 3.1 Pro so precise and fun.
0:51

I made a tool that generates UIs with a design system that's copyable as prompts. Everything is a prompt: font pairings, color system, spacing, icon sets, buttons and even webgl & threejs with full code samples. This made explorations with Gemini 3.1 Pro so precise and fun.

Meng To

96,452 views • 6 months ago

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders
0:51

After spending some time in the Virgin Islands, I was inspired to create a WebGPU-based water shader with TSL and compute shaders 🌊 Lots left to do, but it's finally starting to look decent! #threejs #webgl #webgpu #shaders

Dan Greenheck

28,002 views • 10 months 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
0:46

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,629 views • 10 months ago

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders
1:46

Building Three.js shaders is about to get a whole lot easier! 👍 Introducing Three.js Shader Graph — visual node-based editing for TSL. 🖱️Drag & drop nodes 📺Real-time 3D preview 🔄Auto-generate TSL code in realtime Join the waitlist 👉🏻 #threejs #webgl #webgpu #shaders

Dan Greenheck

35,464 views • 10 months ago