Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Chapter 12: Making the Applications Interesting

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 This Chapter: we will learn about Simple Mathematics to Orientate SceneNodes Control SceneNode motion Alpha Blending Simulate transparency File Texture Mapping

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial 12.1: Orientation Orientation and movement of a scene node (or object) Arm (scene node hierarchy) Orientates and moves towards mouse click

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Orientation of Objects Current Front Direction Need Target Direction Must compute rotation angle left/right

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Arm OC space Origin: Front position: In WC Space Origin: Front: Front Direction in WC: Front Direction in WC Space

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Target Direction in WC Target position in WC: Target Direction (from arm origin)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Rotation: angle and direction Rotation angle: Direction:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.1: Implementation

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.1: Implementation (Step 1)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.1: Implementation (Step 2)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.1: Implementation (Step 3)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.1: Lessons Learned Coordinate System Choose WC for all computation OC positions are transformed to WC Directions Front in OC vs. Front in WC (different!) To compute: identify two points in OC and transform to WC to compute a vector Turning Angle: dot product Left vs. right: cross product and examine size of Z Gradual Effect Set transform operator to a percentage of the desired value Achieve gradual approximating the desired effect

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial 12.2: Navigation and Aiming Navigate towards a position (Tut 12.1); … while Aiming (Looking) at another position

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Palm OC space Origin: Front position: In WC Space Origin: Front: Front Direction in WC: Target Position: palm towards target Positions and Directions of The Palm

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.2: Implementation Goal: Rotate to align to Fundamentally Identical solution!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.2: Details …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Transparency (Alpha Blending) Drawing a rectangle: Source: color of rectangle Destination: pixels in frame buffer Source written into Destination Source overwrites Destination

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Blending vs. Over writing Instead of over writing D  S Compute a new value for D based on current D and S D  f(D x A d, S x A s )

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Example: Simple blending Draw a blue rectangle (no blending) Now set Source blend factor: Destination blend factor: Blending function: Add Draw a red rectangle:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Blending and Alpha Channel Store blending factor as part of color Instead of Color = (r, g, b) Include a 4 th channel: (r, g, b, α ) α cannot affect pixel color directly (r, g, b) changes pixel directly α used as either source blend factor (A s ) or destination blend factor (A d )

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Example: Working with α Channel Draw a normal blue rectangle Pixel color (Destination) D r D g D b = (0.8, 0.8, 0.8) Now, A red rectangle with Source Color: S r S g S b S α = (0.2, 0.2, 0.2, 0.8) Blending setting: Source blend: A s = S α Destination blend: A d = (1 - S α ) Blending Function: Add α Controls blending: Alpha Blending

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Alpha as: Opacity When: Source Blend Factor Destination Blend Factor Blend Function: Add Alpha is opacity Alpha = 1 Destination is over-written Alpha = 0 Source is completely invisible!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Graphics API Support for Blending Blending Factors: A s and A d Blending Function: f()

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Program Alpha Blending

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Lib 13: Blending Functionality Drawing Support (DrawHelper) enable/disable for

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Lib 13: Primitive Blending Support Per Primitive … blending enable/disable

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial 12.3: Alpha Blending Alpha value of object color

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 File Texture Mapping Pasting images on primitives

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 File Texture and Mapping File Texture: an image file A 2D array of color stored in a file Texel: each color element in the file Any image or digital photograph Images are stored in formatted files: E.g.: gif, jpg, tiff, png. Mapping: “pasting on” Paste the image (file texture) on a given primitive

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Texture Coordinates Mapping: matching of coordinates A coordinate system on image file (st) - coordinate A coordinate system on primitive (uv) - coordinate Mapping: Match the two coordinate systems!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Implicit st – Coordinate System implicitly defined on all file textures Origin: upper-left corner s-Axis: Right-wards t-axis: down-wards Range: 0.0 to 1.0 Coverage: always the entire image!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Explicit uv – Coordinate System uv are Defined on the Primitives Defined by, us, the programmers! Each vertex of a primitive: A Position: (x, y, z) A Color: (r, g, b) NOW: Texture Coordinate (u, v)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Example of defining uv: rectangle

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Mapping: Texel lookup Texel color (C a ) used as color of primitive

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Programming File Texture 1. We must define uv-coordinate on primitives 2. Select/Load an image file into the graphics API 3. Define how texel will be used 4. Enable texture mapping before drawing the primitive

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial: 12.4: Simple File Texture Select any image Mapped on circle/rectangle

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial 12.4: Details Vertex Format uv on a Unit Square

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial 12.4: uv on a Circle

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tutorial 12.4: File Texture Support

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Lib 13: File Texture Support Resources: Loading and storage of any “files” for now just textures. Implementation: GraphicsSystem Enable/Disable texture mapping: per-primitive support select which texture If texture mapping is enabled Implementation: Primitive and DrawHelper uv coordinate definition As shown in Tutorial 12.4 Implementation: DrawHelper and DeviceVertexFormat

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Lib13: Resources: search/load files

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Lib13: Using file texture resource In GraphcsSystem: Activate/DeActivate Texture

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Lib 13: Per-Primitive Texture Attributes In Primitive class: In DrawHelper class:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 12 Tut 12.5: File Texture & Blending