Cesium - why is scene.pickPositionSupported false

Question

I'm ultimately trying to draw a polygon on top of my house. I can do that.

The problem is that on zoom-out, zoom-in, and rotation (or camera move) the polygon doesn't stick to the top of my house. I received great help from this answer. So, now I'm trying to go through the sample code but there is a lot of Cesium methods and functionality that I need to learn.

The sample code I am trying to follow is located in the gold standard that appears to be baked into the existing camera controller here.

I call testMe with the mousePosition as Cartesian3 and the SceneMode is 3D, so pickGlobe is executed.

Here is my code:

var pickedPosition;
var scratchZoomPickRay = new Cesium.Ray();
var scratchPickCartesian = new Cesium.Cartesian3();
function testMe(mousePosition) {
    if (Cesium.defined(scene.globe)) { 
        if(scene.mode !== Cesium.SceneMode.SCENE2D) {
            pickedPosition = pickGlobe(viewer, mousePosition, scratchPickCartesian);
        } else {
            pickedPosition = camera.getPickRay(mousePosition, scratchZoomPickRay).origin;
        }
    }
}

var pickGlobeScratchRay = new Cesium.Ray();
var scratchDepthIntersection = new Cesium.Cartesian3();
var scratchRayIntersection = new Cesium.Cartesian3();    
function pickGlobe(viewer, mousePosition, result) {

    var globe = scene.globe;
    var camera = scene.camera;

    if (!Cesium.defined(globe)) {
        return undefined;
    }

    var depthIntersection;
    if (scene.pickPositionSupported) {
        depthIntersection = scene.pickPosition(mousePosition, scratchDepthIntersection);
    }

    var ray = camera.getPickRay(mousePosition, pickGlobeScratchRay);
    var rayIntersection = globe.pick(ray, scene, scratchRayIntersection);

    var pickDistance;
    if(Cesium.defined(depthIntersection)) {
        pickDistance = Cesium.Cartesian3.distance(depthIntersection, camera.positionWC);
    } else {
        pickDistance = Number.POSITIVE_INFINITY;
    }

    var rayDistance;
    if(Cesium.defined(rayIntersection)) {
        rayDistance = Cesium.Cartesian3.distance(rayIntersection, camera.positionWC);
    } else {
        rayDistance = Number.POSITIVE_INFINITY;
    }

    var scratchCenterPosition = new Cesium.Cartesian3();
    if (pickDistance < rayDistance) {
        var cart = Cesium.Cartesian3.clone(depthIntersection, result);
        return cart;
    }

    var cart = Cesium.Cartesian3.clone(rayIntersection, result);
    return cart;
}

Here is my problem:

Here is the result:

Here are my questions to get this code working:

1. How do I get the scene.pickPositionSupported set to true? I'm using Chrome on Windows 10. I cannot find in the sample code anything about this and I haven't had much luck with the documentation or Google.

2. Why is rayIntersection not getting set? ray and scene have values and scratchRayIntersection in an empty Cartesian3.

I think if I can get those two statements working, I can probably get the rest of the pickGlobe method working.

WebGLGraphics Report:

I clicked on Get WebGL and the cube is spinning!

Answer 1

Picking positions requires that the underlying WebGL implementation support depth textures, either through the WEBGL_depth_texture or WEBKIT_WEBGL_depth_texture extensions. scene.pickPositionSupported is returning false because this extension is missing. You can verify this by going to http://webglreport.com/ and looking at the list of extensions; I have both of the above listed there. There is nothing you can do in your code itself to make it suddenly return true, it's a reflection of the underlying browser.

That being said, I know for a fact that Chrome supports the depth texture and it works on Windows 10, so this sounds like a likely video card driver issue. I full expect downloading and installing the latest drivers for your system to solve the problem.

As for rayIntersection, from a quick look at your code I only expect it to be defined if the mouse is actually over the globe, which may not always be the case. If you can reduce this to a runnable Sandcastle example, it would be easier for me to debug.

Answer 2

OK. So it turned out that I had a totally messed up Cesium environment. I had to delete it and reinstall it in my project (npm install cesium --save-dev). Then I had to fix a few paths and VOILA! It worked. Thanks to both of you for all your help.