EAGL.Examples.LearnOpenGL.GettingStarted.ShadersInterpolation (eagl v0.3.0)

View Source

LearnOpenGL 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:

  1. Multiple Vertex Attributes: Position (location 0) and Color (location 1)
  2. Vertex Attribute Stride: 6 floats per vertex (3 position + 3 color)
  3. Vertex Attribute Offsets: Position at offset 0, Color at offset 3
  4. Shader Input/Output: Vertex shader outputs color, fragment shader receives interpolated color
  5. 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

run_example()

@spec run_example() :: :ok | {:error, term()}