For this project, I created a stylized 3D scene in Unity based off of 2D art of the game OneShot. Below is a video of the final result. I used Shader Graph and HLSL within URP.
Click on the TVs to change the channel!
Press space to toggle monochrome mode.
 |
 |
 |
|---|---|---|
| Design by NightMargin | Design by NightMargin | Wallpaper from OneShot: World Machine Edition |
After implementing toon shading, I added multiple light support as well as specular highlights. I apply noise to the light received from every light source in order to achieve a more stylized effect.
I also created a custom texture that I used to modify the hard shadows. I then added turbulence to these shadows using noise based on UV.
I made my special surface shader a TV screen as that's what I was planning on making my scene based on. I downloaded this TV model, published by the Virtual Museums of Malopolska, off of Sketchfab. I wrote a procedural sawtoothe wave texture in HLSL and distorted it with noise. I added a vignette to the screen and a clover in the center using SDFs.
I also distorted the vertex positions using noise with respect to posterized time. Posterizing time gives the appearance of animation at a very low framerate. I also added a glitch effect to the TV screen by offsetting the UV horizontally with respect to noise on the UV's y position.
animatedTV.mp4
Here are the graph nodes that determine how the TV screen UVs are distorted. I created some HLSL nodes as well.
I created a Post Processing shader that creates outlines using a sobel filter on the depth texture: at parts of the screen where there's a strong horizontal or vertical change in depth, an outline will display.
I then added another outline based on the change in normal across the object. At parts of the screen where there's a drastic change in normal, an outline will display. I made the radius in which we sample parts of the screen to check changes in normal pretty large to create blurry outlines.
I then displaced the UVs used to create the outline effects so that the outlines don't conform to the object. To offset the UVs, I used 2D FBM and a horizontal glitch offset very similar to the screen's glitch effect.
Here are the graph nodes that distort the outlines. I reuse the HLSL function node for the TV Screen distortion.
And here are the graph nodes that composite the outlines.
I created another Post Processing shader that displaces the UVs using multiple layers of FBM, creating a noisy effect. I also added a vignette, blue tint, and an increase in brightness near the center of the screen.
I created a basic scene using the TV 3D model. I made a wall of TVs surrounding the camera. I made the colors of the TVs randomly vary slightly in hue by instancing the screen material on a per TV basis.
When the user clicks on a TV, it changes its channel (swaps to a different color). I animate the glitch parameter on the TV when the channel is changed.
channelChanging.mp4
I also added the grayscale mode: when the user presses the spacebar, all of the TVs turn off and the scene becomes grayscale. All of the TVs lose their clover except a random TV; the user can transfer the white clover to a TV by clicking on it.