Dynamic Day-Night Cycle in 3D Scene
Obed Kobina Nsiah, Jan Ilves, Fedir Kyrychenko
Project Description
This project delivers an immersive experience of a 3D day-night cycle. Using the Three.js library, the scene simulates real-world twenty-four-hour time transitions by adjusting the environment's light, colors, and shadows based on the user’s local time. It's inspired by the Dynamic Wallpaper on MacOS, which shows a visually engaging change in atmospheric and light states in the morning, afternoon, evening, and night.
We have chosen to emulate the charm and simplicity of the Minecraft aesthetic and use voxel models for a playful, blocky, low-poly look. This project is a voxel engine created using the Three.js library. The main idea is to render procedurally generated worlds with camera movement in Fly Controls style and realistic global illumination effects using SAO (Screen-space Ambient Occlusion) and FXAA (Fast Approximate Anti-Aliasing). The placement of objects, such as light sources and clouds, is dynamically configured, and graphics and performance settings are loaded from an external JSON file. Other voxel models in the scene are created using Magicavoxel.
Initial progress (12.11):
- Chunks generation
- Multi-mesh chunks render
- Clouds generation (alpha version)
- Basic direct and ambient lightings
- SSAO, FXAA, anisotropic post-processing
- Mip-map rendering
- Bumping maps for each block
Plans:
- More detailed chunk generation function (adding water, sand, grass, and trees)
- Dynamic chunk loading algorithm with some radius and fog (like in Minecraft).
- Creating 3d models for small objects in MagicaVoxel and adding them.
References
Below are some references that we plan to use for our scene
Inspiration tree from Minecraft
Staxel 3d voxel grass
Sample Scene Inspiration from Magicavoxel page
User Guide
The instructions below allow you to run the project on your local machine.
- Clone the project from the Github repository.
- Open your preferred IDE and load the project folder you cloned from GitHub.
- The project directory will include an index.html file and other necessary JavaScript files.
- Use the IDE's built-in server feature to run the project.
- For example, in Visual Studio Code, you can right-click on index.html and select "Open with Live Server," which requires the Live Server extension.
- A browser tab opens automatically to render the project.
- You may use the direction keys on your keyboard to navigate the scene.