„3D Graphics” laboratory

wrackbaaMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)


3D Graphics” laboratory
Topics list:
1. Marmalade SDK usage, project settings
2. Application State Machine
3. Creating and rendering simple geometry
4. Texturing geometry, texture coordinates
5. Shaders, basic vertex and fragment shader
6. Render to texture, postprocessing
7. Touch controls, ingame UI

Marmalade SDK usage,
project settings

What Marmalade SDK is?

Multiplatform framework for developing games

But also can be used as just as framework to
deploy games or applications made in other
frameworks (Cocos2D, SDL) or using native
GLES functions.

We will use IwUtil for resource management

We will use IwGx for rendering

We will use IwGxFont for texts

Project settings

MKB files are parsed by Marmalade tool

Visual studio project is regenerated if needed

We used emulator, which lets us test almost all
of device functions.

Emulator uses „worst case scenario” in difficult
situations like creation of FBO's

Deploy tool, how it works

Application State Machine

Application State Machine

Why it is so important to check it at the
beginning of project

Understanding of resource management

Creation of new states, delayed switching
between states

Abstract functions like render, update,
handleKey etc, how to use them to keep project
clean and understandable


Implement GameStateStart, put text message
on it, handle key interaction

Implement GameStateResults, put text
message on it, show scores gained by player,
handle key interaction

Add possibility to reset game ie. go from
Results state back to Playing state

Creating and rendering
simple geometry

Geometry creation

World space and model space

Geometry points alias vertexes

Definition of triangle and quad

Streams, VBO's versus Immediate mode

Model space matrix, rotation and translation


Geometry of box consists only from front plane,
add 5 more to create 3D box

Texturing geometry,
texture coordinates


Texture coordinates

Image versus texture versus material

Acceptable sizes of textures

Coordinates (UV's) precision and resolution

By the way: IW_FIXED

Also: indexes usage with vertex and uv's

Other material parameters, colours


Load texture from file, create material using that

Create texture coordinates stream, use it during
rendering of box, attach material with texture

Create new object – background, consists only
one plane, texture if with background texture,
use uv coordinates to map only part of the
image on quad.

Shaders, basic vertex
and fragment shader


Basic idea of shader, program launched on
GPU and used in rendering pipeline

Vertex shader calculates data for each vertex

Fragment shader calculate data for each
fragment, interpolating variables coming from
vertex shaders

Attributes, uniforms, varying

Attributes and uniforms filling by IwGx

Lighting in shader

Normals definition

Vertex shader effect – gl_Position

Fragment shader effect – gl_FragColor

GL Light definition, ambient, diffuse colours

Diffuse colour calculation


There is simple vertex and fragment program
already implemented.

Add diffuse lighting algorithm to vertex shader,
calculate diffuse colour in vertex shader.
Multiply texture colour by diffuse in fragment

Use emissive colour of object to colour different
boxes (active in red, inactive in grey)

Render to texture, postprocessing

Render to texture

Target of rasterization, either screen buffer or
FBO (Frame Buffer Object)

Method: create FBO first, set it as current
target, render your scene, back to default
screen, render your texture from FBO as
fullscreen quad.

Usage of render to texture in games (monitors,
scopes, but also reflections)


Screen space rendering

Using fullscreen quad to render image from

Using simplest vertex shader possible and
fragment shader to put colour effects or filters
on it

Usage of postprocessing in games (blur, glow,
HDR, colour filters, but also antialiasing)


There is already implemented creation of
surface and basic methods to set current

Enable render-to-texture pipeline, use created
image as texture and render it in screenspace

Change rendering method to shaders

Implement sepia colour filter in fragment shader

Touch controls, ingame UI

Ingame UI (also called HUD)

Performance of geometry, when there is a lot of
buttons, animated progress bars and other

Texture atlas and why it is faster

Screenspace rendering as obvious choice

Other methods of rendering (Scaleform like, in

Touch management

Callbacks and when exactly they are executed.

Less operations in callbacks.

s3ePointerRegister function

Coordinates of touch, how it works with different
orientation management

Move and press events

Multitouch, touch ID

Exercise (max 3 points)

implement CreateWith and Render methods in
Cbutton, use buttons.png as a texture (1 point)

implement CheckInterception method, use it
with pointer callback, set state of CButton (1

add enum with list of buttons, add function
CheckButtonState, execute it in game logic - (1

What you learned

Problem solving skills, importance of research
in modern games development

Basic geometry

Textures, materials, shaders


Game project isn't as easy as gameplay is.
There is a lot of things to implement, basic
graphics, control, application, sound etc

Rule of black triangle


Read and understand OpenGL specification

Use high level engines but understand what is
going on on lower levels

Experiment, have fun with game development

Play a lot, you need to play games to
understand them

Send your CV to Playsoft