HTML5 3D-Graphics Library

2D Canvas Context

There are actually two things we refer to as 2D/3D in the context of taccgl™. (1) First the final animation may be 2D or 3D, whereby 2D means that all objects shown in the animation are in the z=0 plane, all objects are flat and directly located on the screen. In contrast there is 3D where the objects could conceptually be anywhere and are mapped on the screen using a 3D perspective projection. In addition the objects shown may not be flat but have a depth. As discussed in Coordinate System taccgl™ does not really make a difference here but always does everything in 3D. The user may specify z-coordinate 0 and depth 0 and so just operate in 2D.

(2) The second important difference is 2d and 3d canvas context. Canvas is the name of a new HTML 5 element used for drawing. It provides multiple drawing contexts a 2d drawing context and in some browsers a 3d context. [The 2d context is part of the HTML 5 standard and implemented in most of the current browser versions while 3d context is not yet formally part of HTML 5; the standard just says there may be one in the future. As far as we understand WebGL™ is a standard that may or may not become the HTML canvas 3d context, however, for now it is implemented in newer versions of Firefox, Chrome, Safari, and also internet explorer since version 11. ] For various reasons the 3d context may not be available, e.g. because it is not activated in the browser, because the computers graphic card and drivers do not support it.

taccgl™ will try to use the 3d context of HTML 5 canvas and in many cases if it does not succeed try to fall back into using 2d context. Although 2d context does not specifically support 3D drawing it can still be used with restrictions (see below Limitations of 2D Context) for 3D some animations as well.

Programming Portable Animations

To some extend the idea is that an animation works with 3d context and 2d context as well, just its visual appearance and performance might be different and elements that work in 3d only just do not appear in 2d mode. If a certain feature is not available in 2d context, then its associated methods do not produce an error but just do not show anything. Information retrieved from taccgl™ in that situation might be not present or wrong and cannot be relyed on.

Using the methods ddmode and dddmode in ddmode you can detect the context used and program your animation differently for both contexts. In case of a WebGL™ error or if 3d mode just is too slow, taccgl™ might switch into 2d mode while an animation is running.

It is always required to test your application in both 2d and 3d context mode, because there may be errors that manifest only in one of these modes.

Limitations of 2D Context:

We recommend to go through the documentation and the examples with 2d context to see the differences.

  • There is no Lighting in 2D canvas. All lighting options are ignored.
  • Some kind of parallel projection instead of perspective projection is used. For deep objects or objects moving far away from the z=0 plane this does not look correct, since objects do not get smaller when moved away. However it is not a problem for objects near the z=0 plane that are not very deep.
  • The hidden line and hidden surface algorithms in the 2d context are not very advanced. They can correctly display a cube but they can not handle surfaces that cut through each other. Sometimes the result can be improved by animating objects that are further away first.
  • There are no shaders and consequently no custom shaders available. The class taccglShaderConfig Class does not work, i.e. method calls do not produce an error but defined custom shaders and options are ignored.
  • taccglFlexiBorder Class is not supported i.e. some method calls do not produce an error but also have no effect and so flexible elements do not look flexible but just as ordinary transitions.
  • taccgl3DObject Class is not supported i.e. method calls work to some extend, but nothing will be shown on the screen. taccglOBJFile Class and taccglMTLFile Class will not download anything. It is a good idea to check ddmode / dddmode before using these classes, although in many cases such a test is not necessary because the called methods still work to some extend just that the taccgl3DObject Class 3DObjects, do not appear. However, you can not rely on any information retrieved from these classes since the model is not loaded.
  • The hardware acceleration of 3D canvas is extremely fast when used with a good graphics card. On the other hand the 2d canvas is pretty fast as well and sufficient for many animations.

3d context provides many many more features that are currently not explicitly supported by taccgl™ but may be in future versions.

WebGL™ is a trademark of the Khronos Group Inc.