CSE 5542 - Realtime Rendering

Homework #1 Implicit functions to create backgrounds

Due Tuesday, August 29, 2017

We will talk a lot about coordinate systems and frames. For now, know that OpenGL Normalized Device Coordinates range from (-1,-1,-1) -> (1,1,1). Anything outside of this space is not visible on the screen (fragments are outside the render contect). Most of what we will do with transformations and matrices will be to move and scale them into this space.

The purpose of this homework is to play with writing some kernels for the vertex and fragment shaders. Suggested shaders include:

• Linear gradient from the bottom of the screen to the top.
• Radial gradient from a corner or the center of the screen.
• A brick pattern that is then desaturated.
• A checkerboard pattern that is desaturated (white with light gray; black with dark gray; or scarlet with gray - use the official OSU colors).
• A grid - engineering paper like
• Writing paper
• Grid of filled circles.
• Yin-Yang pattern
• Two-color above or below f(y) = sin(a*x+b)-c*x

Pleasing Colors: Apply some artistic talent to your backgrounds. Here are some general rules on color usage:

1. Never use pure saturated colors (R=255, G=0, B=0, etc.). For darker colors use lower values. For desaturated colors never have a component equal to zero.
2. Contrasting colors are across the color wheel (blue->yellow, etc.).
3. For backgrounds, less is more, so if the colors are very very close to each other, but provide a subtle pattern or gradient, that is good.

Created with only arithmetic and if statements (about 40 lines).

What the initial fragment shader should look like (to some degree).

Other ideas: Search for Background paper in Google.

Tasks

Below are a list of files to get you started. These provide a complete WebGL implementation to draw a square.

1. Download the following.
   1. webgl
   2. GetWebGLCanvas
2. Load the GetWebGLCanvas.html in your favorite web browser that supports WebGL.
3. Modify the fragment shader to create your own backdrop.
4. Repeat to generate 7 really cool backdrops.
5. Create either a PDF document or a single HTML (non-WebGL) page with your results. Include:
   1. Your Name and a header including The Ohio State University, CSE 5542 and the date.
   2. Some explanation of what you were trying to accomplish for each of your 7 backdrops.
   3. The Fragment shader or snippet (embedded, not linked to) used to accomplish each backdrop. You can use something like http://hilite.me/ to highlight the code (select GLSL). Note, for Word, copy the Preview:
   4. A window screen shot of each of the 7 results.
   5. A conclusion describing what machine, graphics card, etc. was used and any issues encountered.
   6. Also, e-mail your best result at a resolution of 600x400 so I can put them here and share the top 10 with the class.
6. The Vertex Shader does not need to be changed for this assignment. If you found something interesting and changed it, include that in your report.

Results

2017 Autumn