HW 4: 3D Stylization

Project Overview:

Using a 2D concept art piece as inspiration to create a 3D stylized scene in Unity.

2D Concept Illustration	3D Stylized Scene in Unity

Turnaround video (showcases interactivity for 2nd shader/materials):

bearfinalcompressed2.1.1.mp4

---

Process

1. Picking Concept Art

Concept art taken from @sseongryul on instagram:

---

2. Shaders

1. Improved Toon Shader Improvements upon previously created three tone toon shader.
   1. Multiple Light Support
      • Multiple light support for additional point lights, created by modifying original shader.
        • 
        • 
        • With help from tutorial: https://youtu.be/1CJ-ZDSFsMM
   2. Specular Lighting and Rim Lighting
      • Modified shaders for extra specular lighting and rim lighting
      • Specular lighting process
        • pow(saturate(dot(viewVector, lightVector)), glossiness) * diffuse lighting
        • Then applied noise, smoothstep for black and white values + control for blending
        • Finally multiply with color input
      • 
      • Rim lighting done similarly, except multiplying diffuse lighting with 1-saturate(dot(view, normal))
      • 
   3. Textured Shadow
      1. Custom shadow texture to create a textured look
      2. Using default object UVs to map shadows onto ground
      3. Shadows + specular/rim lighting before blending/noise:
         
2. Special Surface Shader
   • Added more effects to the coloring and lighting
     • Blur between the diffuse colors
     • Perlin noise along the lines of the diffuse colors, and surrounding the specular/rim lighting
       • Added before all diffuse color separation:
       • 
     • Perlin noise to the diffuse colors themselves, so that they vary in brightness
       • 
     • Applied an edge darkening effect to simulate watercolor pooling at the edges of diffuse colors. The size and darkness of this effect is affected by a noise value
       • 
     • Animated the color brightness noise and the diffuse color edge noise with a Time node and modifying my Perlin noise function to take in time as an input
   • Final look + parameters:
     
   • Turnaround video to showcase animation:
     https://github.com/wc41/hw04-stylization/assets/97757188/4b12e27f-3a91-42ba-b869-7d191039965d

---

3. Outlines

Added Post Process Outlines based on Depth buffers of the scene.

1. Created render feature from base code (help from https://youtu.be/Bc9eTlMPdjU), which then takes in a new full-screen material to create outlines
2. Created a new shader for this material which accesses normal and depth buffers
3. Followed this tutorial to write a depth-based sobel edge detection function which takes in many parameters for edge detection.
4. To make outlines seem more hand-drawn with pen, a bunch of noise parameters were added to vary the darkness, thickness, and offset of the lines.
   
5. The noise for each of these outline parameters is also animated using a time node and a perlinTime function.
6. Final look + parameters:
   

---

4. Full Screen Post Process Effect + Creating Scene

Added a post-process paper texture to the scene in my fullscreen shader and created the scene. It consists of a pine tree model and an ice bear model both downloaded from SketchFab.

https://sketchfab.com/3d-models/pine-tree-d45218a3fab349e5b1de040f29e7b6f9

https://sketchfab.com/3d-models/ice-bear-we-bare-bears-77f6d43d4dc740dfb8a500743676a18c

5. Interactivity

To add interactivity, I created a new shader with a different method of blending between the diffuse color separation values using Perlin Noise:

This applies a sort of inky effect, so I decided to make new materials with colors that reflect this. I found that a harshly lit red/black scene looked interesting:

Finally, I applied a C# script to toggle between the 2 main scenes, as well as a script for the camera to toggle between beige and black for the background.