Dissolve Effect - React Three Fiber Tutorial
Let's learn how to build a dissolve shader material to make 3D objects appear and disappear with React Three Fiber and Three.js
Live demo
https://r3f-objects-dissolve.vercel.app/
Get the starter pack here ?
https://github.com/wass08/r3f-vite-starter
Final Code
https://github.com/wass08/r3f-objects-dissolve
The original tweet (includes source code)
https://twitter.com/0xca0a/status/1678071371274809346
#threejs #r3f #shaders
▬▬▬▬▬▬ Useful L I N K S ? ▬▬▬▬▬▬
My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/
My Shader video tutorial
https://www.youtube.com/watch?v=e2ntx-fyXaE
My second Shader video
https://youtu.be/SOF7GBmC6gE
Maath Library
https://github.com/pmndrs/maath
gl-Noise library
https://farazzshaikh.github.io/glNoise/index.html
THREE Customer Shader Material
https://github.com/FarazzShaikh/THREE-CustomShaderMaterial
R3F Examples
https://docs.pmnd.rs/react-three-fiber/getting-started/examples
GLSL Color Syntax Extension
https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates
Book of Shaders
https://thebookofshaders.com/
Simon Dev Glsl Shaders course
https://simondev.teachable.com/p/glsl-shaders-from-scratch
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei
https://github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:34 - Starter Pack
01:53 - DissolveMaterial
05:07 - Simplifying the effect
11:38 - Transition between objects
20:30 - Bloom Post Processing
22:53 - On other objects?
27:42 - Final Result
28:03 - 10k Thank You
▬▬▬▬▬▬ Support the channel ? ▬▬▬▬▬▬
Become a member to get access to awesome perks:
https://www.youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join
▬▬▬▬▬▬ Connect with me ? ▬▬▬▬▬▬
? The Discord Community
https://discord.gg/2wBhwchcWu
? Instagram :
https://instagram.com/wawa.sensei
? Facebook :
https://www.facebook.com/wawasenseiyt
?Twitter :
https://twitter.com/wawasensei
?TikTok :
https://www.tiktok.com/@wawasensei08
? My website :
https://www.wawasensei.dev
Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Dissolve Effect - React Three Fiber Tutorial», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.
Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.
Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!
Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.