Weeks of 6/25/2014 - 7/8/2014

We just realized a significant issue in the system we have implemented so far.

• Current Implementation

 Currently, the 3D system in C-Snap works as follows:

1. Each object on the stage renders its image on its own (invisible) canvas
2. The objects are sorted in ascending order of Z-values
3. The objects are rendered on the stage (visible canvas) by the C-Snap drawing system

From the C-Snap drawing system perspective, 2D and 3D objects are more or less the same -- They are both SpriteMorphs that have an associated canvas each, and thus 2D and 3D objects can coexist without a problem.

However, this implementation has a significant limitation: we cannot render multiple objects that are both in front of and behind of one another. Instead, all we can do is change the rendering order of canvases. This issue is depicted in the following diagram:

• Solution to the Issue

One possible solution is to let three.js do the complicated 3D job. We can give three.js a large canvas (perhaps the one that StageMorph has) and let it render multiple 3D objects on that canvas. After that, we  somehow overlay multiple canvases for  2D objects and the single canvas for 3D object.

However, this solution is going to be a major change to the existing system and there will be a lot of technical challenges including the following:

1. Integration to the existing system
2. Overlapping between 2D and 3D objects
3. Drag and drop of 3D objects

Having said that, this solution is good in terms of the completeness of 3D support, so I would like to go ahead in this direction.