EAGL.Examples.LearnOpenGL.GettingStarted.ShadersInterpolation (eagl v0.3.0)
View SourceLearnOpenGL 3.2 - Shaders Interpolation
This example demonstrates vertex color interpolation in shaders - how colors assigned to vertices are automatically interpolated across the triangle surface by the rasterizer. It corresponds to the Shaders Interpolation tutorial in the LearnOpenGL series.
Original C++ Source
This example is based on the original LearnOpenGL C++ tutorial: https://github.com/JoeyDeVries/LearnOpenGL/tree/master/src/1.getting_started/3.2.shaders_interpolation
Framework Adaptation Notes
In the original LearnOpenGL C++ tutorial, this example introduces vertex attributes for colors:
- How to pass color data as vertex attributes alongside position data
- How to declare multiple vertex attributes in shaders
- How the rasterizer automatically interpolates values between vertices
- Understanding the difference between per-vertex and per-fragment data
EAGL's framework preserves all these concepts while providing convenience functions:
- EAGL.Buffer.create_vertex_array() handles the VAO/VBO setup with multiple attributes
- The core OpenGL vertex attribute concepts remain unchanged and visible
Key Concept: Fragment Interpolation
What happens during rasterization:
- Triangle has 3 vertices with different colors (red, green, blue)
- Rasterizer determines which pixels are inside the triangle
- For each pixel, it calculates interpolated values based on distance from vertices
- A pixel 70% of the way from red to blue vertex gets 30% red + 70% blue
- This creates smooth color gradients across the triangle surface
Original Tutorial Concepts Demonstrated:
- Multiple Vertex Attributes: Position (location 0) and Color (location 1)
- Vertex Attribute Stride: 6 floats per vertex (3 position + 3 color)
- Vertex Attribute Offsets: Position at offset 0, Color at offset 3
- Shader Input/Output: Vertex shader outputs color, fragment shader receives interpolated color
- Automatic Interpolation: GPU automatically interpolates all vertex shader outputs
Visual Result
The triangle displays a beautiful color gradient:
- Bottom-right corner: Red (1.0, 0.0, 0.0)
- Bottom-left corner: Green (0.0, 1.0, 0.0)
- Top center: Blue (0.0, 0.0, 1.0)
- Interior pixels: Smooth interpolation between these colors
Difference from Previous Examples
- 3.1 Shaders Uniform: Single color for entire triangle, changed via uniform
- 3.2 Shaders Interpolation: Different color per vertex, interpolated across surface
Usage
EAGL.Examples.LearnOpenGL.GettingStarted.ShadersInterpolation.run_example()
Press ENTER to exit the example.
Summary
Functions
@spec run_example() :: :ok | {:error, term()}