In my open-source project site, I have included LESS source code for the CSS style sheet that style uses. It looks good both on the screen and when printed. See the files (in .less format) on that site’s project page.
– Add support for specular maps and normal maps, including
in the JSON mesh format and MTL material format.
– To support normal maps, extra methods for bitangents and
tangents were added to the Mesh class.
– Added six new demos and modified several others
– Support 24-bit color versions of TGA files
– Scene3D now does frustum culling of its shapes
– Fixed vertex normal calculation in the recalcNormals()
method of the Mesh class.
– Allow two-element arrays to be passed to the Mesh class’s
– Add getBoundingBox method to the Mesh class.
– Add the setVisible method to the Shape and ShapeGroup
– Allow reading OBJ files with negative reference numbers
– Add path.js (2D graphics paths) to extras
– Added an “axis” parameter to the SurfaceOfRevolution
constructor and fromFunction method
– Add vec3negate, vec3negateInPlace, vec3mul, and plane
and frustum methods to the GLMath class
– Deprecate the practice of setting shape materials directly
to textures (calling the Shape#setMaterial method with a
Texture object rather than a Material object).
– Deprecate certain properties of Transform that shouldn’t
be exposed as a public API and add corresponding methods
for those properties
– Fix getPromiseResults
– Documentation added in many places
– “meshexamples.md” demo added and other demos edited
– Other changes and fixes
Download Now: https://github.com/peteroupc/html3dutil/releases
Fixed camera.js issues (thanks to the user “the-sz” on GitHub)
Added an extras folder with the following new scripts:
A CurveTube class for creating tubes from 3D curves
A parametric evaluator for surfaces of revolution and 3 kinds of curves (evaluators.js)
A frame counter (moved from the demos)
A JSON converter and loader for 3D meshes (meshjson.js)
Made objmtl.js compatible with more MTL files
Math.sin/Math.cos pairs were replaced with optimized versions throughout the code
Add mat4transformVec3 method to GLMath
Add BSplineCurve class
Deprecate vertexBezier, normalBezier, colorBezier, and texCoordBezier methods of CurveEval and SurfaceEval
Optimize SurfaceEval’s evalSurface method when generating triangles
Add primitiveCount and enumPrimitives methods to the Mesh class
Add setMaterial and removeShape methods to the ShapeGroup class
Default shader program now uses modelViewMatrix instead of separate world and view uniforms
FIx JSON issues in GLUtil.loadFileFromUrl method
Many new demos added
Add graphics filters tutorial and expanded several other tutorials
I already have several demos showing the various possibilities with my Public Domain HTML 3D Library. Most of the demos use WebGL, but there’s even one that uses an HTML 2D canvas renderer.
I would like people to suggest or make new demos to add to the list. This is also a very good opportunity for you to test the library and see if everything works. If you make a new demo, you must release it to the Public Domain before I can add it.
Go to the issues page to comment on this, rather than here.
This article describes projection and view transforms commonly used in 3D graphics,
especially when using my HTML 3D Library.
Download the latest version of the library at the HTML 3D Library’s Releases page.
The "Camera" and the Projection and View Transforms
Scene3D class of the HTML 3D Library has a concept of a "projection transform" and a "view transform". If we use the concept of a "camera", the projection is like setting the camera’s focus and lens, and the view transform is like setting its position and orientation.
Scene3D has methods for setting all these attributes of this abstract "camera". Two of them are
setLookAt(), which are shown in the example below.
// Set the perspective view. Camera has a 45-degree field of view // and will see objects from 0.1 to 100 units away. scene.setPerspective(45,scene.getClientAspect(),0.1,100); // Move the camera back 40 units. scene.setLookAt([0,0,40]); // Move the camera back 30 units instead, and turn it so it // points at (0, 2, 0), that is, up 2 units. scene.setLookAt([0,0,30], [0,2,0]);
Overview of Transformations
Here is an overview of transformations used in the graphics system and
the HTML 3D library.
- A world matrix transforms an object’s own coordinates to world space,
the coordinate system shared by every object in the scene. The world matrix
is not discussed in this article.
- A view matrix transforms coordinates in world space to camera space or eye space.
- A projection matrix transforms coordinates in camera space to clip space.
- Additionally, the graphics pipeline (outside the HTML 3D library) converts the
clip space coordinates to normalized device coordinates, then screen space
coordinates when drawing objects on the screen.
A projection matrix transforms coordinates in camera space to clip space.
Two commonly used projections in 3D graphics are the perspective projection and
orthographic projection, described below.
A perspective projection gives the 3D scene a sense of depth. In this projection, closer objects
look bigger than more distant objects with the same size.
The 3D scene is contained in a so-called view volume, and only objects contained in the view volume
will be visible. The dark yellow lines above show what a perspective view volume looks like. The red spheres
would not be visible under this view volume.
The view volume is bounded on all six sides by six clipping planes:
- The near and far clipping planes are placed a certain distance from the camera. For example, if
the near clipping plane is 3 units away and the far clipping plane is 5 units away, the view volume
will hold only objects between 3 and 5 units from the camera. (Strictly speaking, a near clipping
plane is not necessary, but practically speaking it is, in order to make the math work out correctly.)
- The left, right, top, and bottom clipping planes form the other four sides of the volume.
Note further that:
- The angle separating the top and bottom clipping planes is the projection’s field of view. This is an angle
similar to the aperture of a camera. The greater the vertical field of view, the greater
the vertical visibility range.
- In a perspective projection, the near clipping plane segment bounding the view volume is smaller than
the far clipping plane segment. This is because the four other clipping planes are not parallel and extend
from the eye position.
The perspective projection converts 3D coordinates to 4-element vectors in the form (X, Y, Z, W), also
known as clip coordinates. Since the graphics system (outside the HTML 3D library) only deals with
3D points, it divides the X, Y, and Z components by the W component to get the 3D point’s normalized
device coordinates and achieve the perspective effect.
scene3d.setPerspective(fov, aspect, near, far)
This method calculates the appropriate clipping planes given a field of view and an aspect ratio,
and sets the scene’s projection matrix accordingly.
fov– Vertical field of view, in degrees.
aspect– Aspect ratio of the scene. You should usually use
far– Distance from the camera to the near and far clipping planes.
scene3d.setFrustum(left, right, bottom, top, near, far)
This method sets the scene’s projection matrix based on the location of the six clipping planes that
bound the view volume. Their positions are chosen so that the result is a perspective projection.
top– Location of the left, right, bottom, and top clipping planes in terms
of where they meet the near clipping plane.
far– Distance from the camera to the near and far clipping planes.
- perspective.html – Demonstrates a perspective projection.
An orthographic projection is one in which the left and right clipping planes are parallel to each other,
and the top and bottom clipping planes are parallel to each other. This results in the near and far clipping
planes having the same size, unlike in a perspective projection, and
objects with the same size not varying in size with their depth.
scene3d.setOrtho(left, right, bottom, top, near, far)
This method calculates an orthographic projection.
left– Leftmost coordinate of the 3D view.
right– Rightmost coordinate of the 3D view.
bottom– Topmost coordinate of the 3D view.
top– Bottommost coordinate of the 3D view.
far– Distance from the camera to the near and far clipping planes. Either value
can be negative.
scene3d.setOrthoAspect(left, right, bottom, top, near, far, aspect)
This method calculates an orthographic projection such that the resulting view isn’t stretched
or squished in case the view volume’s aspect ratio and the scene’s aspect ratio are different.
far– Same as in
aspect– Aspect ratio of the viewport. May be omitted, in which case the scene’s
aspect ratio (
scene.getClientAspect()) is used.
There are other kinds of possible projections, such as oblique projections
or isometric projections. For these
and other projections, you can specify a custom projection matrix to the 3D scene using the
This method allows you to set the projection matrix to an arbitrary 4×4 matrix.
matrix– The 4×4 matrix to use.
The view matrix transforms world space coordinates, shared by every object in a scene, to camera space
coordinates, in which the camera is located at the center of the coordinate system: (0, 0, 0). A view matrix essentially rotates the camera and moves it to a given position in world space. Specifically:
- The camera is rotated to point at a certain object or location on the scene. This is represented by
lookingAtparameter in the
- The camera is placed somewhere on the scene. This is represented by
eyeparameter in the
setLookAt()method. It also represents the "eye position" in the perspective
- The camera rolls itself, possibly turning it sideways or upside down. This is represented by
upparameter in the
setLookAt()method. Turning the camera upside down, for example, will swap
the placement of the top and bottom clipping planes, thus inverting the view of the scene.
setViewMatrix() methods are described below.
scene3d.setLookAt(eye, lookingAt, up)
This method allows you to set a view matrix based on the camera’s position and view.
eye– Array of three elements (X, Y, Z) giving the position of the camera in world space.
lookingAt– Array of three elements (X, Y, Z) giving the position the camera is looking at in world space.
This is optional. The default is [0, 0, 0].
up– Array of three elements (X, Y, Z) giving the vector from the center of the camera to the top.
This is optional. The default is [0, 1, 0].
This method allows you to set the view matrix to an arbitrary 4×4 matrix.
matrix– The 4×4 matrix to use.
Pokemon data pages from the former Pokedex section were added:
Concise Binary Object Representation in C#
* SourceForge: https://sourceforge.net/p/petero-cbor
Public Domain HTML 3D Library
* CodePlex: https://html3dutil.codeplex.com/
* Code Project: http://www.codeproject.com/Tips/896839/Public-Domain-HTML-ThreeD-Library
* SourceForge: https://sourceforge.net/p/html3dutil
– Support TGA textures
– Camera class rewritten and support added for the mouse wheel
and middle mouse button
– Lines and points supported in OBJ files
– Support loading custom textures from byte arrays
– Add method to create capsule shapes in Meshes class
– Mesh builder (vector3 method) avoids adding degenerate triangles
– Optimizations and bug fixes