Height Fields Using Shaders

Pranav Rathod

February 21, 2024

For this project, I created a program that utilizes OpenGL's core profile to generate and manipulate a 3D height field from user-specified image data. The grayscale values of the image are interpreted as elevation, rendering the height field as a visually stunning terrain. I also implemented advanced transformation controls, smooth shading, and interactive rendering modes to enhance user experience.

If you'd like to explore the source code for this project, you can find it on my GitHub repository: https://github.com/pranavsrathod/Height-Fields/.

This project was an opportunity to explore shader programming and 3D graphics using OpenGL. The application reads grayscale image data to construct a height field, where pixel intensity determines the elevation. I integrated several features to make the application versatile and interactive, including:

• Render Modes: Switch between three distinct render modes:
  • Point rendering (`1`): Displays the height field as individual points.
  • Wireframe rendering (`2`): Displays the height field using lines, giving a skeletal structure.
  • Solid rendering (`3`): Renders the height field as a continuous surface of triangles.
• Transformation Controls: I implemented comprehensive transformation features:
  • Rotate: Use the mouse to rotate the model along different axes.
  • Scale: Hold `Shift` and use the mouse to scale the model up or down.
  • Translate: Hold `t` and use the mouse to move the model across the plane.
• Smoothing Mode: By pressing `4`, users can activate a smoothing shader, which refines the terrain geometry and color:
  • Adjust terrain scale with `+` and `-` keys.
  • Modify terrain color intensity with `9` and `0` keys.
• JetColorMap: I implemented the JetColorMap function in the vertex shader. It transforms grayscale colors into a visually rich colormap while allowing dynamic adjustments using exponents.

Overall, the project highlights the power of OpenGL for real-time 3D rendering and user interaction.

Special thanks to the following resources:

• OpenGL Tutorials by Khronos Group for foundational concepts.
• WebGL documentation for understanding shaders and rendering pipelines.
• Grayscale image processing examples for 3D height field generation.