Professional

TM

3D Website Content Creation Toolkit

For Autodesk's 3D Studio Max - version 6 or later.

Introductory 3D Website
Content Authoring Guide
And Tutorial

Copyright 2013, Advance Software Limited. All Rights Reserved.

Document version : 1.25

Introduction

The thought of creating a 3D website may seem a little daunting at first,

but the process is very much like creating traditional web pages. By
following this guide, you will learn how to design, edit and develop 3D
websites, introduce web pages into your environment, display
streaming video and create hyperlinks.
To author 3D website content with this version of Infinity Professional,
you must install the software on a computer system running the
Windows operating system (2000 and above) and Autodesk's 3D Studio
Max (version 6 or above). 3D Studio Max should be installed on your
computer prior to installing Infinity Professional. The installation order is
important because Infinity Professional needs to know which version of
3D Studio Max to work with.
A subset of the capabilities of 3D Studio Max are used to create 3D
websites. This content is then converted to Infinity XSG format using
the Infinity Professional exporter.
You should already be familiar with 3D Studio Max, and have ideally
produced content for real-time 3D applications (games, etc.) before. If
you are not familiar with 3D Studio Max, there are a number of
excellent books, videos and online resources that can help get you up to
speed.

Data File Locations

When you install Infinity Professional, a directory is created on
your computer at <Current User Documents Dir>\Infinity
containing the data files necessary to work through this
tutorial.
For example: C:\Users\Steve\Infinity.
That directory will be referred to as <Infinity> from now on.
This tutorial's artwork is stored here : <Infinity> \tutorial_1
The directory contains the final version 3D Studio Max files
created by working through this tutorial and associated
texture files. We recommend that you create your first 3D
website in <Infinity>\website because this directory contains
example files for use with the tutorial. Once you're
comfortable with the content creation process, you can store
your source artwork and 3D website data files wherever you
like.
3D Studio Max is sensitive to movement of .max files &
textures, so to avoid problems, try not to move these files
around your hard drive. Create a directory structure you are
comfortable with and stick to it. If multiple artists are working
together, use the exact same directory structure on the same
drive on each machine, or all access the same networked
drive mapped to the same logical volume and location.

OK, lets get started !

The easiest way to learn how to create a 3D website is to
create one by working through this tutorial.
You will learn how to create a basic 3D website containing
embedded web pages, video and hyperlinks.
Once you've mastered the basics, you can let your
imagination run wild and begin creating some amazing next
generation websites.

Stage 1 : Configuration
Before we create any content, please ensure your units are setup
correctly. One Infinity unit represents one metre.
1.1 From the main menu, select Customize->Units Setup. In the
dialog, set the Display Unit Scale To Metric (Meters).

1.2 Click on System Unit Setup and ensure 1 Unit = 1.0 Meters.

Stage 2 : Creating A Basic Environment

2.1 We are simulating an outside, daytime environment, so
lets set some ambient lighting.
From the 3D Studio Max main menu, select :
Rendering -> Environment -> Ambient.
... and set the ambient level to RGB(150,150,150) .

2.2 Next we'll create a simple 3D website zone.

Zones are separate areas within a 3D website. A 3D website is
organized by placing content in separate zones and linking the
zones together with hyperlinks.
2.3 Create a box with the measurements of 25x20x2,
centered at the origin
2.4 Ensure Generate Mapping Coords is checked as shown
below.

2.5 Create a simple 3D website environment by removing the

top of the box to form a basic zone.
To do this :
a) Convert the box to an editable mesh.
b) Select ignore backfacing.
c) Select the top face of the box and delete it.
d) Turn off ignore backfacing, select all the of the remaining
faces and flip the normals.
This is done because we want to view the inside of the
box (the zone), not the outside.

2.6 Now lets create some basic materials

a) Open the Material Editor and create two materials, one for the
floor and one for the walls.
b) Apply the supplied Bitmap textures to the diffuse component of the
two materials. Set the specular colour of both materials to black
because we don't want the walls or floor to be shiny. Ensure that the
specular is exact black (RGB 0,0,0).
You can find the example bitmap textures floor.jpg and wall.jpg in the
<Infinity>\tutorial_1 directory.
c) Enable the show texture icon in the material editor for both materials
so you can see the textures in the editor viewport.

2.7 Apply the materials

a) Select the sides (walls) and drag the wall material onto them.
b) Select the base (floor) and drag the floor texture onto it.

2.8 Set textures 'repeats' on both materials to add detail to

the model.
a) Select the wall material, select the diffuse map and set its u tiling
parameter to 8.0
b) Select the floor material, select the diffuse map and set both the u
and v tiling parameters to 5.0

Using texture tiling is a good way to add detail whilst limiting the
amount of data that needs to be downloaded.

Less data = fast downloads !

2.9 Next, create and position a camera to define the initial

view when entering the zone.
Create a free camera and place it just above the floor, somewhere near
the centre of the zone.

2.10. Now, lets add some lighting ...

Create a free directional light, and orient it so that it

illuminates the website floor and walls.

2.11 Congratulations, you have now created your first

3D website zone !
a) Save the scene as <Infinity>\tutorial_1\index.max.
b) Export the scene :
Select File->Export from the main menu.
Export the file to <Infinity>\website\index.xsg
The filename is important. When a user accesses a conventional
website or a subdirectory within a website using an html web
browser, the browser looks for a file called index.htm or index.html.
Similarly, when a user accesses a 3D website or a subdirectory within
a website using Infinity, the browser looks for a file called index.xsg.
XSG is Infinity's native file format.

3 Exporting 3D Website Content From 3DS Max

When you export content to XSG format, the following dialog will
appear :

3.1 Export the scene ...

Leave all the options at their defaults, and select export.

3.2 Testing the website

Once exported, your new 3D website zone can be tested by
clicking the test button.
a. Press the 'test' button to open your website zone in Infinity.
Your Infinity browser may need unlocking before you can
proceed. If you need to do this, request an authorization
code by following the on screen instructions.
b. Test your site.
c. Exit Infinity and return to 3D Studio Max when you are
ready to continue.

Stage 4 : Creating A Web Page Frame

Adding web pages is an excellent way of introducing content
into a 3D website zone. Infinity allows you to display web
pages on any surface.
First, we'll create a 'frame' to hold the web page.
Here's how :4.1 Reset 3D Studio Max
4.2 Ensure your units are set to 1 unit = 1 metre
4.3 Create a chamfer box with measurements of
3x0.1x2.0 with a chamfer fillet of 2.
4.4 Name the chamfer box 'frame'.

4.5 Open the material editor and create a material called

'frame'.
4.6 Apply the bitmap frame.jpg to the diffuse component in
the same way as you did for the walls and the floor.
4.7 Apply the material to the frame object.

4.8 Create another material called 'page'.

4.9 Set the material diffuse and specular colours to black.
4.10 Enable self illumination and set the self illumination
colour to white.
4.11 Apply the bitmap undefined.bmp to the self illumination
component.

4.12 Next, we'll define what part of the geometry will display
the webpage.
a) Convert the chamfer box into an editable mesh.
b) Select the central faces of the mesh on one side and
drag the 'page' material onto them.

4.13 With only the page material faces selected, apply an

Unwrap UVW modifier, then edit the texture coordinates so
that the entire texture surface is visible on the selection.
Set u,v coordinates to :

(0.001,0.001), (0.001,0.999),
(0.999,0.001), (0.999,0.999)

We 'bring the coordinates in' a little to prevent filtering

artifacts when web pages are rendered.

4.14 Clean up.

a) The texture map 'undefined.bmp' was applied for
construction purposes only - we don't want to see it in our
website.
b) In the material editor, select the page material and remove
the texture.

4.15 Save the scene as <Infinity>/tutorial_1/frame.max then

reset.
4.16 Next, we will externally reference the webpage frame
into the scene.
Our webpage frame is now ready for use. We are going to
place an external reference of the frame into the zone we are
building.

Stage 5 : External Referencing

We use this approach for several reasons :1. Inserting objects by reference can substantially reduce
download time. If an object is placed in multiple scenes
multiple times, it only needs to be downloaded once. This
can also be achieved by instancing.
2. Any improvements made to the referenced object are
automatically carried through into all scenes they are placed
in. For example, consider two scenes, A and B. Scene A
contains a model of a chair and scene B contains a table
and 4 referenced chairs. If you improve the chair model in
scene A, then load scene B, the scene will contain the
improved chairs.
3. Effective use of external references enables you to
organize your artwork in a logical, hierarchical manner that
enables increases in complexity to be managed efficiently.
4. When working in a team, good use of referenced geometry
enables the improvement in one person's work to carry
through into another's automatically. This is a very powerful
collaboration technique.
5. Scene style can be changed on the fly by switching
between different versions of any given piece of geometry.
E.g. A web server could deliver different types of chair
depending on the configuration.

Stage 6 : Embedding A Web Page

Into The Zone
External Referencing Procedure

6.1 Reset 3D Studio Max

6.2 Open <Infinity>/tutorial_1/index.max
6.3 Open the Infinity Tools Utility panel.
Utilities tab More <><> Toolz
6.4 From the tools panel select Insert then select
<Infinity>/tutorial_1/frame.max from the file dialog.
6.5 You can now position/orient/scale the referenced
geometry as required by manipulating the dummy.
6.6. Select the dummy connected to frame.max and position it
so the frame is against one of the walls, with the 'page'
surface facing towards the centre of the zone.

6.5 Next we'll specify which webpage will be displayed in the

frame.
a) Select the frame's parent it's connected dummy.
b) Right mouse button -> properties -> user defined.
Type the following exactly as written in the dummy's user
defined properties :<material id="page">
<input src="./main.html" type="webpage"/>
</>

A few things to note

1. The text that we just added describes a material override that
modifies a material on the referenced object. The original texture
on the 'page' material (none) is replaced with Infinity's interactive
webpage renderer. The webpage renderer is instructed to load the
webpage main.html .
2. The material that is overridden in this manner must be present
in the referenced object. Do not otherwise modify materials on
referenced instances.
3. Note the ./ relative pathname specification which instructs
Infinity to load the webpage from the same directory. You can
also specify absolute addresses using http syntax if you prefer.
4. Infinity's webpage renderer does not operate within the
3DSMax environment, so you will only see the webpage when you
view the zone in Infinity.
5. You can display other types of content by setting the texture

type to something else. For example, specifying type=video can

be used to render video streams.

6.6 Export the scene again ...

Stage 7 : Creating Hyperlinks

Just as with webpages, 3D website zones can contain

hyperlinks that allow you to link content together. You can
link to other zones, sites, or web pages.
Dividing a site into a number of zones is a good way to
organize content, to reduce download times and to keep a
complex site responsive.
Dividing a site into zones adds interest to the site by giving
visitors more places to visit.
The process of creating a 3D hyperlink is similar to adding a
frame. First, we create the hyperlink object (the object you
click on to activate the link), then we externally reference it
into the scene in which the hyperlink is to reside.

7.1. Create the 3D hyperlink geometry.

a) Reset 3D Studio Max. Set units to 1 unit = 1 metre.
b) Create a box with dimensions 0.2, 1.0, 1.0
c) Name the box 'default'.
d) Create a material named 'hotspot'.
e) Set the material's diffuse colour to green and specular to black.
f) Apply the material to the link object.
The link will activate when the user clicks on any part of the object
displaying this material.

g) Save as <Infinity>/tutorial_1/link.max

7.2. Embed the 3D hyperlink into your zone.

a) Reset 3D Studio Max, then re-open
<Infinity>/tutorial_1/index.max
b) Externally reference the link object into the scene and
place it against a wall within the zone in the same way you
did with the frame. Name its dummy link.
c) Add the following XSG code, exactly as written to the
link dummy's user defined properties
<material id="hotspot">
<link id="This way !" dest="./zone2.xsg"/>
</>

These instructions override the hotspot material with one that

hyperlinks to your second zone.

Note the relative path in the link destination (./zone2.xsg) . Always use
relative paths when possible as this means that you can move content
around without having to change all the links.
This is better :<link id="This way !" dest="./zone2.xsg"/>
than this :
<link id="This way !" dest="mywebsite.com/zone2.xsg"/>
If you use the second technique and then move the content to
myotherwebsite.com you will have to edit all the links (and by then you
might have a lot) to get them to work. If you are deliberately linking to
another site, you have to specify the full address as normal.

You can link to any webpage or xsg format 3D website zone on the
Internet using this technique.
For example, to link to Advance Software's 3D website, you could
write :<link id="Visit Advance Software" dest="advance-software.com"/>

Re-export the index.max scene.

.. but don't test it yet, because our zone now references another called
zone2.xsg but we haven't created that yet.

Stage 8 : Creating Your Second Zone

Our first zone now references another called zone2, so we'd
better create it.
a) In 3D Studio Max, open <Infinity>/tutorial_1/index.max
and save it as <Infinity>/tutorial_1/zone2.max to create a
duplicate that we can work from.
b) In <Infinity>/tutorial_1/zone2.max, set the diffuse texture
bitmap for the floor material to grass.jpg so the zone looks
a little different from the first one.
c) Modify the hyperlink in zone2 to point back to the default
zone (or elsewhere, if you prefer).
d) Export the scene to <Infinity>\website\zone2.xsg
e) Test the site !

Stage 9 : Other Forms of Content Linking

Linking to a webpages (popups)
If your link references a webpage, the page will open in a popup
window in Infinity when activated, for example :
<material id="hotspot">
<link id="Click For Information" dest="./main.htm"/>
</>

.. will open a popup window containing the webpage main.htm

Linking to a directory
If your link references a directory, Infinity will first look for a
file called index.xsg in that directory. If this is found, the zone
defined in that file will be loaded. If the xsg file is not found,
Infinity will try to load a webpage called index.htm or
index.html instead.
For example :<material id="hotspot">
<link id="Visit Advance Software !" dest="advance-software.com"/>
</>

... will open the root zone of Advance Software's website

because this site contains Infinity format 3D content. If the
site didn't contain this content, the default webpage for this
site would open.

Stage 10 : Adding Video Content

Now, we'll add some video content to our website.
Do the following :1. Re-open <Infinity>\tutorial_1\zone2.max in 3DS Max.
2. Select the frame object, then modify the xsg code in its user defined
properties as follows :<material id="page">
<input src="main.wmv" type="video"/>
</>
... re-export, then load the zone in Infinity to check the video plays back
correctly. Note that the video file 'main.wmv' has already been placed in the
website .video directory for you. To replace this with you own video content,
follow the guidelines in appendix 2.

Stage 11 : Base Colours

When a website zone loads, it can take some time before all
the content appears, especially if you're using a slow
connection or if the content is complex. While the browser is
waiting for textures to load, by default, objects appear as
untextured gray meshes. You can make the incremental load
process a little more pleasing on the eye by selecting
appropriate 'base colours'. The base colour of a material tells
the browser what colour to shade the material with while it is
waiting for textures to load.
For example, you could set a green base colour for a grass
material. Objects using the grass material would be shaded
green until the material's texture download completes. This is
not the same as the diffuse colour.

Lets add some base colours to our website root zone :

a) Open <Infinity>\tutorial_1\index.max
b) Open the material editor
c) Select the wall material
d) In the extended parameters, select the filter colour* , and
set the colour to an approximate brick red colour.
* Note that this has nothing to do with Max's filtering, we
are simply using this parameter as a placeholder for our
base colour definition.
e) Re-export the scene.
When you have uploaded your content to a web server, as
described in stage 11, you will notice that the wall is shaded
red while the browser downloads the texture.

Stage 12 : Mouse-Over Highlights

If you want a hyperlink to change its appearance when the
user moves the mouse over it, you can achieve this by
applying a special naming convention to the hierarchy of an
object.
This is best explained by example :
We are going to create a highlight-enabled hyperlink.
a) Load the link geometry :
<Infinity>\tutorial_1\link.max

b) Clone the object named default.

c) Move the clone so you can see it.
d) Name the cloned object 'highlight'.
e) Apply a different material to the highlight object .
f) Ensure the highlight material looks different by changing its
colour and/or texture so you can see the effect when a cursor
moves over the object.
g) Reposition the highlight object so that it lies exactly under the
default object.
h) Place the default object and the highlight object into a group
called cmd=link
Save the file as <Infinity>\tutorial_1\link2.max
Externally reference link2 into zone2 and add the following xsg
code to enable it :
<link id="Click me !" dest="./index.xsg"/>

Stage 13 : Animation
Object movement and texture coordinate animations are both
supported.
You need to select either export single cycle or export looped
when exporting the content to control how the animation is to
be played.

Stage 14 : Testing Your Site

If Infinity is installed on your computer, you can test any of
your new 3D website content my double clicking on the zone
you'd like to load from Windows explorer. If the website
designers create their work on a network accessible drive,
anyone else working on the project who has the Infinity
browser installed on their computer can test the site and give
feedback to the team before the content goes live on the
Internet.
a) Open your 3d website directory (<Infinity>\website) in
Windows Explorer.
b) Double-click on <Infinity>\website\index.xsg
c) The zone should load in Infinity.

Stage 15 : Going Live !

Once you've created some 3D website content that you'd like
to share with the world, the process of 'going live' is identical
to uploading webpage content to a web server.
Simply copy the files from your local <Infinity>/website
directory to the directory on a web server that hosts your
website. There are many file transfer utilities (ftp applications)
available for doing this. You can use whichever you prefer. All
transfers should take place in binary mode, not ascii or text
mode.
The simplest upload technique is to enter the ftp address of
the website into Windows Explorer, log in, then select all the
files and copy. If there are no filename clashes, Infinity
format xsg geometry, textures, video and any additional files
can reside on the same web server as your existing 2D
website without the need to make changes to your existing
website content or directory structure.
If any filename clashes occur, you will need to address this by
reorganizing your data so that all your content can reside on
the web server as required.
Once the files have been uploaded, anyone who accesses
your site using Infinity will enter your new 3D website ! When
the site is accessed from an html browser, web pages will
continue to load as usual.

Appendix 1: Website Authoring Tips

Here's a few things to think about when building a 3D
website.
Polygon Count
This is probably the most important thing to remember. Not
everyone has 'state of the art' computers. The more polygons
used in the website, the more powerful the viewer's computer
has to be to interact with it at an acceptable frame rate.
Complex websites will only be usable by people with high
specification computers. Complex websites also take longer to
load. Keeping things simple will attract the largest potential
audience.
We recommend creating low and high complexity versions of
your site and allowing users to select which one to enter
based on the specification of their equipment and Internet
connection.
Textures
We recommend that you use textures with power of two
image dimensions for maximum compatibility with legacy
graphics hardware. Using tiled textures enables large areas to
be textured from one source. Clever use of tiled textures
enables content to download really fast. Use them !
Where possible, use monochrome (gray scale) textures and
add colour by appropriate use of the diffuse and self
illumination material colours. Monochrome textures are a third
the size of full colour textures so download 3 times faster !

Geometry Scale
One Infinity unit represents one metre.
To avoid problems, set your units the same way in 3DS Max.
Instanced/Referenced Geometry
For items placed in multiple locations, such as doorways,
page frames, trees, etc. you are advised to use instancing or
external references. This will substantially reduce download
time as each unique object is only downloaded once.
Viewing In 3D Studio Max
What you see in Max isn't always exactly the same as what
you see in the browser. This is due to differences in lighting
and shading techniques. Remember that 3DS Max is a high
end graphics program and has many features which are not
yet supported by Infinity. For best results, limit your use of
the 3DS Max features to those supported by Infinity.
Embedded Media
Embedded pages and video can really make a site stand out,
but they take time to download and can affect performance.
Naming Conventions
A good naming convention is recommended to prevent
conflicting materials and filenames.

Real Time Lighting

Careful use of real time lighting effects can create dramatic
results.
Experiment
Infinity currently supports up to 64k vertices / polygons per
mesh.
Decide upon your target audience and ensure that you design
your website so that it runs well on the minimum specification
equipment your target audience is likely to be using.

Appendix 2:
Preparing Video Content
Infinity supports streaming video. In order to play back video
content, an appropriate codec must be installed on the end
user's computer. We recommend that you keep source videos
so you can convert to superior formats later.
For example, you can use Microsoft's Expression Encoder to
convert existing video into a streaming optimized format.
Link: http://www.microsoft.com/expression/service-packs/Encoder.aspx

MP4 (H264) is the currently recommended streaming format.