Canvas 3d JS Library

We have spent quite a bit of effort writing code which loads and renders models. However, users may want to draw simpler things such as lines and points. One example of rendering points and lines would include the mocap demo. The demo renders a sphere for each marker, which is a bit of a waste, even if the spheres are low quality. Points can be rendered instead, potentially speeding up rendering times. Lines could also be used for this demo to further ease the understanding how the model is structured. Before adding this functionality, I ask for feedback on the following requirements.

Requirements for points

• Must be simple to use
• Must be able to specify position
• Must be able to specify point color
• Must be able to specify point size

Optional features for points

• Possibly allow attenuation factors for all points

Requirements for lines

• Must be able to specify start and end points
• Must be able to specify line color
• Must be able to specify line width

Optional features for lines

• Possibly allow user to specify different colors for each point in a line to create a gradient of color change in the line
• Possibly allow user to specify stippling

Concerns

It is possible users may want to set things like velocity and angular velocity for points and lines, but I don’t see it as very likely. For example, specifying start and end points for a line and allowing users to rotate it would increase the object’s complexity too much. Does it rotate about the start point, middle or end? Should the user be able to specify it? This can be provided in the future, but for now, we will keep the implementation and interface as simple as possible. Taking the earlier notes into account, how will the user want to draw point and lines? I provided a couple of scenarios how a user would specify these primitives:

Interface 1 – Provide drawing functions

// user creates and manages an array of coordinates. var arr = [0,0,0, 1,0,0, 2,0,0, 3,0,0]; // all points which will be drawn will have size = 5 c3dl.setPointSize(5); // draw all following points red. c3dl.setPointColor(1,0,0,1); // this will draw 4 red points with size 5 along the x axis. c3dl.drawPoints(arr);

Advantages

• It’s straightforward
• Encourages users to group point sizes together, reducing state changes.

Disadvantages

• Setting colors of individual points may be awkward
• To make the library call drawPoints, the user would have to specify a callback function, which is counter intuitive.

interface 2 – provide classes

var point = new c3dl.Point(); // set this points size to 5 point.setSize(5); // set its color to red and fully opaque. point.setColor([1,0,0,1]); // place it at world origin point.setPosition([0,0,0]); // rendering is handled by the library scn.addObjectToScene(point); The Point class would also offer accessor functions to get its size, color and position. Also, if points are implemented using this method, visibility accessor and mutator functions would have to be provided. var line = new c3dl.Line(); line.setStart([0,0,0]); line.setEnd([10,0,0]); line.setColor([0,1,0,1]); line.setWidth(2); scn.addObjectToScene(line);

Advantages

• Mostly just advantages of using objects

Disadvantages

• If a large number of points and lines are specified, this could slow things down, but this needs to be tested

Issues and Next Steps

Technical Issues

When implementing the particle system I couldn’t use the point primitives since they were not supported. Quadrilaterals had to be made so we could have a textured quad which also had to be billboarded. When I first started thinking about how to make points, I was thinking we could use the particle class. Then I remembered that even thought ES does not support point primitives, it still supports point types. I set objects to render using points instead of triangles and saw they are perfect for this purpose as they are automatically billboarded. Attenuation factors can also be set and are calculated by ES.

Picking Points

When a user wants to pick an object, they can do so because the object is composed of triangles. When the user clicks on the canvas, a ray is shot into the scene and any object which has triangles which intersect that ray is considered picked. Points do not have triangles, so one option is placing a bounding sphere on each point. Since the bounding sphere/ray test is already written, it can be used to test if the user clicked on the point. Another option to add point picking is write a separate function such as: rayIntersectsPoint(point, rayOrigin, rayDirection);

Picking Lines

I see drawing lines as a necessity of the library, however picking them must be put off due to other priorities. I imagine picking a line would not be too difficult: A vector collinear with the drawn line and another vector from one of the line’s points pointing towards the camera can define a plane. The ray shot into the scene can then be checked to see if it lies on the plane, if so, the line is picked.

Line Stippling

Line stippling would be a nice feature, unfortunately ES does not support it. Providing the same functionality in the library seems unlikely as there are already too many things to add and iron out. Since this is just a feature which would be nice to have, it won’t be included in the library for the time being.

Next Steps

I see point and line classes more intuitive and offer more advantages than the first method. Therefore, unless I receive objections or other important concerns are brought to my attention, I will begin to write these classes.