Procedural Geometries

Pranav Rathod

Spring 2022

This project demonstrates procedural generation of 3D building geometries using WebGL. The height and size of the buildings are determined by the pixel values of an input PNG image, allowing for a visual representation of data-driven urban landscapes.

This project focuses on generating 3D building geometries based on an input PNG image, where each pixel's color determines the building's height. The procedural generation process involves the following key steps:

• Building Geometries: The function `buildGeometries` reads pixel data from the input image, using it to create buildings with varying heights and sizes. The `createBuilding` function generates the actual 3D geometry for each building.
• Normals Calculation: Normals for each vertex are computed to provide realistic shading, enhancing the visual appearance of the buildings.
• Random Noise: To add variability and realism, noise is introduced in the building heights and sizes using `Math.random`, creating a more organic urban landscape.

The project also includes optional functionality for shadow mapping, allowing for more dynamic lighting effects. This feature can be implemented by porting the shadow map functionalities from previous assignments.

To see the project in action, download one of the example PNG images like example-1.png. Upload this file using the control panel on the project page to visualize the procedural geometries.

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.

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.