Скачать или смотреть Create a smooth animated background using shaders in React Three Fiber

In this one we'll code a dynamic fragment shader from scratch in Next.js, using React Three Fiber.

You'll learn:
React component setup in Typescript
The basics of GLSL
Some of the important core functions
Importing and working with noise
Using an image texture and putting it all together for a one-of-a-kind final result: https://pragmattic-tutorials.vercel.a...

Ready to level up your frontend skills? Let's goo!

#javascript #react #threejs #glsl #gsap #pragmattic

🔗 Resources

Get the code: https://github.com/prag-matt-ic/pragm...

See it live: https://pragmattic.vercel.app/example...

React Three Fiber: https://r3f.docs.pmnd.rs/getting-star...
GLSL Shaders: https://developer.mozilla.org/en-US/d...
Book of Shaders: https://thebookofshaders.com/
GSAP ScrollTrigger: https://gsap.com/docs/v3/Plugins/Scro...

🔖 Chapters

00:00 Intro
1:26 Setup
6:24 Shader Basics
12:00 What are UVs
18:32 Mix function
22:40 Step and smoothstep functions
26:45 Sin function
30:33 Working with noise
36:05 Adding uniforms and time
42:11 Sampling an image texture
52:20 Finishing touches

🤝 Want help on a project?
Email [email protected] to start a conversation