Difference between revisions of "Lesson 6 - prime directive"

From Bo3b's School for Shaderhackers
Jump to: navigation, search
(Created page with "==== Summary ==== This lesson we Level of difficulty: Easy<br> Time required: 30 minutes <br> <br> [http://youtu.be/gR2FKk1hz4c <u>Video Walkthrough on YouTube, pt 1</u>] ....")
 
m (Protected "Lesson 6 - prime directive" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
 
(13 intermediate revisions by one user not shown)
Line 1: Line 1:
 
==== Summary ====
 
==== Summary ====
This lesson we
+
Now it's time to talk about how stereo 3D is created, and the math behind it.
  
  
Line 7: Line 7:
 
<br>
 
<br>
 
<br>
 
<br>
[http://youtu.be/gR2FKk1hz4c <u>Video Walkthrough on YouTube, pt 1</u>] ...   
+
[http://youtu.be/FwaakXn13pI <u>Video Walkthrough on YouTube</u>] ...   
[http://sg.bo3b.net/Lesson%205%20pt%201.mp4 <u>Video Walkthrough direct download link, pt 1</u>]
+
[http://sg.bo3b.net/Lesson%206%20-%20prime%20directive.mp4 <u>Video Walkthrough direct download link</u>]
<br>
+
[http://youtu.be/68C5x4A81uk <u>Video Walkthrough on YouTube, pt 2</u>] ... 
+
[http://sg.bo3b.net/Lesson%205%20pt%202.mp4 <u>Video Walkthrough direct download link, pt 2</u>]
+
 
<br>
 
<br>
 
<br>
 
<br>
  
 
==== Objective ====
 
==== Objective ====
Experiment on
+
Review and understand the principles behind stereoscopy.
 
<br>
 
<br>
Fix the lava s
+
Learn about the prime directive formula, and how to apply it.
  
 
==== Quiz====
 
==== Quiz====
Fix the water
+
Fix the oil shader in mid-game lava room.
  
  
 
----
 
----
After we've found a broken shader, we want to disable or fix them. We can't always do the easiest fix though, and this is where experimentation comes in.  This is the puzzle aspect of fixing shaders, where it's not always clear how to fix a shader, even after having seen a lot of variants.
+
For effects that are important for game play, the best solution is of course to fix them, not disable them. We can fix a surprisingly large number of broken effects with different techniques that we will learn in future Lessons.
  
The basic premise is to experiment on the shader by commenting out pieces of the code, and reloading it live with F10, and see any change. As you do these experiments, you can get a feel for what pieces of code affect what part of the image, which can lead you to the best fix.
+
Let's start by fixing an easy one in The Ball, where there is already stereo fix code to guide us. This is the Lava effect. This will be our first actual fix, as opposed to disabling them.
  
It can be quite a bit of trial and error, but can allow you to figure out fixes that don't match common patterns, or to find the right spot for a common pattern.
+
As a general idea, we probably would not fix this effect, because the version with one layer disabled is perfectly acceptable. It's always worth keeping an eye on how much time a given effect is worth, because there are always more games.
  
  
 
----
 
----
Let's take a look at the basics of 3D graphics, so you can have a very rough idea of how the pieces fit together.  This will give you some understanding of how shaders work.
+
We'll step back into The Ball for a minute to get a first glimpse of the 3D formula I'm calling the ''prime directive''&sup1;.
  
 +
Let's not worry about the details yet, just see how it's applied.
  
* Play with the ''Principles of Shading'' demo.
 
*# Get the demo from [http://stage.nvidia.com/coolstuff/demos#!/principles-of-shading here]
 
*# Run the demo and get an understanding of the wireframe vertexes versus the textures.
 
*# Look at the Display menu in particular.
 
*# Take a first look at the 0.5*D*T formula as a basic building block.
 
*# Example of texture painted onto triangle [http://www.riemers.net/images/Tutorials/DirectX/Csharp/Series3/DirectX%20Tutorial%206%20-%20Textured%20Triangle.jpg here]
 
*# Take a look at the graphics pipeline [http://rbwhitaker.wikidot.com/intro-to-shaders here]
 
*# Get a basic idea of the flow of graphics operations, especially noting VertexShaders run before PixelShaders.
 
  
 
+
* Fix Lava effect, not just disable it.
After playing with this demo you should have a sense for how 3D graphics are built out of a list of vertices, that make up an array of triangles, that have textures applied to the triangles.
+
*# Lava in The Ball is perfectly usable now, but we noticed the Unreal fix earlier.
 +
*# Unreal fix did not function, but we can make it work, using HelixMod inputs.
 +
*# Edit shader file to use HelixMod stereo texture, instead of game based one.
 +
*# Fixed in 3D, not just disabling a piece of it.
  
  
 
----
 
----
Sometimes we will run into an effect that really cannot be disabled without making the game a lot worse.  
+
The best background for how 3D works is a presentation from NVidia for GTC2010.
  
In this game, the Lava effect is an example. It's annoyingly broken, and makes those parts of the games unplayable. But, disabling it altogether removes the visual cue of the dangerous areas.
+
[http://www.nvidia.com/content/GTC-2010/pdfs/2010_GTC2010.pdf http://www.nvidia.com/content/GTC-2010/pdfs/2010_GTC2010.pdf]
  
Let's experiment with it, to see if we can make something better.
 
  
 +
* Take a look at how 3D Vision works, so that we all use NVidia's terminology.
 +
*# Starts with the basics of two offset images.
 +
*# How to think about shader rendering, including coordinate space.
 +
*# What is stereo projection, separation, convergence.
 +
*# Max separation.
  
* Experiment on lava shaders.
+
 
*# Inspect and experiment on lava in PS.
+
It's worth reading the rest of this paper for other good tidbits, like why convergence is locked under 'advanced.'
*# In pixel shader, try changing each texld to invisible.
+
 
*# Those don't work, look next at the input section with interesting stereo fix.
+
 
*# See that v1 is an input location.
+
* Looking at the prime directive.
*# Experiment by changing v1 to null.
+
*# Slide 49.
*# Fix lava by killing one texture instead of the entire shader.
+
*# Eyesign is automatically applied by driver.
*# optional: Fix the lava from the VertexShader output side, where v1 is created.
+
 
 +
 
 +
[[File:Prime_directive.JPG|200px|center]]
 +
 
 +
The ''prime directive'' from that slide: <br>
 +
<code>
 +
 
 +
clipPos.x += EyeSign * Separation * ( clipPos.w – Convergence )
 +
 
 +
</code>
 +
 
 +
 
 +
* How does this translate to code: [[Canonical_Stereo_Code]]
  
  
 
----
 
----
 +
With that background, let's go back to the Lava, but fix it from the VertexShader this time.
  
Quiz: Go to the end of the demo, and figure out a way to fix the broken water.
+
In general, we can fix effects from either the VertexShader or the PixelShader, because the output of one is the input of the other.  Given a choice, we'd rather fix location problems like skybox or HUD in the VertexShader.  If we are going to disable an effect, it's better to use the PixelShader. And some complicated effects like shadows can generally only be fixed in PixelShaders.
  
* Fix the water shader at the last level.
 
*# Play through to the giant worm at the end, it's not far.
 
*# See the water has double-imaging like the water in the hall earlier.
 
*# Find the shader for the water effect.
 
*# Disable it. Note that it's really not good enough disabled.
 
*# Experiment with it to fix it to where it's acceptable.
 
*# Save a screenshot to your personal page.
 
  
 +
* Fix Lava effect using the prime directive.
 +
*# Run TheBall, and load up a Lava level.
 +
*# Shader hunt for the VertexShader this time. Note the non-obvious shader makes it all dark.
 +
*# Exit out and move the found shader to ShaderOverride.
 +
*# Edit the shader, and comment out the o3 to find the problem texture.
 +
*# Edit the shader, and add our stereo correction to o3.
 +
 +
 +
----
 +
 +
Quiz: In the middle of the demo, fix the broken oil effect using the prime directive.
 +
 +
* Fix the oil effect in the lava and bomb room.
 +
*# Play through to the lava room, it's shortly after first lava.
 +
*# See the oil has annoying double-imaging like the lava and fog did.
 +
*# Find a way to apply a stereo correction, it's similar to lava.
 +
*# Save a screenshot to your personal page.
  
* optional: Fix the entire game.
 
*# Go through at least 3 levels, and find and mark all broken effects.
 
*# Disable all broken effects.
 
*# Fix the lava effect by disabling the texture.
 
*# Save your complete list of modified shaders to your personal page.
 
  
 
<br>
 
<br>
 +
 +
&sup1;''prime directive'' is not used by NVidia, I just made that up because it's more fun than ''stereo correction''.

Latest revision as of 00:18, 3 October 2014

Summary

Now it's time to talk about how stereo 3D is created, and the math behind it.


Level of difficulty: Easy
Time required: 30 minutes

Video Walkthrough on YouTube ... Video Walkthrough direct download link

Objective

Review and understand the principles behind stereoscopy.
Learn about the prime directive formula, and how to apply it.

Quiz

Fix the oil shader in mid-game lava room.



For effects that are important for game play, the best solution is of course to fix them, not disable them. We can fix a surprisingly large number of broken effects with different techniques that we will learn in future Lessons.

Let's start by fixing an easy one in The Ball, where there is already stereo fix code to guide us. This is the Lava effect. This will be our first actual fix, as opposed to disabling them.

As a general idea, we probably would not fix this effect, because the version with one layer disabled is perfectly acceptable. It's always worth keeping an eye on how much time a given effect is worth, because there are always more games.



We'll step back into The Ball for a minute to get a first glimpse of the 3D formula I'm calling the prime directive¹.

Let's not worry about the details yet, just see how it's applied.


  • Fix Lava effect, not just disable it.
    1. Lava in The Ball is perfectly usable now, but we noticed the Unreal fix earlier.
    2. Unreal fix did not function, but we can make it work, using HelixMod inputs.
    3. Edit shader file to use HelixMod stereo texture, instead of game based one.
    4. Fixed in 3D, not just disabling a piece of it.



The best background for how 3D works is a presentation from NVidia for GTC2010.

http://www.nvidia.com/content/GTC-2010/pdfs/2010_GTC2010.pdf


  • Take a look at how 3D Vision works, so that we all use NVidia's terminology.
    1. Starts with the basics of two offset images.
    2. How to think about shader rendering, including coordinate space.
    3. What is stereo projection, separation, convergence.
    4. Max separation.


It's worth reading the rest of this paper for other good tidbits, like why convergence is locked under 'advanced.'


  • Looking at the prime directive.
    1. Slide 49.
    2. Eyesign is automatically applied by driver.


Prime directive.JPG

The prime directive from that slide:

clipPos.x += EyeSign * Separation * ( clipPos.w – Convergence )




With that background, let's go back to the Lava, but fix it from the VertexShader this time.

In general, we can fix effects from either the VertexShader or the PixelShader, because the output of one is the input of the other. Given a choice, we'd rather fix location problems like skybox or HUD in the VertexShader. If we are going to disable an effect, it's better to use the PixelShader. And some complicated effects like shadows can generally only be fixed in PixelShaders.


  • Fix Lava effect using the prime directive.
    1. Run TheBall, and load up a Lava level.
    2. Shader hunt for the VertexShader this time. Note the non-obvious shader makes it all dark.
    3. Exit out and move the found shader to ShaderOverride.
    4. Edit the shader, and comment out the o3 to find the problem texture.
    5. Edit the shader, and add our stereo correction to o3.



Quiz: In the middle of the demo, fix the broken oil effect using the prime directive.

  • Fix the oil effect in the lava and bomb room.
    1. Play through to the lava room, it's shortly after first lava.
    2. See the oil has annoying double-imaging like the lava and fog did.
    3. Find a way to apply a stereo correction, it's similar to lava.
    4. Save a screenshot to your personal page.



¹prime directive is not used by NVidia, I just made that up because it's more fun than stereo correction.