Google Earth / Processing.js - Implementing Back Culling with 3D Projection

Question

I'm currently working on a project that looks to map real world data onto the Google Earth globe, using the Google Earth API. The head honchos that be have asked for more demanding visuals than the plugin can offer (i.e. fancy lines, images and shapes with varying opacity fills that are animated over time), and so we've decided to use the Processing.js language to handle the graphical side of things.

Currently, I have the GE Plugin established in the background. The Processing.js sketch is sitting directly above it within a canvas element, that has the CSS specification: pointer-events: none (i.e. this allows the mouse to interact with the plugin, while anything that is written to the Processing sketch is displayed on top!)

My question concerns 3D Projection. When graphics were displayed in GE, the plugin was able to handle all of the nasty matrix transformations in the background (meaning that if you placed a point at lat:90, lon: 0, in GE, no matter how you moved about the globe, the point would stay positioned above the North Pole). In the Processing overlay, I am trying to simulate this.

With. Much. Difficulty.

The Google Earth ge.getView().project(lat, lon, alt, altMode) function is what I am currently using to project the 3D lat/lon point into 2D coordinates (and then draw an ellipse on screen at the returned point using Processing). You can see this below:

https://sites.google.com/site/robbieskml/kmltester/Screen%20Shot%202014-02-04%20at%201.28.28%20PM.png?attredirects=0

You'll notice that the red and yellow ellipses are actually points behind the globe. This is my issue, and what I'm desperate for some advice/help on. What is the most efficient way to implement back culling with the GE Plugin, so that Processing.js wont draw ellipses when they travel around the 'backside' of the globe. The brain burster for me here is that I still want to keep the ability to rotate around the globe in X, Y, and Z (i.e. no restricting the viewport)!

Thanks Stack Overflow!

Answer 1

A simple way that doesn't require you to do any 3d maths would be to create a little triangle around the point — imagine it represents an actual triangle on the floor that the point lies in the middle of — project all three points using the Google Earth project method, then work out the signed area of the 2d triangle. If the area is positive then draw, if the area is negative then don't.

So, e.g. for latitude and longitude (n, m), project (n-0.01, m), (n, m+0.01) and (n+0.01, m) to get 2d locations (a, q), (b, r) and (c, s).

Then test the sign of (b - a) * (s - q) - (c - a) * (r - q) — that's actually double the signed area of a triangle but doubling doesn't affect the sign. The formula is pretty well known; here's a StackExchange source.

I've typed this extemporaneously so it's possible I've confused my handedness. If so, just flip the test: negative for draw, positive for don't.