Difference between revisions of "3D Fundamentals Tutorial 9"
From Chilipedia
(→Video) |
(→Video) |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
The tutorial video is on YouTube [https://youtu.be/pef2405M-os here]. | The tutorial video is on YouTube [https://youtu.be/pef2405M-os here]. | ||
| − | |||
<div class="mw-collapsible mw-collapsed"><br /> | <div class="mw-collapsible mw-collapsed"><br /> | ||
* What is a Pixel Shader and why is it used? [https://youtu.be/pef2405M-os?t=0m20s 0:20] | * What is a Pixel Shader and why is it used? [https://youtu.be/pef2405M-os?t=0m20s 0:20] | ||
| Line 13: | Line 12: | ||
</div> | </div> | ||
* Refactoring of the <code>gfx.PutPixel(...)</code> function in <code>Pipeline.h</code> [https://youtu.be/pef2405M-os?t=2m04s 2:04] | * Refactoring of the <code>gfx.PutPixel(...)</code> function in <code>Pipeline.h</code> [https://youtu.be/pef2405M-os?t=2m04s 2:04] | ||
| + | <div class="mw-collapsible-content"> | ||
:* This is where we are ultimately determining the color of the pixel | :* This is where we are ultimately determining the color of the pixel | ||
:* Inside the PutPixel function, we want to call a shader object that defines the coloring behavior | :* Inside the PutPixel function, we want to call a shader object that defines the coloring behavior | ||
| − | * Implementation of the programmable | + | </div> |
| + | * Implementation of the programmable Pixel Shader in the rendering pipeline [https://youtu.be/pef2405M-os?t=3m11s 3:11] | ||
| + | <div class="mw-collapsible-content"> | ||
:* We template the pipeline class on an <code><class Effect></code> | :* We template the pipeline class on an <code><class Effect></code> | ||
:* We will adjust the definition of the <code>Vertex</code> class depending on what effect we are using | :* We will adjust the definition of the <code>Vertex</code> class depending on what effect we are using | ||
| Line 22: | Line 24: | ||
gfx.PutPixel( x,y,effect.ps( iLine ) ); | gfx.PutPixel( x,y,effect.ps( iLine ) ); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | * .. | + | :* Changes to the <code>Pipeline</code> class [https://youtu.be/pef2405M-os?t=5m37s 5:37] |
| − | * ... [https://youtu.be/pef2405M-os?t= | + | ::- The <code>Pipeline</code> object now holds an <code>Effect</code> object (which holds all shader data and methods) |
| − | * ... [https://youtu.be/pef2405M-os?t= | + | ::- Coding the <code>Effect</code> class [https://youtu.be/pef2405M-os?t=6m03s 6:03] |
| − | + | ::- Coding the <code>PixelShader</code> class [https://youtu.be/pef2405M-os?t=6m22s 6:22] | |
| − | * . | + | :* Putting it all together in a new <code>CubeSkinScene.h</code> class [https://youtu.be/pef2405M-os?t=7m26s 7:26] |
| − | * .. | + | ::- The code now renders the same scene, but has become completely configurable |
| − | * . | + | </div> |
| − | * .. | + | * Making a new <code>Effect</code>: Color Blending [https://youtu.be/pef2405M-os?t=8m31s 8:31] |
| − | + | <div class="mw-collapsible-content"> | |
| + | :* The <code>VertexColorEffect</code> functor will not hold a texture and return interpolated texture coordinates | ||
| + | :* Instead, it interpolates colors operating on a <code>Vec3</code> object that holds RGB values (we encode the Vertex colors as floats) | ||
| + | :* Cube definition now needs to hold color data of each Vertex [https://youtu.be/pef2405M-os?t=10m07s 10:07] | ||
| + | :* We need a conversion operator and a conversion constructor to translate between the <code>Vec3</code> and <code>Color</code> representation of colors [https://youtu.be/pef2405M-os?t=11m12s 11:12] | ||
| + | :* Changes to the <code>Pipeline</code> class: generalizing Vertex transformations (independent of the pixel shader effect) [https://youtu.be/pef2405M-os?t=11m45s 11:45] | ||
| + | :* Adding a static function <code>GetPlain()</code> in <code>Cube.h</code> to get the Vertex colors [https://youtu.be/pef2405M-os?t=13m39s 13:39] | ||
| + | :: | ||
| + | ::<syntaxhighlight lang="cpp" line> | ||
| + | template<class V> | ||
| + | static IndexedTriangleList<V> GetPlain(float size = 1.0f) | ||
| + | {...} | ||
| + | </syntaxhighlight> | ||
| + | :* Coding the scene class <code>CubeVertexColorScene.h</code> [https://youtu.be/pef2405M-os?t=14m13s 14:13] | ||
| + | </div> | ||
| + | * Making a new <code>Effect</code>: Solid Colors [https://youtu.be/pef2405M-os?t=14m47s 14:47] | ||
| + | <div class="mw-collapsible-content"> | ||
| + | :* Need to address the issue: we can't store color data in the 8 unique cube vertices | ||
| + | :* Solution: make the faces of the cube independent (no shared vertices) [https://youtu.be/pef2405M-os?t=16m22s 16:22] | ||
| + | ::- This requires 6 faces x 4 vertices per face = 24 vertices | ||
| + | :* Definition of <code>SolidEffect.h</code> (without interpolation of colors) | ||
| + | :* Adding a static function <code>GetPlainIndependentFaces()</code> to <code>Cube.h</code> to get the 24 vertices [https://youtu.be/pef2405M-os?t=18m15s 18:15] | ||
| + | :* Demo [https://youtu.be/pef2405M-os?t=19m19s 19:19] | ||
| + | </div> | ||
| + | * Reflections on our approach to Pixel Shading [https://youtu.be/pef2405M-os?t=19m58s 19:58] | ||
| + | <div class="mw-collapsible-content"> | ||
| + | :* With our approach, the sky is the limit in terms of adding options/effects to the Pixel Shader | ||
| + | :* However, because the whole pipeline is templated, each effect requires a pipeline | ||
| + | ::- Adantage of using templates: enables aggressive inlining / compiler optimization | ||
| + | ::- Disadvantage: we can't switch effects easily at runtime | ||
| + | :* There are differences between this approach and how Hardware 3D APIs (like Direct3D and OpenGL) implement this flexibility | ||
| + | ::- These let you switch components (e.g. by binding a different shader dynamically) | ||
| + | ::- Another difference: use of texturing units seperate from the shader object [https://youtu.be/pef2405M-os?t=21m14s 21:14] | ||
| + | </div> | ||
</div> | </div> | ||
Latest revision as of 04:28, 4 June 2020
In this tutorial we incorporate our first shader stage into the 3D pipeline: the pixel shader stage. We also explore some basic example pixel shaders (more heavy-duty stuff to come later).
Video
The tutorial video is on YouTube here.
- What is a Pixel Shader and why is it used? 0:20
- We want to make color mapping of the triangles in the rendering pipeline configurable
- One way is to use templated function objects (functors) as "plug-in" code
- These functors determine the color of the pixel based on their input
- Refactoring of the
gfx.PutPixel(...)function inPipeline.h2:04
- This is where we are ultimately determining the color of the pixel
- Inside the PutPixel function, we want to call a shader object that defines the coloring behavior
- Implementation of the programmable Pixel Shader in the rendering pipeline 3:11
- We template the pipeline class on an
<class Effect> - We will adjust the definition of the
Vertexclass depending on what effect we are using - We adjust
gfx.PutPixel(...)to take a pixel shader object, and call the function operator with the interpolated Vertex data:
gfx.PutPixel( x,y,effect.ps( iLine ) );
- Changes to the
Pipelineclass 5:37
- - The
Pipelineobject now holds anEffectobject (which holds all shader data and methods) - - Coding the
Effectclass 6:03 - - Coding the
PixelShaderclass 6:22
- Putting it all together in a new
CubeSkinScene.hclass 7:26
- - The code now renders the same scene, but has become completely configurable
- We template the pipeline class on an
- Making a new
Effect: Color Blending 8:31
- The
VertexColorEffectfunctor will not hold a texture and return interpolated texture coordinates - Instead, it interpolates colors operating on a
Vec3object that holds RGB values (we encode the Vertex colors as floats) - Cube definition now needs to hold color data of each Vertex 10:07
- We need a conversion operator and a conversion constructor to translate between the
Vec3andColorrepresentation of colors 11:12 - Changes to the
Pipelineclass: generalizing Vertex transformations (independent of the pixel shader effect) 11:45 - Adding a static function
GetPlain()inCube.hto get the Vertex colors 13:39
template<class V> static IndexedTriangleList<V> GetPlain(float size = 1.0f) {...}
- Coding the scene class
CubeVertexColorScene.h14:13
- The
- Making a new
Effect: Solid Colors 14:47
- Need to address the issue: we can't store color data in the 8 unique cube vertices
- Solution: make the faces of the cube independent (no shared vertices) 16:22
- - This requires 6 faces x 4 vertices per face = 24 vertices
- Reflections on our approach to Pixel Shading 19:58
- With our approach, the sky is the limit in terms of adding options/effects to the Pixel Shader
- However, because the whole pipeline is templated, each effect requires a pipeline
- - Adantage of using templates: enables aggressive inlining / compiler optimization
- - Disadvantage: we can't switch effects easily at runtime
- There are differences between this approach and how Hardware 3D APIs (like Direct3D and OpenGL) implement this flexibility
- - These let you switch components (e.g. by binding a different shader dynamically)
- - Another difference: use of texturing units seperate from the shader object 21:14
Downloads
The GitHub repository for the tutorial code is here.
