How to Create Shader Transitions with React Three Fiber and Lygia

Published: 08 December 2023
on channel: Wawa Sensei
4,396
86

Let's learn how to create transitions between 3D scenes with Three.js and React Three Fiber using Shaders and Lygia library

In this project-based tutorial, will learn how with the help of Render Targets and Custom Shaders, we can create amazing 3D scene transitions.

Learn Render Target:
https://lessons.wawasensei.dev/course...

Learn Shaders:
   • How to create animated shaders with t...  

Part 1 video:
   • How to Create Shader Transitions with...  

Starter pack 🔗
https://github.com/wass08/r3f-scene-t...

Final code 🔗
https://github.com/wass08/r3f-scene-t...

Modern Kitchen 3D Model
https://sketchfab.com/3d-models/moder...

#threejs #lygia #r3f


▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:21 - Starter project
01:16 - Organizing parameters
04:23 - Shader code adjustments
06:36 - Repeat
07:57 - Lygia
11:41 - Refactoring
13:29 - New transitions
14:54 - Smoothness
21:27 - Final result
21:39 - Thank you!

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬

Become a member to get access to awesome perks:
   / @wawasensei  

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
  / discord  

📸 Instagram :
  / wawa.sensei  

🎎 Facebook :
  / wawasenseiyt  

🐦Twitter :
  / wawasensei  

🐦TikTok :
  / wawasensei08  

💻 My website :
https://www.wawasensei.dev


Watch video How to Create Shader Transitions with React Three Fiber and Lygia online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 08 December 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,396 once and liked it 86 people.