Step 1: Documentation
diff --git a/fa24/Homework/hw13/VFX Graph Shader Graph.jpg b/fa24/Homework/hw15/VFX Graph Shader Graph.jpg similarity index 100% rename from fa24/Homework/hw13/VFX Graph Shader Graph.jpg rename to fa24/Homework/hw15/VFX Graph Shader Graph.jpg diff --git a/fa24/Homework/hw15/glslViewer.gif b/fa24/Homework/hw15/glslViewer.gif new file mode 100644 index 00000000..f9f8835d Binary files /dev/null and b/fa24/Homework/hw15/glslViewer.gif differ diff --git a/fa24/Homework/hw15/headerImage.png b/fa24/Homework/hw15/headerImage.png new file mode 100644 index 00000000..a88b9dee Binary files /dev/null and b/fa24/Homework/hw15/headerImage.png differ diff --git a/fa24/Homework/hw15/hlsl.png b/fa24/Homework/hw15/hlsl.png new file mode 100644 index 00000000..6b452d36 Binary files /dev/null and b/fa24/Homework/hw15/hlsl.png differ diff --git a/fa24/Homework/hw15/index.html b/fa24/Homework/hw15/index.html index 3fc7b30d..65740678 100644 --- a/fa24/Homework/hw15/index.html +++ b/fa24/Homework/hw15/index.html @@ -818,6 +818,15 @@ + + +❄️ HW 15: Shaders and VFX
Assignment Deadline
-Gradescope assignment due Friday, March 22nd 2024
+Gradescope assignment due Friday, December 6th 2024
Computer graphics allows us to create different things from a single pixel to a group of pixels. Pixel shading is one of many things that can be performed with computer graphics. Pixel shading refers to the process of computing a color for a pixel. On shader-based hardware, this is where your pixel shader is executed. In a basic forward renderer pass, where we are rendering objects into the frame buffer, the pixel is typically first lit and then fogged if fogging is being used. the output of a pixel shader consists of not only an RGB color, bu also an alpha value, which is usually interpreted as the "opacity" of the pixel, used for blending.
Shaders
-
A shader is a shader program, a program that runs on a GPU. In Unity, shaders are categorized as such:
- The most common type of shaders are the ones part of the graphics pipeline. They are important because they help perform calculations that determine the color of pixels on the screen. In Unity, we work with Shader objects. @@ -1049,8 +1058,64 @@
Shaders
Shaders are an important part of the computer graphics rendering pipeline because they inform the computer how to render and shade objects within a scene. Shaders can powerfully enable speed and detail enhancements in a program and can provide special effects in 2D and 3D computer graphics.
HLSL
-
HLSL is similar to the shader language, "Cg", which is a shader language developed by NVIDIA and GLSL, the shading langiage used in OpenGL. HLSL is the language that is behind Unity's shaders, a flexible and powerful shader that can be used within the context of Unity and other contexts. We can write many different kinds of shaders, they usually come in six forms including vertex shaders, geometry shaders, pixel shaders, compute shaders, ray tacing shaders, and tessellation shaders. Microsoft also uses this language for their Direct3D API to create GPU programs.
+Here is an example of HLSL Shader code from Microsoft's Documentation. This example uses a structure to provide multiple vertex shader inputs.
+vector vClr;
+
+struct VS_INPUT
+{
+ float4 vPosition : POSITION;
+ float3 vNormal : NORMAL;
+ float4 vBlendWeights : BLENDWEIGHT;
+};
+
+struct VS_OUTPUT
+{
+ float4 vPosition : POSITION;
+ float4 vDiffuse : COLOR;
+
+};
+
+float4x4 mWld1;
+float4x4 mWld2;
+float4x4 mWld3;
+float4x4 mWld4;
+
+float Len;
+float4 vLight;
+
+float4x4 mTot;
+
+VS_OUTPUT VS_Skinning_Example(const VS_INPUT v, uniform float len=100)
+{
+ VS_OUTPUT out;
+
+ // Skin position (to world space)
+ float3 vPosition =
+ mul(v.vPosition, (float4x3) mWld1) * v.vBlendWeights.x +
+ mul(v.vPosition, (float4x3) mWld2) * v.vBlendWeights.y +
+ mul(v.vPosition, (float4x3) mWld3) * v.vBlendWeights.z +
+ mul(v.vPosition, (float4x3) mWld4) * v.vBlendWeights.w;
+ // Skin normal (to world space)
+ float3 vNormal =
+ mul(v.vNormal, (float3x3) mWld1) * v.vBlendWeights.x +
+ mul(v.vNormal, (float3x3) mWld2) * v.vBlendWeights.y +
+ mul(v.vNormal, (float3x3) mWld3) * v.vBlendWeights.z +
+ mul(v.vNormal, (float3x3) mWld4) * v.vBlendWeights.w;
+
+ // Output stuff
+ out.vPosition = mul(float4(vPosition + vNormal * Len, 1), mTot);
+ out.vDiffuse = dot(vLight,vNormal);
+
+ return out;
+}
+Important notes about HLSL syntax:
- DirectX 9-style syntax: Uses sampler2D, tex2D(), and similar functions. This syntax works on all platforms and is considered legacy syntax @@ -1058,10 +1123,10 @@
- It is important to note the different HLSL syntax because different hardware may be specific in what they need
HLSL
Shader Graph
-
In Unity, Shader Graph is a tool that helps build shaders in a visual way. Instead of writing code, we are able to use a node-based system to create a graph framework. It is great in giving instant feedback that reflects our changes.
Visual Effect Graph
-
Unity's Visual Effect Graph (VFX Graph) allows you to create simple and complex visual effects from a node-based programming language that combines blocks, nodes, and sequences. These effects can range from common particle behaviors to complex scene simulations. Together, these nodes can be combined as building blocks to created advanced procedural effects.
According to the Unity Manual, the Visual Effect Graph is useful for:
-
@@ -1073,6 +1138,16 @@
- Use a Visual Effect Graph in another Visual Effect Graph. For example, you can reuse and customize a simple but configurable explosion in more complex graphs.
- Previews changes immediately, so you can simulate effects at various rates and perform step-by-step simulation. For instructions on how to install the Visual Effect Graph, see Getting started with Visual Effect Graph.
Visual Effect Graph
Problems
+ShaderGraph with Unity
+Please follow the guides linked and reach at least Part 6.
+-
+
- GitHub: Intro to Shader Graph in Unity 2022 +
- Tutorial: MGS Stealth Camo in Shader Graph +
Resources and Links
- Unity Manual: Visual Effect Graph @@ -1082,15 +1157,12 @@
- HLSL - Ronja's tutorials
- Unity-Shader-Basics-Tutorial
- High-level shader language (HLSL) +
- The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe
Resources and Links
Submission
GitHub Pull Requests
-To receive credit for this homework assignment, please make sure you provide a link to your GitHub branch and name the branch as your first name.
-Then assign Nile and Debbie as Reviewers and Assignees before you hit the green Create Pull Request button.
BrightSpace Submission
+Please take a video of the shaders you have created.