5) Export to the WebGL directory (contained in the .zip archive) as test.html

6) Start StartServer inside WebGL directory with explorer/finder (or from console,
you can also use a web server of your choice, e.g. python -m SimpleHTTPServer 8080)

7) Go to http://localhost:8080 (check which port is actually used, can be 80 or 8080-8090),
then select test.html

8) If you change the .html file you can export the .js file using
Inka3D JavaScript Exporter so that your changes in the .html file don't get
overwritten. Repeat step 4 and export test.js, then press the reload button in your browser.

Troubleshooting

When exporting maya says Cannot find procedure "Inka3DOptions*":
Restart Maya. If it does not help, the four Inka3DOptions*.mel scripts may be missing in
maya/<version>/scripts directory. Repeat step 3 of installation and make sure to
copy the whole maya directory, not only the plugin itself.

This is a short api description. With the Inka3D HTML+JavaScript exporter working
examples can be exported, also with a simple attribute editor that lists all attributes
that are exposed in the interface of an exported scene. It is recommended to use
the exported .html files also for reference.

HTML Header

In the head section of your html include the following javascript files:

If you use the Inka3D HTML/WebGL exporter then a simple HTML boiler plate file is
created for you as a starting point for your project.

Initialization

Modules

In the global variable section you can create a shortcut variable for the inka3d engine
module that has the namespace inka3dEngine:

var engine = inka3dEngine;

Renderer and render groups

In the script code, first create a renderer with given number of render jobs, e.g.

renderer = new engine.Renderer(100);

You need as many render jobs as you render shapes. If you use geometry instancing,
i.e. render an object per particle, you need one render job for every particle. If
the particle system has a maximum of 500 particles you should pass 600 here. If
rendering starts flickering or you don't see all objects you probably have too few
render jobs.
The next thing to do is to create a render group

group = renderer.createGroup();

This is a group of scenes you can render at a time. At first one group
should be enough, but you can do things like overlays with it. Render one group,
clear the z-buffer and then render another group.

Start loading

Now load the exported scene (or collection of exported scenes - creating
scene collections requires an extra tool that is available on request). Call engine.loadEmbedded()
to load a scene that is embedded into the html file:

Observing load progress

The scene has an attribute called numLoaded which tells you how many resources
(e.g. textures) are already loaded and an attribute called numResources that
tells you how many resources there are to load. With this you can create a loading
bar or other progress display. The code could look like this:

Creating scenes

A scene instance can be created in the callback of the loadEmbedded function. This
line creates a scenen instance in our render group:

scene = container.createScene("MyScene", group);

It is possible to do this more than once in the same group or in different groups.

Interfacing scenes

There are several methods to access the attributes of a scene. The names
of the attributes are the same as in Maya. To find out the name of an attribute,
simply modify its value in Maya and look for the output in the script editor. Then
copy-and-paste the attribute name (e.g. "pCube1.translateX") to your javascript editor.
These methods can be used to access attributes:

getIntVector(attributeName, length)

returns Int32Array if attribute has given length

getIntArray(attributeName)

returns Int32Array for attribute

getFloatVector(attributeName, length)

returns Float32Array if attribute has given length

getFloatArray(attributeName)

returns Float32Array for attribute

getTexture(attributeName)

returns WebGL texture object of given attribute

getTexture(attributeName, index)

returns WebGL texture object of texture sequence

setTexture(attributeName, texture)

sets WebGL texture object to given attribute

setTexture(attributeName, texture, index)

sets WebGL texture object of texture sequence

The returned arrays of type Int32Array or Float32Array can be stored and then used
to read and write attributes very fast. Attributes of scalar type are accessed with
typed arrays of length 1.

Now we can extract the global animation time attribute from the scene:

sceneTime = scene.getFloatVector("time", 1);

We can use a Maya camera for rendering by finding its world matrix and projection
attributes:

Search for "parameterInfos:" in the exported .js file to see which attributes are available.
If the attribute you are looking for is missing, check the export options while exporting
from Maya.

Setting attributes

You can set scalar or vector attributes by simply assigning a value using the
array operator ([...]). For example for the sceneTime this could be

sceneTime[0] = new Date().getTime() / 1000.0 - startTime;

Another example: In a new scene, create a sphere and assign a Phong shader to it. Export
the scene with Interface -> Nodes/Attributes set to phong1.color or alternatively make Color R/G/B
nonkeyable in the channel box and export with Interface -> Nonkeyable Attributes checked.
Now we can get the color from javascript:

color = scene.getFloatVector("phong1.color", 3);

To set it to red, do the following:

color[0] = 1; color[1] = 0; color[2] = 0;

Getting attributes

You can query the current state of attributes. Scalar or vector attributes are read
by using the array operator ([...]). For example you can get the current scene time by

var currentTime = sceneTime[0];

To use a camera that is in your Maya scene for rendering, you use the current state
of sceneCameraMatrix and sceneProjection by

Where viewMatrix and projectionMatrix are a Float32Array of length 16 that can be
allocated once in the initialization code.

Main loop

It is your responsibility to create a main loop. This way you can set a render
target and apply postprocessing as you like. A typical main loop looks like this:
set attributes, update, calculate viewMatrix and projectionMatrix, clear screen, render.

Update

After you have set all attributes, update the scenes by using

group.update();

This recalculates all world transformations, all animations and all other dependent
attributes.

Rendering

Rendering is done on a render group. A view matrix, a projection matrix and
a render layer name are passed to the render function:

group.render(viewMatrix, projectionMatrix, renderLayer);

The renderLayer parameter selects a render layer of your Maya scene. Use "color" if
you don't use render layers.

Picking

To find out which object is under the mouse curser you can use getObjectId(name) on
a scene in the init function to get an id for an object. Use the name of a shape in your
scene with the instance index in square brackets, e.g.

var cubeId = scene.getObjectId("pCubeShape1[0]");

Then, in the main loop, use the pick function on a render group. You also have to pass
a view and projection matrix which can be the same as for rendering. Also pass the
mouse coordinates in device space, i.e. ranging from -1 to 1 over your viewport. The
(-1, -1) point is the lower left corner, (0, 0) is the center.

User Controllable Camera

If this option is checked, the camera is user controllable on devices that have
a mouse or a touch screen. It tumbles about the same point as the current maya
camera. To tumble about a specific object select the object and press f in maya.
Then export the scene. If the camera is not user controllable, the camera of the
active viewport is used. In any case the camera projection parameters of the
active viewport are used.

Interface

The first section puts the attributes of nodes of given types into the interface.
Be careful with All Nodes and Transforms because some scenes contain thousands of transform
nodes which will result in very long export times when this option is on.

The Keyable/Nonkeyable/Hidden attributes options select if attributes are in the
interface that are keyable/nonkeyable/hidden in the channel box. This property can
be set on a per-attribute basis using the context menu of an attribute in the channel box.

The Nodes/Attributes field tells the exporter which nodes or attributes of nodes
are visible in the interface and therefore if their attributes can be modified by
Javascript. The list of nodes is a list of comma (',') separated list of node or attribute
names. For example if you want to interface to the attributes of a cube and to translate
of a sphere, the list could be "pCube1,pSphere1.translate". The wildcards ? and * are
supported. For example use "pCube*.rotate" to export the rotate attributes of all nodes
starting with "pCube". It is beneficial to interface to as few nodes as possible as this
increases performance and reduces file size.

Cameras have the special attribute projection (e.g. "cameraShape1.projection") that
contains the camera type (perspective or orthographic), the fit mode, focal length,
film size/offset and near/far clip plane. From the projection parameters and the screen
aspect ratio a camera projection matrix can be calculated using the function
engine.matrix4x4Projection().
The world matrix and projection parameters of the camera of the active viewport are
always in the interface if the camera is part of the exported scene.

Hint: Export to .html with Add Attribute Editor in the Debug section to see which
attributes are in the interface. Try to keep the list short if you want to optimize.

Render Layers

Export Render Layers

Maya's render layers get exported. With this you can selectively render
indivitual parts of the scene as the render function takes a render layer name.
By default the layer named "color" is rendered. If you create a render layer named
"color" in your Maya scene, you can control which objects are rendered by adding
the objects to that layer.
Also the picking can be controlled using a render layer named "pick". All objects
that are in the "pick" render layer are pickable. With this you can define an
invisible plane for picking or exclude objects from picking.

Add Pick Layer

A render layer named "pick" is added to the exported scene even if no "pick"
render layer is defined in the Maya scene. If Export Render Layers is on and a
render layer named "pick" exists in your Maya scene then all objects in this layer
are pickable. Ohterwise all objects are pickable.

Texture Set 1/2

Format

Set the output format for textures. JPEG/PNG selects JPEG or PNG automatically.
PNG is used if the image has an alpha channel or if the PNG is smaller than the JPEG.
Disable the Texture Set 2 by selecting disabled as format.

Quality

Set the quality of the textures. PNG textures are reduced using pngquant.

Scale

Reduce the size of all textures.

Preserve Size

Textures of up to the given size are not scaled down by the Scale option. This is useful
for small textures such as icons.

Maximum Size

Restrict the size of textures to a maximum. Recommended is 4096x4096.

Output

Output directory for textures. Can be empty to put the textures next to the exported
.js and .html files. Must be different for Texture Set 1 and 2 if Texture Set 2 is enabled.

Optimization

No Bump Mapping

Omit bump mapping of all shaders. Useful for low-end targets such as tablets.

Data (Vertex, Animation)

Data encoding mode. Recommended is to set to Compress, use Float so that the
.dat file is as small as possible, but vertex data is expanded to float values for
compatibility with Internet explorer 11.

Double Sided

By default all polygons in Maya are double sided. For realtime rendering single
sided polygons are recommended, set all your shapes to single sided where possible.
With this option you can configure what to do with double sided polygons at export time.
For compatibility with Internet Explorer 11 the One Pass option can not be used.

Avoid Pixel Processing

Simplifies the pixel shaders by doing most calculations in the vertex shader.
Quality degrades more or less dependent on shader. For example ramp textures are
evaluated per vertex. Useful for low-end targets such as tablets.

Debugging

Show Log Messages

Show all log messages in Maya's Script Editor window while exporting.

Add Attribute Editor

Adds a simple attribute editor to the exported .html that can be used to change
all attributes of a scene that can be modified from the javascript side.

Camera

Camera Aperture defines the film size in inch,
film Offset is also in inch.

When Orthographic is enabled, Focal Length, Camera
Aperture and Film Offset have no effect in Maya.

Joint

A Skeleton is made up of joints

translate

Animatable

rotate

Animatable

scale

Animatable

rotateOrder

Constant

roateAxis

Constant

inheritsTransform

Constant

jointOrient

Constant

visibility

Animatable

Look At

Look At controller for camera

offset

Constant

aimVector

Constant

upVector

Constant

worldUpType

Constant

worldUpVector

Animatable

twist

Animatable

Twist only works for World Up Type = Scene or
Vector.

Transform

Basic transform node

translate

Animatable

rotate

Animatable

scale

Animatable

shear

Animatable

rotateOrder

Constant

roateAxis

Constant

inheritsTransform

Constant

rotatePivot

Constant

scalePivot

Constant

visibility

Animatable

Geometry

Blend Shape

WebGL: will exceed maximum
vertex inputs for more than one target.

One mesh per blend target is supported.

Mesh

Fully supported. Automatic triangulation is done
on polygons, but the quality of Maya's triangulation may be better.
Automatic vertex cache optimization is performed.

visibility

Animatable

Skin Cluster

A maximum of 8 bones per vertex is the limit for
performance reasons but can be extended on request.

Bend Deformer

curvature

Animatable

lowBound

Animatable

highBound

Animatable

Flare Deformer

lowBound

Animatable

highBound

Animatable

startFlareX

Animatable

startFlareZ

Animatable

endFlareX

Animatable

endFlareZ

Animatable

curve

Animatable

Sine Deformer

amplitude

Animatable

wavelength

Animatable

offset

Animatable

lowBound

Animatable

highBound

Animatable

Squash Deformer

factor

Animatable

expand

Animatable

startSmoothness

Animatable

endSmoothness

Animatable

lowBound

Animatable

highBound

Animatable

Twist Deformer

startAngle

Animatable

endAngle

Animatable

lowBound

Animatable

highBound

Animatable

Wave Deformer

amplitude

Animatable

wavelength

Animatable

offset

Animatable

minRadius

Animatable

maxRadius

Animatable

Shading

Note: Maya defines transparency separately for all
three color channels. Inka3D currently only uses the red
component as monochrome transparency since current hardware shaders
support only monochrome transparency. Maya applies the transparency
to a pixel in the render target as follows:

Lighting

When light parameters are connected to a Texture,
these projections are used:

Ambient Light

Spherical-Cylindrical

Directional Light

Planar

Point Light

Projective

Spot Light

Spherical

Ambient Light

color

Animatable, Texture

intensity

Animatable, Texture

ambientShade

Animatable

Directional Light, Point Light

color

Animatable, Texture

intensity

Animatable, Texture

emitDiffuse

Constant

emitSpecular

Constant

decayRate

Constant

Spot Light

color

Animatable, Texture

intensity

Animatable, Texture

emitDiffuse

Constant

emitSpecular

Constant

decayRate

Constant

coneAngle

Animatable

penumbraAngle

Animatable

Texturing

All textures have a 'Color Balance' section that can be used
to modify the output:

defaultColor

Animatable, Texture

colorGain

Animatable, Texture

colorOffset

Animatable, Texture

alphaGain

Animatable, Texture

alphaOffset

Animatable, Texture

alphaIsLuminance

Constant

If Alpha Is Luminance is on, the outAlpha output is the luminance of the
color component and the outTransparency output is the inverse luminance of
the color component

From 'Effects' these attributes can be used:

invert

Constant

File Texture

References a texture by its file name.

imageName

Constant

useImageSequence

Constant

imageNumber

Animatable

frameOffset

Animatable

uvCoord

UV, Texture

outColor

Output

outAlpha

Output

outTransparency

Output

Animated textures are created by setting „Use
Image Sequence“. Then right-click on Image Number and edit the
script if necessary. The image sequence must be of the format
name.#.ext (preferred) or name#.ext where # is the value of the
frameExtension attribute of the file texture.

Example for image sequence:

MyAnimation.0.png

MyAnimation.1.png

MyAnimation.2.png

MyAnimation.3.png

…

Example expression for cyclic texture animation
that changes once per second:

file1.frameExtension = time % 4;

As a special feature there is the distinction between normal and surface
textures. Surface textures are textures that are used only by the Maya surface shader.
Normal textures are rescaled to power of two, i.e. an image of 800x600 is
rescaled to 512x512.
The resolution of surface textures is arbitrary, but if it is not power of two
it is clamped at the borders due to a limitation of WebGL. This
is summarized in the following table:

Env Ball

Environment ball. The environment is captured on a
texture by taking a picture of a reflective ball that is inside the
environment. The objects are given the appearance of the ball.

eyeSpace

Contant

reflect

Must be on

outColor

Output

Env Sphere

Environment sphere. The environment is created by
mapping a texture on an infinitely large sphere. The reflection
vectors on an object do a texture lookup on this sphere.

flip

Contant

outColor

Output

UV Chooser

Chooses the UV set for following texture in the
shading network. To create/edit UV choosers use Window →
Relationship Editors → UV Linking.

Vertex Colors

Vertex colors are supported via the Mental Ray vertex colors node. Use the
mental ray renderer in maya to preview the result. Only red, green and blue
of the vertex colors are exported, not the alpha channel.

mentalrayVertexColors

cpvSets[ ]

Constant

defaultColor

Animatable, Texture

colorGain

Animatable, Texture

colorOffset

Animatable, Texture

alphaGain

Animatable, Texture

alphaOffset

Animatable, Texture

alphaIsLuminance

On

invert

Constant

outColor

Output

outAlpha

Output

Particle Sampler

Particle attributes can be accessed inside a shading network with the
particleSamplerInfo node. Currently only the uv output can be taken from
the normalized age of the particles.

outUvType

Normalized Age

inverseOutUv

Constant

Use the particle sampler to animate the transparency or color of sprite particles
over their life time. For example you can create a ramp texture, delete the place2dTexture
node and connect outUvCoord of the particleSamplerInfo to uvCoord of the ramp texture.

Utility

Utility nodes can be used in a scene or in a
shading network.

Add Double Linear

input1

Animatable, Texture

input2

Animatable, Texture

output

Output

Angle Between

vector1

Animatable, Texture

vector2

Animatable, Texture

angle

Output

axis

Output

Blend Colors

color1

Animatable, Texture

color2

Animatable, Texture

output

Output

Clamp

min

Animatable, Texture

max

Animatable, Texture

input

Animatable, Texture

output

Output

Condition

firstTerm

Animatable, Texture

secondTerm

Animatable, Texture

operation

Constant

colorIfTrue

Animatable, Texture

colorIfFalse

Animatable, Texture

output

Output

Contrast

value

Animatable, Texture

contrast

Animatable, Texture

bias

Animatable, Texture

outValue

Output

Gamma Correct

value

Animatable, Texture

gamma

Animatable, Texture

outValue

Output

Luminance

value

Animatable, Texture

outValue

Output

Mult Double Linear

input1

Animatable, Texture

input2

Animatable, Texture

output

Output

Multiply Divide

input1

Animatable, Texture

input2

Animatable, Texture

output

Output

PlusMinusAverage

input1D[ ]

Animatable, Texture

input2D[ ]

Animatable, Texture

input3D[ ]

Animatable, Texture

output1D

Output

output2D

Output

output3D

Output

Reverse

input

Animatable, Texture

output

Output

Sampler Info

This node works only inside a shading network.
Only a few attributes are supported so far:

flippedNormal

Output

facingRatio

Output

Unit Conversion

This node is usually hidden by Maya

input

Animatable, Texture

output

Output

Particle Systems

Particle systems can currently only be rendered using sprites (set Particle
Render Type to Sprites) or an Instancer (Geometry Replacement). As particles are
simulated over time using acceleration and velocity it is not possible to let the
time run backwards. If you export an .html file with a time range that is too short
strange things happen if the time jumps back.

Instancer (Geometry Replacement)

Render Attributes

If Particle Render Type is set to Sprites, then these attributes are supported:

spriteScaleX

Animatable

spriteScaleY

Animatable

spriteTwist

Animatable

Per Particle (Array) Attributes

Not yet supported are Ramp Position, Ramp Velocity and Ramp Acceleration.
All other attributes including custom attributes can be used in creation, before
dynamics and after dynamics expression.

Instancer

rotationAngleUnits

Constant

rotationOrder

Constant

cycle

Constant

cycleStepUnit

Constant

cycleStep

Animatable

Field

All particle force fields have the following
attributes:

magnitude

Animatable

attenuation

Animatable

useMaxDistance

Constant

maxDistance

Animatable

Air Field

Inherits Field

direction

Animatable

speed

Animatable

Drag Field

Inherits Field

useDirection

Constant

direction

Animatable

Newton

Inherits Field

minDistance

Animatable

Radial

Inherits Field

Uniform/Gravity

Inherits Field

direction

Animatable

Vortex

Inherits Field

axis

Animatable

Constraints and IK

Aim Constraint

Lets a node aim at a target

offset

Constant

aimVector

Constant

upVector

Constant

worldUpType

Constant (Scene Up or Vector)

worldUpVector

Animatable

IK Handle

Not supported for WebGL

Only ikRPsolver supported, IK solution is
different from Maya for more than one intermediate joint. The
position and scale of joints in an IK chain are considered constant
by the IK solver (except position of root joint).

poleVector

Animatable

Orient Constraint

Transfers the orientation of one or multiple nodes
to another node

offset

Constant

Parent Constraint

Transfers the transformation of one or multiple
nodes to another node

Point Constraint

Transfers the position of one or multiple nodes to
another node

offset

Constant

Pole Vector Constraint

Lets the pole vector of a IK Handle point at a
node

offset

Constant

Scale Constraint

When exporting to HTML, a template file is used to generate the .html file. The
Inka3D Maya export plugin has a builtin template file, but own templates can be used
while exporting. There are variables that can be inserted into the template using
the ${...} placeholder. A variable has the two states undefined and defined. If a
variable is defined, it has a value. For example ${START_TIME} is the animation start
time. Sections of the template can be included or excluded depending on the defined state
using c-style #if #else #endif where only negation (!) is supported as operator:

#if SCENE_CAMERA
this section of the template is used if SCENE_CAMERA is defined
#else
this section of the template is used if SCENE_CAMERA is undefined
#endif
#if !MINIFIED
this section of the template is used if MINIFIED is undefined
#endif

The following list shows all variables that can be accessed using the ${...} placeholder:

CONTAINER

Name of the scene container, i.e. the base name of the exported files

NAME

Name of the scene in the scene container

START_TIME

Animation start time in seconds as set in Maya

END_TIME

Animation end time in seconds as set in Maya

NUM_RENDER_JOBS

Maximum number of render jobs needed

SCENE_CAMERA

Name of scene camera of selected viewport or undefined if viewport camera is a default camera (e.g. persp)
or was not exported when using 'export selected'

SCENE_RIGHT_CAMERA

Name of the right camera if SCENE_CAMERA is a stereo camera

CAMERA_MATRIX

Constant camera matrix of currently selected viewport if SCENE_CAMERA is undefined

CAMERA_PROJECTION

Constant projection matrix of currently selected viewport if SCENE_CAMERA is undefined

UP

Up axis of scene as configured in Maya, either Y or Z

BACK_R

Red component camera background color

BACK_G

Green component camera background color

BACK_B

Blue component camera background color

USER_CAMERA

Defined if user controllable camera is selected in the export options

CAMERA_TARGET_X

X coordinate of camera target point

CAMERA_TARGET_Y

Y coordinate of camera target point

CAMERA_TARGET_Z

Z coordinate of camera target point

CAMERA_ROTATE_X

X rotation of camera about target ("turntable" rotation)

CAMERA_ROTATE_Y

Y rotation of camera about target ("turntable" inclination)

CAMERA_DISTANCE

Distance of camera from target point

CAMERA_MIN_DISTANCE

Minimum distance of camera from target point

CAMERA_MAX_DISTANCE

Maximum distance of camera from target point

JSON

Format is enabled in export options

PICK

Picking is enabled in export options

INTERACTIVE

Defined if user controllable camera or picking is enabled in export options

POSTPROCESSING

Contains the code to build the postprocessing pipeline if postprocessing is selected in the export options

STEREO

Defined if side by side or HMD stereo postprocessing mode is selected

MINIFIED

Defined if minified is selected in the export options

ATTRIBUTE_EDITOR

Defined if attribute editor debug option is selected in the export options

Meshes should be triangulated in maya as Inka3D's triangulation
currently fails for concave polygons. Use Mesh → Triangulate in Maya to triangulate
before export. Fixed in version 1.10.0.

User defined normals are exported only for static meshes, i.e. meshes without
bones or deformers etc. This may lead to faceted apearance if the polygon edges
are hard edges but only look smooth because of user defined normals. Mark edges
as soft edges in Maya.

It is required to set the number of preallocated render jobs when calling
inka3d.createRenderer() to be at least the number of rendered objects.