#webgl
Demo✨ https://robpayot.github.io/ufc-displa...
Template 🎓 https://github.com/Robpayot/vite-2d-s...
Full code access / support 🙏🏻 https://www.patreon.com/user?u=50160165
Hi my name is Robin Payot, I'm a french creative developer making WebGL
websites since 2015, I'm also jury FWA since 2016 and I'm still working
as a freelancer. I've been working with many awarded agencies all over
the world and I'm here to share with you everything I've learned back
then.
In this video we're going to learn how to make a displacement effect
with shaders using OGL, a light and powerful WebGL library.
To do this tutorial you will need to download the template and follow
the instructions, good luck!
If you finished the exercise feel free to send your creations in the
comments, I'd be happy to see what you guys are capable of!
You can support me and get a direct access to the code by subscribing to
my patreon ( https://www.patreon.com/user?u=50160165 ), supporting will also give me more time to make new videos!
Thanks!
Other useful links: 📖
learn more about shaders: https://thebookofshaders.com/
OGL doc: https://github.com/oframe/ogl
Music license Epidemic Sound.
Chapters:
00:00 Intro
02:10 Begin the exercise
04:20 Adjust canvas size
09:23 Add images and crop
27:30 Displacement shader
32:23 Interpolation
35:51 Final Result
#webgl #displacement #displacementmap #tutorial #javascript
#shaders
