Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

It all started with an old Three.js experiment…then I lost control. Now I can sculpt anything. Maybe a little too much. #webgl #threejs #gsap #creativecoding #generativeart

supahfunk's profile picture

Fabio Ottaviani

4,757 subscribers

48,482 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiSanat#webgl#threejs#gsap#creativecoding#generativeart
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Devo – Devon Frohne profil fotoğrafı
Devo – Devon Frohne1 yıl önce

It's like Kai's Power Goo in 3D!

DionTrades ✪ profil fotoğrafı
DionTrades ✪1 yıl önce

After losing all my savings in my early days and now having $1.2M in funding, I understand trading starts with three essentials: 📚Knowledge 🤝Community 🧠Psychology That's why I created the Market Masters Community I could easily charge $50+/month for this. For a Limited Time access is absolutely FREE:

Francesco Michelini profil fotoğrafı
Francesco Michelini1 yıl önce

Si ma stai anche calmo

murat 🍥 profil fotoğrafı
murat 🍥1 yıl önce

link?

Fabio Ottaviani profil fotoğrafı
Fabio Ottaviani1 yıl önce

Maybe in the next weeks

Zaniyar | CryptoFidgets profil fotoğrafı
Zaniyar | CryptoFidgets1 yıl önce

haha nice job. It somehow reminds of the loading screen of Super Mario 64... where you could pinch Marios nose.. are you manipulating directly the vertices or using shaders to do that?

Fabio Ottaviani profil fotoğrafı
Fabio Ottaviani1 yıl önce

Vertices 📐

chatrli profil fotoğrafı
chatrli1 yıl önce

congrats, it looks super and without an invasive UI that looks complicated can i play with it too?

qew Nemo profil fotoğrafı
qew Nemo1 yıl önce

Is this polygons, SDFs or what?

Fabio Ottaviani profil fotoğrafı
Fabio Ottaviani1 yıl önce

Just vertices geometry.

Stefan Vitasović profil fotoğrafı
Stefan Vitasović1 yıl önce

Awesome! Next step, partner with a 3d printing studio, then profit.

Benzer Videolar

What if your website felt like a living canvas? 💣 I built a WebGL experiment to test that idea. A reactive image grid powered by Three.js + GSAP + Webflow , where every tile bends, scales and reacts to your cursor like a soft “force field”. 🔗 Live demo: 🔗 Case study on Contra #WebGL #ThreeJS #GSAP #CreativeCoding #Webflow #InteractionDesign
0:23

What if your website felt like a living canvas? 💣 I built a WebGL experiment to test that idea. A reactive image grid powered by Three.js + GSAP + Webflow , where every tile bends, scales and reacts to your cursor like a soft “force field”. 🔗 Live demo: 🔗 Case study on Contra #WebGL #ThreeJS #GSAP #CreativeCoding #Webflow #InteractionDesign

Franco Beltramella | Webflow Expert

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

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS
0:23

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS

Carl 💥 Creative Coding Club

10,756 görüntüleme • 2 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

16,793 görüntüleme • 9 ay önce

ㅤㅤㅤㅤㅤㅤ𝐀𝐋𝐋 𝐓𝐎𝐎 𝐖𝐄𝐋𝐋 Well, maybe we got lost in translation Maybe I asked for too much But maybe this thing was a masterpiece 'til you tore it all up Runnin' scared, I was there 𝑰 𝒓𝒆𝒎𝒆𝒎𝒃𝒆𝒓 it all too well
2:20

ㅤㅤㅤㅤㅤㅤ𝐀𝐋𝐋 𝐓𝐎𝐎 𝐖𝐄𝐋𝐋 Well, maybe we got lost in translation Maybe I asked for too much But maybe this thing was a masterpiece 'til you tore it all up Runnin' scared, I was there 𝑰 𝒓𝒆𝒎𝒆𝒎𝒃𝒆𝒓 it all too well

Rick VAI VER O AESPA ! 🍋‍🟩

11,415 görüntüleme • 3 yıl önce

【 VTUBER LORE VIDEO 】 It all started with that website, and a little too much caffeine... But now i have a cute cat, so its okay... right? 🎨: Studio Yuraki
3:21

【 VTUBER LORE VIDEO 】 It all started with that website, and a little too much caffeine... But now i have a cute cat, so its okay... right? 🎨: Studio Yuraki

Stux �

42,378 görüntüleme • 1 yıl önce

✨ NEW PROJECT 💤🌙 → A Digital Guide for a better sleeping quality, built from a Creative to another Creative. This project was part of the #WebflowChallenge and Contra. The project was built to explore seamless integration between Three.js (with Shaders), GSAP, and a No-Code setup in Webflow . I hope you enjoy the experience and gain valuable insights into how to improve your sleep. #VWLab #threejs #creativecoding #gsap
0:48

✨ NEW PROJECT 💤🌙 → A Digital Guide for a better sleeping quality, built from a Creative to another Creative. This project was part of the #WebflowChallenge and Contra. The project was built to explore seamless integration between Three.js (with Shaders), GSAP, and a No-Code setup in Webflow . I hope you enjoy the experience and gain valuable insights into how to improve your sleep. #VWLab #threejs #creativecoding #gsap

Victor Work

24,069 görüntüleme • 9 ay önce

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D
0:33

I wanted to see what would happen if we stripped away pixels and polygons from a video, and instead tried to recreate moving footage using a single, unbroken, continuous line. Introducing SINGLETHREAD- experimental web app that transforms any video into a real-time, 3D oscilloscope-style sculpture, running entirely in the browser Tech Stack: React + Vite | Three.js + React-three-fiber + Postprocessing (Bloom glow) #CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #GenerativeArt #TechArt #Frontend #3D

SHAHNAB AHMED

75,562 görüntüleme • 5 ay önce

ASTRODITHER. LIVE. NOW. ✨ An audio reactive Astro / Three.js webGPU experiment with TSL, custom fluid sim, selective bloom, postprocessing, dithering, time warp and much more i don't even remember. Enjoy it, with audio clearly. 🔊 ↓↓
0:34

ASTRODITHER. LIVE. NOW. ✨ An audio reactive Astro / Three.js webGPU experiment with TSL, custom fluid sim, selective bloom, postprocessing, dithering, time warp and much more i don't even remember. Enjoy it, with audio clearly. 🔊 ↓↓

Robert Borghesi

23,855 görüntüleme • 10 ay önce

Cyberpunk-ish ⚡️ Maybe not an entire city…but at least one rainy alley built with #threejs + WebGPU that weighs only 15 MB. Live link: This is also a sneak peek at some of the techniques that Sunag and I will be covering during our workshop at Three.js Conf Paris. More on that below 🤗 I hope you like it #WebGPU #creativecoding #threejsJourney
2:39

Cyberpunk-ish ⚡️ Maybe not an entire city…but at least one rainy alley built with #threejs + WebGPU that weighs only 15 MB. Live link: This is also a sneak peek at some of the techniques that Sunag and I will be covering during our workshop at Three.js Conf Paris. More on that below 🤗 I hope you like it #WebGPU #creativecoding #threejsJourney

Anderson Mancini

96,269 görüntüleme • 24 gün önce

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:
0:38

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:

Meng To

79,416 görüntüleme • 20 saat önce

maybe we got lost in translation, maybe i asked for too much.. maybe this thing was a masterpiece, till you tore it apart.
0:31

maybe we got lost in translation, maybe i asked for too much.. maybe this thing was a masterpiece, till you tore it apart.

🧸

11,361 görüntüleme • 1 yıl önce

I’m sick and tired. Random old stuff just to vent a little bit. I fear I’m not gonna attend Napoli Comicon. 🥲 Lately, I started getting sick super often (just a cold, nothing serious!). Is it maybe become I’m becoming “old” and I travel too much? Who knows?!!!!! 🤭
0:46

I’m sick and tired. Random old stuff just to vent a little bit. I fear I’m not gonna attend Napoli Comicon. 🥲 Lately, I started getting sick super often (just a cold, nothing serious!). Is it maybe become I’m becoming “old” and I travel too much? Who knows?!!!!! 🤭

Mirka Andolfo Fumettis

26,578 görüntüleme • 1 yıl önce

fable is wild personal sites used to feel like so much effort. now you really can just ship new toy versions whenever the mood strikes i pretty much one-shotted this navigable matrix hallway site WebGL + Three.js, with a custom shader
0:46

fable is wild personal sites used to feel like so much effort. now you really can just ship new toy versions whenever the mood strikes i pretty much one-shotted this navigable matrix hallway site WebGL + Three.js, with a custom shader

kristin eberth

16,560 görüntüleme • 2 ay önce

👉🏻 My #threejs portfolio was accepted as a nominee on awwwards. 😍. The votes are open until August 15th. After 4 years in this #threejsJourney, putting into practice the things I've learned from this amazing course, it is the first time that I have had enough personal projects to compile a portfolio 😊. I'm glad that I started this journey, and I hope I can keep inspiring and helping others 🙏🏻. #creativecoding #webgl #r3f
0:43

👉🏻 My #threejs portfolio was accepted as a nominee on awwwards. 😍. The votes are open until August 15th. After 4 years in this #threejsJourney, putting into practice the things I've learned from this amazing course, it is the first time that I have had enough personal projects to compile a portfolio 😊. I'm glad that I started this journey, and I hope I can keep inspiring and helping others 🙏🏻. #creativecoding #webgl #r3f

Anderson Mancini

10,550 görüntüleme • 2 yıl önce

This Deliver Mail on Tiny Colorful Planet build with Three.js WebGL is a website from . it is so cool, it blows my mind how beautiful and smooth it is.🙌🏻 It’s really well executed, and I highly recommend visiting the website and experiencing it yourself. If there was a “Showcase of the Day,” this would definitely be it. 🔥 #threejs #3D #webdesign #webgl #webgpu
2:08

This Deliver Mail on Tiny Colorful Planet build with Three.js WebGL is a website from . it is so cool, it blows my mind how beautiful and smooth it is.🙌🏻 It’s really well executed, and I highly recommend visiting the website and experiencing it yourself. If there was a “Showcase of the Day,” this would definitely be it. 🔥 #threejs #3D #webdesign #webgl #webgpu

Three.js Resources

11,249 görüntüleme • 10 ay önce

Not only have I remade #Balatro’s card behaviour in WebGL I’ve now got custom #glsl shaders running on the cards too! Built with #threejs If this post hits 1k likes, I’ll drop a free & beginner-friendly video explaining exactly how I did it #threejsjourney #100DaysOfCode
0:34

Not only have I remade #Balatro’s card behaviour in WebGL I’ve now got custom #glsl shaders running on the cards too! Built with #threejs If this post hits 1k likes, I’ll drop a free & beginner-friendly video explaining exactly how I did it #threejsjourney #100DaysOfCode

Alex

37,795 görüntüleme • 1 yıl önce

Jeeezz, I just vibe coded a fully interactive 3D solar system explorer using Three.js and GSAP in Google AI Studio with Gemini 3.1 Pro. Still can't believe it. It uses advanced threejs strategies like Hybird DOM, WebGL Masking, cinematic camera, Fresnel effect and such. Building stuff like this genuinely feels like joy. Smooth, immersive, and ridiculously fun to create using AI ♥️ It's inspired from Jamie Coulter original CSS solar explorer codepen :) Live: Code:
0:32

Jeeezz, I just vibe coded a fully interactive 3D solar system explorer using Three.js and GSAP in Google AI Studio with Gemini 3.1 Pro. Still can't believe it. It uses advanced threejs strategies like Hybird DOM, WebGL Masking, cinematic camera, Fresnel effect and such. Building stuff like this genuinely feels like joy. Smooth, immersive, and ridiculously fun to create using AI ♥️ It's inspired from Jamie Coulter original CSS solar explorer codepen :) Live: Code:

The Bugged Dev

46,011 görüntüleme • 4 ay önce

A little bit too far in remaking an old Zeraora parade balloon. I just intended to make a flat image, then decided to make it animated
0:36

A little bit too far in remaking an old Zeraora parade balloon. I just intended to make a flat image, then decided to make it animated

Makishi! Even your friend makes fun of me!

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

148,148 görüntüleme • 3 ay önce