How to create Ghibli-style trees with three.js

▶ Source code https://github.com/craftzdog/ghibli-style-shader
▶ My dotfiles https://github.com/craftzdog/dotfiles-public
▶ My equipment http://uses.craftz.dog/
▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=IGK6eceWyU4

Follow me online here:
▶ My weekly vlog https://www.youtube.com/@craftzdog
▶ Subscribe to my newsletter https://www.devas.life/
▶ Twitter https://twitter.com/inkdrop_app
▶ Instagram https://instagram.com/craftzdog

References:
▶ Blenader tutorial by Lightning Boy Studio https://www.youtube.com/watch?v=DEgzuMmJtu8&ab_channel=LightningBoyStudio

00:00:00 Hello
00:00:44 Unboxing a new MacBook Pro
00:01:54 Heading to Osaka Castle Park
00:04:00 Create a new React project
00:05:12 Install libraries
00:05:31 Make the page background transparent
00:06:32 Remove the template content
00:06:53 Integrate React Three Fiber into the project
00:08:49 Add a simple scene
00:14:33 Add a ground plane for shadows
00:17:19 Import a tree model
00:18:28 Add the tree model to the scene
00:19:37 Use Standard Material
00:20:50 Use Toon Material
00:23:25 Rotate the tree object
00:24:55 Create a simple shader
00:28:05 Use a custom toon shader
00:32:10 Tweak the toon shader
00:35:11 Start creating a Ghibli shader
00:40:01 Define variables
00:42:12 Calculate brightness
00:44:25 Add gradient colors
00:44:53 Create another color variation
00:47:29 Thank you for watching

#ThreeJS #CodeWithMe #ASMR

#Productivity #Solo dev #Programming #Indie dev #Code with me #Tutorial #JavaScript