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.