Model 3D | WebGL | JasonJHayes

Initializing ...

Scene

Lights of

Textures of

Display Axes

Light Rays

Viewer Light

Objects

New

Create a new model. Clears the modeling environment.

Load

Load a saved model into the scene from a JSON text file, VTK text file or STL binary or text file.

Save

Save the current model to a JSON text file.

Undo

Undo the last action performed.

Redo

Redo the last action undone.

Add

Create a new object in the scene. Available shapes: Plane, Cube, Sphere, Cylinder, Cone, Capsule, Torus. Availble lights: Point Light, Directional Light, Spot Light. The object is initially placed at the origin.

Copy

Copy the selected object and place the new object at the origin. Only works on a selected object.

Del

Delete the selected object from the scene. Only works on a selected object.

Anim

Runs the current custom animation script or stops the current animation running. See the Animation section of the help for details.

Example scene files. Load to learn more about the program and see some of the functionality available.

Rotate the view up (right click to pan the view up).

Rotate the view down (right click to pan the view down).

Rotate the view left (right click to pan the view left).

Rotate the view right (right click to pan the view right).

Reset the view to the default orientation and zoom.

Zoom the view closer (right click to zoom farther). Use the mouse wheel to zoom at the mouse cursor location.

Set the view to look at the mouse click location.

Turn on/off rotation of the view by dragging the mouse (right drag to pan).

Select Click on an object in the canvas to select the object. Click on empty space to deselect the currently selected object. Clicking the canvas will not select or deselect when the dragging view mode is enabled.

Display Options Filled and Depth Test enabled by default.
Turn on/off rendering modes and visualization options used for troubleshooting and debugging.
Options: Points, Normals, Mesh Lines (triangle outlines), Poly Lines (polygon outlines), Filled, Depth Test, Cull.
These options will eventually be configurable on a per object basis.

Selected Object Info Information about the currently selected object is displayed at the top right of the canvas. The information is only displayed if an object is selected.

Draw Elements or Draw Arrays Indicates if the currently selected object is rendered using calls to gl.drawElements or gl.drawArrays.

Object Name - Object Type

Surfaces The number of surfaces making up the selected object.

Polygons The number of polygons making up the selected object. All vertices in a polygon are in the same plane.

Triangles The number of triangles making up the selected object.

Vertices The number of vertices making up the selected object.

Light Dir The direction the light is travelling. Only shows when "Light Source" is enabled and light type is Directional or Spot.

Snap Points (collapsable) These are the transformed centers of the imaginary bounding box faces: left, right, top, bottom, back, front. Used to help align objects in the scene.

Message Window The message window at the bottom of the canvas will report important information as needed.

Lights The current number of lights turned on in the scene and the maximum available. The light limit is based on gl.MAX_VERTEX_UNIFORM_VECTORS imposed by the browser and hardware platform.

Textures The current number of textures used in the scene and the maximum available. The texture limit is gl.MAX_TEXTURE_IMAGE_UNITS - 1 imposed by the browser and hardware platform. One texture is currently needed to act as a clear texture (this is something that should be removed in future versions). Future versions will also allow for multiple textures in a single texture unit to increase the maximum textures possible in a scene.

Display Axes Enabled by default.
Turns on/off the rendering of the scene and selected object colored axes. Red is +ve x-axis, green is +ve y-axis, blue is +ve z-axis; RGB colors correspond to XYZ axes.

Light Rays Enabled by default.
Turns on/off the rendering of the selected object light ray visualizations. Visualizations only show if the selected object has "Light Source" enabled.

Viewer Light Enabled by default.
Turns on/off a directional light directed from the viewer location into the center of the view. Turns off automatically when a light source is added to the scene or enabled on an object. Light color is controlled by the "Global Light" values and has no attenuation.

Global Light (collapsable) Default values: emissive (1, 1, 1, 1), ambient (0.1, 0.1, 0.1, 1), diffuse (1, 1, 1, 1), specular (1, 1, 1, 1).
Sets the global ambient light and the color of the viewer light when enabled. Global ambient light and viewer ambient light are the same value but are applied separately. The emissive value is currently not used.

Objects The list of objects currently in the scene ordered by render order (top value renders first).
Move selected object forward in render order.
Move selected object backward in render order.
List values are object name - shape type. Objects with "Light Source" enabled are shown in yellow with a star appended to the entry. Click an entry to select an object.

Name The object name for easier identification in the scene object list.

Ambient Texture Disabled by default.
Turns on/off the ambient texture functionality.

Diffuse Texture Disabled by default.
Turns on/off the diffuse texture functionality.

Specular Texture Disabled by default.
Turns on/off the specular texture functionality.

Inside Material Disabled by default.
Turns on/off the inside material functionality. Allows for ambient, diffuse and specular inside textures.

Tex Transform Disabled by default.
Turns on/off the texture transform functionality.

Light Source Disabled by default.
Turns on/off the object light source functionality.

Shape (collapsable) Collapsed by default. Click on or the "Shape" title to expand/collapse the properties.
The shape properties are only visible on a selected object and when expanded.

Shape Type Changes the current shape. A much wider variety of shapes is available than from the menu bar.
Categories: 2D Planes, Polyhedron, Cylinders, Cones, Domes, Capsules, Torus, Teapot, Ship, Custom.
Click on for non-custom shapes to save the selected shape to a binary STL file.
Click on for custom shapes to load a VTK or STL file into the currently selected object.

Options (collapsable) Collapsed by default. Click on or the "Options" title to expand/collapse the options.
Options modify the geometry of the currently selected object. Only options appropriate to the shape show up.

Potential options include:

Sub Divisions: levels of tessellation. Increased sub divisions can help improve curvature and texturing.
Edges: sides in base generating polygon. Increased edges can help improve curvature.
Arc Divisions: edges from base to apex. Increased arc divisions can help improve curvature.
Radius: can be set at multiple places on the object.
Height: can be set at multiple places on the object.
Surfaces:
- Hollow: turn on/off rendering of end caps.
- 2-Sided: turn on/off second side of 2-sided objects.

Triangle Mode Polygon Edge: draws triangles in the base polygon from a common edge point.
Polygon Center: draws triangles in the base polygon from a common centroid point; uses more vertices than edge.

Normal Mode Vertex Elements: a normal is stored for each vertex point in the object.
Vertex Arrays: a normal is stored for each index point in the object.
Polygon: a normal is stored for each polygon face.

Texture Coords Mechanism for generating texture coordinates.
Algorithms include: Custom, Triangle, Polygon, Planar XY, Planar YX, Planar XZ, Planar ZX, Planar YZ, Planar ZY, Cylindrical X, Cylindrical Y, Cylindrical Z, Spherical X, Spherical Y, Spherical Z.
Custom will use the texture coordinates provided in the custom geometry.
The following links provide more information: Planar, Cylindrical, Spherical.

Obj Transform (collapsable) Collapsed by default. Click on or the "Obj Transform" title to expand/collapse the options.
The object transformation options are only visible on a selected object and when expanded.

Transformations are applied in the following order:

Twist X: default 0 degrees
Twist Y: default 0 degrees
Twist Z: default 0 degrees
Rotate X: default 0 degrees
Rotate Y: default 0 degrees
Rotate Z: default 0 degrees
Shear X (Y, Z): default 90 degrees
Shear Y (X, Z): default 90 degrees
Shear Z (X, Y): default 90 degrees
Scale (X, Y, Z): default (1, 1, 1)
Rotate2 X: default 0 degrees
Rotate2 Y: default 0 degrees
Rotate2 Z: default 0 degrees
Translate (X, Y, Z): default (0, 0, 0)

Twist is a rotation transformation where the angle of rotation is scaled based on the vertices distance from the object space origin.

Click on or the transformation title to reset the transformations to the default value.

Material (collapsable) Collapsed by default. Click on or the "Material" title to expand/collapse the options.
The material options are only visible on a selected object and when expanded.
If the object is a "Light Source", then the material properties are also the light intensities.
The "Inside Material" must be turned on before the options are available.

Emissive The color of the object when no lighting is applied. This is flat coloring and is good to use on light sources that you want to visually appear brighter without affecting the lighting in the scene.

Ambient The color of the object in ambient lighting. This is flat coloring but is different from emissive color because it is affected by light sources and global illumination.

Diffuse The color of the object in diffuse lighting. The color changes with the angle between the surface normal and the vector to the light source. This is the primary source of the gradient shading on the object.

Specular The color of the object in specular lighting. The color changes with the angle between the viewer and the light reflection vector. This creates the bright specular highlights on the object.

Specular Power This is the fall-off of the specular lighting and is sometimes called the shininess. Higher shininess will result in smaller specular highlights on the object.

Ambient, Diffuse, Specular Tex (collapsable) Collapsed by default. Click on to expand/collapse the texture image.
The texture image is only visible on a selected object and when expanded.
Each texture type is available for both the inside and outside material, but must be turned on before it is visible.
Click on or the texture title to upload an image file.
Click on to clear the current texture.

Texture Image The texture image currently applied to the selected object. Click to select a new texture image or procedural texture or drag an image from the local file system or another website.
Note: cross-origin settings on other websites might not allow images to be dragged directly. In this case, save them to the local file system first.

Procedural Texture Click on or the procedural texture title to apply the texture.
W x H: the width and height of the procedural texture in pixels.
R x C: the rows and columns of the procedural checkboard.
Changes to the procedural texture options will also apply the texture to the selected object.

Options (collapsable) Collapsed by default. Click on or the "Options" title to expand/collapse the options.
Options modify the currently applied texture image.
Natrual Size: the size of the unmodified texture image (read only).
Size: the applied size of the texture image. Click on or the "Size" title to apply the new size.
Mipmaps: turn on/off mipmap generation. Will resize the image to a power of 2 when turned on.
Flip Y: inverts the y-axis of the texture image. Images are generally stored with the y-axis pointing down and usually used in coordinates where the y-axis points up.
Pre-Mul A: pre-multiply the texture image alpha values.
Wrap S: Clamp to Edge, Repeat or Mirror.
Wrap T: Clamp to Edge, Repeat or Mirror.
Min Filter: Nearest, Linear, Nearest MipMap Nearest, Nearest MipMap Linear, Linear MipMap Nearest or Linear MipMap Linear.
Mag Filter: Nearest or Linear.
Some options are only available for textures that are power of 2 sizes (2, ..., 256, 512, 1024, ...). Width and height do not have to be the same power of 2.
This page provides more information on textures and their options.

Tex Transform (collapsable) Collapsed by default. Click on or the "Tex Transform" title to expand/collapse the options.
The texture transformation options are only visible on a selected object and when expanded.

Transformations are applied in the following order:

Rotate: default 0 degrees
Shear XY: default 90 degrees
Shear YX: default 90 degrees
Scale (X, Y): default (1, 1)
Translate (X, Y): default (0, 0)

Click on or the transformation title to reset the transformations to the default value.

Light (collapsable) Collapsed by default. Click on or the "Light" title to expand/collapse the options.
The light options are only visible on a selected object and when expanded.
The "Light Source" must be turned on before the options are available.
Light intensities are set by changing the objects material properties. When "Light Source" is turned on or when a new light is added to the scene, the emissive color is set to white.

Light Type Change the type of light the object represents: Point, Directional or Spot.
This will not change the visual representation (shape) used when placing a light from the menu bar. A new light object must be created to get a different visual representation.

Point Light Radiates in all directions and light is affected by position. Use translation to adjust the position.

Directional Light Radiates in a single direction and light is not affected by position. Default direction is (0, 0, 1). Use rotation to change the direction.

Spot Light Radiates from the light position in a cone around the direction (focal line) and light falls off based on the angle from the focal line. Default direction is (0, 0, 1). Use translation to adjust position and rotation to adjust direction.

Attenuation Polynomial distance attenuation constants; zero power, first power and second power. These are used to make light intensity fall-off as the distance from the light increases.

Spot Foc Pow The focal power is for spot lighting and determines how quickly light falls off from the focal line. A higher focal power will create a narrower beam.

Spot Max Ang The maximum angle is for spot lighting and determines how far from the focal line that the light radiates. A lower maximum angle will create a narrower beam.

This content on this page is currently out of date.

It is also possible to add your own meshes and make your own modications to the objects within the scene.

Open up the developer tools in your brower, usually you press F12 to do this. You can then type in your own JavaScript code to modify objects.

It will be easier to modify an existing object than to try and create a new one. So just add an object from the menu and modify that object.

Each object is stored in the custom objects list and you can access an object using the following:

// return the last scene object added
var theObject = objects.i(objects.length() - 1);

The "i" method indexes the objects internal array.

The vertices list on the object is what you want to modify to load your own mesh. You should also modify the normals list to get proper lighting, and the outline list to get proper mesh outlines. All lists are stored as Float32Arrays, but you can use Vec3 objects and flatten the arrays, this method will be shown. You should also define all vertices in a triangle in a counter-clockwise direction to ensure proper rendering. It is also a good idea to keep your obejct within the (-1, -1, -1) to (1, 1, 1) bounds and use scaling to make it larger to ensure the bound box is correct.

// create a triangle using a Vec3 list
var mesh = [ // ccw definition
    new Vec3(0, 0, 0), 
    new Vec3(1, 0, 0), 
    new Vec3(0, 1, 0)
];
theObject.vertices = flattenToArray(mesh);
theObject.outline = flattenToOutlineArray(mesh);

// normals facing the viewer
var norms = [
    new Vec3(0, 0, -1), 
    new Vec3(0, 0, -1), 
    new Vec3(0, 0, -1)
];
theObject.normals = flattenToArray(norms);

Once you have modified the lists you can render the new object.

// redraw the scene
render();

Now add some texture. First, generate texture coordintes for the outside and inside surfaces, this is not required but will give you the best looking results.

// add a checkerboard texture
// create the texture coordintes from the existing mesh vertices
// set the options first so the object remembers the tex coord gen type
// TEX_COORDS_PLANAR_XY provides good texturing for a plane facing the user
theObject.options.texCoordsOut = TEX_COORDS_PLANAR_XY;
theObject.options.texCoordsIn = TEX_COORDS_PLANAR_XY;
theObject.texCoordsOut = flattenToArray(genTexCoords(mesh, theObject.options.texCoordsOut));
theObject.texCoordsIn = flattenToArray(genTexCoords(mesh, theObject.options.texCoordsIn));
theObject.texIdxOutside = TEX_CHECKER;
theObject.texIdxInside = TEX_EARTH; // backside
render();

One last thing you will need to worry about if you plan to save the scene. Normally objects don't save vertices and regenerate on load to reduce file size, you need to override this.

// allow the object to be saved
theObject.type = "Custom";
render(); // causes objects list to refresh

Now for something a little more complicated. Let's load the famous Utah teapot. Here is the code to setup the scene.

// create a new scene
clearCanvas();

// turn off scene boundaries and axes
$("#clipBoxCheck").prop("checked", false);
$("#showAxesCheck").prop("checked", false);

// create a dummy object
var theTeapot = createObject(SceneObject.Cylinder, {
    twoSided: true,
    flatBottom: true,
    outline: false,
    filled: true,
    cull: false,
    norm: NORM_OBJ,
    edges: 0,
    vertDivs: 0,
    subDivs: 0,
    lightOn: false,
    texCoordsOut: TEX_COORDS_IDEAL,
    texCoordsIn: TEX_COORDS_IDEAL
});

Next load the teapot script, copy the vertex information and render.

// load the teapot model
$.getScript("teapot.js").done(function () {
    // setup the object to use the teapot model
    // teapot model is already stored as Float32Array
    theTeapot.vertices = teapot.vertices;
    theTeapot.normals = teapot.normals;
    theTeapot.texCoordsOut = teapot.texCoords;
    theTeapot.texCoordsIn = teapot.texCoords;
    theTeapot.texIdxOutside = TEX_CHECKER;
    theTeapot.texIdxInside = TEX_BRICK;
    theTeapot.type = "Custom"; // allow save

    // redraw the scene and zoom out to fit teapot
    ViewNav.zoom(2);
    render();
});

You can see that the textures are applied opposite of expected. This particular model was drawn assuming a right-handed coordinate system. This modeling program assumes a left-handed coordinate system. This can be corrected by mirroring the z-axis.

// correct right-handed coordinate assumption
theTeapot.tform.s.z *= -1;
render();

Here is the example script. Remember: you need at least 1 object in the scene. This will run the example file.

$.getScript("External.js")

There may be a way to load your own JavaScript files into the scene, but I still need to figure out how to do this. For now, it is easiest just to copy all text from your external file and paste it into the console.

This content on this page is currently out of date.

It may help to read the section on customization before going through this section.

To create an animation script you must create a JavaScript function called "animationLoop". When you press the Anim button, this function will be called.

Here is an example animation. The scene requires 1 object.

/* the repeated loop to run an animation */
function animationLoop() {
    // return the last scene object added
    var theObject = objects.i(objects.length() - 1);
    // you can also use the object name
    // from the object properties window
    // to reference a specific object
    //theObject = objects.find("object1");

    // move the object
    theObject.tform.t.x += 0.01;

    if (theObject.tform.t.x < 5) {
        render();
        // allow the animation to be stopped
        if (state.animRunning) {
            state.animRunning = window.requestAnimationFrame(animationLoop);
        }
    }
}

This will define the animation function, to start the animation press the Anim button.

In order for the click on the canvas to stop the animation, it is very important to include the following in every animationLoop function.

// allow the animation to be stopped
if (state.animRunning) {
    state.animRunning = window.requestAnimationFrame(animationLoop);
}

The object properties that may be of interest in animation are below. All Color4's have (r,g,b,a) properties and should be form 0 to 1. All Vec3's have (x,y,z) properties.

vertices - Color4[]
outline - Color4[]
normals - Color4[]
texCoordsOut - Color4[]
texCoodsIn - Color4[]
lineColor - Color4
emissiveOutside - Color4
ambientOutside - Color4
diffuseOutside - Color4
specularOutside - Color4
specPowOutside - int (10 is a good number)
texIdxOutside - int (TEX_CHECKER, TEX_SWIRL, TEX_SUNSET, TEX_EARTH, TEX_MOON, TEX_BARK, TEX_STARS, TEX_BRICK TEX_COLOR, TEX_MESH, TEX_STRIPE, TEX_WATER, TEX_WEAVE, TEX_GRASS, TEX_TREE)
texScaleOutside - Vec3
texRotationOutside - float (in radians)
texTranslationOutside - Vec3
emissiveInside - Color4
ambientInside - Color4
diffuseInside - Color4
specularInside - Color4
specPowInside - int
texIdxInside - int
texScaleInside - Vec3
texRotationInside - float (in radians)
texTranslationInside - Vec3
cubeMapOn - true or false
cubeNegX - int (TEX_CUBE_LEFT, TEX_CUBE_RIGHT, TEX_CUBE_BOTTOM, TEX_CUBE_TOP, TEX_CUBE_FRONT, TEX_CUBE_BACK, TEX_CUBE_STARS)
cubePosX - int
cubeNegY - int
cubePosY - int
cubeNegZ - int
cubePosZ - int
insideIlluminate - true or false
lightType - int (POINT_LIGHT, DIR_LIGHT, SPOT_LIGHT)
lightFocPow - float (0 to 5 works good)
lightAttnC0 - float (best to keep at 1)
lightAttnC1 - float (-0.5 to 0.5 works good)
lightAttnC2 - float (-0.1 to 0.1 works good)
twist - Vec3 (in radians)
shearX - Vec3 (in radians, x does not matter, y,z should not be 0 or increments of pi to avoid divide by 0)
shearY - Vec3 (in radians, y does not matter, x,z should not be ...)
shearZ - Vec3 (in radians, z does not matter, x,y should not be ...)
scale - Vec3 (should keep within scene size)
rotation - Vec3 (in radians)
translation - Vec3 (should keep within scene size)
options.mesh - true or false
options.filled - true or false
options.cull - true or false
options.lightOn - true or false
options.texCoordsOut - int (TEX_COORDS_PLANAR_XY, TEX_COORDS_PLANAR_XZ, TEX_COORDS_PLANAR_YZ, TEX_COORDS_CYLINDRICAL_X, TEX_COORDS_CYLINDRICAL_Y, TEX_COORDS_CYLINDRICAL_Z, TEX_COORDS_SPHERICAL_X, TEX_COORDS_SPHERICAL_Y, TEX_COORDS_SPHERICAL_Z, TEX_COORDS_IDEAL)
options.texCoordsIn - int

WebGL - Model 3D - Help

WebGL - Model 3D - Example 1

WebGL - Model 3D - Example 2

WebGL - Model 3D - Example 4