TEL
K
e-IS
S
Re
c
e
exa
m
p
from
comb
i
other
w
oul
d
to bu
i
librar
i
comb
i
childr
e
the a
c
Key
w
1. In
t
a 3-
D
with
t
phys
i
grap
h
whi
c
h
vir
t
u
a
and
t
worl
d
imag
vir
t
u
a
taxo
n
be r
e
K
OM
NIKA
,
V
S
N: 2087
-27
8
e
i
v
ed Jan
uar
y
Towar
d
S
u
Dep
a
rtme
n
t
Th
e
go
al
p
les of Aug
m
e
ent
ertain
me
n
t
i
ned with we
b
ha
nd, A
u
g
m
e
d
b
e
usefu
l
to
i
l
d
Augm
en
te
d
i
es w
h
ich
are
i
ned
al
go
rith
m
e
n to pr
o
v
ide
c
a
dem
y
.
w
ords
: au
gme
n
t
roduc
tion
Basically
D
real e
n
v
iro
n
t
he
virtu
a
l e
n
i
cal, real
-wo
h
ics. Ge
org
h
com
b
i
nati
o
a
l 3D obj
e
ct
w
t
hey are abl
e
d
may mi
m
inary [4].
The p
a
rti
a
l worlds to
n
omy of the
v
e
ali
z
e
d
. The
c
V
ol. 11, No.
6
8X
y
22, 201
3
;
R
d
s Buil
d
Applic
a
u
le Tekkesi
n
t
of Comput
e
Inform
*Co
rre
s
p
o
f
t
h
i
s
w
o
r
k
i
s
e
nted R
eal
ity
t
to m
a
nufa
c
b
bas
ed
app
lic
e
nted
Re
a
lity
associate the
s
d
Re
ality ap
pl
i
use
d
throu
gh
m
s
show
s t
hat
e
duc
ators
a
n
te
d rea
lit
y
, v
i
the
descri
p
t
n
ment in re
a
n
vi
ronm
e
n
t [
1
rld envi
r
o
n
m
Klei
n al
so
p
o
n
of real
an
w
ith the real
e
to interac
t
w
m
ic the
pro
cular subcla
generi
c
all
y
c
v
ario
us way
s
c
o
n
cept of a
F
6
, June 20
1
3
R
evi
s
ed Ap
r
i
d
ing W
e
a
tion fo
n
oglu*, Moh
d
e
r G
r
aphi
cs
a
ation S
y
ste
m
8131
0 S
k
p
ondi
ng auth
o
s
to
pr
esent
a
system
s in
di
f
c
turing. In thi
s
ations. Intern
e
is
on
e
of th
e
s
e tw
o techn
o
i
cati
on
su
ppo
r
cod
i
ng ar
e F
l
the metho
d
i
s
w
a
y to teach
i
rtual real
ity,
H
Copy
rig
h
t
ion of
Aug
m
a
l time. In ot
h
1
, 2]. Augm
e
m
ent that is
a
p
r
o
vide
s
a
c
d vir
t
u
a
l
en
v
world [3]. T
h
w
ith a
com
p
pe
r
t
ies
o
f
ss
of
V
R
r
e
l
c
alled Mixe
d
s
in which
t
h
"virtuality c
o
F
igure 1. Mil
g
3
, pp. 3134
~
i
l 1, 2013; A
c
e
b Bas
e
r Pre-S
c
d
Shahrizal
a
nd Multime
d
m
, Univers
i
ti
k
ud
ai
, Johor
,
o
r, e-mail: s
h
A
b
st
r
a
ct
a
concept for
w
f
ferent fiel
d fr
o
s
pa
per w
e
w
e
t users
nee
d
e
po
pul
ar
fi
e
l
o
logies. In thi
s
r
ted by
thre
e
d
l
artoolkit, Pap
e
s
acc
o
mpl
i
sh
e
students w
i
t
h
H
T
T
P
, paperv
i
h
t
©
2013 Un
i
m
e
n
ted Reali
t
h
er
word it is
e
nted
re
ality
a
ugmente
d
c
omm
only a
c
v
ironm
ent, i
s
h
e pa
rticip
a
n
letely synth
e
some real
-
ated te
chn
o
l
d
Reality (M
h
e "virtual" a
n
o
ntinuum" w
a
g
ram’
s Re
ali
t
~
3
1
41
c
cepte
d
Apri
l
e
d Aug
m
c
hool
C
Suna
r
, Cik
d
ia, F
a
culty
o
Teknologi
M
,
Mal
a
ysia
h
ule
m
si@ho
w
eb bas
ed
Au
o
m mi
lit
ar
y
a
p
p
w
orked on h
web sites for
ds o
n
virt
ual
s
stud
y
JavaS
c
d
ifferent l
i
bra
r
e
rvisio
n3
D, a
n
e
d w
eb
bas
e
d
h
dee
per, an
d
i
sion
3D, F
l
art
o
i
versitas Ah
m
t
y is
3-D vir
t
the way of
e
is a
te
rm us
by compute
r
c
cepted defi
s
interactive
n
ts
are totall
y
e
tic
world. P
a
worl
d envi
r
l
ogie
s th
at i
n
R). Milgram
n
d "re
a
l" as
p
a
s illustrated
t
y-
Vir
t
uality
C
l
16, 201
3
m
ented
C
hildre
n
Suhaimi Yu
o
f Com
puter
M
alaysia
tm
ail.com
u
gm
en
te
d R
e
a
p
licatio
ns to
m
o
w
virtual e
n
many re
aso
n
s
e
n
viro
nment
c
ript were us
e
r
ie
s eac
h w
i
t
h
n
d Flex SDK.
d
Au
gm
en
te
d
R
d
mor
e
m
e
a
n
i
n
o
olki
t
m
ad
Dah
l
an
.
A
t
ual obje
c
t
s
a
e
nh
a
n
c
e
me
n
ed to
de
scri
b
r
-gene
rated
nitio
n
o
f
A
R
in
re
a
l
ti
m
e
,
y
immersed i
a
ul Milgram
r
on
me
n
t
s
,
e
n
volve the
m
mentione
d
p
ects of
MR
as
F
i
g
u
r
e
1
;
C
on
tinuum
Realit
y
n
sof
Sc
ie
nc
e a
n
d
a
lity. W
e
h
a
v
e
m
e
d
ical app
li
c
n
vi
ro
nm
en
ts
c
s
i
n
daily
life.
t
e
c
hno
log
i
es
e
d a
s
mai
n
la
n
h
a s
pecific
ro
l
The outco
me
R
e
a
lity for
pr
e
n
gful exp
e
rie
n
A
ll ri
ghts r
e
s
a
re
integ
r
at
e
n
t of the real
b
e a
live vie
w
in
put usuall
y
R
as
a
tec
h
n
a
n
d
regi
st
e
n VR
enviro
n
stated that
s
e
ither existi
n
m
erging of
re
a
a
bout form
u
e
n
vironm
en
t
;
3134
y
d
e
m
any
ati
o
ns,
c
an b
e
On th
e
that
it
n
gu
a
ge
l
e. T
h
e
of thi
s
e
school
n
ces
in
e
r
ved
.
e
d into
wor
l
d
w
of
a
y
with
n
olo
g
y
e
rs
the
n
m
ent
s
u
c
h a
n
g or
a
l a
nd
u
la
ti
n
g
t
s can
Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM
NIKA
e-ISSN:
2087
-278X
Towards
Building Web
Bas
ed Augment
ed Realit
y
Applic
ation... (Sule Tekk
es
inoglu)
3135
Real
environ
ments are
sh
own
at o
ne
e
nd of
th
e
cont
inuum, a
nd vi
rtual e
n
viro
n
m
ents,
at
the opposite
direction.
At the left, environment
s only
consisting
of real obj
ect
s
and includes
for
example
wha
t
is ob
se
rved
via a co
nvent
ional vide
o di
splay of a
re
al-worl
d
sce
n
e
. An additio
nal
example i
n
cl
ude
s di
re
ct viewin
g of the
sam
e
real
scen
e, but n
o
t via any pa
rti
c
ula
r
el
ectro
n
ic
displ
a
y sy
ste
m
. At the ri
gh
t, defines env
ironm
ent
s
onl
y
con
s
i
s
ting of
virtual obje
c
ts an examp
l
e
of which wo
ul
d be a comp
uter graphi
c. As indi
cat
ed i
n
the figure, the mo
st strai
ghtforward way
to view a Mixed Reality environ
ment is real
worl
d
and virtual worl
d obje
c
ts are pre
s
e
n
ted
together with
in a
singl
e
displ
a
y, that is a
n
yw
h
e
re bet
ween
the di
re
ction
of the virtu
a
lity
contin
uum.
Virtual Environment Te
chnolo
g
ies
are use
d
alm
o
st in any field su
ch a
s
military
appli
c
ation
s
, medical ap
pli
c
ation
s
, ente
r
tainment an
d
manufa
c
turi
n
g
[5]. AR has
been p
u
t to u
s
e
in medi
cal im
aging,
whe
r
e
docto
rs can
acce
ss
dat
a
about p
a
tient
s; aviation,
where
tool
s sh
ow
pilots impo
rtant data ab
out the
land
scape they are viewi
ng;
training, in whi
c
h tech
no
logy
provide
s
stu
d
ents or
techn
i
cian
s with n
e
ce
ssar
y dat
a about sp
ecific object
s
they are wo
rki
ng
with; and in
muse
um
s, where
artifact
s can b
e
t
agg
ed with info
rmation such as the a
r
tifact’s
histori
c
al
co
n
t
ext or wh
ere
it wa
s di
sco
v
er
ed. Th
e video g
a
me i
n
dustry
ha
s re
leased p
r
ima
r
y
augme
n
ted
reality pro
d
u
c
ts for mo
re th
an a
de
cad
e
as
well. But t
he regi
stratio
n
wa
s th
e p
r
i
m
ary
techni
cal
difficulty in A
R
appli
c
ation
s
t
hat many
re
sea
r
che
s
we
re
ca
rrie
d
o
n
to ove
r
co
me
efficiently [6,
7, 8, 9, 10, 11, 12].
The exa
c
t ali
gnment of virt
ual imag
es i
s
very
impo
rta
n
t whe
n
the o
b
ject
regi
stered [13].
If the alignme
n
t is not pro
p
e
r, AR wo
uld
not be co
nvin
cing. Fo
r exa
m
ple,
a real
chessb
oard wi
th
virtual pi
eces a fe
w
ce
ntimeters o
u
t
of
align
m
ent
i
s
usele
ss. Similarly, if a s
u
rge
on cann
ot be
entirely
ce
rtai
n that the
virtual tumo
r
he
or
she
se
e
s
i
n
sid
e
the
pat
ient’s
body i
s
exactly in
th
e
right pla
c
e.
Whe
n
the u
s
er is
stable al
ignment
of re
al and virtual
image
s come
true pe
rfectl
y,
a
system can b
e
said to offer good stati
c
regi
stra
tio
n
. Whe
n
use
r
st
art moving, the use
r
sh
ou
ld
notice the
r
e i
s
no laten
e
ss betwee
n
real
and virtual o
b
ject
s [14].
Acco
rdi
ng to previou
s
stu
d
i
es the di
spla
y techniqu
es
can b
e
divide
d three mai
n
cla
s
ses:
proje
c
tion
-ba
s
ed
di
splay
s
, han
dheld
di
splay
s
a
nd
see-th
rou
gh
h
ead-mou
n
ted
displays.
He
ad
Mounted
Displays is the
most flexible and di
re
ct
way to present aug
me
ntations of the
environ
ment to use
r
. Usual
ly for AR a camera
is mo
unted to the head
-mo
unte
d
displ
a
y, and a
comp
uter
cal
c
ulate
s
thi
s
camera’s
po
se
[15]. But
use
r
nee
ds to
we
ar it co
ntinuo
usly which mi
ght
be trouble
s
o
m
e an
d n
o
t
comfortabl
e aft
e
r
som
e
time
[16]. Also,
He
ad Mo
unted
Displays u
s
u
a
lly
not su
ppo
rt
multiple u
s
e
r
s. Anothe
r di
splay te
c
hni
q
ue
is
Proje
c
t
o
r-ba
sed displays whi
c
h make
the au
gme
n
tation visi
ble
to seve
ral
u
s
ers.
Moreov
er, p
r
oje
c
to
r ba
sed
di
spl
a
ys h
a
ve m
any
advantag
es
su
ch a
s
pro
v
ide con
s
i
s
te
ncy of
eye a
c
commo
datio
n, redu
ce
d motion si
ckn
e
ss,
along
with provide high
re
solutio
n
for t
he vis
uali
z
ati
on. Someho
w the p
r
oje
c
t
based di
spl
a
ys
also h
a
ve ki
n
d
of disa
dvan
tages. Usu
a
ll
y the setu
p
s
for proje
c
tion
-based di
splay
s
are fixed [17],
[18, 19, 20, 21]. Therefore this way is ca
use la
ck of m
o
vement. A single proje
c
to
r usu
a
lly is se
t
up for a sing
le use
r
and i
t
causes self-occlu
sio
n
. Lastly the han
dheld techniq
ue is the oth
e
r
displ
a
y techni
que that they can be
emb
edde
d into
m
obile devi
c
e
s
but they don’t supp
ort mobi
le
comp
uting
which
in
stalled
to the
syste
m
[22].
The
main limitation of handhel
d display
s
is the
tracking. M
o
st han
dhel
d
displ
a
ys u
s
e
ARToolKit o
r
tra
cki
ng
with marke
r
s [2
3, 24]. Anyway
hand
held di
splays can b
e
more flexibl
e
and
sup
por
t mobile AR
appli
c
ation
s
[25]. Example of
marker b
a
sed
AR as shown in Figure 2.
Figure 2. ARToolKit Marker ba
sed A
R
Evaluation Warning : The document was created with Spire.PDF for Python.
e-ISSN: 2
087-278X
TELKOM
NIKA
Vol. 11, No. 6, June 20
13 : 3134 – 3
141
3136
Unfortunately
,
we
still have problem
with r
eal
-time visual tracking. Elements in the
image mu
st b
e
corre
s
p
ond
ence wh
en p
o
se extra
c
tin
g
from a vide
o frame. It require
s softwa
r
e to
make
co
rre
spond
en
ce
s betwee
n
elem
ents in the
image an
d locate the 3D
obje
c
t in the real
worl
d, and b
u
ilding the
s
e
corre
s
po
nde
nce
s
in
live
video stream
s is
challe
ng
ing [26]. This
probl
em ha
s been
solved
by artificial markers whic
h
are pla
c
e
d
in
the sce
ne. Placin
g marke
r
in
the scen
e wo
rks very
well
for prot
otype
appli
c
ation
s
i
n
pre
p
a
r
ed
e
n
vironm
ents,
but is n
o
t totally
accepte
d
. It is not ab
out
aesth
etic
con
s
ide
r
ation
s
, the pla
c
em
en
t may not be pra
c
tical
wh
en
dealin
g with large e
n
viro
n
m
ents a
s
wel
l
[27]. Therefore some
stu
d
ies fo
cu
se
s on marke
r
le
ss
tracking
whi
c
h use
s
only feature
s
al
rea
d
y available in the scene [
28].
Ho
wever in t
h
is pa
per
we
are intereste
d
in how virtu
a
l environ
me
nts ca
n be combine
d
with web
ba
sed
appli
c
ati
ons,
with th
e ultimate
g
oal of
sup
p
o
r
ting o
r
din
a
ry use
r
s in t
heir
intera
ction
s
with AR. Int
e
rnet
users
need
web
si
tes for ma
ny rea
s
o
n
s to
sea
r
ch o
r
sh
are
informatio
n
a
nd
fo
r comm
unication or entertain
m
ent
pu
rpo
s
e.
O
n
the
othe
r
h
and, Au
gmen
ted
Reality is o
ne of the popula
r
fields on Virtual Environme
n
t Techn
o
logi
e
s
. This pap
er is
addresse
d th
e co
mbin
atio
n of the
s
e t
w
o te
chn
o
log
i
es
whi
c
h m
e
an to d
e
liver the au
gmen
ted
reality via we
b based ap
pli
c
ation.
2. Rese
arch
Metho
d
This sectio
n
is the descriptio
n
of the
method
ol
ogy that used in this p
aper fo
r
developm
ent
of web b
a
sed
augme
n
ted reality applicat
ion. This
wo
rk is
contai
ne
d a small
ga
me
whi
c
h exp
o
se interactio
n
betwe
en u
s
e
r
an
d thi
s
au
gmented
re
al
ity applicatio
n. The
pro
g
ram
asks
user th
e nam
e of a
n
imal which i
s
di
spla
ye
d
as 3
D
o
b
je
ct model
on
scen
e. Since
the
appli
c
ation h
a
s develo
ped
for pre-scho
ol child
ren,
p
a
rent
s req
u
ired to involve this game in
orde
r
to guide them
as demo
n
st
rated in Figu
re
3.
Figure 3. We
b based AR
Diag
ram
For thi
s
study
the fram
ewo
r
k i
s
divided i
n
to two
main
pha
se
s which
is d
e
si
gnin
g
pha
se
and impl
eme
n
tation ph
ase. De
signi
ng
pha
se i
s
in
v
o
lved thre
e steps that
will
be explai
ne
d in
next se
ction.
Secon
d
p
h
a
s
e is t
he im
ple
m
entati
on
of
web
ba
sed
A
ugmente
d
Re
ality. This p
h
ase
is involved coding to cre
a
te a web b
a
se
d augm
e
n
ted reality
appli
c
ation u
s
ing Fla
r
tool
kit,
Papervi
son
3
D
libra
rie
s
, a
nd Flex SDK.
2.1. Designi
ng Phase
De
signi
ng ph
ase h
a
s th
re
e com
pon
ent
s whi
c
h
are
desi
gning
user interfa
c
e,
desi
gning
3D mod
e
l an
d cre
a
ting the
marker a
s
sh
own Fig
u
re 4.
Figure 4. We
b AR Application De
sig
n
ing
Phase Di
ag
ram
Create w
e
b
p
a
g
e
3D Mod
e
l
Marker
Print the Marker
Allo
w
w
e
bc
am on AR
Page
Sho
w
mark
er to
w
e
bc
am
(Object is disp
la
ye
d)
Guess Animal
name
(If
ans
w
e
r)
Directed to Same
Pa
g
e
Directed to Nex
t
Pa
g
e
True
Fal
s
e
Create w
e
b
p
a
g
e
3D Mod
e
l
Marker
D
e
si
gn
in
g
Phase
Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM
NIKA
e-ISSN:
2087
-278X
Towards
Building Web
Bas
ed Augment
ed Realit
y
Applic
ation... (Sule Tekk
es
inoglu)
3137
2.1.1. Crea
ting Webp
age
Interfa
c
e
This
ne
w
we
b site
ena
ble
s
child
ren
to
visit this virtu
a
l zoo a
nd i
n
teract
with
3
D
a
n
imal
model
s
in re
al
wo
rld.
Ba
sically
it
wa
s desi
gne
d
a
s
simple we
b page whi
c
h use
r
can rea
c
h
desi
r
ed
data
simply an
d ef
ficiently. Although
user
ca
n acce
ss eve
r
ything ab
out
web
site fro
m
the ind
e
x pa
ge, lately thi
s
links
are
not
acti
vated.
T
o
create
the
main p
age,
CSS an
d
HT
ML
were u
s
ed. B
a
si
cally main
menu n
a
vigat
ed to hom
e, animal, ed
ucation, AR de
mo and
co
ntact.
The Au
gmen
ted Reality
has pla
c
e
d
at the
b
o
tto
m a
s
well t
hat the li
nk 'LET’S E
N
JOY
TOGET
H
ER'
will redi
rect them to AR
application as shown in Figure 5.
Figure 5. Onli
ne Zoo Mai
n
Page
2.1.2. Crea
ting 3D Obje
c
t
s
For thi
s
work 3D
model
s
h
a
s b
een
de
si
gned fo
r p
r
e
-
school
chil
dren to give th
e
m
ri
che
r
and ex
cited u
nderstan
ding
about a
n
imal
’
s
world. Eig
h
t different ki
nd
of animal a
u
g
mented i
n
th
is
study. The
s
e
animal mod
e
ls are co
w,
frog, flamin
g
o
, zeb
r
a, ele
phant, turtle, hippo, an
d gi
raffe
were u
s
e
d
. P
apervi
sion
3D
libra
ry is re
qu
ired
Co
ll
ada
format 3D
mo
dels. Coll
ada
model
s can
b
e
cre
a
ted a
nd e
x
ported u
s
in
g
many pop
ula
r
3D
mo
d
e
lin
g tools, in
clu
d
i
ng the o
pen
Blende
r3
D. For
this proj
ect
Googl
e Sket
ch
Up u
s
ed f
o
r creatin
g a
nd editing th
e 3D obj
ect.
Skectu
p is
3
D
modelin
g p
r
o
g
ram
market
ed by G
oogl
e and
de
sig
n
ed for archit
ectural, civil,
and m
e
chani
cal
engin
eers a
s
well a
s
filmmake
rs, gam
e develop
ers,
and related
profe
ssi
on
s. 3D obj
ect fo
rmat
requi
re
d to be Colla
da .da
e
file extensio
n for this proj
ect.
2.1.3. Gener
a
ting Mar
ker
Marker
gra
p
h
i
c imag
e ca
n be de
sign
ed
with any
grap
hics drawin
g
prog
ram. To
desi
gn a
grap
hic,
fit
th
e
de
sired sh
a
pe within a white
squa
re
th
at is
ce
ntere
d
within
a l
a
rg
er bl
ack
sq
ua
re.
FLAR M
a
rker Gene
rato
r (A
IR, 322K)
or
ARTool
Kit on
line Ma
rkerG
enerator’
req
u
ired
gen
eratin
g
the pattern file. Whe
n
the
printed
marke
r
imag
e sho
w
n to ca
mera
we n
o
tice th
a
t
application t
r
ies
to dra
w
a
sh
ape a
r
o
und t
he squa
re
bo
x, then we
press ‘G
et Pattern’
whi
c
h
sh
own
with yell
ow
lines belo
w
pi
cture and na
med
a
s
‘FLA
RPattern.p
at’.
As dem
on
strated Figu
re in
6, the marke
r
is
obtaine
d in this way.
Figure 6. Onli
ne ARtool
kit Marker
Gene
rator
Evaluation Warning : The document was created with Spire.PDF for Python.
e-ISSN: 2
087-278X
TELKOM
NIKA
Vol. 11, No. 6, June 20
13 : 3134 – 3
141
3138
2.2. Implementa
tion and
Coding
This ph
ase covers
co
ding
part in o
r
de
r to create web
base
d
AR. F
i
rst of all we need a
spe
c
ial
co
mpi
l
er in
orde
r to
build
ou
r au
gmented
re
ali
t
y. In this stu
d
y Adobe
Fla
s
h
CS u
s
e
d
as
compil
er of th
e proj
ect. Th
e libra
rie
s
wh
ich u
s
ed th
ro
ugh codin
g
a
r
e Fla
r
tool
kit, Papervisi
on3
D,
Flex SDK. As p
r
e-pro
c
e
s
sing, it is
ne
ce
ssar
y to p
r
epare the lib
rari
es
and
n
e
w p
r
oje
c
t fil
e
. A
document
cla
ss i
s
ne
ede
d to be created
in Flash
CS
within new projec
t file. It is
c
o
mpulsory to
cre
a
te sepa
rate folders in
side the
proj
ect folde
r
for librari
es
and
for cam
e
ra
para
m
eters.
And
finally 3D Coll
ada mod
e
l file adde
d into main proje
c
t file.
2.2.1. Simple
Algorithm for Web
Bases AR
The d
o
cume
nt cla
s
s is where
all
of the proj
e
c
t's
co
de i
s
written.
The foll
owi
n
g Figu
re
demon
strates the algorith
m
simply. As it can be
cle
a
rly see
n
, much of the work of FLA
R
and
Papervi
sion3
D for the proj
ect is hid
den
within the imp
o
rted lib
rari
es.
Star
t;
1.
Impo
rt
the
F
lash
SD
K,
FL
ARTo
olk
it,
P
aper
vis
ion
3D
2.
Decl
are
Cl
as
s Pr
ope
rti
es
(We
bCa
m,
Ma
rker
De
tec
ti
on,
Pap
erV
is
ion3
D)
3.
Cons
tru
cto
r ENTE
R_F
RAM
E even
t
b
uil
t
is the
lo
o
p
wi
ll be c
alle
d
repe
ate
dly
a
s
lo
ng
as
th
e ap
pli
cat
io
n is
ru
nni
ng
.
4.
Meth
ods
fo
r
clas
s f
unc
ti
ons
for
se
tu
p an
d m
ark
er
det
ect
ion
End;
Figure 7. Algorithm for
We
b based Aug
m
ented Reali
t
y
All variable
s
are d
e
cl
are
d
within the Class Prop
erti
es sectio
n. Most of this
se
ction is
pretty standa
rd, except th
e Pattern and
Params
p
r
o
p
e
rty decla
rati
on whi
c
h i
s
showi
ng the Fl
ex
Embed m
e
tatag a
s
sho
w
n
in Fig
u
re
8.
Embed ta
g e
nable
s
a
pro
perty to b
e
i
n
itialize
d
with
a
value loade
d
from an external file. The bytes
for the lo
aded file are baked into th
e SWFfile.
[Emb
ed(
sou
rc
e=".
/as
set
s/
FLAR
/FL
ARP
at
tern
.pa
t",
mi
meT
yp
e="a
ppl
ica
ti
on/o
cte
t-s
tr
eam"
)]
pr
iva
te
var
Pa
tte
rn
: Cl
ass
;
[Emb
ed(
sou
rc
e=".
/as
set
s/
FLAR
/FL
ARC
am
eraP
ara
met
er
s.da
t",
mi
meT
yp
e="a
ppl
ica
ti
on/o
cte
t-s
tr
eam"
)]
pr
iva
te
var
Pa
ram
s
: Cl
ass
;
Figure 8. Cod
i
ng for Flex Embed Meta T
a
g
Con
s
tru
c
to
r section i
s
fun
c
tion
which runs
whe
n
th
e cla
s
s is
created. The f
unctio
n's
name m
u
st m
a
tch the cl
ass name. In the following
steps, set up
code will
be
placed
here. In t
h
is
work, code i
s
pla
c
e
d
to set up th
e camera, FLA
R
Tool
kit, Pa
pervisi
on3
D
and to p
r
ep
a
r
e a
repe
ating loo
p
to handle m
a
rker d
e
tectio
n as dem
on
strated in Fig
u
re 9.
publ
ic fun
ct
ion Aug
men
te
dRea
lit
y
(
)
{
prep
are
Web
Ca
m();
prep
are
Mar
ke
rDet
ect
ion
()
;
prep
are
Pap
er
Visi
on3
D()
;
addE
ven
tLi
st
ener
(Ev
ent
.E
NTER
_FR
AME
,
loop
ToD
ete
ct
Mark
erA
ndU
pd
ate3
D);
}
Figure 9. Cod
i
ng for Cla
s
s Con
s
tru
c
to
r Stage
Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM
NIKA
e-ISSN:
2087
-278X
Towards
Building Web
Bas
ed Augment
ed Realit
y
Applic
ation... (Sule Tekk
es
inoglu)
3139
Lastly pa
pervision3
D
cod
e
library i
s
u
s
ed
for
han
d
l
e the im
port
i
ng po
sitioni
n
g
, and
rend
eri
ng of
the 3
D
m
o
del. FLA
R
To
olKit use
s
P
apervi
sion
3D for 3
D
vi
sualization. Here
Collo
ada 3
D
model pa
ram
e
ter is ad
ded
as sho
w
n in
Figure 10.
Priv
ate
va
r
COLL
ADA
_3D
_M
ODEL
:
Str
in
g ="
kap
lum
ba
ga.d
ae"
;
Figure 10. Setting 3D Mod
e
l
Papervisi
on3
D is libra
ry written in Acti
onScri
p
t that allow devel
oping 3
D
mo
dels in
Flash. Pa
pe
rvision3
D e
n
a
b
les
develo
p
e
rs to cre
a
te
exciting a
n
d
intera
ctive 3
D
mo
del
s. T
here
are
many opt
ions
that can
be created
b
y
usin
g
Pa
pe
rvision
3
D such a
s
simpl
e
b
anne
rs,
gam
es.
Since it run
s
i
n
Flash, you
can e
a
sily pla
c
e it on the web, or ma
ke
it accessibl
e
a
s
install
able
AR
appli
c
ation [2
9].
3. Results a
nd Analy
s
is
The proje
c
t is develope
d as onlin
e zo
o whi
c
h contain
s
we
b ba
sed
augme
n
ted reality for
edu
cation
al p
u
rpo
s
e. Befo
re it start
s
u
s
ers ar
e a
d
vised to p
r
int o
u
t the graphi
c ma
rker
whi
c
h
provide
d
in
main
page.
Once u
s
e
r
s
start th
e g
a
m
e, the
appli
c
ation
di
spla
ys me
ssag
e
whi
c
h
asks u
s
e
r
to allow web ca
mera to co
ntinue. Afte
r ca
mera o
pen, u
s
er
sho
w
s the marker to the
the we
bcam.
Figure 7
dem
onstrates the
re
sult for
first
object mod
e
l
.
The wide
black squ
a
re in
marker i
s
for
determi
nation
to denote su
ccessful initia
l marker dete
c
tion.
Figure 7. 3D
Frog M
odel
The p
r
oj
ect
can
no
w
rea
d
in th
e
surroundi
ng e
n
vironm
ent, visually sca
n
a
nd d
e
tect
relevant obj
e
c
ts. It works best to have
a simple
ba
ckgro
und of a solid wall in the applica
t
ion
becau
se com
p
lex scene
s
may confu
s
e
the detecti
o
n
scheme.
Th
e appli
c
ation su
perim
po
se
s
the
3D mo
del ont
o the user'
s
p
h
ysical sp
ace
.
The m
odel
now
rotate
s a
nd scale
s
a
s
the use
r
mov
e
s
the marke
r
. T
he gam
e will
contin
ue a
s
l
ong a
s
u
s
e
r
enters the
rig
h
t answe
r. If the user e
n
te
rs
wro
ng
an
swe
r
, it will
redi
re
ct to the
sam
e
pa
ge to t
r
y
again. T
h
e
r
e
are
eight
different 3
D
mode
ls
in this game.
3. Sy
stem Testing and
An
aly
z
e
Analyzing
of
the sy
stem
starte
d
with
tr
ying o
n
subje
c
ts. Th
e
y
are
evalua
ted and
measured by
determini
ng the advant
ag
es an
d disa
d
v
antage
s of usin
g the system. The target
popul
ation fo
r this research wa
s pe
opl
e lives in
UT
M Skudai, M
a
laysia. In th
is re
se
arch, the
sampl
e
woul
d be
total
of
15
re
spo
nde
nts. Usin
g
a
set of
qu
estio
nnaires i
s
the
mo
st p
r
omin
ent
Evaluation Warning : The document was created with Spire.PDF for Python.
TEL
K
3140
meth
wa
s
d
use
r
base
d
to ti
c
st
ron
Bas
e
mod
e
4. C
o
acco
m
edu
c
a
solut
i
to im
sin
c
e
realit
y
requi
rend
e
proje
obje
c
Ref
e
[1]
R
&
E
[2]
R
[3]
K
2
[4]
M
I
[5]
S
P
[6]
D
e
W
[7]
S
[8]
P
a
[9]
K
G
K
OM
NIKA
V
ods
to gath
e
d
evelo
p
e
d
t
o
Section
A
sati
sfacti
on.
d
augm
e
n
te
d
c
k (
√
) th
e a
n
gly disa
gree
e
d
on
m
ode
r
e
rate lev
e
l o
f
o
nclusio
n
Bas
e
d o
m
p
l
is
he
d w
e
a
tion
al a
u
g
m
i
o
n
to teach
prove th
e c
u
e
the cu
rren
t
y
we
b b
a
se
d
re
s 3
D
mo
d
e
ri
ng too
l
s
c
ct do
es
not
c
t with phys
i
c
ren
ces
R
oll
a
n
d
J, Da
v
&
T
Caudel
l,
e
E
rlba
um Ass
o
R
h
i
en
go
l
d
H
.
K
lei
n
G.
Visu
a
2
00
6.
M
ilgram
P,
K
I
nformation a
n
S
inclair P.
I
n
P
h
i
lo
so
phy
, U
D
Ch
eok, S
W
e
ntertai
n
me
n
t
W
orkshop o
n
S
mith J.
T
o
w
a
P
asman W
,
W
a
nd ACM Inte
K
and
ikon
da
K
G
raduate Stu
d
V
ol. 11, No.
6
e
r the
de
m
a
o
accomm
od
A
i
s
related
Se
ction B
q
d
reality
app
n
sw
er
wher
e
with each s
t
r
ate valu
e
o
f
s
a
tis
f
ac
tion
n th
e expla
e
b
ba
se
d
A
m
ente
d
re
ali
t
child
ren ani
m
u
rre
n
t appl
ic
a
t
appli
c
ati
o
n
d
ap
plicat
io
n
d
e
l
in
the
C
c
an be use
d
provid
e a
n
i
c
al move
m
e
n
v
i
s
L, Bail
lot
Y
e
ds., F
undam
e
o
c
.
2000.
V
i
rtual R
eal
it
y
a
l
T
r
acking fo
r
K
ish
i
no
F. A
t
n
d System
s
. 1
n
t
egrati
ng H
y
ni
ve
rsi
t
y
o
f
S
o
W
F
ong, KH G
t
system
with
Net
w
ork a
nd
a
r
d
s Building
A
W
ood
w
a
rd C.
I
r
natio
nal S
y
m
K
.
Using Virtu
a
d
i
e
s T
he Univ
0
2
4
6
6
, June 20
1
3
a
nde
d info
r
m
ate this rese
to de
mogra
p
ue
stion
nair
e
lication i
s
h
o
e
it whethe
r
t
atement.
Fi
g
o
f mean is
2
a
s
de
mo
ns
t
na
tion
o
n
t
h
A
R. We fo
u
t
y appli
c
ati
o
n
m
al
s nam
e
w
a
tion. It is
pr
o
created d
o
n
re
qui
red
s
p
C
olla
da for
m
d
suc
h
a
s
V
mated 3
D
m
n
t s
i
mulation
Y
.
A
survey of
e
n
t
als of W
e
a
y
, Summit Bo
o
r
Au
gm
en
te
d
R
t
a
x
o
nom
y of
9
94; 77(1
2
):
1
y
perm
e
d
i
a T
e
o
ut
hampto
n
.
2
oh, X
Yan
g
,
W
u
b
iq
uitous c
o
S
y
stem Su
pp
o
A
ug
me
n
t
ed
R
e
I
mple
mentati
o
m
po
si
u
m
on
M
i
a
l Real
ity
an
d
ers
i
t
y
of T
o
le
d
3
: 3134 – 3
1
m
ation. A se
t
arch.
p
hi
c inf
o
rm
a
e
was des
i
gn
o
w useful
for
r
they stron
g
g
ure 8. Use
r
2
.65 to 2.
8
6
t
rate Fig
u
re
8
h
e me
thodo
nd o
u
t the
n
for
pr
e-
sc
h
w
ith instructi
v
o
ble
m
that s
o
es only sta
t
p
ecific li
brar
y
m
at only. T
o
V
Ray, Light
U
m
odel. Fo
r f
u
of object.
track
i
ng tec
h
n
rabl
e Comp
u
t
o
k
s
. 199
1: 55-
R
ea
l
i
t
y
. Docto
mi
xe
d re
alit
y
1
32
1-13
29.
e
ch
ni
ques
w
i
t
2
0
04.
W
Li
u, F
F
a
r
z
o
mputin
g a
n
d
o
rt For
Game
s
e
alit
y W
eb A
p
o
n
of a
n
au
gm
e
i
xe
d and Au
g
m
d
Au
gmente
d
d
o, 2
011.
1
41
t
of specific
a
a
tion while
S
ed fo
r p
a
re
n
their child
re
g
ly agre
e
, a
Satis
f
ac
tion
6
which me
a
8
.
lo
gy an
d i
m
most ap
pr
o
h
ool chil
dre
n
v
e and fanc
y
o
metimes 3
D
t
ic model of
y
supp
orts
P
o
make
mo
r
U
p, Shade
rli
u
ture work
d
n
olo
g
ie
s for v
i
t
ers a
nd Aug
m
74
.
r Ph
ilo
so
phy
,
y
v
i
s
ual
dis
p
l
a
t
h Au
gmente
d
z
biz.
Hu
ma
n
P
d
tang
i
b
le
in
t
e
s
(NetGames
p
plic
ations. V
U
e
n
t
ed
re
al
i
t
y
s
m
e
n
ted Re
alit
y
Re
ali
t
y to T
e
Str
o
Agr
e
Un
d
Dis
a
Str
o
e
-
a
l
l
y
cust
o
m
i
z
S
ection B i
s
n
ts
to inves
t
i
g
n. Re
sp
ond
e
gree, u
nde
c
a
n total of
r
m
plem
ent
ati
o
o
priative w
a
n
. The
proje
c
y
way. Ther
e
D
object can
n
animal. Ba
s
P
apervi
sion
3
r
e
reali
s
tic
3
gh
t, IRende
d
evelope
rs
c
i
rtual env
iron
m
m
ente
d
Real
it
y
Univ
er
sit
y
of
C
a
ys
.
IE
I
C
E
T
d
Re
ali
t
y E
n
P
ac
ma
n: a s
e
e
raction.
Pro
c
'
03). 200
3; 7
1
U
Un
ive
r
sit
y
A
m
s
ystem
on
a
P
y
(ISMAR’03)
e
ach Human
A
o
ngly
Agree
e
e
d
ecided
a
gree
o
ngly
Disagre
e
-
ISSN: 2087
z
e
d
que
stio
n
related to l
e
g
a
t
e usage
o
e
nt
s we
re re
q
c
i
ded, disag
r
r
esp
o
nd
ents
o
n, the m
e
t
h
a
y to prod
u
c
c
t c
a
me
up
w
e
ar
e
several
n
ot d
i
s
p
la
y t
e
s
i
c
ally aug
m
3
D.
Paperv
i
s
3
D model
s,
r. In additi
o
c
a
n
model t
h
m
en
t
s
. In W.
B
y
, ch
ap. 3, La
w
C
ambr
id
ge,
O
T
RANS
ACTIO
N
n
vi
ro
nm
en
t
s
.
e
ns
in
g
-b
ased
c
ee
di
ng
s of t
h
1
-81.
m
sterda
m. 20
P
DA
. Proc. 2n
d
. 2
003
; 276–
2
A
na
tom
y
. Coll
e
-278X
n
nai
re
e
vel of
o
f web
q
uired
r
ee
o
r
have
h
od i
s
c
e
an
w
ith a
ways
e
xtur
e
m
ent
ed
s
ion3D
oth
e
r
o
n thi
s
h
e 3D
B
a
r
fi
eld
w
rence
O
ctober
N
S on
Docto
r
mobi
l
e
h
e
2n
d
10.
d
IE
EE
2
77.
e
ge of
Evaluation Warning : The document was created with Spire.PDF for Python.
TELKOM
NIKA
e-ISSN:
2087
-278X
Towards
Building Web
Bas
ed Augment
ed Realit
y
Applic
ation... (Sule Tekk
es
inoglu)
3141
[10]
F
r
eeman
R.
In
teractive Mo
de
ling
an
d T
r
ack
i
ng M
i
xed
an
d
Aug
m
e
n
ted
R
eality
. U
n
ivers
i
t
y
C
o
ll
ege
Lon
do
n. 200
8.
[11]
Barrill
ea
u
x
J. Exp
e
ri
ences
an
d
Observatio
ns
i
n
App
l
yin
g
Au
g
m
ented
Rea
lit
y to Live T
r
aini
n
g
.
Peculiar
T
e
chno
log
i
es.
Oaklan
d,
199
9.
[12]
T
homas B, Cl
ose B, D
ono
g
hue, J S
quir
e
s
J, De Bo
nd
i
P, Morris M, Piekarski
M.
ARQuake: A
n
Outdoor/Ind
oor
Aug
m
ente
d
Real
ity F
i
rst P
e
rson
App
lic
ati
o
n
. Proc
ee
din
g
s of th
e
4th
Internatio
na
l
S
y
mp
osi
u
m on
W
earabl
e Co
mputers. 200
2;
139-1
46.
[13]
Z
hou
F
.
T
r
end
s in Aug
m
ente
d
Rea
lity T
r
acking, Interacti
o
n and
Disp
l
a
y
.
Center for Hu
man F
a
ctors
and Erg
o
n
o
mic
s
, Nan
y
an
g T
e
chno
log
i
cal U
n
i
v
ersit
y
, Sin
g
a
p
o
re. 200
8.
[14]
Gordon I, Lo
we D.
Scene
mode
lin
g, recog
n
itio
n an
d trac
king w
i
thi
n
vari
ant i
m
ag
e feat
ures
. In Proc.
3rd IEEE and
ACM International
S
y
m
posium on Mixed
and Augmente
d Realit
y
(ISMAR’04).
2004:
110
–1
19.
[15]
Kano H, Kitabay
ashi K, Kijima R.
Reflex
hea
d mou
n
ted
displ
a
y: Hea
d
mo
unted
disp
lay for virtua
l
reality w
i
th ti
me la
g co
mpens
ation.
In Pr
oc. T
enth Internati
ona
l
Co
nfere
n
c
e on V
i
rtua
l S
y
stems
an
d
Multimed
ia (VS
MM’04). 20
04.
[16]
T
homas BH, D
e
mczuk V, P
i
e
k
arski W
,
He
p
w
o
r
th D, G
unt
her B.
A
wear
able comput
er
system with
aug
mente
d
re
ality to su
pp
o
r
t terrestrial n
a
vig
a
tion
. Pr
oceedings
of S
e
cond IEEE International
S
y
mp
osi
u
m on
W
earabl
e Co
mputers). 199
8
;
168-17
1.
[17]
Ki
yoka
w
a
K, Billi
ng
hur
st M, Camp
bel
l B, W
oods E.
An occlusi
on ca
pa
ble o
p
tical se
e
-
throug
h he
ad
mo
unt
disp
lay
for su
pp
ortin
g
co
lloc
a
ted
c
o
lla
bor
atio
n
. In Proc. 2nd IEEE and A
C
M
International
S
y
mp
osi
u
m on
Mixe
d an
d Au
gmente
d
Re
alit
y (ISMAR’0
3). 200
3; 133
–1
42
.
[18]
Yokokohji Y,
Suga
w
a
ra Y,
Yoshik
a
w
a T
.
Accurate
i
m
ag
e ov
erlay
o
n
seethro
u
g
h
h
e
ad-
mo
unte
d
displ
a
ys
usi
ng vision and acceler
o
meters
. Proc. IEEE Conferenc
e on Virt
u
a
l Re
alit
y
.
200
0; 247–
25
4.
[19]
Sutherl
a
n
d
I. A Hea
d
-Mo
unt
ed T
h
ree D
i
m
ensi
ona
l D
i
spl
a
y
,
Pr
oce
edi
n
g
s of F
a
l
l
Jo
i
n
t Comp
uter
Confer
ence. 1
968; 75
7-7
64.
[20]
Cau
del
l T
P
, Mizell
DW.
Aug
m
e
n
ted
Re
alit
y: An App
licati
on of
Hea
d
s-
Up D
i
spl
a
y T
e
chno
logy
t
o
Manu
al Man
u
facturin
g Proce
sses
. Proceedings of 1992 IEEE Ha
w
a
ii
International Conferenc
e on
S
y
stems Sci
e
n
c
es. 1992; 6
5
9
-
669.
[21]
Karitsuka T
,
Sato K.
A w
earabl
e mixe
d re
ality w
i
th an o
n
-bo
a
rd pr
ojec
tor
. In Proc. 2nd IEEE an
d
ACM Internatio
nal S
y
mp
osiu
m on Mixed a
n
d
Augme
n
t
ed
Real
it
y
(ISMA
R’03). T
o
k
y
o. 2
003; 32
1–
32
2.
[22]
Morrison
A, Oulasvirt
a P, Pel
t
onen
S, Lem
melä
G, Jac
u
c
c
i G, Reitma
yr
J, Näsän
en, A
Juustil
a
.
Li
k
e
Bees ar
ou
nd th
e Hiv
e: A Co
mparativ
e Study
of a Mo
bil
e
Au
gmente
d
R
eal
ity Map.
Proc
ee
din
g
s of
t
h
e
27th inter
nati
o
nal co
nfere
n
ce
on Huma
n factors in
comp
utin
g s
y
stems (CH
I
2009). 20
09; 188
9-18
98.
[23]
Kato H, Billi
ng
hurst M
. Marker tracking a
n
d
HMD cali
bra
t
ion for a vide
o-bas
ed a
u
g
m
ented re
alit
y
confere
n
cin
g
s
ystem.
Proc
eedings of the 2nd IEEE and A
C
M
International Workshop
on Augmente
d
Real
it
y
(IW
A
R 99). 199
8; 85-9
4
.
[24]
Kalkusc
h
T
,
Lid
y
B, Kna
pp
M, Re
itma
yr G
,
Kaufman
n
H,
Schmalsti
eg
D.
Structured Visua
l
Markers
for Indo
or Path
findi
ng.
Pr
oceedings
of the F
i
rst IEEE Intern
ational Works
h
op on ART
oolKit (ART
02),
200
2.
[25]
W
agner
D, Sc
hmalsti
eg
D.
F
i
rst steps tow
a
rds h
and
he
ld
aug
mente
d
re
ality
. In
7th Intl. Sy
mposi
u
m
on W
eara
b
le C
o
mputers (ISW
C’03). W
h
ite Pl
ains, NY. 200
3
;
127-13
7.
[26]
M Möhrin
g, C
Lessi
g, O Bimber.
Vid
eo Se
e
-
T
h
roug
h AR o
n
Cons
u
m
er C
e
ll Ph
on
es
. Procee
din
g
s o
f
the 3th IEEE/ACM inter
national
S
y
m
pos
ium on M
i
x
e
d and A
ugmente
d Realit
y
(ISMA
R
04).
2009;
252-
253.
[27]
Schal
l G, W
a
g
ner D,
Re
itma
yr G, T
a
ichma
nn E,
W
i
eser
M, Schmalsti
e
g D,
H
o
fman
n, W
e
lle
nh
of B.
Globa
l pose e
s
timati
on us
ing
multi-s
ens
or
fusio
n
for outdo
or Aug
m
e
n
ted
Real
ity
,
T
e
ch. Univ. Graz,
Graz, Austria, 200
9.
[28]
Andik
ond
a
K.
Using
Virtua
l
Real
ity an
d Au
gmente
d
R
eal
i
t
y to T
each H
u
man A
nato
m
y
. Coll
ege
of
Graduate Stu
d
i
e
s T
he Univers
i
t
y
of T
o
ledo, 2
011.
[29]
Skry
pny
k, Iry
n
a, David G Lo
w
e
.
Sce
ne
mo
de
lin
g, reco
gniti
on a
nd tr
ackin
g
w
i
th in
varia
n
t imag
e
features. Mixe
d an
d Au
g
m
ent
ed R
eal
ity
. ISMAR 20
04. T
h
ird
IEEE and A
C
M Internatio
na
l
S
y
mp
osi
u
m
on. IEEE. 2004
.
[30]
T
ondeuer P, W
i
nd
er J.
Paperv
i
sion
3D Esse
ntials (1. ed
). Pa
cket Publis
hin
g
.
2006.
Evaluation Warning : The document was created with Spire.PDF for Python.