Loading components - please wait...

This page requires a reasonably modern HTML5 browser with
both Javascript and WebGL enabled.

TESSELLATION
COMPUTATION
LIBTESS:
3D 		0 triangles in
0 ms.
EARCUT:
2D 		0 triangles in
0 ms.

3D VIEW SETTINGS

Zoom Factor

SHADOW SETTINGS

DATE AND TIME

Day of the year:

Sunrise: , Sunset:

SITE LOCATION

Time Zone

INFORMATION

Overview

I have been writing a gbXML parser in Node.JS recently and experimenting with the tessellation of complex polygons into renderable triangles. I started out using libtess.js as it has a dead-simple API (same as OpenGL GLU) and supports 3D polygons straight out of the box. It has easily handled everything I have thrown at it thus far and has proved to be a pretty good solution.

However, I have also been looking at Javascript Clipper for some related work on shadow projection and had seen some references to the earcut library which was supposed to be a much faster tessellator. As time is money, especially on a server, I thought that I would see if I could get it working and maybe compare speeds against libtess.

From my reading on the matter, a general consensus seems to be that libtess.js is the benchmark in terms of overall stability and robustness, but that the cost for that is a bit of speed. On the other hand, earcut.js is not quite as robust, though still pretty good at all but a few outlying cases, but is blazingly fast.

To test this, I have built a quick experiment with a few test cases which reports the computation times for each method and allows you to visually compare the results. There are more details on the actual implementation and some of my stumbles along the way in the original blog post.

© Dr. Andrew J. Marsh, 2014.

View Manipulation

You can interactively adjust the 3D view of the model using a mouse, pen or stylus, or by touch on a tablet or phone. You can also use the items in the 3D View Settings popup.

Rotation:
Drag with the left/right button or a single finger,
or use the arrow keys.
Panning:
Drag with the middle button or two/three fingers,
or use the A and D keys.
Zooming:
Use the scroll wheel or pinch with two fingers,
or use the W and S keys.

NOTE: You can use the Shift and Ctrl/Meta keys to adjust the increment of each scroll event or key press.

Keyboard Modifiers

The Shift and Ctrl/Meta keys are used pretty extensively to modify interactive data entry. This applies to all increment buttons, scroll wheel motion, slider controls and input elements.

Shift Key:
Increases input to larger values, usually by ten times or significantly larger increments such as 1 month for dates and 1 hour for times.
Ctrl or Meta Key:
Decreases input to smaller values, usually by one tenth or the smallest reasonable increment such as 1 day for dates or 1 minute for times.

NOTE: You can use the scroll wheel to edit a data value when hovering over any slider, numeric input or even table rows that indicate their editibility.

Credits

This page uses the following frameworks/components:

Bootstrap  v3.3.2
Copyright © 2011-2015 Twitter, Inc. - github.com/twbs,
http://getbootstrap.com/   (LICENSE)

Bootstrap-popover-x  v1.4.0
Copyright © 2014, Kartik Visweswaran, Krajee.com,
https://github.com/kartik-v/bootstrap-popover-x   (LICENSE)

Earcut
Copyright © 2015, Mapbox - https://github.com/mapbox
https://github.com/mapbox/earcut   (LICENSE)

Google Maps API  v3
Copyright © 2015 Google Inc. - http://google.com,
https://developers.google.com/maps/   (Terms of Service)

jQuery  v1.11.2
Copyright © jQuery Foundation and other contributors,
https://jquery.com/   (LICENSE)

KnockoutJS  v3.2.0
Copyright © Steven Sanderson and the Knockout.js team,
http://knockoutjs.com/   (LICENSE)

Knockstrap  v1.2.0
Copyright © 2013 Artem Stepanyuk - github.com/faulknercs,
http://faulknercs.github.io/Knockstrap/   (LICENSE)

libtess.js
Copyright © 2012, Google Inc. - https://github.com/brendankenny
https://github.com/brendankenny/libtess.js   (LICENSE)

lightgl.js
Copyright © 2011 by Evan Wallace - https://github.com/evanw
https://github.com/evanw/lightgl.js/   (LICENSE)

SnackbarJS
Copyright © 2014 Federico Zivolo - github.com/FezVrasta
http://fezvrasta.github.io/snackbarjs/   (LICENSE)