EAGL.Examples.LearnOpenGL.GettingStarted.ShadersExercise3 (eagl v0.7.0)

View Source

LearnOpenGL 3.6 - Shaders Exercise 3

This example demonstrates outputting vertex position as fragment color, showing how vertex shader outputs are interpolated across the triangle surface and how coordinate values can be visualized as colors. It corresponds to the third shader exercise 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.6.shaders_exercise3

Exercise Description

Original Exercise: "Output the vertex position to the fragment shader using the out keyword and set the fragment's color equal to this vertex position (see how even the vertex position values are interpolated across the triangle). Once you managed to do this; try to answer the following question: why is the bottom-left side of our triangle black?"

Solution Approach:

  • Add out vec3 vertexPos; to vertex shader
  • Set vertexPos = aPos; in vertex shader
  • Add in vec3 vertexPos; to fragment shader
  • Set FragColor = vec4(vertexPos, 1.0); in fragment shader

Answer to Question: The bottom-left is black because:

  • Bottom-left vertex position is (-0.5, -0.5, 0.0)
  • Negative values in RGB color space are clamped to 0.0 (black)
  • Only positive position values create visible colors

Framework Adaptation Notes

In the original LearnOpenGL C++ tutorial, this exercise teaches:

  • How vertex shader outputs are interpolated by the rasterizer
  • Understanding the relationship between coordinate spaces and color spaces
  • Visualizing geometric data as color information
  • How negative values affect color rendering

EAGL's framework preserves all these concepts:

  • Same vertex data and shader input/output patterns
  • Demonstrates interpolation and coordinate-to-color mapping
  • Shows the visual effects of coordinate system properties

Key Concept: Position-to-Color Mapping

Why this visualization is educational:

  • Makes interpolation visible and understandable
  • Shows how coordinate values map to color values
  • Demonstrates the effect of negative coordinates
  • Helps understand the rasterization process

Coordinate to Color Mapping:

  • X coordinate → Red channel
  • Y coordinate → Green channel
  • Z coordinate → Blue channel
  • Negative values clamped to 0.0 (black)
  • Positive values create visible colors

Visual Result and Analysis

Triangle with position-based coloring:

  • Bottom-right (+0.5, -0.5, 0.0): Red channel 0.5, others 0.0 → Dark red
  • Bottom-left (-0.5, -0.5, 0.0): All negative/zero → Black
  • Top center (0.0, +0.5, 0.0): Green channel 0.5, others 0.0 → Dark green
  • Interior pixels: Interpolated between these values

Why bottom-left is black:

  • Position (-0.5, -0.5, 0.0) has negative X and Y
  • RGB color channels can't be negative (clamped to 0.0)
  • Result: (0.0, 0.0, 0.0) = black

Learning Objectives

  • Understanding vertex shader output interpolation
  • Coordinate space to color space mapping
  • Effects of negative values in color calculations
  • Visualizing geometric data through color

Usage

EAGL.Examples.LearnOpenGL.GettingStarted.ShadersExercise3.run_example()

Press ENTER to exit the example.

Summary

Functions

run_example(opts \\ [])