Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Part 2 building this Blender based effect but using shaders in threeJS for a website. . I added a repelling function to the shader to give the feel that the mouse is oushing the triangle away. Also used Custom Shader Material to combine my shader code with existing threeJS...

3eyes.iii's profile picture

3EYES

37,500 subscribers

687,400 görüntüleme • 2 yıl önce •via TikTok

SanatBilim & Teknoloji#threejs#creativecoding#webgl#blender3d#3dartist#3dwebsite#interactivewebsite#webdesign#javascript#coding#reactjs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Added panel controls to the transmission example! 🔮 #threejs #webgl #shader #creativecoding #gui
0:50

Added panel controls to the transmission example! 🔮 #threejs #webgl #shader #creativecoding #gui

Patrick Schroen

15,161 görüntüleme • 3 yıl önce

Abstract Chromatic Light Demo & Source Code: #threejs #webgl #shader #creativecoding
0:48

Abstract Chromatic Light Demo & Source Code: #threejs #webgl #shader #creativecoding

Sabo Sugi / Three.js & Shaders

14,000 görüntüleme • 3 ay ö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

16,833 görüntüleme • 1 yıl önce

Interactive rug shader - A Three.js port of @_Dervishh's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl
0:20

Interactive rug shader - A Three.js port of @_Dervishh's Unity shader. Done in #r3f with Physics via Rapier. Fun project over coffee Live: Code: #creativecoding #threejs #webgl

Faraz

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

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding
0:36

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding

Faraz

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

Wave Lights Demo and Source Code: #threejs #webgl #shader
0:38

Wave Lights Demo and Source Code: #threejs #webgl #shader

Sabo Sugi / Three.js & Shaders

25,183 görüntüleme • 6 ay önce

Trails Stream (Updated) Demo and Source Code: #threejs #webgl #shader
0:41

Trails Stream (Updated) Demo and Source Code: #threejs #webgl #shader

Sabo Sugi / Mondragon Framer Template

18,213 görüntüleme • 6 ay önce

Some work in progress with Troika text renderer for #threejs and a custom (shader-based) fluid solver.
0:56

Some work in progress with Troika text renderer for #threejs and a custom (shader-based) fluid solver.

Felix Martinez

31,366 görüntüleme • 2 yıl önce

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

Tree of Souls Demo & Source Code: #threejs #webgl #shader
0:24

Tree of Souls Demo & Source Code: #threejs #webgl #shader

Sabo Sugi / Mondragon Framer Template

11,017 görüntüleme • 5 ay önce

Folks, I've just published a new free ThreeJS tutorial on my Patreon page, give it a shot!! 🥳 💻 #threejs #webgl #tutorial #shader #postprocessing
0:23

Folks, I've just published a new free ThreeJS tutorial on my Patreon page, give it a shot!! 🥳 💻 #threejs #webgl #tutorial #shader #postprocessing

Francesco Michelini

65,369 görüntüleme • 3 yıl önce

finally got around to combining my threejs / webgpu fluid shader, ascii shader, and crt shader
0:32

finally got around to combining my threejs / webgpu fluid shader, ascii shader, and crt shader

Codetaur

31,171 görüntüleme • 5 ay ö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,214 görüntüleme • 3 yıl önce

using ERA5 50 hPa data to drive particles around a globe in a threejs compute shader
0:22

using ERA5 50 hPa data to drive particles around a globe in a threejs compute shader

Codetard

82,084 görüntüleme • 1 yıl önce

Flight simulator update✈️. I created a new volumetric cloud material using #r3f for #threejs. It is based on a ray marched shader, meaning good performance. Let me know in the comments if this is something interesting to be a future component🙏🏻. Live link soon. #threejsJourney
1:56

Flight simulator update✈️. I created a new volumetric cloud material using #r3f for #threejs. It is based on a ray marched shader, meaning good performance. Let me know in the comments if this is something interesting to be a future component🙏🏻. Live link soon. #threejsJourney

Anderson Mancini

15,060 görüntüleme • 2 yıl önce

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!
0:47

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

203,685 görüntüleme • 7 ay önce

Added much more random variation to my ground fog shader. Turn up the speed and it can do a sandstorm. 100% shader nodes. No simulations. #b3d #blender #blender3d #cgi
0:20

Added much more random variation to my ground fog shader. Turn up the speed and it can do a sandstorm. 100% shader nodes. No simulations. #b3d #blender #blender3d #cgi

OfNodesAndNoodles

26,323 görüntüleme • 4 ay önce

Viscous Liquid - Cursor FX Free Source Code & Demo: Support me by PayPal: #threejs #webgl #shader
0:34

Viscous Liquid - Cursor FX Free Source Code & Demo: Support me by PayPal: #threejs #webgl #shader

Sabo Sugi / Three.js & Shaders

23,242 görüntüleme • 1 ay önce

Did you know that Shaders Plus has "Modules", that can allow any existing shader set up to utilize Shaders Plus features non-destructively? They also work with any shader type, and in Eevee!! :D #b3d #blender3d #blender
0:44

Did you know that Shaders Plus has "Modules", that can allow any existing shader set up to utilize Shaders Plus features non-destructively? They also work with any shader type, and in Eevee!! :D #b3d #blender3d #blender

SMOUSE 🔸 🏳️‍🌈🏳️‍⚧️

12,338 görüntüleme • 1 yıl önce