Create and publish
interactive 3D content online
with Sophie 3D engine
Flash Component
and Actionscript
Showcase
July 18, 2011
realization by: Nicolas Lorut
Miniby.me - car configurator
June 01, 2011
realization by: www.westimages.com
Eurocopter - Paint configurator
January 01, 2011
realization by: www.pinx-design.com
Energiesparhaus
June 01, 2011
realization by: www.westimage.com
Sun Odyssey 44DS
January 01, 2011
realization by: www.westimages.com
Airbus
January 01, 2011
realization by: www.xosystem.org
Photoviva - iPhone Cover Maker

How to create a 3D scene and export it as OBJ file format.

In this section we will show you how to create 3D contents for Sophie 3D  from your own 3D modelling program and how to export to OBJ file format.

Most 3D modelling programs can export to obj format. 

There are also some third party plug-ins that aim to correct the faults in exporting from the major modelling programs.

The wavefront obj format is composed by 2 files ".obj" and ".mtl".

The .obj file stores the geometry

The .mtl file stores the material definitions

If your 3D model uses textures place these texture files into the same folder as your model obj file and mtl file.


Preparing Your 3D Scene for Sophie 3D flash engine

These tutorials are designed to help you in getting your models looking good in Sophie 3D.

Create a 3D scene into your 3D software and export it to OBJ File Format:  It's as simple as that. However, to get the best out of your models and resolve some common problems you should know the following.

When you export your 3D model to the obj file format from your 3D application  two files will be created: .obj and  .mtl.  The .obj file stores the geometry and the .mtl file stores the material definitions.

When you load your 3D scene Sophie 3D will look for the "yourprojectname".mtl file with the same name of the loaded"yourprojectname".obj file. If you remane these files manually the internal references between the two files will be lost. So when you create these files by exporting them, name them with their final file name.

If you use images as textures in your 3D models, place these files inside the same folder where you keep the"yourprojectname".obj and "yourprojectname".mtl files. 

The Obj file format will not store the lights that you have created inside the scene in your 3D software. To include lights in your scene you will need to create the lights as 3D objects within your model (see the lights menu on the left), Sophie3D will then read these objects as lights.

Although wavefront.obj format is a simple and universally accepted file format their can be occasional gliches with 
how each 3D software program exports the geometric and material parameters. 
We have ironed-out the majority of the problems with the way the model's 3D geometry is exported to the 
"yourprojectname".obj but in some cases the materials properties exported into the "yourprojectname".mtl file do not correspond with the properties that you set inside your 3D software material inspector panel.
For example:
Transparency definiton ( d 0.5 )
Environment map ( map_Ka environmentTexture.jpg )
Path of the images used as textures
To fix these situations you have to open the "yourprojectname".mtl file and edit it with a text editor.

The size of your model

The default view in Sophie 3D is the Front View of a 3D model within a 5 x 5 unit bounding box (-2.5,+2.5). The model should easily fit within that space. This means that if the units in your document are based in millimeters, 20 millimeters in Sophie 3D will be read as 20 units, so making your model too large and you will not be able to view the model inside the scene.

If you do not want to resize your model you can also scale the scene when you load it into the sophie 3D calling the actionscript command:

sophie3d.loadScene(  url : String  , scale : Number  );

Lights

The OBJ file format contains only the object geometries and, for that , we have to do something to export the lights that can be read from sophie3D Engine.

To create lights that can be read by Sophie 3D you have to create an object within the 3D modelling program project that is called "light". This object will be recognized by the Sophie 3D Engine. It will not be rendered but will be read as a light. These "light"s are omni-directional point lights.




As an example, for the car model shown above two cubes were created, one above and one below, to act as lights. 

These cubes were called "light_1" and "light_4" The intensity of the light will change with distance. The Number defined after the object name, (eg. "light_4") defines the distance of decay. The number 4 indicates that after 4 unit/meters the light intensity will have decayed to 0.

All the 3D elements within the computer model named "light_..." will be recognized as a light inside the Sophie 3D Player.

You can define an infinite number of lights.


Shadow Planes

If you want to create shadow that can be read by Sophie 3D you have to create 3d plane and apply to it a material named "yourMaterial_shadow" 

The shadow under the car that you can see in the example above was created by copying the image from the "Top view" in the Sophie 3D Player, opening that image in Photoshop, remove the background colour and use the shape of the model to form the image of the shadow. Apply a filter to blur the edges and give the layer some transparency.
 


N.B. For a simple top light the 3D plane called "plane_shadow" should have the same aspect ratio as the image. The shadow image needs to be saved in png 24 bit Format.


Hotpoint

To create hotpoints  that can be read by Sophie 3D you have to create an object ( like a simple cube ) within the 3D modelling program naming it "myModelName_hotpoint". The end part of the name ( _hotpoint ) is key to transform the cube into Flash 2D Symbol placed on scene. 

Remember to indicate the symbol library class that will be used as 2D graphic by

XOS_HotPoint3D.defineInstance2DClass( MyHotPointSymbol );
 




Materials

The materials defines how Sophie 3D will renderize the objects/instances placed into the 3D scene.
here is an example of material definitions ( contained into the mtl file ).


USE OF DIFFUSE COLOR

newmtl DIFFUSE_COLOR
Kd 0.750000 0.663284 0.294544

newmtl DIFFUSE_COLOR_WITH_ENVIRONMENT
Kd 0.782407 0.000000 0.046636
map_Ka environmentTexture1.jpg

newmtl DIFFUSE_COLOR_WITH_ENVIRONMENT_AND_TRANSPARENCY
d .8
Kd 0.782407 0.000000 0.046636
map_Ka environmentTexture2.jpg


USE OF DIFFUSE TEXTURE

newmtl TEXTURE
Kd 0.587963 0.579663 0.569035
map_Kd basketball.jpg

newmtl TEXTURE_WITH_ENVIRONMENT
Kd 0.587963 0.579663 0.569035
map_Kd marble.jpg
map_Ka environmentTexture2.jpg

newmtl TEXTURE_WITH_ENVIRONMENT_AND_TRANSPARENCY
d .8
Kd 0.587963 0.579663 0.569035
map_Kd diffuseTexture.jpg
map_Ka environmentTexture2.jpg


USE OF DIFFUSE TEXTURE SELF ILLUMINATED
# ( expecially used with baked textures  )
# The end of the material name must be:   materialName_illuminated

newmtl TEXTURE_illuminated
Kd 0.587963 0.579663 0.569035
map_Kd bakedTexture.jpg

newmtl TEXTURE_WITH_ENVIRONMENT_illuminated
Kd 0.587963 0.579663 0.569035
map_Kd bakedTexture.jpg
map_Ka environmentTexture2.jpg

newmtl TEXTURE_WITH_ENVIRONMENT_AND_TRANSPARENCY_illuminated 
d .8
Kd 0.587963 0.579663 0.569035
map_Kd bakedTexture.jpg
map_Ka environmentTexture2.jpg


USE OF DIFFUSE TEXTURE WHIT ALPHA CHANNEL
# The transparency value must be set to 0 ( d 0 )

newmtl TEXTURE_WITH_ALPHA_CHANNEL
d 0
Kd 0.587963 0.579663 0.569035
map_Kd textureAlpha.png


USE OF SHADOW MATERIALS
# The end of the material name must be:   materialName_shadow ( see Shadow Planes menu )

newmtl PLANE_WITH_SHADOW_shadow (used for shadow plane )
Kd 0.750000 0.750000 0.750000
map_Kd shadow.png


"OBJ File Format tags" used by Sophie 3D Engine

The wavefront Obj format has many tags to describe the geometry of a 3d model.

Sophie 3d Engine uses a small set of these tags that are explained here:


Grouping

group name ( g )

object name ( o )


Vertex data

geometric vertices ( v )

texture vertices ( vt )

vertex normals ( vn )


The following sample is a portion of an .obj file that contains the vertex information.


    v      -5.000000       5.000000       0.000000

    v      -5.000000      -5.000000       0.000000

    v       5.000000      -5.000000       0.000000

    v       5.000000       5.000000       0.000000

    vt     -5.000000       5.000000       0.000000

    vt     -5.000000      -5.000000       0.000000

    vt      5.000000      -5.000000       0.000000

    vt      5.000000       5.000000       0.000000

    vn      0.000000       0.000000       1.000000

    vn      0.000000       0.000000       1.000000

    vn      0.000000       0.000000       1.000000

    vn      0.000000       0.000000       1.000000


Face Elements

face ( f )

The following is a portion of a sample file for a four-sided face element:

    f 1/1/1 2/2/2 3/3/3 4/4/4

Using v, vt, and vn to represent geometric vertices, texture vertices, and vertex normals,
the statement would read:

    f v/vt/vn v/vt/vn v/vt/vn v/vt/vn


Material tags


mtllib _filename

    Specifies the material library file for the material definitions. 

    _filename is the name of the library file that defines the materials.


usemtl material_name

    Specifies the material name for the element following it.

    material_name is the name of the material.


This example show  a cube definition in OBJ.


mtllib Cube.mtl

o Cube_Cube

v  1  1 -1

v  1 -1 -1

v -1 -1 -1

v -1  1 -1

v  1  1  1

v  1 -1  1

v -1 -1  1

v -1  1  1

vt 0 0

vt 0 1

vt 1 1

vt 1 0

vn  0  0 -1

vn  0  0  1

vn  1  0  0

vn  0 -1  0

vn -1  0  0

vn  0  1  0

usemtl CubeMtl

f 1/1/1 2/2/1 3/3/1 4/4/1 

f 5/4/2 8/3/2 7/2/2 6/1/2 

f 1/3/3 5/4/3 6/1/3 2/2/3 

f 2/4/4 6/1/4 7/2/4 3/3/4 

f 3/1/5 7/2/5 8/3/5 4/4/5 

f 5/2/6 1/3/6 4/4/6 8/1/6 


Details on the "MTL File Format tags" used by Sophie 3D Engine

Material library files contain one or more material definitions, each of which includes the color, texture, and reflection map of individual materials. These are applied to the surfaces and vertices of objects. Material files are stored in ASCII format and have the .mtl extension.

The Mtl format has many tags to describe the materials.
Sophie 3d Engine use a small set of these tags that are explained here:


Material definition

newmtl name

Specifies the start of a material description and assigns a name to the material.  An .mtl file must have one newmtl statement at the start of each material description.
"name" is the name of the material. 

Color definition

Kd r g b

The Kd statement specifies the diffuse color using RGB values.
The following is an example of color definition: 
Kd 0.1086 0.1086 0.1086

d _value

Specifies the dissolve for the current material. 
"_value" is the amount this material dissolves into the background.
A factor of 1.0 is fully opaque.
A factor of 0.0 is fully dissolved (completely transparent).

Texture definition

map_Kd filename

Specifies a texture file to load and apply to an instances that use the material.
"filename" is the name of an image file.

map_Ka filename

Specifies a texture file to load and apply to an instances as ambient reflectivity of the material.
"filename" is the name of an image file.

Example of material definiton of a mtl file


newmtl CubeMtl
Kd 0.5 1.0 1.0
d 0.5
map_Kd faceCube.jpg


Compressing the OBJ Model in ZOBJ Format

The "Sophie 3D Component PRO" has a special OBJ to ZOBJ compressor.

Sophie3D's Compressor that can reduce the size of your Wavefront.obj models by about 75%. For example a model file of 1Mb will be compacted to a file of 250Kb.

The smaller files will be loaded faster into a browser and will also give you some simple protection for your models.