Flipped scale or canvas coordinate system

[flekschas]

First off: Thanks for this fabulous library!

I am trying to replicate a coordinate system similar to Canvas API or SVG, where 0,0 represents the top left corner.

One approach I tried was to use a flipped y-scale. E.g.:

const yScale = cg.scale.linear([0, height], [viewport.height, 0]);

Even though the yScale.toRange() works as expected, I am not seeing any output.

Here's an example: https://jsfiddle.net/flek/ukgL1vjx/ By default you see a heatmap aligned to the bottom. When you change line 64 to const yScale = cg.scale.linear([0, height], [height, 0]); the heatmap is gone but the scale conversion is as expected (printed to the console).

[flekschas]

I found out that:

1. The scales work as expected
2. This is only an issue with cg.rect()
3. The issue is related to the https://github.com/wwwtyro/candygraph/blob/master/src/primitives/rects.ts#L24

Haven't figured out what causes the rectangles to disappear but the same effect can be replicated when setting either the width or height negative (however, when both are negative, the rects are again visible).

[flekschas]

Okay I found the true source of the issue: it's culling.

Commenting out lines 95-98 (https://github.com/wwwtyro/candygraph/blob/master/src/candygraph.ts#L95-L98) fixes the issue.

What is the purpose of enabling culling in the first place? I am not a WebGL expert but given that CandyGraph targets 2D visualizations, my understanding is that all triangles are always facing the viewer. Or am I missing something?

[wwwtyro]

@flekschas Thanks for discovering and root-causing this issue. I offhandedly added culling as a basic performance measure, but didn't take it into account when developing the primitives, as you've run into here. I've fixed it here and will add some technical discussion to your PR. Thanks again!