WebGL Scene

Description

This is a 3D scene built with WebGL that features interactive elements, a dynamic day-night cycle, and toon-style rendering. The project focuses on creating an engaging visual environment with smooth user interactions and natural lighting transitions.

The scene includes a low-poly landscape with trees and a house, all loaded through a custom OBJ importer I built from scratch. Everything is rendered using a toon shader that gives the scene a stylized, cartoon-like appearance. The lighting system uses both ambient and directional lighting, with an animated sun and moon that create smooth day-to-night transitions.

Users can interact with the scene through camera controls that allow rotation and zooming, both smoothed with easing functions. The interface includes sliders to control the day-night cycle speed and adjust the distance of celestial objects.

Reflection

Building this project taught me a lot about WebGL and real-time rendering. Creating the OBJ importer was particularly educational—it required understanding file parsing and vertex data management at a low level, which gave me better insight into how 3D models work.

The day-night lighting system was probably the most challenging part. Getting smooth transitions between different lighting conditions meant carefully interpolating colors and light intensities over time. Working on the toon shader was my introduction to shader programming, where I learned about edge detection and color quantization to create that distinctive non-photorealistic look.

Performance optimization was another important lesson. WebGL demands efficient memory usage, so I had to ensure that transformations, shader operations, and texture handling would run smoothly across different devices.

This project significantly improved my understanding of computer graphics and 3D environments. It's given me a solid foundation for exploring more advanced rendering techniques in future work.