EAGL.Examples.LearnOpenGL.GettingStarted.ShadersExercise1 (eagl v0.8.0)

View Source

LearnOpenGL 3.4 - Shaders Exercise 1

This example demonstrates how to modify vertex positions in the vertex shader to create an upside-down triangle. It shows how vertex transformations can be applied directly in the shader rather than modifying vertex data. It corresponds to the first 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.4.shaders_exercise1

Exercise Description

Original Exercise: "Adjust the vertex shader so that the triangle is upside down"

Solution Approach: Negate the y-coordinate in the vertex shader:

  • Original: gl_Position = vec4(aPos, 1.0);
  • Modified: gl_Position = vec4(aPos.x, -aPos.y, aPos.z, 1.0);

Framework Adaptation Notes

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

  • How vertex shaders can transform vertex positions
  • The difference between modifying data vs. modifying shaders
  • Understanding coordinate systems and transformations
  • How simple mathematical operations in shaders affect rendering

EAGL's framework preserves all these concepts:

  • Same vertex data as previous examples (no changes needed)
  • Transformation happens entirely in the vertex shader
  • Demonstrates shader-based coordinate manipulation

Key Concept: Vertex Transformation

Why transform in the vertex shader:

  • More efficient than modifying vertex data on CPU
  • Can be combined with other transformations (matrices, etc.)
  • Demonstrates the power and flexibility of programmable shaders
  • Shows how shaders can manipulate geometry dynamically

Coordinate System Understanding:

  • OpenGL uses right-handed coordinate system
  • Y-axis points up in normalized device coordinates
  • Negating Y flips the triangle vertically
  • This is a fundamental transformation concept

Visual Result

Triangle with interpolated colors but flipped upside-down:

  • Top corners: Red (right) and Green (left) - now at bottom
  • Bottom center: Blue - now at top
    • Same colour interpolation as 3.2/3.3, just flipped

Learning Objectives

  • Understanding vertex shader transformations
  • Coordinate system manipulation
  • Difference between data modification vs. shader modification
  • Basic mathematical operations in GLSL

Usage

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

Press ENTER to exit the example.

Summary

Functions

run_example(opts \\ [])