Let's practice adding stylization to a 3D scene using Unity's shader graph!
We will be stylizing a "toon" look by creating a shader in Unity that supports shadows and multiple lights in real-time! In the process, you will gain some familiarity with Unity’s shader graph.
This tutorial video will cover the base code, and then go over the process of making a limited version of a toon shader.
Start by downloading Unity 2022.3.9f1
Lab Overview and Puzzle 1 Tutorial Video
The goal of each puzzle will be to replicate the look of each puzzle’s image.
![277997527-f27aec24-0d04-4b73-95d3-b55e2da13603](https://private-user-images.githubusercontent.com/1758825/278045809-c9ae57ba-7a7f-4b03-829c-83fc35740c2f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg4ODA3ODksIm5iZiI6MTczODg4MDQ4OSwicGF0aCI6Ii8xNzU4ODI1LzI3ODA0NTgwOS1jOWFlNTdiYS03YTdmLTRiMDMtODI5Yy04M2ZjMzU3NDBjMmYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDZUMjIyMTI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTQ5NmU2MzY2ODQ0NjM2ZWM1OGU3NWQxZDliMTg5NzQ0MzMxNmRkYTYwMjA3NTEwODYyNGZjOTZhZmExMzcxNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Aa8xf98EThch3u3UWhf8uGNyue-VNxnJlbCmVwH0FHA)
- Follow the tutorial to create a 2 band toon shader, and then create multiple materials based off of the shader graph
- Attach those materials to the objects (the sphere and plane) in the default scene "Lab Scene 1" to produce a look similar to the one above!
![277998209-12d0a844-b6a8-4054-86f9-ee13b5533bf2](https://private-user-images.githubusercontent.com/1758825/278046032-6b648f63-7317-40a6-96b7-d2de4405df28.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg4ODA3ODksIm5iZiI6MTczODg4MDQ4OSwicGF0aCI6Ii8xNzU4ODI1LzI3ODA0NjAzMi02YjY0OGY2My03MzE3LTQwYTYtOTZiNy1kMmRlNDQwNWRmMjgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDZUMjIyMTI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzRmMGViNzBmNTI3YTU0YTM3ZGE4ZDNhZmIyODVhNGM3MmRhYTM4MTE3MjFkYzk3YTMzMzk1YTY0ZjA4OWRiNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.f4ozUANofemuFnzgSAJiQuBY2t-oTXB8mzhVPn5BJxA)
- Edit your materials to allow for a 3rd color in your scene, such that you have highlights, midtones, shadows on your objects. Edit your shader so that the thresholds on these values are adjustable.
- Shade the sonic and shadow receiving plane in "Lab Scene 2" to get a look similar to the one above!
![277998492-be35de1e-1157-4a6e-b4ea-ba015f2750c9](https://private-user-images.githubusercontent.com/1758825/278046060-d60cb866-ea00-4f4b-8d53-c85fa1b170f6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzg4ODA3ODksIm5iZiI6MTczODg4MDQ4OSwicGF0aCI6Ii8xNzU4ODI1LzI3ODA0NjA2MC1kNjBjYjg2Ni1lYTAwLTRmNGItOGQ1My1jODVmYTFiMTcwZjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIwNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMDZUMjIyMTI5WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGJkZjljMDEwMzg3YjIyYmUyMTZiYzkyOTY1NTJlMmFjOTcxMmZkYjA0ODA2YjYzNmE2MGY2ZjkzYmZjNTMzYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.9RngHAvnmnYw_Dgt_sPLGp6LPVDMIUg4-37I54DzM5w)
- Use one of the provided texture png’s in order to add a screenspace shadow pattern onto the shadows of the scene!
- Hint 1: What does the "ShadowAttenuation" variable do?
Extra Credit:
- Add some soft interpolation at the edges of your bands, for smooth transitions between color bands. Create a "smoothness" parameter that adjusts the degree of smoothness!
- Create a pull request against this repository
- In your readme, add screenshots of your results for Puzzles 1, 2 and 3
- Profit