This project renders a scene drawing inspiration from the Battle of Hoth from the Star Wars franchise film, The Empire Strikes Back. It includes animated objects such as multiple Walkers, two rebel ships, and a couple rebel troopers trying to flee the scene. The two rebel ships are circling a walker, as it tries to shoot blaster beams at them. The scene features various predefined shapes like cubes, spheres, and cones.
rena_kollmann-suhr_movie.mp4
- Web browser with WebGL support
- Clone or download the repository to your local machine.
- Open the
main.htmlfile in a WebGL-enabled web browser using a hosting service.
You can customize the scene by modifying the parameters in the code:
- Adjust the positions, rotations, and scales of objects to change their placements.
- Modify the colors of objects by changing the values of
vec4variables in the shader. - Modify the textures used by swapping the image names in the initTextures() function.
- Increase the snowfall density by increasing the threshold value in the snowEffect shader.
- object animation is achieved by updating the object positions and rotations based on time.
- lasers and troopers spawn at random based on a random number generator
- snow animation is computed based on a noise equation and time
| Element Description | Completed? |
|---|---|
| Real-time animation synchronization | yes |
| Hierachical Object | yes |
| Two textures | yes |
| ADS computed in frag shader rather than vertex | yes |
| Blinn Phong shading | yes |
| New customized shader | yes |
| 360 camera fly around | yes |
| Frame rate display in console | yes |
| Video of scene with cover image | yes |
##Project Components
-
Hierarchical Object The project includes a hierarchical Walker. The object is designed with multiple levels, including a neck, a head, and guns, that all move according to the hierarchical animation.
-
Texture Mapping Two distinct textures have been applied to objects in the scene. The first is the ground texture made to resemble the snowy/rocky terrain of planet Hoth. The second is a mechanical metal texture featured on the walkers and the rebel ships. These textures are not merely placed on objects; rather, they are mapped in a meaningful way to enhance the visual appeal of the scene.
-
Shader Modifications 3.1 Fragment Shader Conversion The ADS shader from the assignment base code has been transformed from a vertex shader to a fragment shader. In this new configuration, the lighting equation is computed per fragment, resulting in accurate shading and highlighting on the surfaces. This change significantly enhances the realism of the scene.
3.2 Phong to Blinn-Phong Conversion Within the new fragment shader, the Phong lighting model has been upgraded to the Blinn-Phong lighting model. This modification improves the reflection and specular highlights on the objects, providing a more realistic portrayal of materials and lighting interactions.
3.3 Custom Shader Effect The snowShaderEffect is a custom shader designed to create a static snow effect in the 3D graphics scene. This shader operates by turning random pixels white based on a noise function, simulating the appearance of snowflakes.
In the fragment shader main() function, the adsColor is first computed, then main computes the snowEffect colour by calling snowShaderEffect.
In the new shader function, a threshold float is defined. Threshold determines the density of white pixels. Lower values result in more white pixels, creating a denser snowfall effect.
The speed variable scales the time variable to control the snow fall speed.
Next, a noiseCoord vector is computed by using the screen space coordinates (gl_FragCoord.xy) and the time variable which was passed from main.js code.
Then a noise value is calculated. If the noise value is below the set threshold, then the colour of the vec4 returned will be white and the global toggle value for the snow shader will be set to 1.
if the noise value is above or equal to the threshold, the toggle for the shader will not be set to 1.
The vec4 colour will be returned.
Now in main(), if the global toggleShader is set to 1, the the colour of the fragment will be the adsColor * snowEffect colour (which will be white is the toggle has been set). Otherwise, the fragment colour will simple be the adsColor.
-
Camera Movement A 360-degree camera fly-around has been implemented using the rotate and translate functions applied to the cameraMatrix. The camera position is then extracted from the cameraMatrix and is then passed into the lookAt function. This allows the camera smoothly orbits around a focal point.
-
Real-Time Rendering The project ensures real-time rendering, where the simulation runs smoothly on fast machines to guarantee a seamless and responsive user experience.
-
Frame Rate Display The frame rate of the program is displayed in the console once every 2 seconds. It is also displayed on the web page main.html itself.