Skip to content

Latest commit

 

History

History
103 lines (74 loc) · 3.99 KB

README.md

File metadata and controls

103 lines (74 loc) · 3.99 KB

WebGL Shaders (Simple Waves and Globe Rendering)

Fall 2013

Click any image to see a live demo.

Click to See Live Demo
Youtube Video of Globe Rendering

NOTE:

This project requires any graphics card with support for a modern OpenGL pipeline. Any AMD, NVIDIA, or Intel card from the past few years should work fine, and every machine in the SIG Lab and Moore 100 is capable of running this project.

This project also requires a WebGL capable browser. The project is known to have issues with Chrome on windows, but Firefox seems to run it fine.


Wave Rendering

This section is just a simple demo of JS/WebGL Interaction and shader implementation. Three different waveforms can be animated:

Sine Wave

Click to See Live Demo
  • Open vert_wave.html to see this animation.
  • The 2D sine wave is generated by varying only the height of each vertex in the grid.

Simplex Wave

Click to See Live Demo
  • Open simplex_wave.html to see this animation.

Water Surface Wave

Click to See Live Demo
  • Open water_wave.html to see this animation.
  • Unlike the previous waves, this wave moves verticies in all directions.
  • Each vertex is moved uniformly about a circle in some vertical plane
    • This plane can be set in the VS by changing waveDir
  • The phase of each point is determined by their distance from the origin in the waveDir direction, resulting in linear wavefronts.
  • This simulates in a very simple way how particles move in the surface of ocean waves.

Globe Rendering

Globe Renderer

  • left-click and drag moves the camera around
  • right-click and drag moves the camera in and out

Features: *Soft twilight border

![Twilight](resources/globe_twilight.png)
  • Bump mapped terrain
![No Bump Map](resources/globe_nobumpmap.PNG) ![With Bump Map](resources/globe_bumpmap.png)
  • Night-time lights on the dark side of the globe
  • Sunrise-based rim lighting to simulate atmosphere
    • Rather than drawing uniform rim lighting, I only shade the sunward side. This leads to cool sunrise effects:
![Sunrise](resources/globe_sunrise.PNG)
  • Specular mapping (only water is specularly reflective)
  • Moving clouds with procedurally generated shadows.
![No Shadows](resources/globe_noshadow.PNG) ![With Shadows](resources/globe_shadows.PNG)