Mobile Application Programming: Android. OpenGL ES 3D

Similar documents
Mobile Application Programming. OpenGL ES 3D

Mobile Application Programming: Android. OpenGL Operation

Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android. OpenGL Operation

蔡侑庭 (Yu-Ting Tsai) National Chiao Tung University, Taiwan. Prof. Wen-Chieh Lin s CG Slides OpenGL 2.1 Specification

2D TRANSFORMATIONS AND MATRICES

Introduction to Computer Graphics. Ray Tracing Review

CSCI E-74. Simulation and Gaming

1 Transformations. Chapter 1. Transformations. Department of Computer Science and Engineering 1-1

GEOMETRIC TRANSFORMATIONS AND VIEWING

Introduction to Computer Graphics. Hardware Acceleration Review

Computer Graphics 7: Viewing in 3-D

CS452/552; EE465/505. Transformations

CS559 Computer Graphics Fall 2015

Animating orientation. CS 448D: Character Animation Prof. Vladlen Koltun Stanford University

Transformation Pipeline

Interactive Computer Graphics. Hearn & Baker, chapter D transforms Hearn & Baker, chapter 5. Aliasing and Anti-Aliasing

Computer Graphics: Viewing in 3-D. Course Website:

OPENGL RENDERING PIPELINE

3D Transformation. In 3D, we have x, y, and z. We will continue use column vectors:. Homogenous systems:. x y z. x y z. glvertex3f(x, y,z);

Hello, welcome to the video lecture series on Digital Image Processing. So in today's lecture

Computer Graphics with OpenGL ES (J. Han) Chapter 6 Fragment shader

Wire-Frame 3D Graphics Accelerator IP Core. C Library Specification

CS 4620 Midterm, October 23, 2018 SOLUTION

gltf - what the? Concepts An overview of the basics of the GL Transmission Format Page 1 gltf 2.0 Quick Reference Guide Binary data references

Shaders. Introduction. OpenGL Grows via Extensions. OpenGL Extensions. OpenGL 2.0 Added Shaders. Shaders Enable Many New Effects

Transformations. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

Objectives. transformation. General Transformations. Affine Transformations. Notation. Pipeline Implementation. Introduce standard transformations

Review of Thursday. xa + yb xc + yd

The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

Computer Graphics. Chapter 7 2D Geometric Transformations

2D and 3D Coordinate Systems and Transformations

Lecture 11 Shaders and WebGL. October 8, 2015

Computer Viewing. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science

CS D Transformation. Junqiao Zhao 赵君峤

For each question, indicate whether the statement is true or false by circling T or F, respectively.

Computer Viewing. Prof. George Wolberg Dept. of Computer Science City College of New York

Lighting and Shading II. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

Transformations. CSCI 420 Computer Graphics Lecture 4

3D Viewing Episode 2

Coordinate transformations. 5554: Packet 8 1

The Graphics Pipeline and OpenGL I: Transformations!

C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev

Projection and viewing. Computer Graphics CSE 167 Lecture 4

Shader Programming 1. Examples. Vertex displacement mapping. Daniel Wesslén 1. Post-processing, animated procedural textures

Computer Animation II

Incremental Image Synthesis

Viewing and Projection

OUTLINE. Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction

Transformations Week 9, Lecture 18

Transformation. Computer Graphics October. Dr Anton Gerdelan

3D Transformations World Window to Viewport Transformation Week 2, Lecture 4

Lecture 17: Shading in OpenGL. CITS3003 Graphics & Animation

Affine Transformation. Edith Law & Mike Terry

Virtual Cameras and The Transformation Pipeline

Computer Science 336 Fall 2017 Homework 2

Transformation Algebra

Programmable Graphics Hardware

Transforms. COMP 575/770 Spring 2013

Transformations. CSCI 420 Computer Graphics Lecture 5

Transformations. OpenGL Transformations. 4x4 Model-view Matrix (this lecture) OpenGL Transformation Matrices. 4x4 Projection Matrix (next lecture)

INFOGR Computer Graphics

CSE 167: Introduction to Computer Graphics Lecture #5: Projection. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2017

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

The Graphics Pipeline and OpenGL I: Transformations!

Transformations. Standard Transformations. David Carr Virtual Environments, Fundamentals Spring 2005 Based on Slides by E. Angel

Affine Transformations in 3D

INFOGR Computer Graphics

The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

GLSL 1: Basics. J.Tumblin-Modified SLIDES from:

CSE528 Computer Graphics: Theory, Algorithms, and Applications

CS 130 Final. Fall 2015

3D Mathematics. Co-ordinate systems, 3D primitives and affine transformations

Shadows in Computer Graphics

Sign up for crits! Announcments

Phong Lighting & Materials. Some slides modified from: David Kabala Others from: Andries Van Damm, Brown Univ.

3-D D Euclidean Space - Vectors

CSC418 / CSCD18 / CSC2504

Section III: TRANSFORMATIONS

CITSTUDENTS.IN VIEWING. Computer Graphics and Visualization. Classical and computer viewing. Viewing with a computer. Positioning of the camera

CS452/552; EE465/505. Intro to Lighting

OpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders

Objectives Shading in OpenGL. Front and Back Faces. OpenGL shading. Introduce the OpenGL shading methods. Discuss polygonal shading

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

COMP Computer Graphics and Image Processing. 5: Viewing 1: The camera. In part 1 of our study of Viewing, we ll look at ˆʹ U ˆ ʹ F ˆʹ S

Lab 9 - Metal and Glass

3.1 Viewing and Projection

CS 428: Fall Introduction to. Transformations in OpenGL + hierarchical modeling. Andrew Nealen, Rutgers, /21/2009 1

Computer Graphics Coursework 1

Computer Graphics Geometric Transformations

The Graphics Pipeline. Interactive Computer Graphics. The Graphics Pipeline. The Graphics Pipeline. The Graphics Pipeline: Clipping

12.2 Programmable Graphics Hardware

Introduction to Computer Graphics with WebGL

CSE328 Fundamentals of Computer Graphics

Transformations (Rotations with Quaternions) October 24, 2005

COMP30019 Graphics and Interaction Three-dimensional transformation geometry and perspective

Shadows. Prof. George Wolberg Dept. of Computer Science City College of New York

Bump Mapping. Mike Bailey. Oregon State University. What is Bump-Mapping?

Projection Lecture Series

Computer Graphics. Coordinate Systems and Change of Frames. Based on slides by Dianna Xu, Bryn Mawr College

Transcription:

Mobile Application Programming: Android OpenGL ES 3D

All Points Transformations xf = xo + tx yf = yo + ty xf = xo sx yf = yo sy xf = xi cosθ - yi sinθ yf = xi sinθ + yi cosθ

All Points Transformations xf = xo + tx yf = yo + ty xf = xo sx yf = yo sy xf = xi cosθ - yi sinθ yf = xi sinθ + yi cosθ

Transformations All Points 1 tx x 1 ty y 1 1 cosθ -sinθ x sinθ cosθ y 1 1 sx x sy y 1 1

Matrix Composition 2.1-3.6.8 Translate PI/3 Rotate 2x Scale = Combined Matrix That Does All 3 Ops!

Notice the ordering! Either This 1, Times S R T V SV RSV = = = T R S = SV RSV And This 1, Times TRS TRSV V = TRSV TRS

3D Transformations

All Points Transformations xf = xo + tx yf = yo + ty xf = xo sx yf = yo sy xf = xi cosθ - yi sinθ yf = xi sinθ + yi cosθ

All Points Transformations xf = xo + tx yf = yo + ty zf = zo + tz xf = xo sx yf = yo sy zf = zo sz More Complex

Transformations All Points 1 tx x 1 ty y 1 1 cosθ -sinθ x sinθ cosθ y 1 1 sx x sy y 1 1

All Points Transformations M = vector rotate matrix 1 tx 1 ty 1 tz x y z 1 1 m m m m m m m m m x y z 1 1 sx sy sz x y z 1 1

Rotation in 3D Rotation About -Axis Rotation About -Axis Rotation About -Axis

Rotation in 3D Rotation About -Axis Rotation About -Axis Rotation About -Axis cosθ -sinθ x sinθ cosθ y 1 1

Rotation in 3D Rotation About -Axis Rotation About -Axis Rotation About -Axis cosθ -sinθ sinθ cosθ 1 1 x y z 1

Rotation in 3D Rotation About -Axis Rotation About -Axis 1 Rotation About -Axis cosθ -sinθ sinθ cosθ 1 cosθ -sinθ sinθ cosθ 1 1

Rotation in 3D Rotation About -Axis Rotation About -Axis 1 cosθ -sinθ sinθ cosθ 1 Rotation About -Axis cosθ sinθ 1 -sinθ cosθ 1 cosθ -sinθ sinθ cosθ 1 1

Arbitrary Axis Rotation in 3D a θ

Arbitrary Axis Rotation in 3D a θ

Arbitrary Axis Rotation in 3D a θ β α

Arbitrary Axis Rotation in 3D a θ β Rotate by -α α

Arbitrary Axis Rotation in 3D a θ β Rotate by -β

Arbitrary Axis Rotation in 3D a θ θ Rotate by θ

Arbitrary Axis Rotation in 3D a θ -β Rotate by +β

Arbitrary Axis Rotation in 3D a θ -β Rotate by +α -α

Arbitrary Axis Rotation in 3D a θ M = Rz(-α) Rx(-β) Rz(θ) Rx(β) Rz(α)

Arbitrary Axis Rotation in 3D cos-α-sin-α sin-α cos-α M= 1 cosθ -sinθ sinθ cosθ 1 1 1 cos-β-sin-β sin-β cos-β 1 1 1 cosβ -sinβ sinβ cosβ 1 cosα -sinα sinα cosα 1 a θ 1

Arbitrary Axis Rotation in 3D m m m m m m M= m m m x y z 1 1 a θ

Model View Matrix Program gluseprogram(_program); // GLES2. omitted glvertexattribpointer(1, 3, GL_FLOAT, false, sizeof(float) * 3, positions); glvertexattribpointer(11, 2, GL_FLOAT, false, sizeof(float) * 2, texcoords); int modelviewlocation = glgetuniformlocation(_program, "modelviewmatrix"); gluniformmatrix4fv(modelviewmatrixuniformlocation, 1, FALSE, modelviewmatrix); glbindtexture(gl_teture_2d, textureidentifier); gldrawarrays(gl_triangles,, sizeof(positions) / (sizeof(float) * 3)); attribute vec3 position; attribute vec2 texturecoordinate; uniform mat4 modelviewmatrix; varying vec2 texturecoordinateinterpolated; void main() { gl_position = modelviewmatrix * vec4(position, 1.) texturecoordinateinterpolated = texturecoordinate; // interpolated } varying highp vec2 texturecoordinateinterpolated; uniform sampler2d textureunit; void main() { gl_fragcolor = texture2d(textureunit, texturecoordinateinterpolated); }

Projection Transformations

Projection - Orthographic

Projection - Perspective

Typical Matrices Homogeneous Divide Model View Matrix Model Coordinates Projection Matrix Eye Coordinates Viewport Transform Canonical Coordinates Raster Coordinates : -1 1 : -1 1 : -1 1

Typical Matrices World Coordinates Model to World Matrix World to Eye Matrix (Look-At) Model View Matrix Model Coordinates Homogeneous Divide Projection Matrix Eye Coordinates Viewport Transform Canonical Coordinates Raster Coordinates : -1 1 : -1 1 : -1 1

Model Transformations Scale Translation Rotation -Rotation -Rotation -Rotation Model to World Matrix

Camera Matrix eye World to Eye Matrix (Look-At) up User positioned at (eye,eye,eye) spot User looks at (spot, spot, spot) up Any direction can be up So, user looks down look vector with an implicit direction right rx ry rz ux uy uz lx ly lz 1 right look eye look = spot - eye right = look x up up = right x look look, right, up are normalized

Orthographic Projection Combination Scale & Translation ortho(l,r,b,t,n,f) Projection Matrix

Perspective Projection Projection Matrix frustum(l,r,b,t,n,f) func perspective(fov: Float, aspectratio: Float, znear: Float, zfar: Float) { let ymax: Float = znear * tan(fov * Float(M_PI / 36.)) let ymin: Float = -ymax let xmin: Float = ymin * aspectratio let xmax: Float = ymax * aspectratio } frustum(xmin, xmax, ymin, ymax, znear, zfar)

Viewport Transform Viewport Transform Viewport Transform as a Matrix Discards Coordinate!

Typical Matrices World Coordinates Homogeneous Divide Model Coordinates Eye Coordinates Canonical Coordinates Raster Coordinates : -1 1 : -1 1 : -1 1

Meshes (.6,.2) (.15,.1) (.6,.9) (,) (,1) (1,)

Meshes Cube.obj

Meshes Vertices.2,.4,.1.1,.3,.7.6,.9,.3.2,.,.2.5,.1,.3 4 1 2 3 4 3 2 Faces (Run-Length Encoded) 5 4

Diffuse Lighting ˆ = k Idr Ldr dr l ˆ = Idg Ldg kdg l ˆ = Idb Ldb kdb l nˆ nˆ nˆ n l ( Ldr, Ldg, Ldb ) = light color ( kdr, kdg,kdb ) = material color

/* Supply position, normal, and texturecoordinate arrays. Set model view and projection matrices. */ /* Give the location of the light in eye coordinates (apply the model view matrix to it). */ /* Also define the color (and implicitly the brightness) of the light. This can exceed 1 for effect! */ attribute vec3 position; attribute vec3 normal; attribute vec2 texturecoordinate; uniform mat4 modelview; uniform mat4 projection; varying highp vec4 positioneyecoordinates; varying highp vec3 normaleyecoordinates; varying highp vec2 texturecoordinateinterpolated; void main() { positioneyecoordinates = modelview * vec4(position,.); gl_position = projection * positioneyecoordinates; normaleyecoordinates = vec3(normalize(modelview * vec4(normal,.))); texturecoordinateinterpolated = texturecoordinate; } uniform sampler2d textureunit; uniform vec4 lightpositioneyecoordinates; uniform vec4 lightcolor; varying highp vec4 positioneyecoordinates; varying highp vec3 normaleyecoordinates; varying highp vec2 texturecoordinateinterpolated; void main() { vec3 incident = vec3(normalize(lightpositioneyecoordinates - positioneyecoordinates)); float incidence = max(., dot(incidentvector, normaleyecoordinates)); gl_fragcolor = texture2d(textureunit, texturecoordinateinterpolated) * lightcolor * incidence; }