EAGL.Examples.LearnOpenGL.GettingStarted.ShadersInterpolation (eagl v0.6.0)
View SourceLearnOpenGL 3.2 - Shaders Interpolation
This example demonstrates vertex colour interpolation in shaders - how colours 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 colours:
- How to pass colour 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 colours (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 colour gradients across the triangle surface
Original Tutorial Concepts Demonstrated:
- Multiple Vertex Attributes: Position (location 0) and Colour (location 1)
- Vertex Attribute Stride: 6 floats per vertex (3 position + 3 colour)
- Vertex Attribute Offsets: Position at offset 0, Colour at offset 3
- Shader Input/Output: Vertex shader outputs colour, fragment shader receives interpolated colour
- Automatic Interpolation: GPU automatically interpolates all vertex shader outputs
Visual Result
The triangle displays a colour 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 colours
Difference from Previous Examples
- 3.1 Shaders Uniform: Single colour for entire triangle, changed via uniform
- 3.2 Shaders Interpolation: Different colour 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()}