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.

Exploring liquid aesthetics in shaders #creativecoding #shaders #webgl #glsl

Fabio Ottaviani

4,776 subscribers

62,503 views • 2 years ago •via X (Twitter)

Science & Technology Education Arts #creativecoding #shaders #webgl #glsl

Anya Rossi• Live Now

Private livecam show

10 Comments

Richard Mattka2 years ago

Looking super nice!

Fabio Ottaviani2 years ago

Thanks Richard 💧🔮

Henry Dan2 years ago

@heyjohannes Looks awesome! I can't tell if I'm inspired to learn webgl now or make a sunny side up egg

Zeth Dean2 years ago

Really incredible stuff. Out of curiosity, If you were to load this into a browser (say as a hero background), do you think it would be a noticeable load time?

Fabio Ottaviani2 years ago

No, it's a webgl content and not even very complex, it has practically no loading times.

🆅🅸🅽🅲🅴2 years ago

That’s gorgeous. 😍

Balraj Johal2 years ago

wow that's so fluid, really clean!

Maxime2 years ago

the one and only glsl king

Fabio Ottaviani2 years ago

No, please don't refer to me as a king! Out of respect for the true shader kings!

Oleg Kovalenko2 years ago

Magical🧙

Related Videos

BIOCOMPUTE #4 — CIRCUIT Reaction diffusion across an quadtree substrate, greyscale, no trails, normal lighting. JavaScript + WebGL #javascript #webgl #shaders #creativecoding #generativeart

BIOCOMPUTE #4 — CIRCUIT Reaction diffusion across an quadtree substrate, greyscale, no trails, normal lighting. JavaScript + WebGL #javascript #webgl #shaders #creativecoding #generativeart

Daniel Lever

41,500 views • 3 years 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$

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,263 views • 14 days ago

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

13,326 views • 1 year ago

God I missed writing tiny #glsl shaders

God I missed writing tiny #glsl shaders

kishimisu

14,182 views • 2 months ago

here’s GPT-4 writing midi-controllable GLSL shaders

here’s GPT-4 writing midi-controllable GLSL shaders

harley turan

78,697 views • 3 years ago

Interactive 3D particle simulation built with Three.js (WebGL), JavaScript (ES6), & GLSL shaders. Features shape morphing, post-processing (Bloom, custom effects), OrbitControls. Source code link in the reply below. 👇

Interactive 3D particle simulation built with Three.js (WebGL), JavaScript (ES6), & GLSL shaders. Features shape morphing, post-processing (Bloom, custom effects), OrbitControls. Source code link in the reply below. 👇

Techartist

29,367 views • 10 months ago

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Interactive simulation built with Three.js, WebGL, and GLSL shaders featuring dynamic lattice structures, particle effects, and a UI for scene controls. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Puneet | Techartist

14,638 views • 1 year ago

An interactive, animated spiral pattern with dynamic colors, energy bursts, and bloom effects created with Three.js (WebGL) and custom GLSL shaders. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

An interactive, animated spiral pattern with dynamic colors, energy bursts, and bloom effects created with Three.js (WebGL) and custom GLSL shaders. Source code link in the comment below. 👇 #OpenSource #Threejs #JavaScript

Puneet | Techartist

11,398 views • 1 year ago

WebGL particle simulation with custom GLSL shaders, morphing between formations with mouse interaction. Uses Three.js, BufferGeometry, and UnrealBloomPass. Click/Tap changes patterns. Source code/CodePen link in the comment below. 👇 #OpenSource #javascript

WebGL particle simulation with custom GLSL shaders, morphing between formations with mouse interaction. Uses Three.js, BufferGeometry, and UnrealBloomPass. Click/Tap changes patterns. Source code/CodePen link in the comment below. 👇 #OpenSource #javascript

Techartist

14,977 views • 1 year ago

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇

Techartist

13,955 views • 1 year ago

Analog UI experimentitation, canvas for the UI elements, shaders for postprocessing. #creativecoding #generativeart

Analog UI experimentitation, canvas for the UI elements, shaders for postprocessing. #creativecoding #generativeart

Bart Simons

10,361 views • 3 months 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

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

Realtime GLSL programming with a touch of mediapipe. TouchDesigner TD environment, 60fps, regular webcam. Vertex & Pixel shaders. 💦 #glsl #CodingChallenge

Realtime GLSL programming with a touch of mediapipe. TouchDesigner TD environment, 60fps, regular webcam. Vertex & Pixel shaders. 💦 #glsl #CodingChallenge

ScottieFox

62,929 views • 1 year ago

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

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

AA

47,279 views • 1 month ago

shimmering shaders buttery-smooth motion wild what the web can do nowadays ✨ built with Cursor, threejs/glsl, motion

shimmering shaders buttery-smooth motion wild what the web can do nowadays ✨ built with Cursor, threejs/glsl, motion

Ryo Lu

57,246 views • 1 year 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

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 • 6 months ago

🚀 Exciting news😍. My new material for #ref is finally here! 🎉 It allows smooth color transitions, making life easier for devs. ✨ Free version for basic transitions ✨ Premium version with GLSL shaders for amazing effects 🔗 #threejs #creativecoding

🚀 Exciting news😍. My new material for #ref is finally here! 🎉 It allows smooth color transitions, making life easier for devs. ✨ Free version for basic transitions ✨ Premium version with GLSL shaders for amazing effects 🔗 #threejs #creativecoding

Anderson Mancini

16,274 views • 1 year ago

🌿WIP of shaders in Unreal!🌿 #3DArt #GameDev #UnrealEngine #CharacterArt #Shaders #WIP

🌿WIP of shaders in Unreal!🌿 #3DArt #GameDev #UnrealEngine #CharacterArt #Shaders #WIP

✨Roanna✨

43,783 views • 2 months ago

Meet Kimi K2.6 agent - Video hero section, WebGL shaders, real backends. From one prompt. 🔹 Video hero sections - cinematic aesthetic, auto-composited 🔹 WebGL shader animations - native GLSL / WGSL, liquid metal, caustics, raymarching 🔹 Motion design - GSAP + Framer Motion 🔹 Backend database: Kimi wires up auth + database + backend in one pass. 🔹 Website stack - React 19 + TypeScript + Vite + Tailwind + shadcn/ui 🔹 3D w/ physically-based lighting - Three.js + React Three Fiber

Meet Kimi K2.6 agent - Video hero section, WebGL shaders, real backends. From one prompt. 🔹 Video hero sections - cinematic aesthetic, auto-composited 🔹 WebGL shader animations - native GLSL / WGSL, liquid metal, caustics, raymarching 🔹 Motion design - GSAP + Framer Motion 🔹 Backend database: Kimi wires up auth + database + backend in one pass. 🔹 Website stack - React 19 + TypeScript + Vite + Tailwind + shadcn/ui 🔹 3D w/ physically-based lighting - Three.js + React Three Fiber

Kimi.ai

385,550 views • 1 month ago

These are all the shaders we've created so far while writing the Unity Shaders Bible and Shaders & Procedural Shapes in Unity! Want to learn shaders? Start step by step today! ✨ #unity3d #indiedev #3DCG

These are all the shaders we've created so far while writing the Unity Shaders Bible and Shaders & Procedural Shapes in Unity! Want to learn shaders? Start step by step today! ✨ #unity3d #indiedev #3DCG

The Unity Shaders Bible

95,266 views • 6 months ago