Mobile Application Programming 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 1 cos-β-sin-β sin-β cos-β 1 cosβ -sinβ sinβ cosβ 1 1 cosα -sinα sinα cosα 1 a θ 1
Arbitrary Axis Rotation in 3D a θ m m m m m m M= m m m x y z 1 1
Model View Matrix Program gluseprogram(_program) // positions array has 9 floats between -1. -> 1. glvertexattribpointer(1, 3, GLenum(GL_FLOAT), GLboolean(FALSE),, positions) glvertexattribpointer(11, 3, GLenum(GL_FLOAT), GLboolean(FALSE),, texcoords) let modelviewlocation: GLint = (glgetuniformlocation(_program, "modelview") gluniformmatrix4fv(modelviewlocation, 1, GLboolean(FALSE), modelview) glbindtexture(glenum(gl_teture_2d), _woodtextureinfo.name) gldrawarrays(gl_triangles,, 3) // texcoords array has 6 floats. -> 1. uniform mat4 modelview; attribute vec3 position; attribute vec2 texturecoordinate; varying vec2 texturecoordinateinterpolated; void main() { gl_position = modelview * 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
gluseprogram(_program) // positions array has 9 floats between -1. -> 1. glvertexattribpointer(1, 3, GLenum(GL_FLOAT), GLboolean(FALSE),, positions) glvertexattribpointer(11, 3, GLenum(GL_FLOAT), GLboolean(FALSE),, texcoords) let modelviewlocation: GLint = (glgetuniformlocation(_program, "modelview") gluniformmatrix4fv(modelviewlocation, 1, GLboolean(FALSE), modelview) let projectionlocation: GLint = (glgetuniformlocation(_program, "projection") gluniformmatrix4fv(projectionlocation, 1, GLboolean(FALSE), projectionmatrix); glbindtexture(glenum(gl_teture_2d), _woodtextureinfo.name) gldrawarrays(gl_triangles,, 3) // texcoords array has 6 floats. -> 1. attribute vec3 position; attribute vec2 texturecoordinate; uniform mat4 modelview; uniform mat4 projection; varying vec2 texturecoordinateinterpolated; void main() { gl_position = projection * modelview * vec4(position, 1.) texturecoordinateinterpolated = texturecoordinate; // interpolated } varying highp vec2 texturecoordinateinterpolated; uniform sampler2d textureunit; void main() { gl_fragcolor = texture2d(textureunit, texturecoordinateinterpolated); }
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 ˆ = Idr Ldr kdr l ˆ = Idg Ldg kdg l ˆ = Idb Ldb kdb l < Idx < 1 nˆ nˆ nˆ n l ( Ldr, Ldg, Ldb ) = light color ( kdr, kdg,kdb ) = material color Ldx = light channel intensity kdx= material diffuse coefficient for channel
/* 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,.))); texturecoordinatevarying = 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; }
ios Implementation Custom Shaders GLKBaseEffect Performant Easy to use Low-level control Has own shaders Custom effects Defined capabilities Porting-friendly OOP Structured input data Easier integration with existing OpenGL code Vector / Matrix structures