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

View Source

LearnOpenGL 5.2 - Transformations Exercise 2

This exercise demonstrates rendering multiple objects with different transformation behaviors in the same scene. It showcases two containers: one that rotates around a translated position (orbiting effect), and another that scales rhythmically based on a sine wave, creating a pulsing effect.

Original C++ Source

This example is based on the original LearnOpenGL C++ tutorial exercises: https://github.com/JoeyDeVries/LearnOpenGL/tree/master/src/1.getting_started/5.2.transformations_exercise2

Exercise Focus

This exercise demonstrates:

  • Multiple Object Rendering: Drawing the same geometry with different transformations
  • Combined Transformations: Translation + rotation vs translation + scaling
  • Time-based Animations: Using time for both rotation and scaling effects
  • Transformation Order Effects: How TR and TS create orbiting/corner-scaling behavior

Framework Adaptation Notes

State Management

Uses map-based state following the 4.x texture examples pattern:

%{
  program: program_id,
  vao: vertex_array_id,
  vbo: vertex_buffer_id,
  ebo: element_buffer_id,
  texture1_id: texture1_id,
  texture2_id: texture2_id
}

Vertex Layout

Vertex attributes match EAGL's standard layout:

  • location = 0: Position (vec3)
  • location = 2: Texture coordinates (vec2)

The shader uses aTexCoord at location 2 to match EAGL.Buffer conventions.

Transformation Differences

Container 1 (Bottom-right, orbiting):

  • translate(0.5, -0.5, 0.0) first
  • rotate(time, 0, 0, 1) second
  • Creates an orbiting effect around the world origin (not its own center)

Container 2 (Top-left, corner-scaling):

  • translate(-0.5, 0.5, 0.0) first
  • scale(sin(time), sin(time), sin(time)) second
  • Creates scaling from the world origin corner (not its own center)

Educational Notes

Matrix Order Matters

The order of transformations affects the final result:

  • Container 1: T * R = First translate, then rotate around world origin = orbiting
  • Container 2: T * S = First translate, then scale from world origin = corner scaling
  • To rotate/scale around object center: use R T or S T instead

Animation Techniques

  • Rotation: Continuous rotation using time directly
  • Scaling: Sine wave creates rhythmic pulsing between 0 and 1
  • Multiple Objects: Same VAO/geometry, different transformation matrices

Performance Considerations

  • Single VAO/VBO setup used for both containers
  • Matrix calculations per frame for animations
  • Uniform updates for each object before drawing

Keybindings

  • ENTER: Exit the example (when enter_to_exit: true)
  • ESC: Alternative exit method

Summary

Functions

run_example(opts \\ [])