6

CHAPTER 2

THEORETICAL FOUNDATION

2.1 Theoretical Foundation

2.1.1 WebGL

WebGL[6] is a cross-platform 3D graphics library for web that makes use of

HTML5 canvas element. One major advantage of WebGL compared to other web

rendering technology such as Flash and Microsoft Silverlight is that WebGL is plug-in

free, allowing the user to run the application without having to install additional

software/plug-ins. The stable release of this technology is released after February 2011,

which is not really new but currently this technology is still not well-known yet,

especially to non-computer science people.

WebGL is developed by Khronos Group, same as OpenGL, therefore there are

many similarities between OpenGL and WebGL. To be more specific, WebGL is similar

to OpenGL for Embedded System 2.0 (OpenGL ES 2.0).OpenGL ES 2.0 itself is a

stripped down version of OpenGL 2.0 which allow OpenGL to run on embedded

platform. The main difference between OpenGL 2.0 and OpenGL ES 2.0 is the pipeline;

OpenGL 2.0 use fixed pipeline while OpenGL ES 2.0 use programmable pipeline that

allows the programmer to write their own shader. Here is the pipeline architecture

between fixed and programmable pipeline:

7

Figure 1.OpenGL Fixed Pipeline Architecture (Source: http://www.khronos.org)

Figure 2.OpenGL Programmable Pipeline Architecture (Source: http://www.khronos.org)

8

Basically, the transform and lighting in fixed pipeline is eliminated and replaced

by vertex shader which is cheaper in term of cost. Texture environment, colour sum, fog

and alpha test is simplified into one pipe called fragment shader or also known as pixel

shader. Furthermore, the codes are executed directly on the Graphics Processing Unit

(GPU) so it will run faster. However there is one disadvantage of this architecture, as

you can see, OpenGL ES 2.0 isshader-based, therefore only graphics card with shader

support can run it.

At the moment, most major internet browsers are already support WebGL.

Mozilla Firefox 4.0++, Opera 12 and Google Chrome already support WebGL by

default, however in Safari it is disabled by default so the user will have to enable it

manually. Currently Internet Explorer does not support WebGL. Some mobile user can

use WebGL but there may be slight incompatibility due to their hardware capability.

Here is the table of browsers that support WebGL per February 2012 according to [8]:

Figure 3.WebGL support table (Source: caniuse.com)

9

Note that from table above, none of any platform fully supports WebGL,

however [8] state that it is because of the hardware problem, not the browser problem.

This is expected because the target device requires graphics card that supports shader, as

mentioned in previous paragraph. At the moment, there are only few mobile devices that

support WebGL, however I think WebGL will become a standard for every next-gen

devices. [9]claims that Xperia phones is the first android device that supports WebGL.

An article [10] states that iOS 5 devices supports WebGL but only for iAd developer and

Microsoft decided not to support WebGL due to security reasons. BlackBerry PlayBook

OS 2.0 is the first and only BlackBerry device that supports WebGL at the moment [11].

For Nokia, currently Nokia N900 firmware 1.2 supports WebGL[12].

2.1.2 Game Engine

According to Gregory[13], game engine is software that is extensible and can be

used as the foundation for many different games without major modification. Some

example of game engine are Unreal Engine[14], Irrlicht[15], Unity3D[16], Cocos2D[17],

etc. Sometimes people get confused between game engine and game framework like

Microsoft XNA[18]. It is true they both seems similar, so to make it clear, the difference

is that game engine is on higher layer compared to game framework. Game engine

provides higher level of interface to the user. When using game engine, the user will

only need to interface with the game engine, and the game engine will interface with the

lower layer such as graphics, input, etc. In game framework, it will provide the lower

level interface for the user to interface with the hardware and write his/her own

implementation.

10

2.1.2.1 Game Engine Genres

In this research, the game engine that will be developed is a general game engine

that can be used at least for developing casual games, but generallygame engine can

be classified into different genres and each of them has distinguishable features:

1. First-Person Shooters (FPS)

FPS game engine most likely has sophisticated rendering engine to allow the

game to have immersive 3D world without dropping frame per second of the

game, responsive camera control and aiming system, and realistic arms and

weapons animation.There are a lot of popular game engine for this genre such as

Unreal Engine[14], and CryEngine[19]. The examples of FPS game areCounter-

Strike, Call of Duty, and Doom.

2. Platformers / Third Person Games

Platformers game engine will have a complex camera collision detection

system so the view will never obstructed and great camera follow system so the

view will always focus on the character. Level editor is often provided in

platformer game engine so developer can easily create or modify game levels.

Some platformer game examples areMario Bros, Sonic the Hedgedog, and

Megaman.

11

3. Role-Playing Games (RPG)

RPG game engine usually support the use of scripting language to allow the

user to modify the game content such as story dialog, items, and quests easily

and provide a feature to create cinematic scene. Also, event based system is

usually provided in RPG game engine. Example game: Final Fantasy, Star

Ocean, and Diablo.

4. Fighting Games

Fighting game engine will have rich bone animation algorithm that allow

characters to have complex animation, accurate collision detection, complex

timing / frame system and complex input system that can read combinations of

inputs. Fighting games example are Street Fighter, Tekken, and Soul Calibur.

5. Real Time Strategy (RTS)

Real Time Strategy game features sophisticated path-finding and AI

algorithms, effective use of design patterns to allow the game to support

hundreds or even thousands object/unit, and interactive inputs especially mouse.

As addition, terrain system is often included. Example games: Warcraft, Age of

Empires, Command & Conquer.

12

2.1.2.2 Game Engine Component

There are many other kinds of game engine that are not mentioned above, each

of them will have one or two outstanding feature that support the appeal of the game

of that genre itself, however every game engine will always have basic components

that are more or less same from one another. Each game engine will have following

basic components[13]:

1. Core Engine

Core engine including assertions or error checking code, memory

management that responsible for allocating memory and freeing unused memory,

math library that includes crucial mathematical operations (square, root,

radian/degrees, trigonometry, etc), custom data structures and algorithm such as

vector, linked list, tree, hash, search functions, etc.

2. Graphics/Rendering Engine

Most of the time,third party graphics library is used as the baseof graphics

engine and the engine will provides implementationof this libraries or interface

to this library so it is simpler to be used.This engine is responsible for displaying

the game world and objects.

3. Resource Manager

Resource manager is the component that will load and store external

resources such as 3D models, textures, images, etc so it can be used by the

engine. Sometimes resource manager also includes conversion algorithm to

convert the resource into one consistent format and compression algorithm to

minimize the file size.

13

2.1.3 Physics Engine

The main focus of this research is about the physics. Physics engine is one of the

component of game engine that is responsible for managing and handling all physics

related functions. In general, physics engine that is used in game engine is often adapted

from commercial physics engine developed by third party.Two examples of popular

commercial physics engine are NVIDIA PhysX [20] and Havok[21]. The alternative

would be develop the physics engine based on exiting physics frameworks. Physics

framework is a library that provides physics functions.

Physics engine or physics framework must include two main functionalities:

collision detection and collision response/handling. Up until this moment, there are two

popular physics theories, which are Newtonian physics and rigid bodies. Newtonian

physics is based on Newton’s laws of motion, while rigid bodies assumes that the

objects are solid and not deformable. Rigid bodies physics becomes popular because it

greatly simplifies the calculation required and gives acceptable result.

Some advanced features of physics are ragdoll physics[22], soft bodies

dynamics, cloth physics, hair physics, fluid dynamics, water surface simulation. Rag doll

physics. Ragdoll physics is usually used for dead people animation where the bodies

goes limb. Soft bodies dynamics is like rigid bodies dynamics but for deformed objects.

One of popular soft bodies dynamics implementation is spring[23]. Cloth, hair, and

water suface are self explanatory.

14

2.1.4 Impulse Based Physics for Rigidbody

As we all know, after two objectscollide, those objects will spin and their speed

is changed. How big their speed is changed and how fast they spin can be calculated

through physics formula, specifically from Impulse-Momentum formula. In this project,

the physics engine will be created based on Impulse-Momentum theory. More detail

about those theories are described below:

2.1.3.1 General Impulse formula

Before using the formula, it is better to understand what impulse is first.

Impulse is average of force times time interval[24]. From this definition, we can

write formula: impulse = average of force multiplied by delta time. However,

this formula is not applicable for computer games because we do not know the

delta time. For this reason, we need to use another formula that does not require

time. That formula is as follow:

Figure 4.Impulse formula (Source: www.euclideanspace.com)

Where:

J = impulse (scalar), also denoted

as Λ

e = coefficient restitution of object

v = linear velocity (vector)

n = unit surface normal vector

r = distance from center of mass to

collision point

ω = angular velocity (vector)

m = mass

[I] = inertia tensor

15

This formula looks much more complex compared to the first one, but

this one is applicable for computer games. Just a simple explanation about

coefficient restitution, it is a fractional value representing the speed ratio of the

object before and after collision. This value is depends on the material of two

colliding object. For example a basketball has 0.75 coefficient restitution

againsthardwood floor[25]. Most of the other variables in formula above are

straightforward except for inertia tensor. For this reason, next section will discuss

about inertia tensor: its definition and how to calculate it.

2.1.3.2 Moment of Inertia

From the impulse formula above, we need to know the inertia tensor of

the rigidbody before we can calculate the impulse. To understand what is Inertia

tensor, first we need to understand what is moment of inertia. Moment of inertia

is a quantitative measure of the radial distribution of the mass of a body about a

given axis of rotation[26]. Inertia tensor is actualy just a matrix containing the

value of moment of inertia from three axis: x,y,z (denoted by Ixx, Iyy, Izz). The

general formula for calculating Moment of Inertia is:

2

Where:

I = moment of inertia

m = mass of rigidbody

r = distance from center of mass to the collision point

16

The concept for moment of inertia is simple, however, for calculating

moment of inertia of a rigidbody, the formula is different depends on the

rigidbody form and which axis it is facing. Some of common rigidbody form are

cube, rectangle, sphere, cone, and cylinder. For uniform objects like sphere or

cube, the value of moment of inertia from any axis is same, therefore we only

need to calculate moment of inertia from one axis for those object. Formula for

calculating inertia tensor ofsome common rigidbodies are:

Figure 5.Inertia tensor formula for common rigidbodies (Source: www.engr.colostate.edu)

17

2.1.3.3 Parallel Axis Theorem

In actual implementation, most real world objects are not just one form of

those rigidbodies. Take chair for example, chair is not rectangle, cube, sphere,

nor cone, but chair can be composed from multiples rectangles. In this case, the

center of mass is not on the center of the rectangle, so the formula above cannot

be applied directly. To solve this, we need to use parallel axis theorem. Parallel

axis theorem is The moment of inertia about any axis parallel to that axis through

the center of mass[27]. The formula is:

Figure 6.Parallel axis theorem illustration and formula (Source: hyperphysics.phy-astr.gsu.edu)

Where:

I parallel axis = I at axis parallel to axis thrugh the center of mass

I cm = I at the center of mass

M = mass

d = distance from center of mass to parallel axis

18

2.1.3.4 Impulse - Momentum

After we calculate the impulse, we can finally use impulse-momentum

formula to calculate the linear and angular velocity of the rigidbody after

collision. The formula used to calculate linear& angular velocity after collision

are:

after = I1 ωbefore+ Λ(r1 x n)

after= I2 ωbefore- Λ(r2 x n)

Where:

m1 = mass

V1 = velocity before collision

(vector)

V2 = velocity after collision

(vector)

Λ = impulse (vector)

Λ = impulse (scalar), also denoted

as J

n = unit surface normal vector

I = moment of inertia (scalar)

ω = angular velocity (vector)

Λ = impulse (scalar value), also

denoted as J

r = distance from center of mass to

collision point

n = unit surface normal vector

19

2.2 Theoretical Frameworks

2.2.1 Conceptual Model

Based on theories above, here is a complete game engine architecture according to[13]:

Figure 7.Game engine architecture (Source: www.gameenginebook.com)

20

In this research, a protoptype game engine will be created, and it consist of

rendering engine which use WebGL, core engine, and physics engine that use

frameworks that will be tested. Test cases are also prepared, which include performance

test, compatibility test, correctness test, and completeness observation. The engine will

be depolyed on the internet browsers, then test cases will be carried out.Finally the result

of each physics frameworkcan be obtained and can be analyzed.

21

2.2.2 Research Methodology

Below are the steps that will be conducted in this research:

1. Identifying research problem

Information on current trends in web gaming and its technology are

collected, analyzed and the problems are formulated based on those information.

The problems are then classified into corresponding research area, then one of

the interesting research area is chosen as this research topic.

2. Literature review

Literature of related technologies, theories, and related works are

reviewedand used to identify possible solution to the problem. Also, some of the

related literature might be used as the foundation of this research.

3. Define research objectives

Some possible objectives are identified based on existing problems. The

significance of those objectives and the possibility to achieve them is analyzed,

and main objectives of this research are defined based on its significance and

time constraints and availability.

4. Solution design

Test cases are generated to be used as the base for testing the research

objects to obtain relevant quantitative data from them.Additional tools and

software might be designed to help data collection from research objects.

22

5. Collecting and choosing research objects

Some candidates of possible research objects (sample) are collected and

reviewed. Few samples will be chosen as research objects, mainly based on

availability and popularity.

6. Implementation and testing

Tools and software are developed to help the research. Test on samples

will be conducted by the help of those tools and software, also in accordance to

the test cases. Finally, the result of the test will be documented.

7. Result analysis

The data from test result are sorted and analyzed. Summary of each

research objects are generated and then compared with each other. Conclusion is

written based on the summary and comparison. The findings will be used to

answer the research problems.