home previous next contents

Shout3D™ 2.5 - User Guide

Improving Performance

Monitor Your Frame Rate
Modeling Efficient Geometry
Using Textures
Window Size and Pixel Doubling
Instancing Nodes

Here are a few pointers for improving performance:

Monitor Your Frame Rate

When testing content, always check the frame rate. Press the 'f' key to cause the frame rate (in frames per second) to display in the viewer. You may need to click in the applet space first to obtain the keyboard focus for the applet.

Note how the frame rate changes as you interact with a scene, and see how the amount of visible geometry affects rendering speed. Test on different systems and in different browsers. You may be surprised by differences in performance when moving between Netscape and Microsoft Internet Explorer.

Modeling Efficient Geometry

Realtime 3D requires the most efficient possible geometry because every polygon adds to the rendering burden. You have to consider how your content will run on the average (or even below average) system. Games, in particular, will require the most efficient geometry because interactive responsiveness is critical.

True low-poly modeling is an art that requires training and considerable practice. As a general rule, you'll want to plan your models carefully, using structures that are easily editable to remove or consolidate vertices. Do not rely on polygon reduction tools (such as the Optimize modifier in MAX) to do your work for you. These tools must be used carefully because they will reorganize the mesh in ways that can cause rendering anomolies, especially when specular highlights are involved. The best practice is careful design, followed by hand optimization to eliminate unnecessary geometry, and finally cautious use of automated polygon reduction.

Make sure that you test your geometry in a Shout3D viewer as you are modeling. Don't attempt to finish a model completely before testing because you'll need to see how the geometry is rendering in its intended context.

Strive as much as possible for a regular mesh. Disorganized meshes with highly divergent polygon sizes tends to render unpleasantly.

Using Textures

Texture artisty is especially important in realtime 3D to create convincing objects with the minimum acceptable geometry. Textures, however, carry their own performance burden, and excessive texturing can slow a scene down.Color bitmaps can require significant file sizes, increasing user download times. Test carefully to determine the smallest possible image sizes (in pixel dimensions) that will work acceptably in your scenes. Experiment to find the maximum amount of compression that will preserve a satisfactory image quality. Try both .gif and .jpg formats.

Experienced texture artists know how to gang up multiple images on a single bitmap and perform there texture mapping accordingly. This can save a lot of download time because multiple images are effectively transferred in a single transaction. Here are a couple of examples that are used on the Jo character in the modswing demo. You'll find these are other examples in the models/images/mod_characters directory.

Window Size and Pixel Doubling

Frame rate is a function of number of pixels in the viewing window. The larger the dimensions of your Shout3D applet, the longer it takes to render. Experiment with difference applet dimensions to find the optimal balance between performance and visual impact. Sometimes you'll be willing to compromise frame rate for a larger, more detailed image. On other occasions, you'll want to go smaller to keep the frame rate up.

Consider using adjustable window sizes to allow users flexibility. Users with faster systems will be able to use larger windows. You can allow users to choose between fixed window sizes, or permit them to adjust window sizes fluidly by specifying the dimensions of the applet as a percentage of the browser window. That way, the applet (and its enclosed 3D panel) will grow and shrink as the users adjusts the size of the browser window. (You must set the "panelAutoFillsApplet" parameter to true in the <APPLET> tag.)

Pixel doubling (which can also be offered as a user option) will greatly increase frame rate at a cost in resolution, although it preserves the applet dimensions. The image is rendered at one-quarter the intended size, but each pixel color is spread over a block of four pixels to restore the desired dimensions. A filtering (smooth) option improves the look at some cost in frame rate. Pixel doubling, and the smoothing option, can be specified as applet parameters

These techniques are demonstrated in:

javascript_resize.html
javascript_pixDble_resize.html

Instancing Nodes

Nodes in a .s3d or .wrl file can be given a unique identifier called a DEF name. For example, a Transform node that controls a spherical piece of geometry might be named as follows:

DEF BALL_TRANS Transform

It's good practice, though not required, to write the name in uppercase. The MAX Export Plugin and most VRML exporters will typically assign DEF names to many node automatically.

Once a node has been assigned a DEF name, it can be referenced anywhere else in the scene file with a USE statement. This will reduce the size of the scene file, sometimes enormously, resulting in faster downloads for users. The Shout3D Export Plugin automatically creates this kind of instancing for materials that are used multiple times in a given scene and for instanced geometry. You may, however, find situations in which you wish to create instancing by hand in the .s3d file. For example, assume you wish to duplicate a given Shape node in a scene:

DEF MY_SHAPE Shape {
    ...
}

A subsequent instance of this Shape can be created as follows, and placed in the children field of another Transform node in lieu of a full Shape node description.

USE MY_SHAPE