33D on the WebD on the Web

Bernie RoehlBernie Roehl

December, 2000December, 2000

OverviewOverview

What is Web3D?What is Web3D? Applications (why Web3D is Applications (why Web3D is

important)important) History (where we’ve been)History (where we’ve been) Current Status (where we are)Current Status (where we are) The Future (where we’re going)The Future (where we’re going) Where does that leave you?Where does that leave you? Tech talk -- creating 3D web contentTech talk -- creating 3D web content

What is Web3D?What is Web3D?

Combination of two powerful Combination of two powerful forcesforces• the internetthe internet• 3D graphics3D graphics

The result: interactive, realtime The result: interactive, realtime 3D graphics delivered over the 3D graphics delivered over the webweb

Why now?Why now?

Until recently, there were two Until recently, there were two problems:problems:• slow computersslow computers• slow connectionsslow connections

Downloading 3D content took a long Downloading 3D content took a long timetime

Once downloaded, it ran very slowlyOnce downloaded, it ran very slowly Quality of the graphics was poorQuality of the graphics was poor

What’s Changed?What’s Changed?

Increased bandwidth into the homeIncreased bandwidth into the home• cable modemscable modems• DSLDSL

Increased processor speedIncreased processor speed• 1 ghz and beyond1 ghz and beyond

Graphics acceleratorsGraphics accelerators• installed on all new machinesinstalled on all new machines• able to provide fast, high-quality graphicsable to provide fast, high-quality graphics

ApplicationsApplications

E-commerceE-commerce• product visualizationproduct visualization• 3D virtual shops3D virtual shops• interactive demosinteractive demos• 3D “banner ads”3D “banner ads”

TrainingTraining• web-based training using interactive web-based training using interactive

3D3D

Applications (cont’d)Applications (cont’d)

GamesGames• multi-player, fully 3D (e.g. Sony multi-player, fully 3D (e.g. Sony

Everquest)Everquest) EntertainmentEntertainment

• streaming 3D animation (much lower streaming 3D animation (much lower bandwidth than video, can run full-bandwidth than video, can run full-screen, can have interactivity)screen, can have interactivity)

Social InteractionSocial Interaction• 3D chat spaces3D chat spaces

Applications (cont’d)Applications (cont’d)

EducationEducation• virtual “field trips”virtual “field trips”• distance education as well as on-distance education as well as on-

campuscampus• virtual “experiments” for physical virtual “experiments” for physical

sciencessciences• historical recreations for social scienceshistorical recreations for social sciences• 3D data visualization for various fields3D data visualization for various fields

Applications (cont’d)Applications (cont’d)

Collaborative design and Collaborative design and engineeringengineering• architecturearchitecture• product designproduct design• plant layoutplant layout• ergonomicsergonomics

HistoryHistory

In the beginning, there was VRML. In the beginning, there was VRML. And it was good. But not great.And it was good. But not great.

VRML 1.0 had an awkward scene VRML 1.0 had an awkward scene graph structure (inherited from graph structure (inherited from SGI’s OpenInventor)SGI’s OpenInventor)

VRML 2.0 (renamed VRML 97) fixed VRML 2.0 (renamed VRML 97) fixed that problem, but introduced that problem, but introduced othersothers

VRML 97VRML 97

ISO standard for 3D graphics on the webISO standard for 3D graphics on the web Lots of good ideasLots of good ideas Too many good ideas -- very difficult to Too many good ideas -- very difficult to

implementimplement Very large browsers (3 meg downloads!)Very large browsers (3 meg downloads!) Incompatibilities across Incompatibilities across

implementationsimplementations

Other problemsOther problems

Complexity of the spec made it an Complexity of the spec made it an expensive business to get intoexpensive business to get into

Players had to be free, so...Players had to be free, so... Companies tried to sell authoring Companies tried to sell authoring

toolstools• CosmoWorlds from SGICosmoWorlds from SGI• VR Creator from VREAMVR Creator from VREAM• many othersmany others

Problems (cont’d)Problems (cont’d)

Slow acceptanceSlow acceptance• players too large and buggyplayers too large and buggy• bandwidth too limited for “serious” contentbandwidth too limited for “serious” content• computers too slow to play content in computers too slow to play content in

realtimerealtime Therefore… no market for authoring Therefore… no market for authoring

toolstools Most companies withdrew from the Most companies withdrew from the

marketmarket

The Many Woes of CosmoThe Many Woes of Cosmo

The most influential players and The most influential players and tools came from Cosmo Software, a tools came from Cosmo Software, a division of SGIdivision of SGI

SGI hit money problems, sold off SGI hit money problems, sold off several divisions -- including Cosmoseveral divisions -- including Cosmo

Cosmo was bought by PlatinumCosmo was bought by Platinum Platinum hit money problems, got Platinum hit money problems, got

bought by Computer Associatesbought by Computer Associates

Whither Cosmo?Whither Cosmo?

Computer Associates essentially Computer Associates essentially abandoned Cosmo (but is still abandoned Cosmo (but is still buying up 3D companies)buying up 3D companies)

Engineers who worked on Cosmo Engineers who worked on Cosmo got snatched up (e.g. by Sony)got snatched up (e.g. by Sony)

CosmoPlayer and CosmoWorlds CosmoPlayer and CosmoWorlds were orphanedwere orphaned

Current State of VRMLCurrent State of VRML

VRML 97 was ahead of its timeVRML 97 was ahead of its time Modern computers have no problem Modern computers have no problem

with itwith it• (demo)(demo)

Several VRML vendors still around, Several VRML vendors still around, doing welldoing well• Blaxxun Interactive (Contact)Blaxxun Interactive (Contact)• Parallel Graphics (Cortona)Parallel Graphics (Cortona)• Sony (VRML multi-user systems)Sony (VRML multi-user systems)

The PresentThe Present

Chaos!Chaos! VRML is now just one of many VRML is now just one of many

competing technologiescompeting technologies Not clear which ones will be Not clear which ones will be

successfulsuccessful Market is still not growing as fast as Market is still not growing as fast as

companies are entering itcompanies are entering it Shake-out is inevitableShake-out is inevitable

33D Web Technologies D Web Technologies (3/13/00)(3/13/00)

33D Dreams (www.doitin3d.com)D Dreams (www.doitin3d.com) 3D Groove (www.3dgroove.com)3D Groove (www.3dgroove.com) Alice (www.alice.org)Alice (www.alice.org) Anfy 3D (www.anfy3d.com)Anfy 3D (www.anfy3d.com) Atomic 3D (www.atomic3d.com)Atomic 3D (www.atomic3d.com) Blaxxun3D (www.blaxxun.com)Blaxxun3D (www.blaxxun.com) Cult3D (www.cycore.com)Cult3D (www.cycore.com)

33D Web Technologies D Web Technologies (cont’d)(cont’d)

e3DNet (www.e3dnet.com)e3DNet (www.e3dnet.com) Flatland (www.3dml.com)Flatland (www.3dml.com) Fluid3D (www.oz.com/fluid3d)Fluid3D (www.oz.com/fluid3d) Gel (www.gel3d.org)Gel (www.gel3d.org) Genesis3D (www.genesis3d.com)Genesis3D (www.genesis3d.com) Hollywood3D (www.hollywood3d.com)Hollywood3D (www.hollywood3d.com) Java 3D (www.java.com)Java 3D (www.java.com)

33D Web Technologies D Web Technologies (cont’d)(cont’d)

Lightspace3d (www.ideaworks3d.com)Lightspace3d (www.ideaworks3d.com) MetaStream (www.metastream.com)MetaStream (www.metastream.com) Multipath Movies (www.bde3d.com)Multipath Movies (www.bde3d.com) NeMo (www.nemo.com)NeMo (www.nemo.com) OpenSpace3D (www.openspace3d.com)OpenSpace3D (www.openspace3d.com) Pulse3D (www.pulse3d.com)Pulse3D (www.pulse3d.com) PuppetTime (www.puppettime.com)PuppetTime (www.puppettime.com)

33D Web Technologies D Web Technologies (cont’d)(cont’d)

Realax (www.realax.com)Realax (www.realax.com) Scol (www.cryo-networks.com)Scol (www.cryo-networks.com) Shout3D (www.shout3d.com)Shout3D (www.shout3d.com) Vecta3D (www.vecta3d.com)Vecta3D (www.vecta3d.com) WorldUp (www.sense8.com)WorldUp (www.sense8.com) Zap (www.tgs.com)Zap (www.tgs.com) Plus...Plus...

33D Web Technologies D Web Technologies (cont’d)(cont’d)

Cortona Cortona (www.parallelgraphics.com)(www.parallelgraphics.com)

Contact (www.blaxxun.com)Contact (www.blaxxun.com) CosmoPlayer CosmoPlayer

(www.cosmosoftware.com)(www.cosmosoftware.com) … … and many others!and many others!

So What Happened to So What Happened to VRML?VRML?

Many of the systems above use Many of the systems above use VRML (but don’t call it that)VRML (but don’t call it that)

VRML is “under the hood” of VRML is “under the hood” of Java3D, X3D, MPEG-4, and many of Java3D, X3D, MPEG-4, and many of the proprietary systemsthe proprietary systems

Basic VRML “scene graph” concept Basic VRML “scene graph” concept is used by the vast majority of is used by the vast majority of systems out theresystems out there

Who Will Survive?Who Will Survive?

Good question!Good question! Market isn’t large enough for all those Market isn’t large enough for all those

companies to make itcompanies to make it Some (most!) will failSome (most!) will fail Those who survive will do Those who survive will do veryvery well well Stakes are highStakes are high New markets appearing soon (set top New markets appearing soon (set top

boxes, game consoles...)boxes, game consoles...)

Order from Chaos?Order from Chaos?

In theory, the Web3D Consortium exists In theory, the Web3D Consortium exists to push open standardsto push open standards

Largely ineffective, for a variety of Largely ineffective, for a variety of reasonsreasons

Their current effort is X3D, a successor Their current effort is X3D, a successor to VRMLto VRML

Much infighting about DTD’s, very slow Much infighting about DTD’s, very slow progressprogress

Proprietary solutions are pulling aheadProprietary solutions are pulling ahead

Current State of the ArtCurrent State of the Art

Several different approachesSeveral different approaches• Web browser plug-insWeb browser plug-ins• Plug-ins for other plug-insPlug-ins for other plug-ins

– RealPlayerRealPlayer– ShockwaveShockwave

• Standalone applicationsStandalone applications

Demo time!Demo time!

Blaxxun3DBlaxxun3D Shout3DShout3D MetaStreamMetaStream Cult3DCult3D Pulse3DPulse3D CortonaCortona Others...Others...

Blaxxun3DBlaxxun3D

55 55 kb Java appletkb Java applet Supports most of the VRML specSupports most of the VRML spec Full interactivity, fully Full interactivity, fully

programmableprogrammable Completely cross-platformCompletely cross-platform No plug-ins, nothing to installNo plug-ins, nothing to install Works great!Works great!

Shout3DShout3D

Small Java applet (size varies)Small Java applet (size varies) Supports most of the VRML specSupports most of the VRML spec Full interactivity, fully programmableFull interactivity, fully programmable Completely cross-platformCompletely cross-platform No plug-ins, nothing to installNo plug-ins, nothing to install ExtensibleExtensible Works great!Works great!

MetaStreamMetaStream

Puts 3D graphics on a Web pagePuts 3D graphics on a Web page Easy to use (3D Studio Max exporter)Easy to use (3D Studio Max exporter) Viewer must be downloaded and installedViewer must be downloaded and installed Viewer bundled with browsersViewer bundled with browsers No royaltiesNo royalties Clever incremental download technologyClever incremental download technology Downside: no interactivity (version 3.0 Downside: no interactivity (version 3.0

will fix this)will fix this)

Cult3DCult3D

From Swedish company “Cycore”From Swedish company “Cycore” Fast, lots of featuresFast, lots of features Big marketing push right nowBig marketing push right now Expensive to license ($3600 per Expensive to license ($3600 per

product line)product line) New version just releasedNew version just released One of the front runnersOne of the front runners

Pulse 3DPulse 3D

From Pulse NetworksFrom Pulse Networks ““Virtual Jay Leno”Virtual Jay Leno” Tightly integrated with 3D Studio MaxTightly integrated with 3D Studio Max Close ties with DiscreetClose ties with Discreet Supports streaming 3D animationSupports streaming 3D animation Very powerfulVery powerful Largish downloadLargish download

CortonaCortona

From Parallel GraphicsFrom Parallel Graphics Minimal download is 500 kbMinimal download is 500 kb Very fastVery fast Full support for VRMLFull support for VRML Lots of extensions (e.g. NURBS)Lots of extensions (e.g. NURBS) Good authoring tools (Internet Scene Good authoring tools (Internet Scene

Assembler, Internet Character Assembler, Internet Character Animator)Animator)

The Future - X3D?The Future - X3D?

X3D will happenX3D will happen By the time it’s designed and By the time it’s designed and

implemented, market will already implemented, market will already be very crowdedbe very crowded

Not clear what (if anything) it adds Not clear what (if anything) it adds to VRMLto VRML

May be too little, too lateMay be too little, too late

The Future - MPEG-4?The Future - MPEG-4?

MPEG-4 will happenMPEG-4 will happen Lots of big companies pushing itLots of big companies pushing it Uses VRML, H-Anim, etcUses VRML, H-Anim, etc Licensing issues still unclearLicensing issues still unclear Won’t be commercially available Won’t be commercially available

for at least a year (possibly longer)for at least a year (possibly longer) Authoring tools will be neededAuthoring tools will be needed

The Future (cont’d)The Future (cont’d)

Most likely scenario:Most likely scenario:• Short term…Short term…

– Market remains split between a few small Market remains split between a few small proprietary solutions (probably Cult3D, proprietary solutions (probably Cult3D, Pulse3D, MetaStream) plus Java appletsPulse3D, MetaStream) plus Java applets

• Medium term…Medium term…– Standards begin to take hold (particularly Standards begin to take hold (particularly

MPEG-4) and slowly displace proprietary MPEG-4) and slowly displace proprietary solutionssolutions

• Long term… who knows? :-)Long term… who knows? :-)

So where does that leave So where does that leave us?us?

Basic advice:Basic advice:• Don’t lock into any one technology yetDon’t lock into any one technology yet• Decide what the needs of your application Decide what the needs of your application

areare• Create your 3D content in 3D Studio MaxCreate your 3D content in 3D Studio Max

– reasonably powerful packagereasonably powerful package– almost all formats have 3D Studio Max almost all formats have 3D Studio Max

exportersexporters– can re-target content to different systems can re-target content to different systems

down the road if necessarydown the road if necessary

What to do nextWhat to do next

Start thinking how 3D can help Start thinking how 3D can help your web siteyour web site

Can be a major differentiatorCan be a major differentiator Good 3D content is compellingGood 3D content is compelling Interactivity leads to “stickiness”Interactivity leads to “stickiness”

Tech TalkTech Talk

How to create 3D web content:How to create 3D web content:• start with design!start with design!• create geometry (virtual objects)create geometry (virtual objects)• export to intermediate formatexport to intermediate format• animate and add interactivityanimate and add interactivity• polish (sound, text, surrounding polish (sound, text, surrounding

HTML)HTML)• convert to final format and publishconvert to final format and publish

DesignDesign

How can 3D help me convey my How can 3D help me convey my message?message?

What visual form should the 3D content What visual form should the 3D content take? (What is my metaphor?)take? (What is my metaphor?)

What kinds of 3D objects are needed?What kinds of 3D objects are needed? How will they move?How will they move? How will the user interact with them?How will the user interact with them?

Geometry CreationGeometry Creation

Use existing 3D modeling programsUse existing 3D modeling programs• 3D StudioMax3D StudioMax• LightwaveLightwave• TrueSpaceTrueSpace• MayaMaya• SoftimageSoftimage

Use whichever ones you’re most Use whichever ones you’re most familiar with (3D Studio Max familiar with (3D Studio Max veryvery popular for this)popular for this)

Exporting to Intermediate Exporting to Intermediate FormatFormat

Exporters are plug-ins to the 3D Exporters are plug-ins to the 3D authoring application that let it authoring application that let it save in a different formatsave in a different format

Converters are standalone Converters are standalone programs that read a standard programs that read a standard format and convert to an format and convert to an intermediate formintermediate form

Animation and Animation and InteractivityInteractivity

Can be created in 3D authoring Can be created in 3D authoring application and exportedapplication and exported

Can be created in a separate Can be created in a separate authoring tool (e.g. Pulse, Cult3D)authoring tool (e.g. Pulse, Cult3D)

Can be created using standard Can be created using standard Javascript (Blaxxun3D, Shout3D)Javascript (Blaxxun3D, Shout3D)

Advantages and disadvantages to Advantages and disadvantages to each approacheach approach

PolishingPolishing

Add sound, music if appropriateAdd sound, music if appropriate User actions should often have User actions should often have

soundsound Put in context by creating a Put in context by creating a

surrounding HTML pagesurrounding HTML page Add links to additional information Add links to additional information

pagespages

PublishingPublishing

Once everything is working, the Once everything is working, the content gets put on a standard content gets put on a standard web siteweb site

Users go to that web site to view Users go to that web site to view the content (possibly after the content (possibly after downloading an appropriate plug-downloading an appropriate plug-in)in)

The Content Creation The Content Creation TeamTeam

33D modelersD modelers• fairly specialized skillfairly specialized skill• different modelers know different different modelers know different

packagespackages• can also create 3D content from scanningcan also create 3D content from scanning• 3D “clip art” also available3D “clip art” also available

2D artists2D artists• probably already in-house for web page artprobably already in-house for web page art• generally use PhotoShop or PaintShop Progenerally use PhotoShop or PaintShop Pro

Content Creation Team Content Creation Team (con’td)(con’td)

Sound/music specialistsSound/music specialists• probably available in-houseprobably available in-house• must adapt skills to Web3D contextmust adapt skills to Web3D context

AnimatorsAnimators• often same as modelersoften same as modelers• must be able to design for interactionmust be able to design for interaction

ProgrammersProgrammers• Javascript, Java both commonJavascript, Java both common

Example 1 -- The ToasterExample 1 -- The Toaster

Geometry created in 3D Studio MaxGeometry created in 3D Studio Max Background modeled and then pre-Background modeled and then pre-

rendered (once with lights on, once rendered (once with lights on, once off)off)

Textures came from a library, Textures came from a library, everything else was created from everything else was created from scratch in Maxscratch in Max

Exported to VRML 97Exported to VRML 97

Toaster (continued)Toaster (continued)

Some cleanup required on the Some cleanup required on the exported VRML (easy to do with a exported VRML (easy to do with a text editor)text editor)

Animation handled with JavascriptAnimation handled with Javascript Final output is just VRML, viewed Final output is just VRML, viewed

using the Blaxxun3D viewer with using the Blaxxun3D viewer with HTML and JavascriptHTML and Javascript

Example 2 -- Forest WalkExample 2 -- Forest Walk

Forest created by Andrew Reitmeyer for Forest created by Andrew Reitmeyer for the VRML Dream projectthe VRML Dream project

Simply uploaded the VRML file to a web Simply uploaded the VRML file to a web site and wrote a short HTML page to site and wrote a short HTML page to use Shout3D’s “walk” viewer applet on use Shout3D’s “walk” viewer applet on itit

Total time -- 10 minutes!Total time -- 10 minutes! Building the forest itself took a bit Building the forest itself took a bit

longerlonger

Here’s the HTMLHere’s the HTML

<body bgcolor="#000000" text="#FFFFFF"><center>

<applet width=300 height=250 codebase="../common/shout3d" archive="shout3dClasses.zip" code="applets/WalkApplet.class"> <param name=src value="forest.wrl"></applet>

<br><i>Use the mouse to walk through the world</i></center></body>

Example 3 -- SciSatExample 3 -- SciSat

Content originally created in 3D StudioContent originally created in 3D Studio Imported into 3D Studio Max, exported Imported into 3D Studio Max, exported

to MetaStreamto MetaStream Uploaded it and wrote a short HTML Uploaded it and wrote a short HTML

page to view itpage to view it Backdrop of Earth orbit was pre-Backdrop of Earth orbit was pre-

rendered in Maxrendered in Max Total time -- five minutes, because Total time -- five minutes, because

we’re leveraging existing contentwe’re leveraging existing content

Here’s the HTMLHere’s the HTML

<head><title>Canada's SciSat</title></head><body bgcolor=#000000 text=#FFFFFF><center><embed name="metaviewer" type="application/metastream" pluginspage= "http://www.metacreations.com/metastream/viewer/" BgImg="earth_from_orbit.jpg" ui="black" logo="0" width="320" height="240" src="scisat.mts"></embed><p><em>Try dragging the satellite around</em><p><em>Drag with the CTRL key down to zoomin and out</em></center></body>

Key PointsKey Points

Simple 3D web sites can be easy Simple 3D web sites can be easy to createto create

Good 3D content can be Good 3D content can be compellingcompelling

You need to build a good teamYou need to build a good team Try to leverage existing 3D content Try to leverage existing 3D content

wherever possiblewherever possible

Contact InformationContact Information

These slidesThese slides• http://ece.uwaterloo.ca/~broehl/powerpoint/iweb.ppthttp://ece.uwaterloo.ca/~broehl/powerpoint/iweb.ppt

Bernie RoehlBernie Roehl• broehl@ece.uwaterloo.cabroehl@ece.uwaterloo.ca

VR StudiosVR Studios• www.vrstudios.comwww.vrstudios.com

Web3D ConsortiumWeb3D Consortium• www.web3d.orgwww.web3d.org