Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 ay önce •via X (Twitter)

OyunSanatBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

i made a stained glass cellular automata simulator in threejs

AA

100,914 görüntüleme • 2 ay önce

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

147,479 görüntüleme • 2 ay önce

#webgl Texture recursion effect using render targets of threejs. Render targets are capable of creating really cool stuff. #threejs #shaders
0:21

#webgl Texture recursion effect using render targets of threejs. Render targets are capable of creating really cool stuff. #threejs #shaders

Refaay

60,322 görüntüleme • 2 yıl önce

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

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 görüntüleme • 1 yıl önce

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,969 görüntüleme • 3 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

backplates in action, even through glass materials👀 #threejs #webgl
0:31

backplates in action, even through glass materials👀 #threejs #webgl

max

87,480 görüntüleme • 2 yıl önce

made a tool to visualise your discord friends – creates a graph based on your mutual friends and renders it in 3d space
0:36

made a tool to visualise your discord friends – creates a graph based on your mutual friends and renders it in 3d space

moni

113,218 görüntüleme • 2 yıl önce

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl
1:43

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl

Anderson Mancini

17,859 görüntüleme • 1 yıl önce

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

15,978 görüntüleme • 8 ay önce

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,445 görüntüleme • 2 yıl önce

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,362 görüntüleme • 1 ay önce

🎮 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,838 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

🔥 enhance-shader-lighting is released! 🔥 ⮕ Demo: 3 example scenes with baked lightmaps and "enhanced lighting" through modified shaders. ⮕ GitHub: #threejs #webdev #3D #javascript #Graphics #webgl
0:24

🔥 enhance-shader-lighting is released! 🔥 ⮕ Demo: 3 example scenes with baked lightmaps and "enhanced lighting" through modified shaders. ⮕ GitHub: #threejs #webdev #3D #javascript #Graphics #webgl

0beqz

85,154 görüntüleme • 3 yıl önce

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,538 görüntüleme • 7 ay önce

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 görüntüleme • 7 ay önce

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

94,732 görüntüleme • 3 ay önce