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

View Source

LearnOpenGL 7.3 - Camera (Mouse + Zoom)

This example demonstrates advanced camera control using mouse input for look around and scroll wheel for zoom control, with two blended textures. The camera responds to mouse movement for controlling the look direction (yaw and pitch) and scroll wheel for field of view. Combines image texture loading with procedural checkerboard generation for educational comparison.

Original C++ Source

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

Learning Objectives

This example teaches:

  • Mouse Input Processing: Converting mouse movements to camera rotation
  • Euler Angle Mathematics: Understanding yaw/pitch for 3D orientation
  • Camera Vector Calculation: Computing front vector from angles
  • Zoom Implementation: Using field of view for zoom effects
  • Fixed Position Camera: Camera looks around from a stationary viewpoint

Pedagogical Design Notes

⚠️ INTENTIONAL LIMITATIONS (For Learning)

This example uses a simplified manual camera implementation that exhibits some unnatural behaviours that students should notice:

  1. "World Rotation" Feel: Camera control may feel like rotating the entire world rather than natural first-person movement
  2. Manual State Tracking: Complex manual management of camera vectors and state
  3. Code Duplication: Repetitive camera calculations spread throughout the code

These limitations are pedagogically intentional and represent the natural progression of camera system development. They demonstrate:

  • The complexity of manual camera implementation
  • The need for better abstractions (addressed in 7.4)
  • Common pitfalls when building camera systems from scratch

Important: The camera correctly rotates around itself (not around a point in front). If the rotation feels unnatural, this is due to the simplified implementation rather than the mathematical approach, which is correct.

Educational Progression

7.1: Automatic camera rotation (circular movement) 7.2: Keyboard movement (WASD) + delta time 7.3: Mouse look + zoom implementation (this example - no movement) 7.4: Combined system with camera class 7.5: Addressing "flying" camera limitations 7.6: Understanding underlying mathematics

Controls

  • Mouse Movement: Look around (yaw and pitch)
  • Scroll Wheel: Zoom in/out (field of view)
  • W/A/S/D: Move forward/left/backward/right
  • ENTER: Exit (when run with enter_to_exit: true)

Note: This example combines the keyboard movement from 7.2 with the mouse look and zoom functionality, providing a complete camera control system. Keyboard input is processed immediately when keys are pressed (matching C++ approach) rather than being deferred to frame updates.

Technical Implementation

Mouse Look Mathematics

  • Yaw: Horizontal rotation around the world Y-axis
  • Pitch: Vertical rotation around the camera's right vector
  • Constraints: Pitch clamped to [-89°, 89°] to prevent gimbal lock

Camera Front Vector Calculation

front.x = cos(yaw) * cos(pitch)
front.y = sin(pitch)
front.z = sin(yaw) * cos(pitch)

Field of View Zoom

  • Narrow FOV (< 45°) = zoomed in (minimum 1°)
  • Wide FOV (45°) = zoomed out (maximum 45°)
  • Clamped to [1°, 45°] to match C++ tutorial range

Texture Blending

  • Texture1: Base texture (EAGL logo black on white)
  • Texture2: Procedural checkerboard pattern (8-pixel squares, 128x128 resolution)
  • Blended using mix() function with 20% overlay (matches C++ tutorial approach)
  • Demonstrates both image loading and procedural texture generation

Note: The camera behaviour in this example represents an early stage of camera development. Students should observe the limitations and consider how they might be improved - these observations lead naturally to the solutions presented in examples 7.4-7.6.

Summary

Functions

run_example(opts \\ [])