Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Nathaniel Korzekwa] HW02 Part 1 #15

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

[Nathaniel Korzekwa] HW02 Part 1 #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4ba1f03
Basic piano
ciscprocess Oct 6, 2021
ac2b5bf
Barely-passable first iteration.
ciscprocess Oct 7, 2021
e2bd16d
Pull parent project
ciscprocess Oct 7, 2021
d9d3699
Add README
ciscprocess Oct 7, 2021
cb47034
Add live demo link
ciscprocess Oct 7, 2021
e0e7c79
Fix README link
ciscprocess Oct 7, 2021
1e24b4b
Have to add dist files :(
ciscprocess Oct 7, 2021
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
81 changes: 81 additions & 0 deletions INSTRUCTIONS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
# CIS 566 Homework 2: Implicit Surfaces

## Objective
- Gain experience with signed distance functions
- Experiment with animation curves

## Base Code

Please feel free to use this code as a base (https://www.shadertoy.com/view/fsdXzM)

The code we have provided for this assignment features the following:
- A square that spans the range [-1, 1] in X and Y that is rendered with a
shader that does not apply a projection matrix to it, thus rendering it as the
entirety of your screen
- TypeScript code just like the code in homework 1 to set up a WebGL framework
- Code that passes certain camera attributes (listed in the next section),
the screen dimensions, and a time counter to the shader program.

## Assignment Requirements
- __(10 points)__ Modify the provided `flat-frag.glsl` to cast rays from a
virtual camera. We have set up uniform variables in your shader that take in
the eye position, reference point position, and up vector of the `Camera` in
the provided TypeScript code, along with a uniform that stores the screen width
and height. Using these uniform variables, and only these uniform variables,
you must write a function that uses the NDC coordinates of the current fragment
(i.e. its fs_Pos value) and projects a ray from that pixel. Refer to the [slides
on ray casting](https://docs.google.com/presentation/d/e/2PACX-1vSN5ntJISgdOXOSNyoHimSVKblnPnL-Nywd6aRPI-XPucX9CeqzIEGTjFTwvmjYUgCglTqgvyP1CpxZ/pub?start=false&loop=false&delayms=60000&slide=id.g27215b64c6_0_107)
from CIS 560 for reference on how to cast a ray without an explicit
view-projection matrix. You'll have to compute your camera's Right vector based
on the provided Up vector, Eye point, and Ref point. You can test your ray
casting function by converting your ray directions to colors using the formula
`color = 0.5 * (dir + vec3(1.0, 1.0, 1.0))`. If your screen looks like the
following image, your rays are being cast correctly:
![](rayDir.png)
- __(70 points)__ Create a scene using raymarched signed distance functions.
The subject of your scene should be based on some reference image, such as a
shot from a movie or a piece of artwork. Your scene should incorporate the
following elements:
- The SDF combination operation Smooth Blend.
- Basic Lambertian reflection using a hard-coded light source and SDF surface normals.
- Animation of at least one element of the scene, with at least two Toolbox Functions
used to control the animation(s).
- Hard-edged shadows cast by shapes in the scene onto one another using a shadow-feeler ray.

For the next assignment you will build upon this scene with procedural textures and more
advanced lighting and reflection models, so don't worry if your scene looks a bit drab
given the requirements listed above.

- __(10 points)__ Following the specifications listed
[here](https://github.com/pjcozzi/Articles/blob/master/CIS565/GitHubRepo/README.md),
create your own README.md, renaming this file to INSTRUCTIONS.md. Don't worry
about discussing runtime optimization for this project. Make sure your
README contains the following information:
- Your name and PennKey
- Citation of any external resources you found helpful when implementing this
assignment.
- A link to your live github.io demo (refer to the pinned Piazza post on
how to make a live demo through github.io)
- An explanation of the techniques you used to model and animate your scene.

## Useful Links
- [IQ's Article on SDFs](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
- [IQ's Article on Smooth Blending](http://www.iquilezles.org/www/articles/smin/smin.htm)
- [IQ's Article on Useful Functions](http://www.iquilezles.org/www/articles/functions/functions.htm)
- [Breakdown of Rendering an SDF Scene](http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf)


## Submission
Commit and push to Github, then submit a link to your commit on Canvas. Remember
to make your own README!

## Inspiration
- [Alien Corridor](https://www.shadertoy.com/view/4slyRs)
- [The Evolution of Motion](https://www.shadertoy.com/view/XlfGzH)
- [Fractal Land](https://www.shadertoy.com/view/XsBXWt)
- [Voxel Edges](https://www.shadertoy.com/view/4dfGzs)
- [Snail](https://www.shadertoy.com/view/ld3Gz2)
- [Cubescape](https://www.shadertoy.com/view/Msl3Rr)
- [Journey Tribute](https://www.shadertoy.com/view/ldlcRf)
- [Stormy Landscape](https://www.shadertoy.com/view/4ts3z2)
- [Generators](https://www.shadertoy.com/view/Xtf3Rn)
105 changes: 36 additions & 69 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,48 @@
# CIS 566 Homework 2: Implicit Surfaces
Author: Nathaniel Korzekwa

## Objective
- Gain experience with signed distance functions
- Experiment with animation curves
PennKey: korzekwa

## Base Code
[Live Demo](https://ciscprocess.github.io/hw02-raymarching-sdfs/)

Please feel free to use this code as a base (https://www.shadertoy.com/view/fsdXzM)
# Overview and Goal
This project currently lays the technical foundation for what I hope to be a
musically-animated piano, ideally with some somewhat interesting decorations in
the scene.

The code we have provided for this assignment features the following:
- A square that spans the range [-1, 1] in X and Y that is rendered with a
shader that does not apply a projection matrix to it, thus rendering it as the
entirety of your screen
- TypeScript code just like the code in homework 1 to set up a WebGL framework
- Code that passes certain camera attributes (listed in the next section),
the screen dimensions, and a time counter to the shader program.
I have a soft-spot for old-school MIDI-style or other "low-quality" synthetic
music, and my hope is to be able to write a program/shader that can render the
keystrokes that match the music being played. Ideally, this could include procdural
"music" rendered by some sort of noise function, but that may not be realistic.

## Assignment Requirements
- __(10 points)__ Modify the provided `flat-frag.glsl` to cast rays from a
virtual camera. We have set up uniform variables in your shader that take in
the eye position, reference point position, and up vector of the `Camera` in
the provided TypeScript code, along with a uniform that stores the screen width
and height. Using these uniform variables, and only these uniform variables,
you must write a function that uses the NDC coordinates of the current fragment
(i.e. its fs_Pos value) and projects a ray from that pixel. Refer to the [slides
on ray casting](https://docs.google.com/presentation/d/e/2PACX-1vSN5ntJISgdOXOSNyoHimSVKblnPnL-Nywd6aRPI-XPucX9CeqzIEGTjFTwvmjYUgCglTqgvyP1CpxZ/pub?start=false&loop=false&delayms=60000&slide=id.g27215b64c6_0_107)
from CIS 560 for reference on how to cast a ray without an explicit
view-projection matrix. You'll have to compute your camera's Right vector based
on the provided Up vector, Eye point, and Ref point. You can test your ray
casting function by converting your ray directions to colors using the formula
`color = 0.5 * (dir + vec3(1.0, 1.0, 1.0))`. If your screen looks like the
following image, your rays are being cast correctly:
![](rayDir.png)
- __(70 points)__ Create a scene using raymarched signed distance functions.
The subject of your scene should be based on some reference image, such as a
shot from a movie or a piece of artwork. Your scene should incorporate the
following elements:
- The SDF combination operation Smooth Blend.
- Basic Lambertian reflection using a hard-coded light source and SDF surface normals.
- Animation of at least one element of the scene, with at least two Toolbox Functions
used to control the animation(s).
- Hard-edged shadows cast by shapes in the scene onto one another using a shadow-feeler ray.
# Engine
Currently, the raymarching engine closely follows the template given in class:
rays are cast from the eye through voxels in the screen, and points are generated
based on the distance to the closest object along the ray until a collision is
found.

For the next assignment you will build upon this scene with procedural textures and more
advanced lighting and reflection models, so don't worry if your scene looks a bit drab
given the requirements listed above.
I did add a bounding box around the most complicated part of the scene (the keys),
to limit the amount of rays that needed to compute that part of the SDF, as well
as a somewhat trivial "max distance" ray limiter.

- __(10 points)__ Following the specifications listed
[here](https://github.com/pjcozzi/Articles/blob/master/CIS565/GitHubRepo/README.md),
create your own README.md, renaming this file to INSTRUCTIONS.md. Don't worry
about discussing runtime optimization for this project. Make sure your
README contains the following information:
- Your name and PennKey
- Citation of any external resources you found helpful when implementing this
assignment.
- A link to your live github.io demo (refer to the pinned Piazza post on
how to make a live demo through github.io)
- An explanation of the techniques you used to model and animate your scene.
Since I have old hardware and the piano keys add a huge drain, I actually downsampled
the resolution and may need to keep it that way (or add it as a setting perhaps),
since timing will be so critical in this project.

## Useful Links
- [IQ's Article on SDFs](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
- [IQ's Article on Smooth Blending](http://www.iquilezles.org/www/articles/smin/smin.htm)
- [IQ's Article on Useful Functions](http://www.iquilezles.org/www/articles/functions/functions.htm)
- [Breakdown of Rendering an SDF Scene](http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf)
# Status
<p align="center">
<img src="https://user-images.githubusercontent.com/6472567/136318003-9e562fdd-c56f-467c-92ca-960da331846a.png">
</p>
<p align="center">Current Rendering</p>

Currently the scene is pretty drab. It's not really my best work, but the
basics are there to be improved upon. The 'D' keys are animated according to
exponential impulse and cosine over time, and parts of the piano are smoothed
together. I did add basic coloring since the white was painful on my eyes.

## Submission
Commit and push to Github, then submit a link to your commit on Canvas. Remember
to make your own README!
I used some smooth union and smooth subtraction operations to make things look
a little nicer than plain min/max operations.

## Inspiration
- [Alien Corridor](https://www.shadertoy.com/view/4slyRs)
- [The Evolution of Motion](https://www.shadertoy.com/view/XlfGzH)
- [Fractal Land](https://www.shadertoy.com/view/XsBXWt)
- [Voxel Edges](https://www.shadertoy.com/view/4dfGzs)
- [Snail](https://www.shadertoy.com/view/ld3Gz2)
- [Cubescape](https://www.shadertoy.com/view/Msl3Rr)
- [Journey Tribute](https://www.shadertoy.com/view/ldlcRf)
- [Stormy Landscape](https://www.shadertoy.com/view/4ts3z2)
- [Generators](https://www.shadertoy.com/view/Xtf3Rn)
But there are still many details off: No pedals, no bench, no music, the number
of keys is wrong, and I'm sure there are some other piano details that will
throw red flags. I hope to adress these later in the project.
Loading