No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 14 commits ahead of CIS700-Procedural-Graphics:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
src
.gitignore
README.md
color_2_14_17.pdf
index.html
package.json
webpack.config.js

README.md

Project 5: Shaders

View the Project

Click Here

The Project

The Shaders I Implemented and resources if used (other than Rachel's slides)

Post-Processing Effects:
[15] Iridescence
Color the rgb values based on the dot product between the normal and the camera's pov. Done through cosine weighting where the r,g,b values are represented with a cosine function but their each offset differently so that when we sample with our t value [indicated by the dot product] we get the output of all rgb components for that dot product.
[25] Edge Detection with Sobel Filtering : http://setosa.io/ev/image-kernels/
Doing an averaging of color values at pixel locations on and around each pixel. This is done so with an x direction matrix and a y direction matrix do account for different gradients possible in each direction. These gradients act as the weighting for how much a particular adjacent pixel affects the current pixel being colored. When summing up the final color value, calculate it based on sqrt(xval^2 + yval^2) to yield the final rgb value for that position.
[15] Vignette : https://photographylife.com/what-is-vignetting
Create a oval blackened area around the screen by checking the distance between the center field of view and where the pixel actually is and using that distance as a weighting of how dark the pixel should be. the farther away, the darker.
[15] Fish-eye bulge: http://gamedev.stackexchange.com/questions/20626/how-do-i-create-a-wide-angle-fisheye-lens-with-hlsl
Image magnification increased the closer to the center of the screen. Computed based on a combination of using the "aperture" of our camera and the distance to the center of the camera's point of view.
[?] Inverse
Each color is it's own rgb complement. Just did 1-colorComponent for each component to get opposite hue.
[?] Swap
Just swapped the r,g,b values with one another.
[?] Chromatic Aberration
From the pixel location, sampled the rgb values of the pixel shifted in a particular uv direction doing different sampling for the r,g,b components. When the offsetted images come together, you get an overlaying effect of three mario images where it looks like each is a specific color component.
Note: for the shader labeled CoolEffect1 - once it's turned on zoom in a bit and rotate the screen (click and drag) and you'll see the effect.

Images from the Project

Iridescence
Iridescence

Inverse
Inverse

Chromatic Aberration
Chromatic Aberration

Grayscale
Grayscale

Sobel Edge Detection
Sobel Edge Detection

Swap
Swap

Vignette
Vignette

Some combinations

Iridescence with Sobel Edge Detection
Iridescence with Sobel Edge Detection

Iridescence with Swap
Iridescence with Swap