Today we added support to switch between 3D and the other projection modes.
However all code that we had where we overlayed HTML content on top of Cesium using world to screenspace conversion produces wrong results in non-3D mode.
Here’s the code I’m using:
var frustum = this._camera.frustum;
var model = Cesium.Matrix4.IDENTITY;
var view = this._camera.viewMatrix;
var projection = frustum.projectionMatrix;
var modelView = new Cesium.Matrix4();
Cesium.Matrix4.multiply(view, model, modelView);
var modelViewProjectionMatrix = new Cesium.Matrix4();
Cesium.Matrix4.multiply(projection, modelView, modelViewProjectionMatrix);
var viewportTransformation = new Cesium.Matrix4();
Cesium.Matrix4.computeViewportTransformation({ x : 0, y:0, width : viewportWidth, height : viewportHeight}, 0.0, 1.0, viewportTransformation);
var tempPos = Cesium.Transforms.pointToWindowCoordinates(modelViewProjectionMatrix, viewportTransformation, `this.position`);
``
This code works fine for 3D, why it produces wrong results in Columbus or 2D mode?
Every overlayed HTML element appears in the wrong place.
Also, is there any easier way to do this, withhout having to manually do all those matrix multiplications?
Why the Scene class does not have some method that projects any Cartesian or Carthographic to screen coords?