Built as a project for the Computer graphics course at Stuttgart Media University.
Description
This project is a 3D scene built with WebGL, featuring interactive elements, a dynamic day-night cycle, and a toon shader. The main focus was to create a visually engaging environment with smooth user interactions and realistic lighting transitions.
The scene consists of multiple 3D objects, including a low-poly landscape with trees and a house, all loaded via a custom-built OBJ importer. These objects are rendered with a toon shader that enhances the stylized, cartoonish look of the scene. The lighting system includes ambient and directional lights, with a smoothly animated sun and moon that transition between day and night.
Users can interact with the scene through a simple camera system that allows rotation (within defined boundaries) and zooming, both of which are smoothened with an ease-in-out effect. Additionally, the UI provides sliders to adjust the speed of the day-night and distance of the planets to the scene.
Reflection
Developing this project was an exciting challenge, as it deepened my understanding of WebGL and real-time rendering techniques. Implementing the OBJ importer required working with low-level file parsing and vertex management, which improved my understanding of 3D model handling.
The lighting system, particularly the day-night cycle, was another crucial learning experience. Managing directional light changes while maintaining a natural transition between different times of the day required careful interpolation of colors and light intensities. The toon shading effect also introduced me to shader programming, where I experimented with edge detection and color quantization to achieve a distinct, non-photorealistic style.
Another key takeaway was optimizing performance for smooth rendering. WebGL requires efficient memory management, and ensuring that object transformations, shader operations, and texture mappings performed well on different devices was an important part of the development process.
Overall, this project was a valuable experience that strengthened my knowledge of computer graphics and interactive 3D environments. I’m excited to explore more advanced techniques in future projects.