Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 2 Jahren •via TikTok

KunstWissenschaft & Technologie#threejs#creativecoding#webgl#blender3d#3dartist#3dwebsite#interactivewebsite#webdesign#javascript#coding#reactjs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 5 Monaten

🔥 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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 1 Jahr