an ios developer's opengl primer

8/3/2019 An iOS Developer's OpenGL Primer

1/185

An iOS DevelopersOpenGL Primer

ThingsMade Out Of OtherThings

Jamie Montgomerie@th_in_gs


2/185


3/185


4/185


5/185


6/185


7/185

OpenGL ES 2.0


8/185

A transparent, lightweight, interface to

modern graphics hardware.

OpenGL ES 2.0


9/185

Why Use OpenGL?


10/185

Why Use OpenGL?

Flexibility


11/185

Why Use OpenGL?

Flexibility

Performance


12/185

How OpenGL uses

your hardware to putstuff on the screen.


13/185

How you can use

OpenGL to putyour stuff on the screen.


14/185


15/185


16/185

What makes all that stuff

ha en?


17/185

A transparent, lightweight, interface to

modern graphics hardware.


18/185

A transparent, lightweight, interface tomodern graphics hardware.


19/185

A transparent, lightweight, interface tomodern graphics hardware.


20/185

Where do the

ixels come from?


21/185

Demo


22/185

Where do the

ixels come from?


23/185

Where do the

ixels come from?

Fragment shader.


24/185

Where do the

ixels come from?

Fragment shader.

Simple program that runs on the GPU.


25/185

Where do the

ixels come from?

Fragment shader.


Computes the shade for each fragment, orpixel.


26/185

Where do the

ixels come from?

Fragment shader.



Run once forevery pixelsimultaneously.


27/185

Where do the

ixels come from?

Fragment shader.



Run once forevery fragmentindependently.


28/185

Where do the

ixels come from?

Fragment shader.



Run once forevery pixelsimultaneously.


29/185

OpenGL ES 2.0

Shading Language


30/185

OpenGL ES 2.0

Shading Languageuniformlowpsampler2D sTexture;

varyinghighpvec2 vTextureCoordinate;

void main(){

gl_FragColor =

texture2D(sTexture,vTextureCoordinate);

}


31/185

Scalarsfloatintbool

Vectors[i,b]vec2[i,b]vec3[i,b]vec4

Matrices

mat2

mat3mat4

Samplerssampler2d

samplerCube

Shading Language

Basic T es


32/185

float i = 1.0;

Shading Language

Variable Initialisation


33/185

float i = 1.0;

const float too = 2.0;

Shading Language



34/185

float i = 1.0;


Shading Language



35/185

float i = 1.0;


int j = 1;

Shading Language



36/185

Shading Language


12

34

v =


37/185

vec4 v = vec4(1.0, 2.0, 3.0, 4.0);

Shading Language



38/185

vec4 v = vec4(1.0, 2.0, 3.0, 4.0);

mat2 m = mat2(1.0, 0.0, // 1st Column

0.0, 1.0); // 2nd Column

Shading Language



39/185

OpenGL ES 2.0

Shading Languageuniformlowpsampler2D sTexture;


void main(){

gl_FragColor =texture2D(sTexture,vTextureCoordinate);

}


40/185

Colours.fsh

uniformlowpsampler2D sTexture;


void main(){


}


41/185

Simples.fsh

void main(){

gl_FragColor =vec4(0.0, 0.0, 0.0, 1.0);}


42/185

Simples.fsh

void main(){

gl_FragColor =vec4(0.0, 0.0, 0.0, 1.0);}


43/185

Colours.fsh



void main(){


}


44/185

Colours.fsh



void main(){


}


45/185

Colours.fsh



void main(){


}


46/185

Colours.fsh



void main(){


}


47/185

Colours.fsh



void main(){


}


48/185

Colours.fsh



void main(){

gl_FragColor=texture2D(sTexture,vTextureCoordinate);

}


49/185

Colours.fsh



void main(){


}


50/185

Colours.fsh



void main(){


}


51/185

Colours.fsh



void main(){


}


52/185

Colours.fsh



void main(){

gl_FragColor =texture2D(sTexture, vTextureCoordinate);}


53/185

Colours.fsh



void main(){

gl_FragColor =texture2D(sTexture,

vTextureCoordinate);}


54/185

Colours.fsh



void main(){



D


55/185

Demo

D


56/185

Demo

Wh d th i l


57/185

Where do the pixels come

from?

Wh d th i l


58/185


from?

Wh d th i l


59/185


from?

Wh d th i l


60/185


from?

pixels


61/185

Colours.fsh



void main(){




62/185

Colours.fsh




63/185

Colours.fsh



Where are these inputscoming from?

Wh th i t


64/185

Where are these inputs

coming from?

Wh th i t


65/185


coming from?

uniforms

Wh th i t


66/185


coming from?

uniforms

Yourapp code

Where are these inp ts


67/185


coming from?

uniforms

Yourapp code

Objective-C (or other language - C, C++, Java etc.)



68/185


coming from?



69/185


coming from?

varyings



70/185


coming from?

varyings Vertex shader



71/185


coming from?





72/185


coming from?



OpenGL ES 2.0 Shading Language code.



73/185


coming from?



OpenGL ES 2.0 Shading Language code. Run once forevery vertexsimultaneously.



74/185


coming from?



OpenGL ES 2.0 Shading Language code. Run once forevery vertexindependently.



75/185


coming from?



OpenGL ES 2.0 Shading Language code. Run once forevery vertexsimultaneously.


76/185

Whats a Vertex?


77/185

Whats a Vertex?

A vertex is a point


78/185

Whats a Vertex?

A vertex is a point

Represents


79/185

Whats a Vertex?

A vertex is a point

Represents

Disconnected point


80/185

Whats a Vertex?

A vertex is a point

Represents

Disconnected point

Line end point


81/185

Whats a Vertex?

A vertex is a point

Represents

Disconnected point

Line end point

Triangle corner point


82/185

Whats a Vertex?

A vertex is a point

Represents

Disconnected point

Line end point

Triangle corner point Two or three dimensional (vec2, vec3)


83/185

Whats a Triangle Strip?


84/185


An array ofpoints...


85/185


An array ofpoints...

...an array ofvec2s orvec3s, in Shading Language terms.


86/185



87/185


88/185

1


89/185

1 2


90/185

1 2

3


91/185

1 2

3


92/185

1 2

3 4


93/185

1 2

3 4


94/185

1 2

3 4


95/185

5

1 2

3 4


96/185

5 6

1 2

3 4


97/185

7

5 6

1 2

3 4


98/185

8

7

5 6

1 2

3 4


99/185

8

7

5 6

1 2

3 4

9

Where do the Fragment


100/185


Shader inputs come from? varyings

Vertex shader



Run once forevery vertexsimultaneously.



101/185



Vertex shader




Calculates the position of the vertex...



102/185



Vertex shader




Calculates the position of the vertex... ...and arbitraryother inputs to pass to the

fragment shaders.

V t Sh d


103/185

Vertex Shader

V t Sh d


104/185

Vertex Shader

attributevec4 aPosition;attributevec2 aTextureCoordinate;

varyingvec2 vTextureCoordinate;

void main(){

vTextureCoordinate =aTextureCoordinate;

gl_Position = aPosition;}

C l h


105/185

Colours.vsh



void main(){



C l h


106/185

Colours.vsh



void main(){



Colo rs sh


107/185

Colours.vsh



void main(){



Colours vsh


108/185

Colours.vsh



void main(){



Colours vsh


109/185

Colours.vsh



void main(){



Colours vsh


110/185

Colours.vsh



void main(){



Colours vsh


111/185

Colours.vsh



void main(){



Demo


112/185

Demo

Demo


113/185

Demo

Demo


114/185

Demo

Where do the


115/185

ixels come from?

pixels

Where do the fragment shader


116/185

g

in uts come from?



117/185

g

in uts come from?



118/185

g

in uts come from?

varyings

Where do the shader


119/185

in uts come from?

varyings

Where do the shader


120/185

in uts come from?

varyings

Where do the shader


121/185

in uts come from?

varyings

Where do the shader


122/185

in uts come from?

varyings

uniforms uniforms

Where do the shader


123/185

in uts come from?

varyings

uniforms uniforms& attributes

The OpenGL ES 2.0


124/185

Pi eline

varyings

uniformsuniforms& attributes

Modern Graphics Hardware


125/185

Pi eline

varyings


The OpenGL ES 2.0


126/185

Pi eline

varyings


What does the app code do?


127/185




128/185




129/185


OpenGL content is presented in a CALayer...



130/185


OpenGL content is presented in a CALayer... ...specifically, a CAEAGLLayer.



131/185



Use a UIView backed by a CAEAGLLayer...



132/185




...like Xcode template and sample codes EAGLView.



133/185




...like Xcode template and sample codes EAGLView.

Use the C OpenGL API to draw.

Integrating with UIKit


134/185




135/185


You cant use the setNeedsDisplay model.



136/185



Draw explicitly when you have something to display.



137/185




Draw on a timer (e.g. 30 frames per second).



138/185




Draw on a timer (e.g. 30 frames per second).

Use the CADisplayLinktimer class.

C OpenGL API


139/185

C OpenGL API

C OpenGL API


140/185

C OpenGL API

Context based

C OpenGL API


141/185

C OpenGL API

Context based

Like CoreGraphics CGContext.

C OpenGL API


142/185

C OpenGL API

Context based


No state save/restore.

C OpenGL API


143/185

C OpenGL API

Context based



Not thread safe.

C OpenGL API


144/185

C OpenGL API

Context based



Not thread safe.

Use from one thread at a time.

C OpenGL API


145/185

C OpenGL API

Context based



Not thread safe.

Use from one thread at a time. Use share pools to share resources between threads.

C OpenGL API


146/185

C OpenGL API

C OpenGL API


147/185

C OpenGL API

Functions to upload things to the GPU, e.g.:

C OpenGL API


148/185

C OpenGL API


Shader programs

C OpenGL API


149/185

C OpenGL API


Shader programs

Textures

C OpenGL API


150/185

C Ope G


Shader programs

Textures Shader program uniforms, attributes

C OpenGL API


151/185

p


Shader programs


Functions to set context state, e.g.:

C OpenGL API


152/185

p


Shader programs



Active texture

C OpenGL API


153/185

p


Shader programs



Active texture Clear colour

C OpenGL API


154/185

p


Shader programs



Active texture Clear colour

Functions to perform rendering

Demo


155/185

Demo

Demo


156/185

Demo

Demo


157/185

Demo

Demo


158/185

Demo

Why Use OpenGL?


159/185

y p

Why Use OpenGL?


160/185

y p

Flexibility

Why Use OpenGL?


161/185

y p

Flexibility

Performance

Why Use OpenGL?


162/185

y p

Flexibility

Performance

3D Stuff?

What about 3D stuff?


163/185



164/185

Upload models as in triangle strips made of 3D vec3 points.



165/185



166/185

Dopositioning

maths in thevertex shaders



167/185

Do positioning maths in the vertex shaders

One uniform mat4 to position each strip - a model

matrix.



168/185

Do positioning maths in the vertex shaders

One uniform mat4 to position each strip - a model

matrix.

One uniform mat4 to position the world around the

camera, calculate perspective - a projection matrix.



169/185



170/185

Do lighting maths in the vertex shaders.



171/185


Upload



172/185


Upload

light information



173/185


Upload

light information

arrays ofvertex normals



174/185


Upload

light information


Calculate per-vertex lighting brightness, color



175/185


Upload

light information



Formulas online



176/185


Upload

light information



Formulas online

Pass as varying to fragment shader.



177/185



178/185

Do texturing, other per-pixel effects in the fragment shaders.



179/185

Do texturing, other per-pixel effects in the fragment shaders.

Multiply the pixel colour with the light colour.

Learning More


180/185

Learning More


181/185

OpenGL ES ProgrammingGuide for iOS;Apple

Learning More


182/185


OpenGL ES 2.0Programming Guide;Munshi, Ginsburg & Shreiner

Learning More


183/185



PowerVR Insider web site

Learning More


184/185



PowerVR Insider web siteWatch out forgreat new

things in iOS 5!

github.com/th-in-gs/Colours


185/185

Jamie Montgomerie@th_in_gs

[email protected]

www.blog.montgomerie.net

th.ingsmadeoutofotherthin.gs

an ios developer's opengl primer

Documents