Three.js shader resources
A collection of resources and references for implementing shaders in React Three Fiber
This is not so much a post as it is a references dump of some resources for learning about Three.js shaders:
Beginner:
-
https://garden.bradwoods.io/notes/javascript/three-js/shaders/shaders-101(Note also - this is just a really cool and beautiful website)
-
https://medium.com/@m.mhde96/implementing-a-shadertoy-in-react-three-fiber-eee4541a15b2
-
https://medium.com/hackernoon/converting-shaders-from-shadertoy-to-threejs-fe17480ed5c6
Advanced:
-
https://tympanus.net/codrops/2022/11/29/sketchy-pencil-effect-with-three-js-post-processing/
-
https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/
-
https://blog.maximeheckel.com/posts/moebius-style-post-processing/
-
https://github.com/glslify/glslify-loader?tab=readme-ov-file
Jeremy Atkinson
Jeremy is a structural engineer, researcher, and developer from BC. He works on Calcs.app and writes at Kinson.io