Urban Renderer
Pranav Rathod
Fall 2022
This project focuses on rendering an urban environment using WebGL, incorporating various layers like buildings, parks, water, and surface. The data for these layers is loaded from a JSON file.
Project Overview
This project showcases a 3D rendering of an urban environment using WebGL, built on layers that include buildings, parks, water, and surface. Users can interact with these layers through a control panel that allows uploading custom JSON files, changing views, and selecting projection types.
Each layer is rendered using different shader programs to achieve specific visual effects. The 'Buildings' layer, for instance, uses normals for realistic shading, while the 'Water' layer employs flat shading techniques to represent bodies of water.
The project employs Vertex Array Objects (VAOs) and buffers for efficient rendering, with each layer having its own VAO and buffer setup. This separation allows for smooth rendering and easy management of different elements within the scene.
Additionally, the application provides interactive controls such as rotation, zoom, and pan, allowing users to explore the 3D scene from different perspectives. These interactions are made possible through mouse events and JavaScript functions that update the view and projection matrices dynamically.
The rendering process is initiated upon loading a JSON file, which defines the geometry, indices, and color of each element. The JSON file format is flexible and can be extended to include additional details like textures or advanced lighting settings.
Demonstration
To see the project in action, download the sample file city.json. Upload this file using the control panel on the project page to visualize the urban environment.
In the demonstration, you can interact with the 3D model using your mouse:
- Rotate: Click and drag to rotate the view around the model.
- Zoom: Use the mouse wheel to zoom in and out.
- Pan: Hold the right mouse button and drag to pan the view.
Shadow Mapping in Urban Renderer
Pranav Rathod
Spring 2022
This project implements shadow mapping in a 3D urban environment using WebGL. The scene is constructed from a JSON file that describes the geometry and attributes of buildings, parks, water, and surface layers.
Project Overview
This project expands on previous work by incorporating shadow mapping, a technique used to add realistic lighting and shadow effects to a scene. The scene consists of four layers: buildings, water, parks, and surface, each described in a JSON file.
The shadow mapping process involves rendering the scene from the light's perspective to create a shadow map, which is then used to determine the visibility of each point on the surface. This method allows for the simulation of shadows cast by objects, adding depth and realism to the scene.
Key components of the project include:
- FBO: Manages framebuffer objects for rendering shadows.
- ShadowMapProgram: Handles the calculation and application of shadow maps, including light space transformations.
- RenderToScreenProgram: Renders 2D textures to the screen, useful for visualizing shadow maps.
- LayerProgram: Manages the shading of layers, ensuring consistency in lighting and shadow effects.
The implementation supports user interactions such as adjusting the light direction using a slider and toggling shadow map visualization. These interactions are facilitated through a control panel and utilize WebGL's capabilities to dynamically update the scene.
Demonstration
To experience the shadow mapping demonstration, download the sample file manhattan.json. Upload this file using the control panel on the project page to visualize the shadow effects.
In the demonstration, you can interact with the 3D model using your mouse:
- Rotate: Click and drag to rotate the view around the model.
- Zoom: Use the mouse wheel to zoom in and out.
- Pan: Hold the right mouse button and drag to pan the view.
- Light Direction: Use the slider to adjust the direction of the light source, altering shadow positions.
Citations
Special thanks to the following resources:
- WebGL Fundamentals by Gregg Tavares for foundational concepts.
- Three.js documentation for additional techniques and utilities.
- OpenGL Shading Language Cookbook for shader techniques.