Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment

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



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.



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



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



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



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

Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment

Documents

Transcript of Visual Augmented Reality Interface for Table-Top E-BusinessEnvironment