mews
l
9.0 O 3

:4 399/ 6%

LIBRARY This is to certify that the

Michigan State 3 thesis entitled
University _.

 

SPATIAL INTERFACE AND INTERPERSONAL INTERFACE
DESIGN:
DESIGN REPORT FOR HOMENETTOO PROJECT

presented by
MING TANG

has been accepted towards fulfillment
of the requirements for the

Master degree in Art

fig/14% KMW

Major Professor’s Signature

 

 

4/20/2003

 

Date

MSU is an Affirmative Action/Equal Opportunity Institution

 

PLACE IN RETURN BOX to remove this checkout from your record.
TO AVOID FINES return on or before date due.
MAY BE RECALLED with earlier due date if requested.

 

DATE DUE DATE DUE DATE DUE

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6/01 o'JCIRC/DateDue.p65-p.15

 

SPATIAL INTERFACE AND INTERPERSONAL INTERFACE DESIGN:
DESIGN REPORT FOR HOMENETTOO PROJECT

By

Ming Tang

A THESIS

Submitted to
Michigan State University
In partial fulfillment of the requirements
For the degree of

MASTER OF ARTS
Department of Telecommunication

2003

ABSTRACT

SPATIAL INTERFACE AND INTERPERSONAL INTERFACE
DESIGN:

DESIGN REPORT FOR HOMENETTOO PROJECT
By
Ming Tang

Three computer interfaces - a standard web interface, a spatial
interface, and an interpersonal interface were constructed for experiments
that compared the effect of different interfaces on a person’s knowledge
gained with respect to their cognitive styles. The standard web browser
interface presented information in magazine-style and was used as a control
condition for the experiment. The spatial interface was a three-dimensional
environment where a test participant used a joystick and mouse to navigate
around different buildings with information presented as posters within the
buildings. The interpersonal interface used computer-generated talking avatar

as an agent to help test participants to access information.

This thesis is dedicated to my dear parents, thanks for all of their

encouragement and support during my education career.

ACKOWLEGEMENT

Thanks to Dr. Frank Biocca for his supervision and kindlly help during
my working in M.|.N.D Lab. Thanks to Dr. Carrie Heeter for her advice, and
help revising my thesis. Thanks to Professor Brian Winn for his advice and
professionalism in teaching. Thanks to Dr. Hairong Li, Professor Robert
Alberts, Joy Mulvaney , Lynette J. Lim, Arthur Tang , Zena Biocca, Chandan
Reddy, Weimin Mou, Geraud Plantegenest, Chad Harms, Leavitt Blain, Kevin
Lim for your help during my studying in Digital Media Art and Technology
program in Michigan State University. Thanks to Brian Emerson, Jason
Justice for their kindly help during my working in Institute for Creative
Technologies, University of Southern California. Thanks to Matt Block and
Sitthi for their hard working on the sound effects of my CG animation. Thanks
to all the faculties and staffs in Telecommunication Dept, MSU. Finally, thanks

to my wife, Dihua, for her endless love and support.

TABLE OF CONTENTS

LIST OF FIGURES ............................................................................................ vii
INTRODUCTION ............................................................................................... 1
CHAPTER 1. DESIGN BACKGROUND ............................................................ 4
1.1 Purpose ................................................................................................... 4
1.2 Audience and Topic ................................................................................. 4
1.3 Information content .................................................................................. 5
1.4 Design criteria .......................................................................................... 5
CHAPTER 2. THE STANDARD CONTROL INTERFACE ................................ 7
2.1 Navigation ................................................................................................ 7
2.2 Design features ....................................................................................... 8
CHAPTER 3. SPATIAL INTERFACE ................................................................ 10
3.1 Background research ............................................................................... 10
3.2.1 Active worlds. .................................................................... 11
3.3.2 Adobe Atmosphere world. .................................................................. 14
3.2.3 Unreal Tournament game world ......................................................... 15
3.2.4 Director shockwave SD world. ............................................................ 17
3.2 Concept design ........................................................................................ 19
3.3 Design process ........................................................................................ 20
3.3.1 Spatial layout and organization ........................................................... 20
3.3.2 User Interface and a navigation design .............................................. 22
3.3.3 Spatial cues and environmental design .............................................. 26
3.3.4 Texture design .................................................................................... 28
3.3.5 Lighting design ................................................................................... 30
3.3.6 Sound design ...................................................................................... 32
3.3.7 Engine design ..................................................................................... 32
3.3.8 Training room design .......................................................................... 33
3.3.9 Pretest and final delivery .................................................................... 36
CHAPTER 4. INTERPERSONAL INTERFACE ................................................. 37
4.1 Background research ............................................................................... 37
4.1.1 Life FX face mail ................................................................................. 38
4.1.2 Scotland’s Junior Executive Site ......................................................... 39
4.1.3 Oddcast .............................................................................................. 40
4.1.4 Eyematic face station and shout 3D ................................................... 41
4.1.5 3D Me Now ......................................................................................... 42

4.1.6 Poser and Lipsinic Mimic .................................................................... 42

4.2 Design concept ........................................................................................ 45
4.3 Design process ........................................................................................ 45
4.3.1 User interface design .......................................................................... 45
4.3.2 Character reference ............................................................................ 48
4.3.3 Character design ................................................................................ 50
4.3.4 Script design ....................................................................................... 52
4.3.5 Facial and Lip-sync Animation ............................................................ 52
4.3.6 Pretest and final delivery .................................................................... 54
4.4 Current study of HomeNetToo. ................................................................ 55
APPENDICES .................................................................................................... 58
1. Script of engine in Shockwave Director ..................................................... 58

2. Script for optimize rendering ...................................................................... 60

3. Script for talking avatar .............................................................................. 60

4. Homework Hotline project .......................................................................... 62
BIBLOGRPHY ................................................................................................... 63

vi

LIST OF FIGURES

Figure 1: Theoretical model of HomeNetToo. By Dr. Linda Jackson and Dr. Frank

Biocca. ........................................................................................................... 2
Figure 2: Three interfaces ..................................................................................... 3
Figure 3: standard control interface. ..................................................................... 7
Figure 4: Icons for five contents. By Lynette Lim. ................................................. 8
Figure 5: Experiment for control interface. ............................................................ 9
Figure 6: Growth rate of Web 3D. By Wanda Meloni. M2 Research. .................. 10
Figure 7: Active Worlds. http://www.activeworlds.com/ ....................................... 11
Figure 8: Satellite maps of Active Worlds. Fast growth of Virtual Metropolis. ..... 12
Figure 9: Interface of Active Worlds browser. ..................................................... 13
Figure 10: Adobe Atmosphere 3D world. http://www.atmospherians.com .......... 14
Figure 11: Adobe Atmosphere world Interface. Screenshot ................................ 14
Figure 12: Screenshot of Unreal Level Editor ..................................................... 16
Figure 13: Macromedia Director 8.5 .................................................................... 17
Figure 14: Five buildings in the virtual city. ......................................................... 21
Figure 15: 3D model of buildings and environment in 3D Studio Max ................. 22
Figure 16: Experiment for spatial interface. ........................................................ 23
Figure 17: First version of spatial interface design .............................................. 24

vii

Figure 18:

Final version of spatial interface. Screen shot when click the posters

on the wall .................................................................................................... 24

Figure 19:

Final version of spatial interface. Screen shot when users pushed

joystick. ........................................................................................................ 25
Figure 20 American Heart Association’s ZD logo. .............................................. 27
Figure 21: Screenshot. 3D sculpture in the virtual yard ...................................... 27
Figure 22: Sky sphere and central yard. ............................................................. 27
Figure 23: 30 faces polygon model to simulate the school in 3D Studio Max ..... 28
Figure 24: One texture image for windows of school .......................................... 28
Figure 25: 2D PNG image. .................................................................................. 29
Figure 26: 3D tree model in BD Studio Max. ....................................................... 29
Figure 27: Screenshot. Look outside through the windows in Gym. ................... 30
Figure 28: Five Iights’ positions in top view. 30 Studio Max. .............................. 31
Figure 29: Light effects painted in Photoshop. .................................................... 31
Figure 30: Screenshot of training room. .............................................................. 34
Figure 31: Relation of time spend (seconds) and Trials (times). Made by Weimin

Mou. ............................................................................................................ 35
Figure 32: Experiment for interpersonal interface. .............................................. 38
Figure 33: LifeFX virtual faces. http://www.lifefx.com .......................................... 38
Figure 34: Virtual spokesperson: Seonaid .......................................................... 39

viii

Figure 35: Oddcast, talking avatar ...................................................................... 40

Figure 36: Eyematic online education. ............................................................... 41
Figure 37: 3DmeNow. Web based talking avatar. ............................................... 42
Figure 38: Character rendered in Poser 5. Use Mimic for Lip animation ............. 44

Figure 39: Experimenter and participant (subject) in the Interpersonal interface.

..................................................................................................................... 46

Figure 40: First version of interpersonal interface. Buttons on the right screen

triggers all the clips. ..................................................................................... 48

Figure 41: Final version of interpersonal interface. Most of clips are triggered by

keyboard. Less buttons on the right screen. ................................................ 48
Figure 42: The interface designed for rating voice. By Lynette Lim .................... 49
Figure 43: left: Real people; right: Texture created in 3D Studio Max ................. 50
Figure 44: Cardia’s head rendering images with hair in 3D Studio Max .............. 51

Figure 45: left: Cardia made in Poser 4; right: Cardia made in Poser 5 with

dynamic hair. ............................................................................................... 51
Figure 46: Eyematic Facial motion capture. ........................................................ 53
Figure 47: Poser 5 and Mimic ............................................................................. 54
Figure 48: Three interfaces in the experiment. ................................................... 56
Figure 49: Virtual teacher in Homework Hotline Project ...................................... 62

INTRODUCTION

The HomeNetToo project is funded by the National Science Foundation
(NSF). The main purpose of the project is to examine whether there are other

factors besides income that contribute to the digital divide in societies. There are

several studies within this larger projectl. The theoretical model of this study is

illustrated in Figure 1.

Model of Internet Use: Home Use Study

Motivational Factors
Communication
Information
Consumption

Motivational Factors
Learning motivation
(education, job training)
Social motivation
(family interaction;
social networks)

Entertainment
Self-expression

 

Racc/ ethnicity

Gender

1
A L.

   
 

  
  

Affective Factors -
positive affect _ Internet Affectlve Factors

. I , Positive affect
Personal Ngggjti)vvglaef?égt U (enjoyment, flow, self-esteem)
characteristics (computer anxiety, 86 Negative affect
stereotype threat) (depressron, loneliness)

Contextual _=_
factors l-‘||

Cognitive Factors
Technology familiarity
Internet attitudes

A gc

 

 

 

 

 

 

Cognitive Factors
Technology competence

Internet attitudes
Self-perceived competence
Other cognitive outcomes

Cognitive style
Meta-cognition

 

 

1 HomeNetToo - http:l/www.homenettoo.org

Home Net Too began as a multi—method, interdisciplinary research project that examines the
antecedents and consequences of Internet use in low-income families. A central research effort is
a longitudinal field study, begun Fall 2000. Participants were provided computers for a year. Their
Internet use was continuously computer-logged, and surveys are administered 5 times during
home visits at pre-trial, one-month, three-months, nine-months and post-trial. Full tech support is
provided in the home by undergraduate "technology facilitators." Analysis of the early logging

Figure 1: Theoretical model of HomeNetToo. By Dr. Linda Jackson and Dr. Frank
Biocca.

This design report upon here was part of an experiment that involves
testing the interaction of different type of interfaces with the cognitive and
learning styles. Specifically, the experiment explored whether the match of
interface type with cognitive style improves learning, presence, and attitudes
towards the interface, content, and information source. As a part of the
HomeNetToo project, M.I.N.D Lab2 designed three interfaces to test these

hypotheses.

The design challenge was to provide the same material to the participants
in the experiments while varying interface styles. This thesis is a description of
entire design process. It is a report of experiment team3 and design team4’s
decisions made on three interfaces:

1. Regular-style web interface.
2. Spatialized three-dimensional (3D) environment

3. Interactive interpersonal interface.

Instead of cover the entire research and experiments of HomeNetToo, my
thesis only focus on the design process of the three interfaces. The goal is

creating the materials the experiment team required, making three interfaces

 

data suggests relationships between cognitive style and Internet use. Another research study
uses ethnographic research to examine Internet usage, its meaning, and role in the family unit.

2 HomeNetToo staffs in M.I.N.D Lab: Dr. Frank Biocca, Lynette Lim, Ming Tang, Weimin Mo.
3 Experiment team: Frank Biocca, Lynette Lim, Weimin Mo.

4 Design team: Lead designer: Ming Tang; lntem students: Blain Leveet, Kevin Lim.

available for the experiments. 80, my thesis does not include any research

hypotheses, data collecting and analysis.

Stimulus:
Navigation Interface Paradigm

Menu Navigation & Interaction
(Cotrnol: curent . and ard)

Interpersonal Navigation & Interaction

 

BLOOD PRESSURE 8: YOU
“I‘m-mm.

”Blood Pressure . RI [fleets v

the Cons: men 09
ngh Bl Pmonur.

'Aro You At anon.

“Prevention Through It»
‘- / Dietary Change. ‘-’

90th.! Prwontlvc Factor-0

 

 

Figure 2: Three interfaces

CHAPTER 1. DESIGN BACKGROUND

The design context is determined by the purpose, audience, information

content, and design criteria of the project. These are defined below.
1.1 Purpose

The purpose was to design stimulus materials for a series of interface
usability experiments. The main purpose of the experiments was to investigate
how different interfaces match different users’ learning styles, specifically,
whether 30 and interpersonal interface of the information presentation have
different advantages on users’ knowledge gain to the users’ with different
learning styles. In order to measure the amount of knowledge gained from using
each interface, there has to be a yardstick to compare the level of knowledge
gained. The most commonly used computer interface is a two-dimensional
magazine-style Internet web page and that was used as a comparison control
base. Taking account of this standard, the designer working with the
experimental team came up with two alternative navigation and interface design
approaches, a 3D spatial interface and an Interpersonal interface. These are

described in greater detail below.
1.2 Audience and Topic

Many of the participants recruited for HomeNetToo project were from low-
income families. 67% of the participants are African-American and 80% are

female.

Hence, the fundamental decision before any design commenced was to
select a topic that would be of interest to the participants. Because participants
tend to be more motivated to learn when a topic directly affects them, the
experimental design team selected high blood pressure (HBP) as it is a condition
that tends to have a higher occurrence in African-Americans and women than the
rest of the population5. This health-based topic should also appeal to populations
that fall outside the demographic because health is a primary concern of most
individuals. Even if someone does not suffer from high blood pressure, they may

know someone who does.
1.3 Information content

The script for the content was obtained from various sources and
repeatedly tested for clarity and cohesiveness. The experimental design team
decided and organized contents into five separate but distinct sections: (1) HBP
effects; (2) HBP consequences; (3)HBP risks; (4) prevention HBP through diet;

and (5) prevention HBP through exercise.
1.4 Design criteria

Because this design was to be used for an experiment, the design criteria
had fixed items to be kept the same across all experimental conditions, and

variable design features to vary according to the experimental design.

Fog design features

 

5 American Heart Association Website. Available at: http://www.americanheart.org

The following items needed to be exactly the same across all conditions
0 All text
. All images
0 The basic “page” arrangement
. The background of the pages
0 The fundamental groupings and categories of pages

Variable design features

0 The means of navigation

0 The overall look and feel of the interface

CHAPTER 2. THE STANDARD CONTROL INTERFACE

A regular web interface was created first, which would eventually be used
as a control condition to the spatial three-dimensional environment and preserve
as much content and design as possible between the two conditions. The same

requirement was applied to the interpersonal interface design.

From a design viewpoint, the goal here was not to innovate but present a

“typical” web interface.
2.1 Navigation

The navigation technique for this site were similar to the “average”
standard website that were found on the web in 2002. The navigation method

was based on menus presented to the left of the content.

a “.000 PRESSURE I ITS HRCTS . his; r-‘u: m .W"
Risks Factors You Cannot Contr_9l_;

A
O consequences or men atooo mssua: ge

9 ARE YOU AT RISK?

'- Obemy

I- ngh Sodium Intake
I" Excesswe Alcohol
'- Laclr of Exercise

- Stress

— Race

~Hereduty

fine 0 In general, the older you get. the greater
your chance of de‘v-elocing high blood

aressure. It OCCurs most often at people

@ PREVENYION THROUGH many causes aver age 35. Men seem to develop it most
otter.- between age 35 and 50. Women are

more illew to develc-p it after menopause.

 

 

rm
\ / omen PREVENTIVE fACTORS

Figure 3: standard control interface.

2.2 Design features

Icons were designed to represent these five sections. Ossner [1] explains
that iconic signs represent similarity and show importance in the content that one
can expect. Each icon was a symbolic (emblem of its topic section, mainly: (1) a
book to represent HBP effects; (2) a cross for HBP consequences; (3) a lightning
bolt for HBP risks; (4) a fork and knife for prevention HBP through diet; and (5) a
flexing figure for prevention HBP through exercise. Each icon was then placed
upon a red heart background to refer to and link it to the broader topic of high
blood pressure. These icons were reproduced in all three interfaces to preserve
the similarity and hence remove the possible confronting effect from icons across

them.

 

Figure 4: Icons for five contents. By Lynette Lim.

In the experiment, participants are assigned randomly to three interfaces. The
assigned interface was projected to a big screen. The participants used a mouse
to navigate the HBP content with the Internet browser in the case of control

interface.

 

 

 

Screen.

 

 

_ - ~——- L.)
at“ .-
aw“.
as“ r‘
a ,. v.4? ,4"',~€-v
. 9”” .. .5 «gas, Mouse
Pr0jector ,_ '

 

Figure 5: Experiment for control interface.

 

CHAPTER 3. SPATIAL INTERFACE
3.1 Background research

As 3D technology and the Internet evolve, more 3D virtual worlds are
being implemented online with spatial interface. Wanda Meloni said, “The use of
3D content in mainstream media is no longer confined to the upper echelon of
the professional development community. Give the investment by large
companies such as Discreet, Intel, and Macromedia to propagate 30 into the
mass markets, it will be only a matter of time before barriers are overcome and

adoption is realized.” [7]

COMPOUND ANNUAL GROWTH RATE FOR
PROFESSIONAL DIGITAL MEDIA TOOLS

25

15

10

 

 

 

 

Web Video Web 30 30 Desktop
30 software 20 animation animation publishing

CAM“. through 2530?: Sam-:- MI—J Roswau‘h

Figure 6: Growth rate of Web 3D. By Wanda Meloni. M2 Research.

The compound annual growth rate for Web 3D up to the year 2006 is 32

percent, which leads all other categories in terms of digital media tool growth.

The HomeNetToo design team did research on several online 3D world
examples, including Active Worlds, Adobe Atmosphere, Unreal Game world, and

Director Shock Wave 3D world.

3.2.1 Active worlds.

 

Figure 7: Active Worlds. http:llwww.activeworlds.coml

Active Worlds, the webs powerful Virtual Reality experience, lets user visit
and chat in 3D worlds that are built by other users. Active Worlds is a place
where users can create fascinating 3D worlds in minutes that others can visit and
chat in. The Active Worlds Universe is a community of hundreds of thousands of
users that chat and build 3D virtual reality environments in millions of square
kilometers of virtual territory. In Active Worlds user can take a claim to a piece of

land and build their own virtual home, meet people from all over the planet that

can explore online shopping mall, and other peoples’ virtual worlds, play online

games.

    

‘ '4 .
n 'I ‘ I ’

August of 1999 August of 2001

   

Figure 8: Satellite maps of Active Worlds. Fast growth of Virtual Metropolis.

Satellite maps of Active World community have grown over the years.
“These are pictures of Active World taken in December of 1996, February of
1998, August 1999, and again in August of 2001 by Active Worlds. Notice how

the community has populated the land with more buildings over the years, turning

12

it into a Virtual Metr0polis. Each full picture is 2000x2000 pixels and covers the
area between 1000n 1000w and 10005 1000e, with ground zero being the center
of the picture. The total area covered is about 400$q kilometers, and would take
users over 2 hours to walk directly from one end to another (that is, two hours in
AlphaWorld - it would obviously take much longer in real life). Despite their size,

these pictures represent about 0.3% (that's one third of one percent) of the total

area of AlphaWorId.6”

 

firmll i.tr...u)tl\tiiu arm

mwmmmmmufiwm 'j

. . -‘ Vluvmu with tim kuytiimrd

You can use the arrow keys on the keyboard to mayo.
' E first, click Inside the Virtual reality window. Second,
depress your arrow keys. All of the keys you need to
move around and change your view are located on the
’ : 7 number pad which is on the right side of a standard
-, extended keyboard. The diagram below indicates what
K each key on the numeric keypad does

Moving With the Keyboard “

MYowArmKonTolon

  
 

 

 

 

 

 

 

 

 

 

haw/our 'gffVQ‘ -'«L .«r', .1"..- :-"rr.: ... trifle maul ' cvm- new arm'- ‘1'! "r "Ir-r .krfi‘hf. A

'2 v1 1 1nd .5 i

'Im'hlfll" 7mm»: Kata" ' - ,2 3r ....3 .7.» HT 4. 19¢" :74 km l :1:th Lt‘. '44.-
: years-use; Wakes» 1)" Fathom-doc: Gammopmwwanrkuboorm

m I: I m Ito mo 00-4010 J

was. UrtLtoo We MWWWWGW? hen

‘Wu YMIM‘IMMW wan-i La. .
.1 IN. I!) W Flying (mnvmq up and down)
. lm LOL You‘ll need to use the keyboard to fly up and down. On

Cm 2‘ m m the numeric keypad, the + (plus) key moves you up, and

M _ «1" :w': "m" the - (minus) key moves you back down again. You can
. 'e i . ,I ,. hold these keys down to keep moving up or down, and

you can use them in combination with the CTRL key to
I move faster or the SHIFT key to move through objects.
.

j'u-um” . . . . .. ....... . .--.-.._-..... --....L---_. . ....__..-..A

Figure 9: Interface of Active Worlds browser.

 

6 http://www._a&tiveworlds.com/community/mapsasp

I3

3.3.2 Adobe Atmosphere world.

 

  
    

~.. ..-.-- an” . .

am -. rem-rm tor trope 35a a‘cr. r. surf-a xix

Gr“ 2w. new «rim Ly 63"»‘1'0'3‘1‘. wet my.

me / ’Wv. not» umuwx-‘walr'omee " ur mil

Mlmntemkostas
[Cyrulrey l Mistletoe.
meH‘)

 

 

a~ W" "”Jf

 

mmmmummmcm

Figure 10: Adobe Atmosphere 30 world. http:llwww.atmospherians.com

Figure 1 1: Adobe Atmosphere world Interface. Screenshot.

Adobe System has entered the realm of real-time Web 3D with Adobe

Atmosphere, the publishing company’s first Web authoring and viewing tool for

interactive 3D worlds. Atmosphere consists of three modules. The first, Builder, is

aimed at 3D content creators and Web developers. It provides a palette of 3D

objects-primitives as well as architectural elements such as doors and stainNays-

with which users can lay out and structure a room or other 3D environment.

Since Atmosphere is based on Viewpoint’s Media Player, models and animations

created in third-party 3D applications such as discreet 3ds max or

AliasNVavefront’s Maya can be directly imported into an Atmosphere world after

being converted to Viewpoint. Developers may also use JavaScript to input

animations and sound in Atmosphere.

14

 

Two Atmosphere modules are Browser and Community Server. Browser
is a plug in that works with either Netscape or Internet Explorer. The 5MB plug-in
is free, and must be downloaded before a user can view Atmosphere content.
The Atmosphere Community Server is an Adobe-sponsored chat server that

provides users with text-based chat and avatar applications.

Curious Lab also published Avatar Creator to support this viewpoint based
BD world. Avatar Creator can create low-poly avatars that can be published into

Atmosphere directly.

The experimental design team did not use Adobe Atmosphere in the
spatial interface design because there is still a long way for Atmosphere to
integrate multimedia into its virtual world. The 3D geometry imported from Maya
or 3DSMAX had some problems for collision detection in Atmosphere’s engine.
Also, using Java Script to trigger the music, image, video clips in Atmosphere
were still in the early developing stage and needed lots of programming work at

this point of time.

3.2.3 Unreal Tournament game world

Unreal Tournament (UT) 2003 is the sequel to 1999's multiple “Game of
the Year" award winner. It uses the very latest Unreal Engine technology [6] -
where graphics, sound and game play are taken beyond the bleeding edge. The
Unreal Tournament game engine is famous for its fast rendering speed, and well-
designed level editing tool. UT engine supports both Maya and 3D Studio Max.

User could create their own levels, models and skins. Lisa Taylor said, “Some of

the artists and programmers in this emerging community were simply making 3D
maps for new game levels. But most were going well beyond that, entirely
rewriting the mechanics of their favorite titles-including the rules and physics-and
offering new forms of play based on the original game engine.” [8] Unlike Quake,
Unreal engine is strictly object-oriented. Michael Lewis said, “The Java like
scripting language, Unreal Script, is easy to use and well documented as is the
well-designed Unreal Ed development environment. Also, unreal engine has a
broader range of sophisticated graphics including bump maps and other tweaks

recently added to graphics hardware”. [6]

 

or
a- .
. ’
.3.

Figure 12: Screenshot of Unreal Level Editor

UT game engine had the potential to be used to design the HomeNetToo
spatial interface for its wonderful real time rendering. Michael Lewis said, “Now
the mass market for computer games, grown even larger than the movie

industry, has expropriated the best in computer hardware and software for itself.

16

The most sophisticated rendering pipelines are now found not on specialized
scientific machines but on PC video cards costing less than $500. The most
sophisticated, responsive interactive simulations are now found in the engines
build to power games.” [6] Compared to expensive virtual reality (VR),
augmented reality ( AR) , military and high-end VR lab’s technology, game
engine/simulation are more practical to most generously founded researchers.
CaveUT, GameBots are some examples of the test beds using UT engine in

immersive and interactive research. (www2.sis.pitt.edu/~jocobson/ut/)

3.2.4 Director shockwave 3D world.

 

 

gm”-

 

 

 

 

E
.2
1.8;.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

{sizerMevwé'Pom -5316,1406..."“‘;"2&a‘;ms‘2jtoigis‘“‘“W" -, I,

 

 

Figure 13: Macromedia Director 8.5.

With Macromedia Shockwave Director 8.5, Users can build rich content

that delivers real results, integrating 3D, interactive audio, video, bitmaps,

vectors, text, fonts, and more. They can burn these contents on CD, DVD, or
publish them in intemets—to reach 300 million web users with Macromedia
Shockwave Player. Users can create streaming, interactive, multi-user content

using7:
. Interactive 2D and real-time 3D animation
. Video: Real Video, Apple QuickTime, AVl.
. Sounds: RealAudio, MP3, AIF, WAV
. Graphics: JPG, GIF, PNG, PSD, BMP, and more
. Macromedia Flash
0 Text and fonts
. Xtras

The big advantage of using Director is that designers could add a new
dimension to the 2D multimedia work—publish interactive real-time 3D on the
Internet. Director supports files exported from the most popular 3D authoring
packages. These files can be viewed on the web with the popular Macromedia
Shockwave Player. 3D artists can use Director to transform 3D artwork into
bandwidth-friendly games, interactive product demonstrations, and learning
applications accessible to anyone with any kind of Internet connection—even

dial-up.

 

7 http://www.macromedia.com/soflware/director/3d/artists/

l8

Compared with Active Worlds and Adobe Atmosphere, Director has a
better support both Maya and 3D Studio Max format models. Director’s Lingo
language gives designers more flexibility to control the multimedia content than
Unreal engine and VRML. And the most important feature, Director model could
be published to web and played in a standard Internet browser, but the Unreal
Model will require user to download and install Unreal game before they see the
3D world. Based on the evaluation of these 3D editing tools, we chose

Shockwave Director as our final design tool.
3.2 Concept design

While creating the regular web page involved basic hypertext authoring
skills, the creation of a 3D environment involved more complex decisions. First,
the experimental design team had to organize the information into 3D structures.
While in the regular interface it was easy to present the information with icons,
graphics and text, the design team wanted to create a virtual environment in
which the subject would feel immersed in the environment. Hence, as there were
five broad sections of information, the design team decided to create a “cyber
town” [3] to give the impression of an interactive virtual community, with each
building representing one section of information that was presented in the control

interface.
Criteria for the 39 interface

According the experimental design team this interface had to have the

following design features

a Spatial Organization: Information categories are organized using

spatial elements such as building, square and billboard.

. Spatial Navigation: Participants in the spatial interface condition will
navigate through a three-dimensional virtual city using joystick to

access the information.

0 Text located to billboard place: The same information that
participants view in the other two conditions will be presented on

“billboards” in the spatial interface condition.
3.3 Design process

3.3.1 Spatial layout and organization

The next decision was deciding on what type of buildings to create in order
to be analogous to each of the five sections. Another question is how to organize

these five buildings.

The experimental design team decided to use real world buildings to
present the web contents. (1) A school building to represent high blood pressure
(HBP) effects because school building often paralleled with institutions of
learning; (2) a hospital to represent HBP consequences, because the cross used
in the icon is often symbolically associated with hospital and other medical
facilities; (3) a casino to represent HBP risks (while a little hard for others to
comprehend, gaming institutions are often advocated in the local media as
places of danger and avoidance in the community that we drew our subject pool

from); (4) a grocery store with a fruit stand in front to represent prevent HBP

20

through diet; and (5) a gym to represent prevent HBP through exercise. The
experimental design team created this virtual city using the real building’s
pictures as the reference, integrated the icons from the web interface into the 3D
environment in natural ways, added a red cross for the hospital, sport posters for

the gym and neon lights for the casino.

 

Casino

 

Figure 14: Five buildings in the virtual city.

21

 

Figure 15: 3D model of buildings and environment in 3D Studio Max.

3.3.2 User Interface and a navigation design

Users controlled the joystick by the left hand and controlled the mouse by
the right hand. They used the joystick to walk forward, backward and turn

around. They used the mouse to click 3D objects and buttons.

22

  

Proiector '

 

 

 

 

 

 

     

Proiector

 

 

Figure 16: Experiment for spatial interface.

 

All the HBP information was presented by posters on the wall within the

building. When users clicked those posters, some relative HBP information

popped up at the bottom of the screen.

23

 

 

 

 

Figure 17: First version of spatial interface design

Posters on the wall

 

OYMCR mmrlvr IACYO”

 
  
   
 
  
    
  
  

   
   
 
   
  

M coffin!) hiqh MM wmurr- and our! rarflhkuhr if
'1 lcduocd Ur vol, liuvunil you nun. invoking

.ic: «it yum: “we that can Help vuu unit «young

1. Oman willgw nml ddnrvurmtmu in "me nun-00m), flu-re- am II'\I'fI..I
cud! a: mnutuw: pulL'Hrs am! guru that will truly I'X'UU": UH: tuning for
hlcdlr‘l‘

. VA ”to. euppvil hum (..th you "I‘L'IiILI mu. thvulafli uud- as fluoride,
Manly and (comic-re for than Imnvv 01 vom anal- and nel- tor their
ilullmrfiliml'.

mm rrrmslnmr) ”apron-m, rtxnrv. a: Warm and on

untrue-e m I "my b.41- vou “up I! "can mu no

i available.

 

 

 

Text/2D images pop up when click posters

Figure 18: Final version of spatial interface. Screen shot when click the posters on

the wall.

24

3D Window

 

'~~—-—-‘

 

Hospital Casino

<-A ~ .s.... g. ,._. _\

 

 

 

Map Building icons/buttons

Figure 19: Final version of spatial interface. Screen shot when users pushed
joystick.

The navigation map is on the bottom right of the screen, which shows the
top view of the entire 3D city. An interactive arrow informs users their current
locations and orientation. When users push the joystick and walk around in the
virtual environment, they can tell their position and direction from the arrow in this
map. There is also a jump button for each building. The experimental design
team designed those buttons using building images. When users used a mouse

to click one particular building’s image (Jump button), they jumped directly to the

25

front door of this building in the virtual environment. These buttons gave users an
alternative way to get to each building instead of walking through the entire yard

byjoysfick.

Because the design team was required to present the 3D model and 2D
information (text, image) in one screen, the whole screen was divided into two
parts. The top screen is a 3D window that shows the main 3D environment. The
bottom screen includes a small interactive map and some images which are the

jump buttons for each building.

When users used the mouse to click the posters in the 3D world, related
HBP information popped up in the bottom screen. For example, when users
walked into the gym and clicked the poster about smoking, the whole bottom
screen was replaced by the message about “the relationship between smoking
and HBP”. When the user continued their navigation by pushing the joystick, the

bottom screen switched back to navigation map and jump buttons.

3.3.3 Spatial cues and environmental design

The experimental design team created five buildings placed in a square
and created a fence around this square to prevent users from wandering outside
the environment. The design team also created a sculpture in the center of the
yard. This sculpture was created based on the 2D logo of American Heart
Association. (http://www.americanheart.org). The design team extended this 2D

logo into 3D sculpture and put it in the yard as a landmark.

26

American Heart

Association.
Fighting Heart Disease and Stroke

   

Figure 20: American Heart Association’s ZD logo.

Figure 21: Screenshot. 3D sculpture in the virtual yard

The design team also put some trees, light poles and bush in this yard to
make the environment looks more realistic. The sky is a large-scale half sphere
on the top of ground. The design team added several blue lights to light the top

part of the sky.

 

Figure 22: Sky sphere and central yard.

27

3.3.4 Texture design

Because the entire 3D model had to be rendered in the real time by
shockwave director’s rendering engine, high polygon models will slow down the
frame rate significantly. The design team used the same solution as that was
used in the game industry. We created low polygon models with well-designed
textures to simulate complex geometry. The texture of bricks, concrete, wood
and grass were painted in Photoshop and mapped to the 3D geometries in 3D

Studio Max.

3, .--..—.—-,
- C—
X

«‘95 ’

h
n

f» ‘
7.4‘51. .U' V
k
n’ . .
' ‘2
i"
. ..
O‘NI-
. -..
L“
., -
. -
e -‘
I.’
. r95! ‘
. . :
3:2:
-. k
'I ‘.

”*1
x.

 

 

~(‘f'lIGSS‘Hti‘i
difiifi’l‘

”3.1%.;

 

Figure 23: 30 faces polygon model to simulate the school in 3D Studio Max

Figure 24: One texture image for windows of school

Alpha channel8 maps were widely used for the texture mapping. When the

experimental design team created models in 3D studio MAX, a PNG format

 

8 The alpha channel is really a mask - it specifies how the pixels colors should be merged with
another pixel when the two are overlaid, one on top of the other.
http://www.webooedia.com/TERM/A/ajpha channelhtml

28

image with Alpha channel used as a mask texture defined the objects’ visibility.
For example, a 3D tree is actually a group of planes with alpha channel texture
mapping on it. A series of planes were arrayed surrounding a common pivot.
These plans could simulate a real 3D tree and make it looks like a real 3D

geometry from different point of view.

 

Figure 25: 20 PNG image.

Figure 26: 3D tree model in 3D Studio Max.

Another texture technique was the transparency texture for glass. The
design team used this in creating the gym. When users got into the room and
looked outside through the window, they could see the entire yard and easily

sense their position relative to the other buildings.

29

 

Figure 27: Screenshot. Look outside through the windows in Gym.

3.3.5 Lighting design

Because Shockwave Director can input the light created in 3D Studio Max,
the design team created the lighting environment in 3D studio Max, adjust the
light intense and light color, then export the entire lighting environment into
Shockwave Director. Two point lights with blue diffuse color were used to light
the sky. We also used another direction light with blue diffuse color to simulate
the sky ambient light. Other two point lights with lower intense value were used
as fill light to put some color in the shadow. After the design team inputted the
entire model with lighting environment into Shockwave Director, additional
Director’s ambient light was added to make the entire site brighter and more

natural.

30

 

Figure 28: Five lights’ positions in top view. 30 Studio Max.

Some of the light texture is also used to get a more photo realistic effects.
This technique is very popular in 3D game design. The lights effects and
shadows are painted directly in texture images instead of calculate in the real
time rendering process. The shockwave engine preloaded those textures images

and rendered the scene with a higher frame rate.

 

 

 

b. C. ..c'_.,;~_:.';\,‘°_:b'“'- " ' 51' -\’3f‘_5,‘ lfifi‘ga.":-.a.'~.:.'~':."...; : '
1.. irirttfdtiitfrtrtiifti .l

‘iliiiiétlttllittiiii

 

Figure 29: Light effects painted in Photoshop.

31

3.3.6 Sound design

Good sound can dramatically help immerse users to a virtual world. The
experimental design team created a looping walking sound to give the users the
feeling they are walking somewhere. An audio file of footsteps was played as
users pushed the joystick and the footsteps sound stopped as soon as user stop

pushing the joystick.

The design team also created the background music in the prototype of
spatial interface. We ran the prototype with 10 participants and collected their
comments. We found all of them preferred to get information in a quiet
environment instead of listening some background music, so we removed the

background music in the final version of spatial interface.

We found most of the participants like the footstep sound since it is
directly related with the navigation. The interactive footstep trigged by joystick is
very helpful to immerse the participants with the virtual environment. On the other
side, the background music is not directly related with people’s real world
experience since it is unusual to hear music when a person was walking in the

real world. So we deleted the background music finally.

3.3.7 Engine design

The experimental design team decided to use a Joystick instead of
keyboard/mouse for navigation, since Joystick is a more natural navigation

instrument for 3D environment than keyboard/mouse. The design team wrote the

32

3D engine by Lingo script in Director 8.5. The Joystick function was supported

by a Director’s RavJoystick Xtra. (https://www.ravware.com/joystick.htm)

The design team also wrote the script to support collision detection in the
3D world. Collision detection is an important issue in virtual worlds to simulate the
dynamics of the real world. The camera in the 3D world should stop moving
when it collides with other 3D objects. Because the camera is not treated as a 3D
geometry in shockwave director, we cannot detect the collision between camera
and other 3D objects. The solution is that we wrote the script to attach the
camera with an invisible parent object and run the collision detection between

this parent object with other 3D objects [Lingo script: see appendix 1].

To optimize the rendering speed. The design team also used OpenGL
rendering instead of Z-buffer rendering by Lingo. Computers that aren't Open GL

compliant will switch back and use DirectX rendering. [Scriptz see appendix 2].

3.3.8 Training room design

For the participants who do not have the experience of joystick, it might be
frustrated for them to navigate in the virtual environment. We don’t want this
situation happen and affect the experiment. So, we designed a “training room” to
let participants practice how to use joystick and get familiar with the 3D

environment before they start the experiment.

The training room is a virtual space to let the participants get familiar with
using the joystick and the rules of navigation in virtual world. It is a space where

participants do some practice before they are exposed to the spatial interface.

33

Based on this goal, it is a relatively simpler model and smaller virtual room than
the actual interface. The user could practice using the joystick to navigate in the
virtual room and click the posters on the wall; they will get feedback such as how

many seconds they spent walking from one poster to another poster.

 

navigation: . . v.
leopard E. .15

DiKAWCfl D - - - ' ' '0’ n- (F
"'i‘.3‘9:‘r
';'I'.‘s .-
I ' ,‘.-‘.'r- 1‘8 a QR“?

   

"GM 7

let: S '
Enterthe '
moment!
clickthe
mince ‘ _
mud-mu 1

 

 

Figure 30: Screenshot of training room.

In the pretest in MIND Lab, 22 participants were required to use joystick in
the training room. They kept navigating in this smaller space until they get
enough skills for using the joystick. We designed two posters and put them at
the opposite end of the training room. The participants were assigned a task,
using the joystick to walk from one poster, navigate in the training room, and

reach another poster. The participants were asked to repeat this task for several

34

times. We calculate how many seconds the participants spend to finish this task

for each time.

In the pretest in MIND Lab, we found most of the participants spend less
time to finish the task in the second time than in the first time. They also spend
less time to finish the same task in the third time than in the second time since
they were getting more and more familiar with joystick and this virtual room. But,
there is no significant difference between the sixth time and later time. That
means, most participants reached their best record after repeated the same task

for six times.

Estimated Marginal Means of MEASURE_1

 

14ll

12-I

10"

 

 

Estimated Marginal Means

 

TRIALS

Figure 31: Relation of time spend (seconds) and Trials (times). Made by Weimin Mou.

35

So we decided to ask all the assigned HomeNetToo participants to repeat
this task in training room, walk from one poster to another one for six times.
Theoretically, they will get familiar with joystick and get ready to run the final

spatial experiment after this practice in the training room.

3.3.9 Pretest and final delivery

After the design team finished the spatial interface and training room,
these interfaces were delivered to the experiment team who in charge of
recruiting subjects and running the experiment. In the pretest in MIND lab with
participants recruited from students in MSU, we evaluated their feedback and
readjust our design, such as the volume of sound and fonts. Finally, the
experiments were processed in Lansing and Detroit area with HomeNetToo

participants.

Because my thesis is only focus the design we did as the design team for
the experiments. It is not a report for the HomeNetToo experiment. All the
information about the experiment, data collection and analysis is not included in
my thesis. Please check these information from HomeNetToo website at

www.homenettoo.orq.

36

CHAPTER 4. INTERPERSONAL INTERFACE
4.1 Background research

More and more web-based talking avatars are being used in E-mail, E-
commerce, entertainment, multi-user games and online education. There are
also many options avaliable to design the interactivity of talking avatar. One way
to make avatar interact to human speech is using voice cognition system and
Artificial Intelligence (AI). There are some online products with well-designed Al,
such as the official website of the movie artificial intelligence
(hflpzllaimoviewamerbros.coml). User could communicate with the computer by
typing. But there is still a long way before the well-designed Al and voice
cognition product come to market. Those techniques may cost years of research
and millions of dollars. Instead of waiting for those techniques, we decided to use
the Wizard of Ox technique. In the Wizard of Ox technique a real person provides
the intelligence missing in the programming. In the experiment, the experimenter
controlled our avatar’s reaction like a puppet and run our interpersonal interface
experiment. So, the experimental design team can test if interpersonal interaction
has a significant affect to human computer interaction (HCl) and learning process
even before Al and voice cognition technique are well developed. This is a

cheaper and practical way in the current situation.

37

 

 

Figure 32: Experiment for interpersonal interface.

So in order to ensure maximum accuracy for the speech recognition task
and a more natural interaction, the experimental design team decided to use
human to simulate the speech recognition and Al tasks. Our task was creating a
talking avatar interface for this experiment. Based on this point, we studied the

current available tools for making talking avatars and facial animation.

4.1.1 Life FX face mail

  

 

 

 

- I J .4. 1”.“ . A—% a: ‘f'f'. ‘21:“ ' ‘ I ~ :.',5;“;; i: t
,, ‘ H '~._‘.\\(s ”5‘“ .> r .I #3.; mg: L H 3. . r
" .3 WA.‘ - ......a... .....c I‘M“... ‘5‘ :2; _ f" '. "_ 'l' ‘ . _ . , , “my . : . . > .... ,4 . , ...
a: E; ___,G!'.!._'y_i LL...‘_ s“... R”. A ‘ ' “",. l,‘ ...” “ ;' '- 3.. ‘L.-L““-'V'.Ifl.:_'_.,. A I .‘l.;
‘EE j; Our fully animated. life-like talking people will change I i
:3 forever the way your clients communicate on thelr web

sites.

/. . . ., .
J. Isl-'5 ’41:

Interactive agencies and web developers have used
LifeFX Stand-Ins to produce Immediate and powerful
results for their clients.

Take a few minutes to read our growing portfolio of
LifeFX successes.

m 5‘1~‘3L}§"I"v/.l Li

“I
a

.' — ' (fififij. fir- 7" ..A:-l-1lrrr;,sv;_ 1,:
“ ." Wfllr‘rr l‘fl‘é‘fiizdtfi J; fi‘lrjof‘r

 

Jw
.s-w

 

 

{'c,‘
.3

p’u

g:

M

b

 

g - ‘ 244.9 ‘ ’ '4 .

Figure 33: LifeFX virtual faces. http:llwww.lifefx.com

38

LifeFX FaceMail is a new 3D application that surpasses plain text
messages by using photo realistic, lifelike virtual human faces to deliver e-mail
messages. By simply typing text and using emotions (such as :-) for smile, :-( for
sad, or :-x for kiss), users of Facemail can send e-mails that speak and express

lifelike facial expressions to others who have downloaded the LifeFX player.

The latest version of FaceMail also adds text-to-speech and voice

recording options, giving users’ "face" a voice.

4.1.2 Scotland’s Junior Executive Site

introducing Seonaid ‘

our online news presenter

 

Figure 34: Virtual spokesperson: Seonaid

As a real-time animated spokesperson, Seonaid premiered on Scotland’s
Junior Executive site (http:l/www.scotland.gov.uk/pages/news/juniorl). Using
DAT:T2, editors at the Scottish Executive type in scripts of interviews or press
releases, and Seonaid would voice the words in real time. Jenny Donelan said,
“Positive reaction to Seonaid on the Junior Executive site encourage the Scottish
Executive to employ her on its main site (www.scotland.gov.ukl) as well, at about
the same time that she received her Scottish accent. Wherever small icons of her
face appear, users may access streaming video or audio versions of

announcements and new stories.”[9]

39

Seonaid also works off-line occasionally, including a recent appearance at
a museum exhibition. Jenny Donelan said, “There is no reason that in the future
you couldn’t access her on interactive TV, a public access kiosk system, or

handheld mobile devices.” [9]

4.1.3 Oddcast

 

  

.. u. .
.. . a 1-

{3:} Si te POI . >L-ddcast‘

run-In ‘IORHOI-gono

 

 

BUDIO uneasy

’.:‘ -..: ."c 9:. “-..-.1 i
f Dream: alive If— If}:
r new» I]—

{mu-m II—
Htaocmm IF?
rerun [Fl I
kaome IIT’
magnum II"
Mfihfiii IF",
Mflcmhman IIF'TIT

 

 

 

 

ulna . :.

 

   

flew Erouow wince
EMOVG ammo VlSlBlC

=mn

 

 

  

 

 

 

 

‘ -v'euat~"‘~r-~ .-'»

 

 

Figure 35: Oddcast, talking avatar

SitePal (http:llwww.sitepal.com) from Oddcast Media Technologies allows
users to create animated 2D characters and publish them directly to Web pages.
Users design a character, select a background image, and record or select a pre-
recorded message for the character to deliver, complete with lip-synching and
mannerisms. Sitepal characters are based on Oddcast’s Vhost technology, which
enables companies to use web-based conversational characters for customer
service, marketing, and other applications. I did the Homework Hotline project

use SitePal when I was working in Konnech’ Inc. [see appendix 4]

4O

4.1.4 Eyematic face station and shout 3D

. 41 .-...O n l in e E d _U C at ifO. nits

 

 

k , . . . ~ ' Anatomy- The Human Eye
— ‘ t - ' Have you ever wondered hawwe see?
I; “GO” ' Dght is reflected off of objects
‘ '. fl . into the eye and on to the retina.
—- . M, . . In turn, the rods and cones turn the image
a . . ‘ "'7‘ , into electronic nerve impulses that travel
- u ' via the optic nerve to the underside of the
—: '. " '. brain called the lateral genrculate body.
0 i I { Then the brain converts the nerve impulse
§ .1 ‘3 . . back into an image.
53:11th For a better understanding dick on the
’Start Leeeon' button. At the end of the lesson,
Professor Eyematic will ask you a question
about what you have learned
Good Iuckl
EyernIic’s em bole Ice
cream comers!
eesnym l'rd I”
crime mines
Em ending she or W
wlh ' I'M
m that may one you G)
W

 

 

Figure 36: Eyematic online education. http:Ilwww.eyematic.com/demos_web.html

Home users and professionals can create character animation in real-time
with Eyematic Face Station and publish it to the Internet. Eyematic's authoring
tools allow users to publish e-greetings, personal web pages, or instant
messages. This tool suite allows 3D web developers and professional animators
to create highly interactive and humanized content ideal for training courses,

syndicated news and product visualizations.

4]

4.1.5 30 Me Now

--‘~'ll' 2;». Downloads Solubms -. .; :‘ 3*: -.;- ~:r‘-:rir—)r5

 

-:ornpany,_

Produds I SDMeNow

SDMeNow 1.5

Create Super-Realistic 30 Models in Minutes Features) FAQ .

iv «.‘1 ' some“ Version 1.5"‘ sees media content creation
taken to a whole new level. Building on its original

- pipeline, 3DMeNow v1.5" now gives novice and

3 character content. Now you can build stunning 30

B Onlino
“y for $49

Purchase 30!»!er 3

online. £1111:
some" Tim! >
Download this save

disabled version of
3DMeNow 1.9g}:

user-friendliness and amazing real-time modeling

professional web and multimedia designers alike the
tool to create fully animated interactive 30 human and

models and make them ACT . in virtually any way you
want, and in perfect time with your own sound files.

 

izo- ”at Annindliuns

What‘s more, SDMeNow 1.5'” lets you build an

. animation with one model - than load it into any other
, model. You can build and animate Marylin Monroe

singing ’Happy Birthday'. dien load the song, with all of

 

. Marylin's facial expressions and actions - into a model
of yourself, or of Bill Clinton.

 

Mayer}

View .bio models live -

Figure 37: 3DmeNow. Web based talking avatar.

3DMeNow v1.5TM give novice and professional web and multimedia
designers the tool to create fully animated interactive 30 human and character
content. Designers can build stunning 3D models and make them act» virtually
any way they want, and in perfect time with their own sound files. SDMeNow
1.5TM also lets designers build an animation with one model and load it into any
other model. With Biovirtual’s player, 30 talking head could be published online

and opened with standard Internet browser.

4.1.6 Poser and Lipsinic Mimic

Curious Lab’s Poser is an award winning BD-character animation and
figure design tool for artists. In January 2001, Curious Labs added the Pro Pack

solution to its range of products, enabling Poser users to integrate with Maya and

42

3D Studio Max. And in November 2001, Avatar Lab was released to provide

animated avatars for Adobe Atmosphere.

With Poser, designers could quickly create movies, images and posed 3D
figures with Poser’s included libraries of human models. Pro Pack also allows

designers to create and output custom animated characters to other tools.

Lipsinic Mimic is a stand-alone application for Curious Labs' Poser that
automates lip-synching and facial animation. With simple voice input, Mimic
analyzes speech and automatically outputs the precise corresponding mouth, jaw
and lip-position data for any of the figures that come with Poser version 3 or 4,
including the new Pro Pack characters. The output data generated drives morph
targets to quickly and easily give Poser characters a voice. “Mimic also uses the
audio file to automatically create speech gestures (e.g., head nods, eye blinks,
etc.) for extremely realistic results. The technology behind Mimic is rich and
complex; yet using this standalone application is very easy. Simply import a
sound file, choose the frame rate, and generate an animation, which is stored

directly in Poser’s Pose library along with the sound file. Double click on the

Mimic animated pose setting and it is applied to your Poser figure.9”

 

9 Curious Lab Site: hflp:/fibrepod.curiouslabs.com/article/archive/76/

43

 

Figure 38: Character rendered in Poser 5. Use Mimic for Lip animation.

Although there are many other tools for creating a web-based talking
avatar such as the tools in lMS3d (http:llwww.ims3d.coml) and 003
entertainment (http:llwww.oc3ent.com/home.htm), the experimental design team
decided to use Macromedia Director along with Poser and Mimic. One reason is
that Poser’s character library could save a lot of time for modeling a 3D head.
Another reason is that Director’s Lingo language is much easier for handling
multimedia content than 3DmeNow and Eyematic’s programming language. So,
we used Poser’s character library to create our avatar and used lip Synic Mimic
to create facial animation. All the animation clips were rendered in Poser 5 and

exported to Director 8.5, which facilitates the designer with more flexibility

44

compared with other authoring tools. Interactivity was added with Lingo language
in Director. Finally, the animation clips were integrated with text, sound, and

images.
4.2 Design concept

Participants of the interpersonal interface were guided through the high
blood pressure information by a computer-generated avatar. The avatar was
present in one comer of the screen. Because most of HomeNetToo participants
are African American people and “research shows that for reasons best known to
themselves, people tend to trust female broadcasters more than they do males.”
[9] We designed the avatar as an African American female. The research goal is
to test if the social interface (interpersonal interface) is a better interface than the
standard interface for learning knowledge. On the first page, the avatar will
introduce herself to the participants to establish a sense of social interaction. The

avatar will read the main points in the text to the participants.

The five contents of interpersonal interface are exactly the same as the
control website. (1) High Blood Pressure (HBP) effects; (2) HBP consequences;
(3) HBP risks; (4) prevention HBP through diet; and (5) prevention HBP through

exercise.
4.3 Design process

4.3.1 User interface design

The content and layout of interpersonal interface is exactly the same as

the control interface except the talking avatar. Users saw the talking avatar on

45

the left screen as well as hearing her speak. The menu tree on the left showed
the participants the entire structure of this interface and highlighted the current
topic. The text and images on the right presented the information the avatar was
saying. Participants wore headphone to hear and talk with this computer
generated agent. First, the avatar asked participants “which content you want to
go to next” each time when she finished talking about one frame. Participants
made their decision and told their answers to the avatar. Then, the experimenter
behind the screen operated the avatar to let her continue her teaching based on

participants’ answer.

9%
‘5
t9

" keYboard Control ‘ ,
' - ’.»'/ “\f‘r‘xl 1% ......

    
 

 

 

Figure 39: Experimenter and participant (subject) in the Interpersonal interface.

When the experimenter heard the participant’s answer, he/she used
keyboard or mouse to pop up one of the avatar’s animation clips to make her

react correctly to participants’ speaking. Participants could not see the

46

experimenters behind screen. So, they should get the feeling that they are taking

with a computer generated artificial intelligent.

The resolution of the interpersonal interface is 800 X 600 pixels to match
the maxim video output resolution. The experimental design team used X-video

output to record the screen in the experiment. Simultaneously, we used a camera

to record the participants’ faces.

All the color buttons on the right side of the screen are only visible to the
experimenter. The experimenter used another TV screen to monitor the entire
interface. They were able to click buttons by mouse. To make the operation
easier for experimenter, the design team also set up the keyboard function by
Lingo script in Director. Experimenter could use pre-defined hot key to trigger

avatar’s animation clips quickly. Color labels are pasted on the keyboard to make

the key identifiable and meaningful to experimenters.

      

Aer \‘Oti er ntsrrr
'y

“000 "OM ”D
m enecrs

 

l‘. tw jar-my to have mgr. bl; -1 :In : :..’0 axis in

 

C IIICIIO! tan he; I? we: parents a " ~.-' «low blood relatives
0 mo» 000nm Mn- .1. «a re more he y it. down: r.
”utmost-m: . - . 53.-
. .. , _ ....4
Ones." sir-n L'.’ _____ . ' -...)
"q! “ode!“ “'1‘"! her. I “'"f'féj
lures-'1' A-eru Hatred-0' 6:!" “9'3 c"’""_)
Laue at tarmac Ape Etroi‘i (......{F} {13-3" ’
mmmruv cm- '1: l. j’ - 53??!)
L5,”? in?) L11?!)
9 ormeeeveuruencroes n — -

 

47

Figure 40: First version of interpersonal interface. Buttons on the right screen

triggers all the clips.

  

PREVENHON THROUGH DIETARY CHANGES
metering Fat In

 
 

 

 
   

Deep fried foods and greasy foods such as fried chicken and

     

 

7% BLOOD amuse mo french fries are high in fat and cholesterol. Cheese and other
‘xn- ITS "PIC?! dairy products may have a very high fat content and should be
avoided as much as possible.
Witt” 0'
"m" °°° m Check the nutrition label of foods you buy in the grocery store
for their fat content. If you have normal blood pressure, keep
9 “n m ‘7 RISK? your daily fat intake (both saturabed and unsaturated) to no
m M 60"... ‘ transitiont j [ transitienz ’

   

"MN?!“ ”IOU“ DIETARY CHANG!
[Mag Fat Intels-

   

' hawthorn I ( transition-3 ’

(80%“) Liam”. ]

If you have high blood pressure, you should avoid samrated fat
in your diet completely.

      
 

Mducmg sort-am Intake
Reducmg Alcohol trunks
Lung more fruits A mum

 
 

 

      

9 mneeevemucrone

 

Figure 41: Final version of interpersonal interface. Most of clips are triggered by

keyboard. Less buttons on the right screen.

4.3.2 Character reference

The experimental design team named this avatar as Cardia. She is African
American female with a friendly face and voice. She has a good knowledge

about HBP. She communicated with users and helped them to team HBP.

The experimental design team started the character design by choosing
from real people as her face and voice reference. 10 African American female
were selected as candidates. We asked them to read the script wrote for Cardia

and recorded their voices. We also took pictures of their front faces and side

48

faces. Then, the design team hired additional 23 randomly selected participants
to evaluate these voices and photos. These 23 participants were asked to sort
these candid ’3 voices and photos based on “who has the friendliest voice” and

“who has the friendliest face”.

"-‘If‘ ; f." elicit the'nght motise men on each icon to heafitga- .9. I: 7}
f2. elicit the Left notice button and hold to drag rm dismay box...

I. .3. Place in ascending ordor, the voices according to your preference. ' .. 1 -"
Start with the. ones that you find most pleastn andmegidty ' eerie ..

" t‘tjiiriultt .13, ‘endllste ‘

.~;‘;‘a‘? ,; I'J‘aq“ L,.'I . ‘Ivl‘j E Ye" “xiii-Ml .

'* 5 " . .. ; :. {$.11

 

Figure 42: The interface designed for rating voice. By Lynette Lim

Each candidate’s voice was presented as a white button in the screen.
Participants could click these buttons to hear the voices. They could drag and

move these buttons by mouse and sort them based on their ratting.

The experimental design team also printed all the candidates’ front face
pictures and sorted them randomly. Each participant was asked to resort these

faces based on who has the friendliest face.

49

At last, the design team rated all the evaluations. We got Cardia’s voice

reference and her face reference.

4.3.3 Character design

In the beginning, the experimental design team used Eyematics Avatar
Creator to modify the real person’s pictures and map texture to a 3D geometry in
3D Studio Max. We used the Shag-hair plug-in for 3D Studio Max to create hair

simulation.

 

Figure 43: left: Real people; right: Texture created in 3D Studio Max

50

 

Figure 44: Cardia’s head rendering images with hair in 3D Studio Max

After using Eyematic Face Station and BD Studio Max for modeling, the
experimental design team also tried Curious Lab’s character tool, Poser 5.0. This
latest version of Poser also support dynamic hair simulation and ray tracing
rendering for hair. Finally, the design team modified Cardia’s head using

Poser’s character library which saved us lots of modeling work.

 

Figure 45: left: Cardia made in Poser 4; right: Cardia made in Poser 5 with dynamic

hair.

51

4.3.4 Script design

As the agent of interpersonal interface, Cardia read the HBP information
on the screen to participants. To make a natural interpersonal communication,
she needs to react to user's spoke commands naturally. Beside the script about
HBP knowledge, the experimental design team also designed additional scripts
such as transitions between sections, positive and affective scripts response to

users’ spoke commands. [Scriptz see appendix 3].

4.3.5 Facial and Lip-sync Animation

There are various ways to make facial animation and Lip-sync in CG field,
such as facial motion capture, key framing animation, text-drive facial animation.
We start our design with Eyematic Face Station that is a powerful package for
facial motion capture. Instead of using physical markers attached on people’s
face (like the Vicon 8 system for full body motion capture), Eyematic Face Station
use pre-recorded video clips and virtual markers to create facial motion capture
data. It also supports facial motion capture though a remote video camera and

trigger a morph geometry head in 3D Studio Max in the real time.

First, the design team created a 3D head in Eyematic’s Avatar Creator.
We shot the front and side view of Cardia’s face reference and import both
pictures into Eyematic Avatar Creator. Then, virtual markers are created and
located to the right position on the 3D face. Finally, we used morph channel in 3D

Studio Max to handle the motion capture data transferred from Eyematic.

52

 

 

~ --—1.-—-.-

t‘baeiur T‘""””"WT"”"' Mfw

Mia‘s-Pg, xiifl'flm 'lflm- lm'*~ll§m-mm $3359 "mm

Figure 46: Eyematic Facial motion capture.

The experimental design team also tried another solution: using text based
facial animation tool to create Lip-sync animation. We used Curious Lab’s
character tool Poser to create our avatar’s 3D model, then use Lip sync Mimic
plug in to create facial animation. Blinking and head moving were generated
randomly in Lip Sync Mimic to get natural effects. The design team finally used
this solution instead of Eyematic Face station because Poser and Mimic are
really easy to handle and text based animation is more practical to meet our tight

schedule.

53

Mr (.3 turn”! tens-pans W war- we

 

First t. crsmn nt‘talking avatar
in Poser for Lip Sync ultimatum

Figure 47: Poser 5 and Mimic

With Lip-sync Mimic, the experimental design team created 54 animation clips
and rendered in Poser 5. The entire animation clips includes 30 “teaching HBP”

clips and 20 “positive/affective reaction” clips.

4.3.6 Pretest and final delivery

After the design team finished the design of interpersonal interface, we
delivered it to the experiment team with a basic training on how to control the
talking avatar. Then, the design team and experiment team work together and

made a pretest in MIND Lab.

Some MSU students were recruited as the pretest participants and gave
us their feedback. After the pretest, we found Cardia should have more clips for

answering the participant’s unpredictable questions. We created additional

54

n u

dialogs like “I like the way you are talking”, “please go on , I don’t understand
your talking”, “I am waiting.” and “yaw”. So, the experimenter will have a better
flexibility and more choices to make Cardia react to the participants’ action in a

natural way.

In the final experiment in Lansing and Detroit, the interpersonal interface
was projected to a big screen and an experimenter controlled the avatar behind

screen with the keyboard and the mouse.

Since my thesis is only focus on how the design team created the
experiment materials based on the current technology and the requirements of
experiment team. All the information about the HomeNetToo experiment, data

collection and analysis is not included in my thesis.
4.4 Current study of HomeNetToo.

The next phase of HomeNetToo was to test participants as well as
additional participants of similar demographic on the effects of different types of

these three Interfaces on their ability to gain more knowledge.

117 participants from low-income communities in the Lansing and Detroit
areas in Michigan were recruited for this study. Many of them had little or no prior

computer experience.

55

Control Interface ' “MT”

 

 

Spatial Interface

Interpersonal Interface

 

 

Figure 48: Three interfaces in the experiment.

56

“Participants were randomly assigned to either a standard, spatial or
interpersonal interface with information about high blood pressure and asked a

series of questions to test their cognitive styles and level of knowledge gained.10”

For more information on the following data analysis, hypothesis and conclusion,

please refer to HomeNetToo homepage at www.homenettoo.org.

 

10 http:llwww.mindlab.org/web2/research/cuIture.htm

57

APPENDICES
1. Script of engine in Shockwave Director

Global Joystick, HasZ, HasR, HasU, HasV
Global pMember, controllerobj, pCamera, frame_mark

on beginSprite (me)
set active3DRenderer = #openGL
pMember = member("building4")
pCamera = pMember.camera(1)
mr = pMember.newModelResource("controllerobj", #sphere)
mr.radius = 5
controllerobj = pMember.newModeI("controlIerobj",mr)
pCamera.addChild(controllerobj,#preserveParent)
end beginSprite

on exitFrame (me)
Set X = joyGetPos (Joystick, 1)
Set Y = joyGetPos (Joystick, 2)

if (X>62000) then

tList = pMember.modelsUnderRay(pCamera.worIdPosition,-
pCamera.transform.xAxis,#detaiIed)

if (tList.count) then
me.checkforcolIision(tList[1])
endif
R=1 .5
member("building4").camera(1).rotate(0, -R, 0, #self)
end if

if (X<38000) then

58

tList =
pMember.modelsUnderRay(pCamera.worldPosition,pCamera.transform.xAxis,
#detailed)

if (tList.count) then
me.checkforcollision(tList[1])
end if
R=1 .5
member("building4").camera(1).rotate(0, R, 0, #self)
end if

if (Y>58000) then

tList = pMember.modelsUnderRay(pCamera.worldPosition,
pCamera.transform.zAxis,#detailed)

if (tList.count) then
me.checkforcollision(tList[1])
endif
T=1 ’
member("building4").camera(1).translate(0, O, T, #self)
end if

if (Y<42000) then

tList = pMember.modelsUnderRay(pCamera.worldPosition,-
pCamera.transform.zAxis,#detailed)

if (tList.count) then
me.checkforcolIision(tList[1])
end if
T=1
member("building4").camera(1).translate(0, 0, -T, #self)
end if

if (Y<58000) and (Y>42000) then
puppetSound 0
if (frame_mark = 1) then
go frame 3

59

end if
end if

end control

on checkforcollision (me, thisData)

dist = thisData.distance
if (dist < controllerobj.resource.radius) then
diff = controllerobj.resource.radius - dist
tVector = thisData.isectNormaI * diff
member("building4").camera(1).translate(tVector,#world)
end if

end checkforcollision

end

2. Script for optimize rendering
on beginSprite (me)
set active3DRenderer = #openGL

3. Script for talking avatar
[INTRODUCTION]

Hi! My name is Cardia! I'm here to tell you all about high blood pressure.
There are 5 categories in the menu below me on the left. Information will appear
on the right screen. Tell me which section you would like to learn about first.

[EFFECTS]

{SUMMARY} This section explains what is blood pressure, how it is
created, and who it affects.

[CONSEQUENCES]

6O

{SUMMARY} This sections tells you some of the more serious medical
outcomes if high blood pressure goes untreated.

[RISKS]

{SUMMARY} This section tells you the factors that puts you at risk or
increases your risks of getting high blood pressure.

[DIET]

{Summary} This section tells you how you can control your high blood
pressure by watching what you eat.

[OTHER]

{Summary} This section tells you how you can control your high blood
pressure through other ways other than diet.

[TRANSITIONS]

{First few times} Tell me the name of the category you would like to know
more about.

Where would you like to go next?
Which category sounds interesting?
You’re now down with this section. Where to next?

You have already visited that section. Are you sure you want to view it
again?

[INACTIVITY]

Loud *yawn*

Please go on.

I’m waiting...

What next?

Loud *ahem*

I can’t help you if you don’t talk to me!

[POSITIVE/AFFECTIVE STATEMENTS]
I like the way you’re talking!

That’s nice!

That’s where I would’ve gone myself.
Okay, we do it your way.

That’s the attitude

6!

 

4. Homework Hotline project

This is the project I did when l was working in Konnech’ Inc in February
2003. It is a web based homework assignment system integrated with Konnech’s
PBX phone system. It was designed for Detroit Public School. I created the
prototype of the interface with talking avatar generated by Oddcast’s SitePal.
Flash format character animation was generated to present each teacher’s
speaking. Students and parents could visit the homework content assigned by

teachers using standard Internet browser.

URL: http:llwww.konnech.com/homework

darmmrk flail/Mr?

    

.4
Mr. Smith.

TWINE-uh,» 53M K05

Curses!
can Comm 9mm
Emu. Intent 6 '.»'-~ .- li (um

West-one sir-3814330

-. to}.

’..’M!"IO an attic: lam. hi1

 

 

copyright (3‘ A‘onncch' In. .7003

Figure 49: Virtual teacher in Homework Hotline Project.

62

BIBLOGRPHY

1. Ossner, J. Transnational symbols, The rule of pictoqrams and models in
the learninq process. In. J. Nielsen, J. Designing User Interfaces for International

Use. Elsevier Science Publishers, New York NY, 1990.

2. Testa, B.M. Graphics on the Internet part 1: A brief history. Computer

Graphics World 23, 10 (October 2000), 33 - 42.

3.Moltenbrey, K. PresentinLthe past. Computer Graphics World 24, 9

(September 2001), 30.

4.Thimbleby, H. User Interface Design. ACM Press, New York NY, 1990,

p. 396.

5.Horton, W. The icon book: Visual symbols for computer systems and

documentation. John Wiley & Sons, Inc. New York NY, 1994.

6. Michael Lewis and Jeffrey Jacobson. Game Engines in Scientific

Research. Communications of the ACM. January 2002Nol 45. No. 1.

7. Wanda Meloni. The Next Wave for Web 3Q. Computer Graphics World.

July 2002.

8. Lisa Taylor. A Mod. MOCLMOd. Mod World. Computer Graphics World.

March 2003.

9. Jenny Donelan. Speakingfor Scotland. Computer Graphics World.

November 2002.

63

M IIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

I‘ll!!!Illl‘lllll‘lllIIIIII‘I‘III‘.III"!

3 1293 02455 3475