An interactive 3D visualization of the San Francisco Bay Area terrain using WebGL and Three.js. This web application transforms elevation data into an immersive, customizable 3D experience with real-time controls for visualization parameters, lighting, and rendering styles.

• Multiple rendering modes: Voxels (3D blocks), Mesh (smooth surface), and Wireframe
• Adjustable vertical exaggeration to emphasize topographical features
• Quality settings from Low to Extreme for performance optimization
• Gapless voxel rendering option for seamless terrain blocks

• Multiple color schemes: HeyHo, Grayscale, Heatmap, Terrain, Ocean, Rainbow, Sunset
• Sea level visualization: Scheme-based, solid color, or hidden
• Adjustable opacity for water bodies
• Background options: Gradient, solid color, or transparent sky view

• Ambient lighting with adjustable intensity and color
• Directional lighting (sun) with angle and rotation controls
• Hemisphere lighting for realistic sky/ground illumination
• Shadow toggle for enhanced depth perception
• Lighting presets: Noon, Sunset, Night, and Default

• Save as PNG with optional transparent background
• Copy image to clipboard for quick sharing
• Configuration export/import as JSON for saving and sharing exact views
• Camera position tracking with real-time coordinate display

Mouse:

• Left drag: Rotate view
• Right drag: Pan camera
• Scroll: Zoom in/out

Keyboard:

• Arrow keys: Pan map
• Shift + Arrows: Rotate view
• Page Up/Down: Zoom in/out
• U: Toggle UI on/off

1. Clone the repository:

git clone https://github.com/mlemos/3dbay.git
cd 3dbay

2. Open the application:

   • Simply open index.html in a modern web browser
   • The application automatically loads the included demo data (cropped_bayarea.tif)
   • No build process or server required (though a local server is recommended for better performance)

3. Using a local server (recommended):

# Using Python 3
python -m http.server 8000

# Using Node.js (if http-server is installed)
npx http-server

# Then navigate to http://localhost:8000

The repository includes two GeoTIFF elevation files for demonstration:

• Source: Stanford Earthworks - San Francisco Bay Area, California, USA, 10-Meter Resolution, Shaded Relief
• Note: This is the original Stanford data file, renamed from its original identifier to bayarea.tif for clarity
• Coverage: Full San Francisco Bay Area region
• Resolution: 10-meter Digital Elevation Model (DEM)
• Dimensions: Approximately 7200 x 5594 pixels
• Projection: UTM Zone 10N (EPSG:32610)
• Extent: From Pacific coastline to Central Valley edges

• Source: Generated from bayarea.tif using the included crop.html tool
• Coverage: Focused view of central Bay Area (San Francisco, Oakland, San Jose triangle)
• Purpose: We created this cropped version to focus on our area of interest - the urban core and most dramatic topographical features
• Benefits: Better performance while showcasing the Golden Gate, San Francisco Peninsula, East Bay hills, and South Bay
• Process: Used the visual cropping tool to select and extract the most interesting portion of the full dataset

These files are included in the repository for immediate use. The application automatically loads cropped_bayarea.tif on startup, allowing you to explore the visualization without needing to prepare your own data.

The project includes crop.html for preparing your elevation data:

1. Open crop.html in your browser
2. Load a GeoTIFF elevation file
3. Use the visual cropping tool to select your area of interest
4. Export the cropped region for use in the main visualization

• Format: GeoTIFF (.tif)
• Type: Digital Elevation Model (DEM) data
• Projection: Any standard projection (automatically parsed from GeoTIFF metadata)

1. Click "Copy Config" to save your current view settings to clipboard
2. The configuration includes camera position, all control settings, and lighting
3. Click "Paste Config" to restore a previously saved configuration

{
  "camera": {
    "position": { "x": -541.2, "y": 385.2, "z": 62.4 },
    "target": { "x": -76.0, "y": -73.9, "z": -85.3 }
  },
  "controls": {
    "exaggeration": 0.2,
    "quality": 4,
    "colorScheme": "heyho",
    "renderMode": "voxel",
    "voxelGapless": true
  },
  "lighting": {
    "ambient": { "intensity": 60, "color": "#ffffff" },
    "directional": { 
      "intensity": 80, 
      "color": "#ffffff",
      "sunAngle": 45,
      "sunRotation": 45
    }
  },
  "version": "1.0",
  "timestamp": "2024-01-15T12:00:00.000Z"
}

• Three.js: 3D graphics rendering
• WebGL: Hardware-accelerated graphics
• GeoTIFF.js: Reading elevation data from GeoTIFF files
• OrbitControls: Camera navigation
• HTML5 Canvas: Image export functionality

• Modern web browser with WebGL support
• Recommended: Chrome, Firefox, Safari, or Edge (latest versions)
• Sufficient GPU memory for large elevation datasets

• Start with "High" or "Ultra" quality for most datasets
• Use "Low" or "Medium" quality for very large areas
• Voxel mode is more GPU-intensive than mesh mode
• Reduce quality if experiencing low frame rates

Original elevation data provided by Stanford Earthworks

This project is a single-page application with no build dependencies. The main components are:

• index.html: Main 3D visualization application
• crop.html: GeoTIFF cropping utility
• CLAUDE.md: Development notes and technical documentation

The application can be easily customized by modifying the following in index.html:

• Color schemes: Add new gradients in the getColorForElevation() function
• Default settings: Modify initial values in the HTML control elements
• Lighting presets: Add new presets in the lighting event handlers

This project is licensed under the MIT License - see the LICENSE file for details.

Developed by Manoel Lemos

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

• Three.js community for the excellent 3D library
• Stanford Earthworks for providing public elevation data
• GeoTIFF.js contributors for enabling browser-based GeoTIFF processing
• Claude Code for AI-assisted development and code optimization