README
🙉 🍔 🍩 my-three-js-journey 🙉 🍔 🍩
🚧 Under construction 🚧
A repo for my completion of THREE JS Journey from Bruno Simon and learning WebGL and shaders 🍔
* I used vite insted of webpack for Three JS lessons so finished code located in {lesson}-vite folder for each lesson except for R3F lessons
🦊🦊🦊
Marble Madness Game deployed at https://marble-madness.vercel.app
Portal Scene with procedural materials deployed at https://portal-omega-ten.vercel.app
Moon and Stars at https://jzz8p7.csb.app/
Scene I made with scroll controls at https://kjvb7w.csb.app/
Text example deployed at https://three-js-text-eosin.vercel.app/
Raging Sea example with Simplex 3D Noise noise deployed at https://raging-sea-rouge.vercel.app/
Links and Learning
- cool post about R3F and particles - https://varun.ca/three-js-particles/
- cool blog about creating shader backgrounds in react three fiber - https://adamkarlsten.com/blog/creating-shader-backgrounds/
- akella gists - https://gist.github.com/akella
- akella github - https://github.com/akella?tab=repositories
- codrops website - https://tympanus.net/codrops/
- brunosimon.com - https://www.brunosimon.com/
- react three fiber examples - https://docs.pmnd.rs/react-three-fiber/getting-started/examples
- three js examples - https://threejs.org/examples/
- awesome list of creative coding examples and resources - https://github.com/terkelg/awesome-creative-coding#shaders--opengl--webgl
- cool repo about shaders https://github.com/lettier/3d-game-shaders-for-beginners
- Math is fun website has great material on geometry and shaping functions https://www.mathsisfun.com/geometry/index.html
- cool library from Patricio Gonzalez Vivo https://github.com/patriciogonzalezvivo/lygia
- awesome open source book about three js https://discoverthreejs.com/book/
- blog of Youpi https://barradeau.com/blog/?page_id=6
- awesome tuts from spite https://www.clicktorelease.com/
- cool website of experiments from Mathis Biabiany https://mathis-biabiany.fr
- lots of info on real time rendering and shaders from SIGGRAPH - https://blog.selfshadow.com/publications/
- Inigo Quilez website king of sdf's https://iquilezles.org/
- MateriaX library free materials from AMD - https://matlib.gpuopen.com/main/materials/collections
- Tutorial on using Three Js Nodes system which is yet undocumented - https://www.donmccurdy.com/2019/03/17/three-nodematerial-introduction/
- PR for new docs for Nodes in THREE js - https://raw.githack.com/sunag/three.js/dev-nodes-doc/docs/index.html#manual/en/introduction/How-to-use-node-material
- CYOS system from Babylon JS - https://cyos.babylonjs.com/
- Collection of intermediate tuts from Josh Marinacci - https://blog.mozvr.com/threejs-intermediate-skill-tutorials/
- Free book pdf from Duke University - https://services.math.duke.edu/courses/math_everywhere/assets/techRefs/Threejs%20Essentials.pdf
- A set of awesome examples with code from Lee Stemkoski - https://stemkoski.github.io/Three.js/
- Shader Expo app with examples - https://anuraghazra.dev/ShaderExpo/
- Cool post about creating different particle effects - https://varun.ca/three-js-particles/
- Excellent post about using noise and creating flow fields - https://varun.ca/noise/
- Awsome source of knowledge from Steven Wittens - https://acko.net/
- WebGL2 fundamentals site - https://webgl2fundamentals.org/
- WebGL1 fundamentals site - https://webglfundamentals.org/
- Awesome shader playground app - https://twigl.app/
- Another cool shader playground - https://www.vertexshaderart.com/
- Cool react like library to declaritively use WebGL and WebGPU - https://usegpu.live/docs/guides-getting-started