🙉 🍔 🍩 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

https://threejs-journey.com/

🦊🦊🦊

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