EAGL.Examples.LearnOpenGL.GettingStarted.ShadersExercise3 (eagl v0.7.0)
View SourceLearnOpenGL 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.