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
59 changes: 48 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,42 @@

# Project 5: Shaders

## Stauffer work

### Irridescence shader

I implemented this by defining a color range over which to vary with the angle between the eye and each fragment's normal.

Options:
- irrStartCol is the color applied for any angle with dot product >= the irrThreshold value.
- irrEndCol is the end color for dot product of 1.0 (direct view of fragment). The colors are lerp'ed in hsv space so you get a nice variation along hue. Setting a lower saturation for the starting value gives a nicer fade-in of the color.
- I would have like to implement a low/high thresholding rather than just low/1.0, since it seems irridescence in nature can sometimes (usually?) rely on more oblique viewing angles, and direct view angles may not necessarily irridesce (is that a word?).
- The irrRampExp is the exponent for ramping in the effect starting at irrThreshold, so you can soften or harden the starting colors
- The irrWhiteOnly option applies irridescence only to very white fragments, so you can get the regular textured clothes with irridescent gloves and eye whites (not perfect), if the 'useTexture' option is enabled.

### Lit Sphere

I figured you wanted just the implementation of taking a lit sphere image and using it to shade the object, rather than the full implementation of the referenced paper which worked on creating the sphere mappings from artwork.

Different simple shere files can be loaded, I just made these in photoshop. I didn't have time to get the sphere file displayed in the render.

### Fisheye post shader

Simple fisheye effect. You can change the amount of the effect with the 'fisheye level' option.
I'd like to know how to smooth the result, but maybe it's not possible without doing an second post-render pass for smoothing?

### Hatching post shader

I did this as a post shader to easily get uv's for the whole screen, but this means the hatching is wed to the screen position rather than the object. Maybe I could use the projected position in regular fragment shader because using the texture uv's gives odd behavior based on the objects texture mapping.
But I think it look ok for quick work.

There are two hatching patters, and each has these options:
- spatial frequency in x & y, to create diagonal lines. For the second hatch, the phase of the y component's contribution is reversed to get the diagonal in the other direction.
- 'scale' is overall scale of the hatching pattern relative to the other
- 'noise' is a simple noise factor that offset phase

# ---------------

## Project Instructions

Implement at least 75 points worth of shaders from the following list. We reserve the right to grant only partial credit for shaders that do not meet our standards, as well as extra credit for shaders that we find to be particularly impressive.
Expand All @@ -16,9 +52,9 @@ Examples: [https://cis700-procedural-graphics.github.io/Project5-Shaders/](https
### 15 points each: Instagram-like filters

- Tone mapping:
- Linear (+5 points)
- Reinhard (+5 points)
- Filmic (+5 points)
- Linear (5 points)
- Reinhard (5 points)
- Filmic (5 points)
- Gaussian blur (no double counting with Bloom)
- Iridescence
- Pointilism
Expand All @@ -29,18 +65,19 @@ Examples: [https://cis700-procedural-graphics.github.io/Project5-Shaders/](https
- Bloom
- Noise Warp
- Hatching
- Edge detection with Sobel filtering
- Lit Sphere ([paper](http://www.ppsloan.org/publications/LitSphere.pdf))
- Uncharted 2 customizable filmic curve, following John Hable’s presetantion.
- Without Linear, Reinhard, filmic (10 points)
- With all of linear, Reinhard, filmic (10 points)
- Customizable via GUI: (5 points total)
- Controlling Exposure
- Side by side comparison between linear, Reinhard, filmic, and Uncharted2 .

### 37.5 points each:
- K-means color compression (unless you are extremely clever, the k-means clusterer has to be CPU side)
- Dithering
- Edge detection with Sobel filtering
- Uncharted 2 customizable filmic curve, following John Hable’s presetantion.
- Without Linear, Reinhard, filmic (+10 points)
- With all of linear, Reinhard, filmic (+10 points)
- Customizable via GUI (+17.5 points)
- Controlling Exposure (4 points)
- Side by side comparison between linear, Reinhard, filmic, and Uncharted2 (13.5 points).


### 5 points - Interactivity
Implement a dropdown GUI to select different shader effects from your list.
Expand Down Expand Up @@ -120,4 +157,4 @@ BUT, if you want to modify the uniforms, you need to do so like so: `GrayscaleSh
1. Create a `gh-pages` branch on GitHub
2. Do `npm run build`
3. Commit and add all your changes.
4. Do `npm run deploy`
4. Do `npm run deploy`
Binary file added build/assets/wahoo-1bfe66.bmp
Binary file not shown.
Loading