visual augmented reality interface for table-top e-businessenvironment
TRANSCRIPT
8/3/2019 Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment
http://slidepdf.com/reader/full/visual-augmented-reality-interface-for-table-top-e-businessenvironment 1/6
Visual Augmented Reality Interface for Table-top E-Business
Environment
Alfred Chena, Ya-Ling Huang
b, Chien-Hsu Chen
c, Kuang-Ching Tai
d
a Department of Spatial Design, Kun Shan University, Taiwan b Department of Visual Communication Design, Kun Shan University, Taiwanc Department of Industrial Design, National Cheng Kung University, Taiwan
d Department of Visual Communication Design, Kun Shan University, Taiwan
Abstract
With rapid development of the Internet, diversified e-business models encourage changes in consumers’
shopping behaviors. In existing e-business models, most of the websites only provide images and limited
information of the products for the consumers. Provided only with virtual images, it is difficult for them to judge
how the products will afterwards fit in the real environments. In this research, the authors have attempted to
provide precise visual images and correct information of the products for the consumers. To achieve this goal, the
authors have adopted augmented reality technology as a tool to develop a system which allows the virtual
products adopted from websites to merge in consumers’ actual home environment. In the developmental stage of the system, a desktop computer, a web camera, location cards, and an interface in webpage form are incorporated
to develop an interactive human/computer interface. This interface lets consumers augment the three-dimensional
virtual artworks to a specified location of the actual environment. It also creates new shopping experiences for
consumers.
Keywords: Human/computer Interaction, Augmented Reality, Webpage, E-business
1. Introduction
Due to the fact that the internet has integrated
into the lives of the global population, e-business has
become a mechanism to provide product
consumption in response to the digitalization of
global commerce and the consumers’ purchasing
trend. Regrettably, the information provided by these
e-businesses is focused only on displaying each
individual product or integrating it into a pre-
designed or pre-arranged display environment.
Therefore, how an actual product will fit into the
real-life space of the consumer still requires the
imagination and mental calibration of the consumer.
In terms of helping the consumer to visualize the
actual product in her living environment, there is not
much improvement in shifting the mechanism from
conventional stores to online shops. By applying the
technology of Augmented Reality onto e-business,
this study will demonstrate how Augmented Reality
can help to present an accurate image of the product
to the consumers through the internet in order to
integrate the product into the consumers’
environment.
2. Related References
2.1. Augmented Reality
Augmented Reality represents the integration of
8/3/2019 Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment
http://slidepdf.com/reader/full/visual-augmented-reality-interface-for-table-top-e-businessenvironment 2/6
computer generated graphic and the real world into
an overlapping image through the user’s see-through
head-mounted display. An example of AugmentedReality is placing a 3D computer generated image of
a teacup on a real teacup saucer that is physically
present in the environment. Through Augmented
Reality, the user can also freely walk about the room
and the teacup will still display on the exact
predetermined location. The attribute of the delivered
image will not be restricted or altered by the location
of the viewer in the same environment. Although
Augmented Reality could easily be confused with
Virtual Reality, the fundamental difference rests on
the fact that Virtual Reality tries to replace the real
world with a synthesized virtual world while as
Augmented Reality “augments” the synthesizedobjects onto the real world. [1]
The purpose of an Augmented Reality
system is to enhance a user’s perception through an
interactive interface that delivers a streaming image
and was produced by integrating the real world with
virtually generated objects. In between reality and the
virtual world, there are several ways to classify
computer interfaces. According to Milgram, the
classification of the interfaces could be determined
by how much the user’s environment is consisted of
computer generated graphic. Milgram proposed a
scale that represents the multitude of AugmentedReality applied to an environment in a linear fashion.
The environment on the most left hand side of the
scale represents a world without any synthetic image
and while as on the most right hand side of the scale
represents a world that is solely made out of Virtual
Reality. In between of these two extremes is the
world that is consisted of virtual images augmented
onto the real world environment. Many of the
interfaces that are used by the users can be placed
onto a specific location of this scale. [2]
2.2. E-business
E-business’s defining character is using the
internet as the medium of communication and
utilizing such medium for business activities such as
online shopping, online ordering, online publishing,
and online marketing. It can be classified into three
categories based on the mode of the transactions such
as Business to Consumer, Business to Business, and
Consumer to Consumer. E-business makes business
transactions faster and easier, but at the same time, it
also brings competition to the next level. [3]
2.3. Consumer Behaviour Process Mode
Consumer behavior process mode is used to analyze
the phases of consumer behavior to provide
marketing reference. The particular E-business model
inside the Consumer behavior process mode
elaborates the consumer’s behavior into seven
sequential phases: confirmation of needs, information
search, pre-purchase evaluation, purchase, using of
products, post-purchase evaluation, and termination
of use. Among the seven phases, pre-purchase
evaluation and post-purchase evaluation are
connected in such a way that the purchasing
experience between pre-purchase and post-purchase
will influence the decision of the buyer’s next purchase. [4]
3. Webpage Architecture
The core webpage is divided into six pages and the
order of sequence is as follows: Home Page, Select
Merchandise, Preview, Checkout, Print Location
Card, and Help. The first four web pages belong to
shopping process and the latter two belong to
customer support. The functions of these pages are
listed below:
1. Home Page: Conveying the purpose of the
webpage through both image and text. When a
consumer loads the Home Page, the page should be
easy to navigate while showing the necessary
information that is needed to be communicated to the
consumer.
2. Select Merchandise: Providing the consumer a
selection of merchandise that matches the consumer’s
need through both representation in text and image.
Text will include information such as merchandise
name, price, and specification. Image will include
thumbnails and enlarged pictures of the merchandise.
3. Preview: By using the consumer’s web camattached to her personal computer, she is able to
upload the image of her living environment onto the
webpage in order to preview the virtual merchandise
mapped into her living environment.
4. Checkout: This is the final stage of the shopping
process. Through this page the consumer can confirm
that she has purchased her merchandise through
display of image and text.
5. Print Location Card: This page provides the
function to print the location card.
8/3/2019 Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment
http://slidepdf.com/reader/full/visual-augmented-reality-interface-for-table-top-e-businessenvironment 3/6
6: Help: This page provides information about how
to navigate this website and a flow chart that will
guide the consumer through how to use AugmentedReality technology in her shopping experience. (See
Table 1)
Table 1 Webpage Architecture
In order to make this webpage flexible and
convenient to the consumers, these pages except
“Checkout” can be inter-linked together. (See Figure1)
4. System Configuration
The configuration of this page will focus mainly on
integrating Augmented Reality onto an e-business
webpage that contains a purchase system. Consumer
who browses this webpage has several hardware
requirements such as: personal computer, web cam,
and a location card. (See Figure 2 and 3)
Figure 2 Location Card
Figure 3 Primary Functions of an E-businessWebpage
This webpage is built based on Macromedia
Director as the page platform with the aids from
other various graphic software. The webpage is
consisted of four primary functions and they are:
Page Transition, Interface Design, Augmented
Reality, and Network. The definitions of each of the
functions are listed below.
1) Page Transition: Page Transition is the function of
linking and inter-linking of pages within this site.
1 2 3 4 5 6
Home PageSelect
MerchandisePreview Checkout
Print Location
CardHelp
Shopping Process Costumer Support
Page Transition
Interface Design
Augmented Reality
Select
Merchandise
Preview Checkout
Select
MerchandisePreview Checkout
Home Page
Home Page
Link
Print Location
CardHelp
Print Location
Card
Help
No Link
Target Page
Figure 1 Webpage Links
Original Page
8/3/2019 Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment
http://slidepdf.com/reader/full/visual-augmented-reality-interface-for-table-top-e-businessenvironment 4/6
This function utilizes Director Software’s timeline
function to create a seamless transition between
pages. A still frame will be the main frame and insidethis main frame there will be buttons to link to other
frames. It is useful to consider each frame as a
different traditional page on a website. These buttons
that interlink the frames together can be considered
as hyperlinks as well. 2) Interface Design: Interface
Design includes image editing, color editing,
interactive buttons, and audio effects. Using
Macromedia flash, the program can deliver an ideal
website that takes background, buttons, and various
details into consideration. The final format of the file
will be swf files and it will be placed into Director
Software as different frames. 3) Network: Using the
final production stage of the files, the programconverts the swf files into dcr (Shockwave files)
which can be accessible by any personal computer.
This system then can be run on a web browser,
therefore, delivers virtual merchandise to consumers
all over the internet. 4) Augmented Reality:
Consumers can manipulate Augmented Reality
system through this website.
The necessary functions of an Augmented
Reality system are: Image Input Control, Image
Processing, 3D coordinate calculation, 3D model
construction, and mapping of image with 3D model.
The definition of each function is as follows: 1)
Image Input Control: Literally controlling the image
that is being inputted. Using two Director Software’s
supporting programs: FileXtra4 and
cXtraVideoCapture made by cXtra. The process of
inputting the image will be activating web cam in
order to upload the environment into the website’sinterface. Then the system will convert the
environment into a still frame image that fits into the
format required by the website’s interface. 2) Image
Processing: The goal of this function is to process the
image taken in by the web cam which includes the
background of the environment with the main focuson the location card. The image will be cropped into
showing the location card only without the
background. 3) 3D coordinate calculation: This
function is to calculate the coordinate of the location
card in the processed image. 4) 3D model
construction: This webpage will use a programming
language “Lingo” to construct the 3D model of the
virtual merchandise. 5) Mapping of Image and 3D
model: Using Director Software to construct 3D
model, this program will first create a 3D cast
member and then it will construct a 3D model
afterwards. This function uses the image inputted by
the web cam to be the background image of this 3Dcast member, then placing this virtual merchandise
onto the background in a location that is based on the
coordinates of the location card. (See Figure 4)
5. Operational Procedure
This flowchart demonstrates the two different kinds
of purchase process: Augmented Reality Mode and
Conventional Purchase Mode. The difference
between these two lies in whether or not the process
involves the Preview page. Augmented Reality Mode
utilizes the preview page while the Conventional
Purchase Mode does not. Furthermore, in
Augmented Reality mode, the Checkout page will
display images that were augmented by Augmented
Reality technology. In the Conventional Purchase
Mode, the page will directly transit from Select
Merchandise to Checkout and will only showenlarged image of the merchandise during Checkout.
(See Figure 5)
Image InputControl
ImageProcessing
3D CoordinateCalculation
3D ModelConstruction
Mapping of Image with 3D
Model
Figure 4 Necessary Functions of Augmented Reality System
Select
MerchandisePreview CheckoutHome PageAR Mode
Conventional Mode
Print Location Card
Select
Merchandise
CheckoutHome Page
Figure 5 Webpage Operational Procedure
8/3/2019 Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment
http://slidepdf.com/reader/full/visual-augmented-reality-interface-for-table-top-e-businessenvironment 5/6
The Augmented Reality Purchase Mode of this
webpage can be divided into eight steps and the
operational procedures are as follows:
1. As soon as the consumer enters the website, click
on the “Select Merchandise” button to switch the
page into Select Merchandise page.
2.After the consumer enters the “Select
Merchandise” webpage, inside the merchandise
column there are images and basic introductions of
the merchandise (Title, Artist, Date, Price, and etc).
The consumer can click on each of the image in
order to select the desired merchandise. The image of
the selected merchandise will be enlarged in the
display box in order for the consumer to view thefine details of such products. The selected
merchandise will also provide a more detail
information inside the information box including:
historical background, style, and theories. Then the
consumer can click on “Print Location Card” button
to switch to the “Print Location Card” page.
3. After the consumer enters the “Print Location
Card” page, there will be a popup window for
printing. The consumer will click “ok” to print the
location card. After printing, the consumer will click
the “Preview” button to switch the page to the
Preview page.
4. After entering the Preview page, the icon that says
“web cam” will blink to guide the consumer to click
on the web cam icon that lies within the AR toolbar
on the left hand side of the page. By clicking this
icon, this program will activate the web cam on the
consumer’s personal computer.
5. After the web cam has been activated, the web
cam can capture images that will display in the
preview box. The consumer should first place the
location card at the location where the merchandisewill be located, and then the consumer should hold
the web cam by hand and aim at the location card
and capture the best image by adjusting the focus of
the web cam.
6. When the web cam is focused and the preview box
displays the location card in the ideal position of the
environment for the consumer, the consumer should
click the “capture” button in the AR toolbar. After
the image is captured, the program will automatically
calculate the coordinate of the location card and then
place the virtual image of the merchandise in a
precise manner over the location card.
7. The consumer will be able to preview themerchandise and see how the merchandise matches
with her living environment. The “Hide” and “Show”
buttons on the AR toolbar will be able to hide or
show the virtual image of the merchandise. The
consumer can compare the image of her environment
with or without the merchandise. Then the consumer
will click “Checkout” button on the top to purchase
the desired merchandise and the page will transit into
the Checkout page.
8. After loading the checkout page, the page will
display the selected merchandise’s basic information
on the right while the detailed information is
displayed below the image. There is also another link
inside the page to go back to the “Select
Merchandise” page in order to make it convenient for the consumer to shop for more merchandise. (See
Figure 6)
First Step
Second Step
8/3/2019 Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment
http://slidepdf.com/reader/full/visual-augmented-reality-interface-for-table-top-e-businessenvironment 6/6
Third Step
Fourth Step
Fifth Step
Sixth Step
Seventh Step
Eighth Step
Figure 6 Eight Steps in Operational Procedures
6. Conclusion
Since the globalization of business and trade, the
market competition is getting fiercer each day. The
price, quality, channels, and information of a product
are the factors to determine how successful an
entrepreneur is. By adding Augmented Reality to an
online shop, this research intends to provide
consumers with more information before they make
their purchases. This study also creates a positive
experience for online shopping, and boosts business
revenue.
7. Acknowledgement
This research is dedicated to the financial support of
National Science Council of Republic of China.
Code Number: 94-2213-E-168-006
References
[1] Feiner, S. K.2002”Augmented Reality: A New
Way of Seeing: Computer scientists are developing
systems that can enhance and enrich a user’s view of
the world.” Scientific American, April 2002. p.36-45.
[2] Mark Billinghurst. Hirokazu Kato. Ivan Poupyrev,“The MagicBook: A Transitional AR Interface”,
Computers & Graphics, Vol.25, 2001, pp.745-753
[3] Jonassen, D.H., ”The physics tutor: Integrating
htpertext and expert systems”, Journal of Educational
Technology Systems, No. 22, 1993, pp. 19-28
[4] Blackwell,R.,& Miniard,P.& Engel,J., “Consumer
Behavior”, FL: Harcourt, p.83