React Three scroll controlled image sequence & custom post processing effects shader with useFBO

Published: 02 November 2024
on channel: pragmattic

429

In this one we’ll be setting up our image sequence, and then rendering our main scene to an off-screen render target, enabling more complex visual effects when we then feed the render target texture into a custom effects shader.

By learning to write custom shaders, you can create truly unique effects like this one here: https://pragmattic-tutorials.vercel.a...

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

🔗 Resources

Check out the live site: https://blog.pragmattic.dev/example/f...

Repo on GitHub: https://github.com/prag-matt-ic/pragm...

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

🤝 Looking to collaborate?
Email pragmattic.ltd@gmail.com to start a conversation
🔖 Chapters

00:00 Intro / final result
01:49 React postprocessing
04:18 Earlier videos/prerequisites
05:33 Setting up image sequence shader
12:34 Effects component structure
16:12 Using ScreenQuad instead of Plane
17:20 Effects Vertex shader
19:37 Effects Fragment shader
30:28 Outro

🤝 Looking to collaborate?
Email pragmattic.ltd@gmail.com to start a conversation

On this page of the site you can watch the video online React Three scroll controlled image sequence & custom post processing effects shader with useFBO with a duration of hours minute second in good quality, which was uploaded by the user pragmattic 02 November 2024, share the link with friends and acquaintances, this video has already been watched 429 times on youtube and it was liked by 11 viewers. Enjoy your viewing!

10,652

425