React & Three.js | Working with Shaders using React Three Fiber

Hey everyone! Today we will be learning how to use React Three Fiber & Shaders!

Source Code:

Links:

Social Links:

Intro: 0:00
Setup: 2:15
Create a Basic Scene: 3:44
Shader Basics: 7:00
Wave Effect: 24:32
Adding an Image Texture: 30:44
Styling: 34:43

New to the channel?

[chats-bug]

The awwwards rebuild series!! Want it back!! 🥺

[tsots]

I've been looking for this exact tutorial for a week. Super cool.

[jaredkohrt]

I originally clicked on this video so that I could learn enough about shaders to add noise to my mesh in r3f. Super surprised (and pretty happy) when you did that as your example! Thanks for saving me a hundred lines of code and a huge headache 😊


I also really appreciate how you take some time to explain each line of line of code--keep it up dude!

[roman_osypenko]

Thanks a lot mate. You have a talent for explaining complex things in simple terms.

[webunlocked]

Amazing Job. Love it we surely are missing great content on this topic on YouTube!

[jsantos]

Why i keep finding this crazy tutorial at night? 😭😂 amazing job and really thank you for the link to that amazing website 😍

[ksparakis]

Super helpful tutorial, thank you so much for breaking things down to such a fineite point!

[tech]

To anybody watching this, there is a much easier way to set this up now, using the <shaderMaterial /> tag that comes natively with React-Three-fiber. Instead of creating a separate material using the `shaderMaterial` import from drei, you can simply add the `uniforms`, `vertexShader` and `fragmentShader` props to the shaderMaterial. This eliminates all the tooling necessary with importing the babel macros, `extend` and whatnot. R3F takes care of it for you. Plus this is much more straightforward. I haven't tried to add the glslify plugin to it yet, so that we can work with external libraries. If anyone knows more please add it to the replies of this comment.

[winoffrg]

I repeat myself 😢 Are you fine? Is everything okay? Where are you @Wrong Akram Sir? We really need you back 🙇‍♂🙇‍♂🙇‍♂

[deepak]

Amazing and it was really well explained!!! thank you so much!! need more content like this

[lunchbne]

Such an amazing tutorial, great work on this!

[abrorbekjoniyev]

OMG! You are back bro! Missed your tuts. Keep up the good work please

[Originallyright]

I am always here and waiting for you to come back

[shivudesign]

Super awesome please bring more tuts on such creative effects 🤩

[tonsofcode]

This the channel that i was looking for. Thank you so much for this!

[BleedingDryTheHeart]

great video as always, and sweet cat on the background too :)

[zackmactavish]

Thanks, man. I'm going to use this for an art portfolio I am creating.

[morneerasmus]

Incredibly helpful tutorial, thanks!!

[MuhammadShahid-tjky]

I just found out your channel. You create awesome animations. Keep it up.

[mohammedfaris]

Expecting more more ... ❤️❤️❤️Thanks man