Canvas 3d JS Library

The demo above may take a while to load.

While working on putting points into the library, I became concerned about a possible performance hit if implemented in the way I spec’ed it out some time ago. After a bit of brainstorming, I came up with another way to represent them. Instead of creating individual points, users create a list of points. I re-spec’ed out the interface and wrote the class and new vertex and fragment shaders.

Not suprisingly, there is a performance gain when rendering mocap data using points versus spheres. Albeit, I did find an interesting slowdown when rendering points with a large point size. If the point size of a list is set to several hundred pixels in diameter, the rendering suffers greatly. This may be due to having to calculate which fragments fall into the point’s radius, but that’s just a guess. We’ll have leave it up to users to create implementation specific point size caps.

PointList

I may change some function names slightly, but here is the current interface for the PointList class:

• init(numPoints) //Initialize the points
• setPointCoord(index, coordinate) //Set the position of point at index ‘index’.
• setPointColor(index, color) //Set the color of a particular point.
• setVisible(visible) //Set the visibility of the PointList.
• setSize(size) // Set the size of all the points in this PointList in pixels.
• getSize() //Get the size the points will be renderd in pixels.
• getVisible() //Are the points drawn on render?
• getNumPoints() //Get the number of points in this PointList.
• getPointCoord(index) //Get the coordinates of point at index ‘index’.
• getPointColor(index) //Get the color of point at index ‘index’.

TODO

I figured changing the alpha/intensity value of a point would change the entire color intensity. Instead it seems to produce a border around the point which creates a sort of scintillation when using point smoothing. I’ll need to figure out exactly why this is happening.

One useful function would be point picking. This is something I will add once the LinesList is complete.