Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions INSTRUCTION.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# lab02-debugging
# Setup

Create a [Shadertoy account](https://www.shadertoy.com/). Either fork this shadertoy, or create a new shadertoy and copy the code from the [Debugging Puzzle](https://www.shadertoy.com/view/flGfRc).

Let's practice debugging! We have a broken shader. It should produce output that looks like this:
[Unbelievably beautiful shader](https://user-images.githubusercontent.com/1758825/200729570-8e10a37a-345d-4aff-8eff-6baf54a32a40.webm)

It don't do that. Correct THREE of the FIVE bugs that are messing up the output. You are STRONGLY ENCOURAGED to work with a partner and pair program to force you to talk about your debugging thought process out loud.

Extra credit if you can find all FIVE bugs.

# Submission
- Create a pull request to this repository
- In the README, include the names of both your team members
- In the README, create a link to your shader toy solution with the bugs corrected
- In the README, describe each bug you found and include a sentence about HOW you found it.
- Make sure all three of your shadertoys are set to UNLISTED or PUBLIC (so we can see them!)
32 changes: 20 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
# lab02-debugging

# Setup
Team: Marcus Hedlund, Chris Yuen

Create a [Shadertoy account](https://www.shadertoy.com/). Either fork this shadertoy, or create a new shadertoy and copy the code from the [Debugging Puzzle](https://www.shadertoy.com/view/flGfRc).
For this lab we started by forking a broken shader and then practiced debugging to get it looking more like a reference gif we had of what the final shader would look like ([Starting Code](https://www.shadertoy.com/view/flGfRc), [Final Gif](https://user-images.githubusercontent.com/1758825/200729570-8e10a37a-345d-4aff-8eff-6baf54a32a40.webm)).

Let's practice debugging! We have a broken shader. It should produce output that looks like this:
[Unbelievably beautiful shader](https://user-images.githubusercontent.com/1758825/200729570-8e10a37a-345d-4aff-8eff-6baf54a32a40.webm)
Here is a link to our debugged shader and below are the steps we took:
[Final Corrected Shadertoy](https://www.shadertoy.com/view/tclfDX)

It don't do that. Correct THREE of the FIVE bugs that are messing up the output. You are STRONGLY ENCOURAGED to work with a partner and pair program to force you to talk about your debugging thought process out loud.
To start the shader only produced a black screen.
![image1](images/Image1.png)

Extra credit if you can find all FIVE bugs.
The first bug we solved was in the main image function changing vec uv to vec2 uv2. This was pretty simple to locate because the compiler was already highlighting this issue with the code. That left us with the following shader output:
![image2](images/Image2.png)

# Submission
- Create a pull request to this repository
- In the README, include the names of both your team members
- In the README, create a link to your shader toy solution with the bugs corrected
- In the README, describe each bug you found and include a sentence about HOW you found it.
- Make sure all three of your shadertoys are set to UNLISTED or PUBLIC (so we can see them!)
From here in the same main image function we noticed that the line we had just edited assigned a value to uv2, but this was never used. Later, the function used the old uv when raycasting so we changed this from raycast(uv, dir, eye, ref) to raycast(uv2, dir, eye, ref) and improved the shader output:
![image3](images/Image3.png)

Finally we saw that the current output looked like it was stretched horizontally so we explored functions where we were adjusting our pixel scaling or resolution somehow and found in the raycast function that it was setting H *= len * iResolution.x / iResolution.x which we fixed to be H *= len * iResolution.x / iResolution.y so it properly scaled the resolution.

![image4](images/Image4.png)
From there our shader notably did not have reflections on the spheres or floor. This lead us to look for issues in the code under the "Specular reflection applied to all surfaces" comment, where we found that the reflect function was taking in reflect(eye, nor) instead of reflect(dir, nor).

![image5](images/Image5.png)
After this adjustment we spent some time comparing the images and found that the floor in the reference extended further out into the horizon than ours did. This likely meant that we weren't casting the rays far enough to detect those intersections and in the march function in the code we adjusted our for loop from going until i < 64 to instead go until i < 256 which got us to our final output:

![image6](images/Image6.png)
Binary file added images/Image1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Image2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Image3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Image4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Image5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/Image6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.