Firefox ESR 35.4.0 Cesium 1.16 shapes disappearing from map when zoom in, video drivers dated 8/15

I have tried a couple Firefox ESR 35.* browsers and they exhibit the same problem when the user zooms in shapes are removed from the map. My video drivers as stated above are from 8/15 so I do not think it is a driver issue.

I am not seeing this issue on the same machine using the Chrome browser!

If the user zooms back out they will reappear. Shapes are created by using the PolygonGeometry.fromPosition function.

Link to Video http://www.youtube.com/watch?v=KMRKQPKM-uI

Thanks in advance

J. Stoy

One interesting tidbit of information if the globe.depthTestAgainstTerrain is false the problem does not seem to occur.

Hi,

Do you have a minimal code example to reproduce this? If depthTestAgainstTerrain is true and the polygon is on the surface, this could also happen in Chrome or any browser.

Have you tried the GroundPrimitive, which was new in Cesium 1.13?

Patrick

The following code will demonstrate the problem in sandcastle.

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

scene.globe.depthTestAgainstTerrain = true;

var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : '//assets.agi.com/stk-terrain/world',
    requestWaterMask : true,
    requestVertexNormals : true
});

viewer.terrainProvider = cesiumTerrainProviderMeshes;

// setup alternative terrain providers
var ellipsoidProvider = new Cesium.EllipsoidTerrainProvider();

var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({
    url : '//www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
    credit : 'Terrain data courtesy VT MÄK'
});

// Example 4: Draw an orange extruded polygon with
// per position heights.
var positions = Cesium.Cartesian3.fromDegreesArrayHeights([
    -108.0, 25.0, 10000,
    -100.0, 25.0, 10000,
    -100.0, 30.0, 10000,
    -108.0, 30.0, 20000
]);

// Set the perPositionHeight option to true for the polygon
// to use the heights each position. In this case, we are
// also seting extrudedHeight to zero for the polygon
// to be extruded down to the globe surface.

var orangePolygonInstance = new Cesium.GeometryInstance({
    geometry : Cesium.PolygonGeometry.fromPositions({
        positions : positions,
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        perPositionHeight : true
    }),

    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});

var geometryCollection = ;
geometryCollection.push(orangePolygonInstance);

var appearance = new Cesium.PerInstanceColorAppearance({
     closed : true,
     translucent : true
});

var feature = new Cesium.Primitive({
    geometryInstances : geometryCollection,
    allowPicking: true,
    interleave : true,
   appearance : appearance
});

scene.primitives.add(feature);

Sandcastle.addToolbarMenu([{
    text : 'CesiumTerrainProvider - STK World Terrain',
    onselect : function() {
        viewer.terrainProvider = cesiumTerrainProviderMeshes;
        viewer.scene.globe.enableLighting = true;
    }
}, {
    text : 'CesiumTerrainProvider - STK World Terrain - no effects',
    onselect : function() {
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world'
        });
    }
}, {

    text : 'CesiumTerrainProvider - STK World Terrain w/ Lighting',
    onselect : function() {
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world',
            requestVertexNormals : true
        });
        viewer.scene.globe.enableLighting = true;
    }
}, {
    text : 'CesiumTerrainProvider - STK World Terrain w/ Water',
  
    onselect : function() {
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world',
            requestWaterMask : true
        });
    }
}, {
    text : 'EllipsoidTerrainProvider',
    onselect : function() {

        viewer.terrainProvider = ellipsoidProvider;
    }
}, {

    text : 'VRTheWorldTerrainProvider',
    onselect : function() {

        viewer.terrainProvider = vrTheWorldProvider;

    }

}], 'terrainMenu');

Sandcastle.addDefaultToolbarMenu([{
    text : 'Mount Everest',

    onselect : function() {
        var target = new Cesium.Cartesian3(300770.50872389384, 5634912.131394585, 2978152.2865545116);
        var offset = new Cesium.Cartesian3(6344.974098678562, -793.3419798081741, 2499.9508860763162);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}, {

    text : 'Half Dome',
    onselect : function() {

        var target = new Cesium.Cartesian3(-2489625.0836225147, -4393941.44443024, 3882535.9454173897);
        var offset = new Cesium.Cartesian3(-6857.40902037546, 412.3284835694358, 2147.5545426812023);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}, {

    text : 'San Francisco Bay',
    onselect : function() {

        var target = new Cesium.Cartesian3(-2708814.85583248, -4254159.450845907, 3891403.9457429945);
        var offset = new Cesium.Cartesian3(70642.66030209465, -31661.517948317807, 35505.179997143336);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}], 'zoomButtons');

var terrainSamplePositions;

function sampleTerrainSuccess() {

    var ellipsoid = Cesium.Ellipsoid.WGS84;

    //By default, Cesium does not obsure geometry
    //behind terrain. Setting this flag enables that.
    //viewer.scene.globe.depthTestAgainstTerrain = true;

     viewer.entities.suspendEvents();
    viewer.entities.removeAll();

    for (var i = 0; i < terrainSamplePositions.length; ++i) {
        var position = terrainSamplePositions[i];

        viewer.entities.add({
            name : position.height.toFixed(1),
            position : ellipsoid.cartographicToCartesian(position),
            billboard : {
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                scale : 0.7,
                image : '../images/facility.gif'
            },

            label : {
                text : position.height.toFixed(1),
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                scale : 0.3,
                pixelOffset : new Cesium.Cartesian2(0, -14),
                fillColor : Cesium.Color.RED,
                outlineColor : Cesium.Color.WHITE
            }
        });
    }

    viewer.entities.resumeEvents();
}

Sandcastle.addToolbarButton('Toggle Lighting', function() {
    viewer.scene.globe.enableLighting = !viewer.scene.globe.enableLighting;
}, 'toggleLighting');

Sandcastle.addToolbarButton('Sample Everest Terrain', function() {

    var gridWidth = 41;
    var gridHeight = 41;
    var everestLatitude = Cesium.Math.toRadians(27.988257);
    var everestLongitude = Cesium.Math.toRadians(86.925145);
    var rectangleHalfSize = 0.005;
    var e = new Cesium.Rectangle(everestLongitude - rectangleHalfSize, everestLatitude - rectangleHalfSize, everestLongitude + rectangleHalfSize, everestLatitude + rectangleHalfSize);

    terrainSamplePositions = ;

    for (var y = 0; y < gridHeight; ++y) {
        for (var x = 0; x < gridWidth; ++x) {
    
            var longitude = Cesium.Math.lerp(e.west, e.east, x / (gridWidth - 1));
            var latitude = Cesium.Math.lerp(e.south, e.north, y / (gridHeight - 1));
            var position = new Cesium.Cartographic(longitude, latitude);
            terrainSamplePositions.push(position);
        }
    }

    Cesium.when(Cesium.sampleTerrain(viewer.terrainProvider, 9, terrainSamplePositions), sampleTerrainSuccess);

}, 'sampleButtons');

var viewModel = { fogEnabled : true };
Cesium.knockout.track(viewModel);

var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel, 'fogEnabled').subscribe(function(newValue) {

    viewer.scene.fog.enabled = newValue;
});

viewModel.enabled = viewer.scene.fog.enabled;

//rotate the globe over the south east. When you see the orange polygon start //zooming in. At some point the polygon will disappear. Hope this Helps Jerry

It’s also worth mentioning that 35 is an outdated ESR release that no longer receives security updates. Does 38 work?

Kevin,

The original message should have stated ESR 38.4. I have also replicated this on ESR 38.1 as well.

Sorry about the confusion

Jerry

Have you tried Cesium.GroundPrimitive instead of Cesium.Primitive?

Patrick

Patrick,

I am not seeing the issue with the ground primitive. The ground primitive is not going to meet my needs, was this information needed to isolate where the problem may exist?

Sample code to test the ground primitive:

var viewer = new Cesium.Viewer('cesiumContainer'); var scene = viewer.scene;

scene.globe.depthTestAgainstTerrain = true;

var cesiumTerrainProviderMeshes = new Cesium.CesiumTerrainProvider({
    url : '//assets.agi.com/stk-terrain/world',
    requestWaterMask : true,
    requestVertexNormals : true
});

viewer.terrainProvider = cesiumTerrainProviderMeshes;

// setup alternative terrain providers
var ellipsoidProvider = new Cesium.EllipsoidTerrainProvider();

var vrTheWorldProvider = new Cesium.VRTheWorldTerrainProvider({
    url : '//www.vr-theworld.com/vr-theworld/tiles1.0.0/73/',
    credit : 'Terrain data courtesy VT MÄK'
});

// Example 4: Draw an orange extruded polygon with // per position heights.
var positions = Cesium.Cartesian3.fromDegreesArrayHeights([
    -108.0, 25.0, 10000,
    -100.0, 25.0, 10000,
    -100.0, 30.0, 10000,
    -108.0, 30.0, 20000
]);

// Set the perPositionHeight option to true for the polygon // to use the
heights each position. In this case, we are // also seting extrudedHeight to
zero for the polygon // to be extruded down to the globe surface.

var orangePolygonInstance = new Cesium.GeometryInstance({
    geometry : Cesium.PolygonGeometry.fromPositions({
        positions : positions,
        vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        perPositionHeight : true
    }),

    attributes: {
        color:
Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});

var geometryCollection = ;
geometryCollection.push(orangePolygonInstance);

var appearance = new Cesium.PerInstanceColorAppearance({
     closed : true,
     translucent : true
});

var feature = new Cesium.Primitive({
    geometryInstances : geometryCollection,
    allowPicking: true,
    interleave : true,
   appearance : appearance
});

scene.primitives.add(feature);

var rectangleInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0)
  }),
  id : 'rectangle',
  attributes : {
    color : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
  }
});

scene.primitives.add(new Cesium.GroundPrimitive({
  geometryInstance : rectangleInstance
}));

Sandcastle.addToolbarMenu([{
    text : 'CesiumTerrainProvider - STK World Terrain',
    onselect : function() {
        viewer.terrainProvider = cesiumTerrainProviderMeshes;
        viewer.scene.globe.enableLighting = true;
    }
}, {
    text : 'CesiumTerrainProvider - STK World Terrain - no effects',
    onselect : function() {
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world'
        });
    }
}, {

    text : 'CesiumTerrainProvider - STK World Terrain w/ Lighting',
    onselect : function() {
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world',
            requestVertexNormals : true
        });
        viewer.scene.globe.enableLighting = true;
    }
}, {
    text : 'CesiumTerrainProvider - STK World Terrain w/ Water',
        
    onselect : function() {
        viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
            url : '//assets.agi.com/stk-terrain/world',
            requestWaterMask : true
        });
    }
}, {
    text : 'EllipsoidTerrainProvider',
    onselect : function() {

        viewer.terrainProvider = ellipsoidProvider;
    }
}, {

    text : 'VRTheWorldTerrainProvider',
    onselect : function() {

        viewer.terrainProvider = vrTheWorldProvider;

    }

}], 'terrainMenu');

Sandcastle.addDefaultToolbarMenu([{
    text : 'Mount Everest',

    onselect : function() {
        var target = new Cesium.Cartesian3(300770.50872389384,
5634912.131394585, 2978152.2865545116);
        var offset = new Cesium.Cartesian3(6344.974098678562,
-793.3419798081741, 2499.9508860763162);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}, {

    text : 'Half Dome',
    onselect : function() {

        var target = new Cesium.Cartesian3(-2489625.0836225147,
-4393941.44443024, 3882535.9454173897);
        var offset = new Cesium.Cartesian3(-6857.40902037546, 412.3284835694358,
2147.5545426812023);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}, {

    text : 'San Francisco Bay',
    onselect : function() {

        var target = new Cesium.Cartesian3(-2708814.85583248,
-4254159.450845907, 3891403.9457429945);
        var offset = new Cesium.Cartesian3(70642.66030209465,
-31661.517948317807, 35505.179997143336);
        viewer.camera.lookAt(target, offset);
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    }
}], 'zoomButtons');

var terrainSamplePositions;

function sampleTerrainSuccess() {

    var ellipsoid = Cesium.Ellipsoid.WGS84;

    //By default, Cesium does not obsure geometry
    //behind terrain. Setting this flag enables that.
    //viewer.scene.globe.depthTestAgainstTerrain = true;

     viewer.entities.suspendEvents();
    viewer.entities.removeAll();

    for (var i = 0; i < terrainSamplePositions.length; ++i) {
        var position = terrainSamplePositions[i];

        viewer.entities.add({
            name : position.height.toFixed(1),
            position : ellipsoid.cartographicToCartesian(position),
            billboard : {
                verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                scale : 0.7,
                image : '../images/facility.gif'
            },

            label : {
                text : position.height.toFixed(1),
                horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                scale : 0.3,
                pixelOffset : new Cesium.Cartesian2(0, -14),
                fillColor : Cesium.Color.RED,
                outlineColor : Cesium.Color.WHITE
            }
        });
    }

    viewer.entities.resumeEvents();
}

Sandcastle.addToolbarButton('Toggle Lighting', function() {
    viewer.scene.globe.enableLighting = !viewer.scene.globe.enableLighting;
}, 'toggleLighting');

Sandcastle.addToolbarButton('Sample Everest Terrain', function() {

    var gridWidth = 41;
    var gridHeight = 41;
    var everestLatitude = Cesium.Math.toRadians(27.988257);
    var everestLongitude = Cesium.Math.toRadians(86.925145);
    var rectangleHalfSize = 0.005;
    var e = new Cesium.Rectangle(everestLongitude - rectangleHalfSize,
everestLatitude - rectangleHalfSize, everestLongitude + rectangleHalfSize,
everestLatitude + rectangleHalfSize);

    terrainSamplePositions = ;

    for (var y = 0; y < gridHeight; ++y) {
        for (var x = 0; x < gridWidth; ++x) {
                
            var longitude = Cesium.Math.lerp(e.west, e.east, x / (gridWidth -
1));
            var latitude = Cesium.Math.lerp(e.south, e.north, y / (gridHeight -
1));
            var position = new Cesium.Cartographic(longitude, latitude);
            terrainSamplePositions.push(position);
        }
    }

    Cesium.when(Cesium.sampleTerrain(viewer.terrainProvider, 9,
terrainSamplePositions), sampleTerrainSuccess);

}, 'sampleButtons');

var viewModel = { fogEnabled : true };
Cesium.knockout.track(viewModel);

var toolbar = document.getElementById('toolbar');
Cesium.knockout.applyBindings(viewModel, toolbar);
Cesium.knockout.getObservable(viewModel,
'fogEnabled').subscribe(function(newValue) {

    viewer.scene.fog.enabled = newValue; });

viewModel.enabled = viewer.scene.fog.enabled;

//rotate the globe over the south east. When you see the orange polygon start
//zooming in. At some point the polygon will disappear. Hope this Helps Jerry

Thanks in advance

Jerry

Patrick, Kevin,

Anything I can to to help?

Thanks

Jerry

Patrick, Kevin,

I am able to replicate this on the latest version of Firefox 43.0.4.

Jerry

I found the answer to the problem in the following link: http://www.geeks3d.com/20130611/webgl-how-to-enable-native-opengl-in-your-browser-windows/

Jerry

Patrick,

If disabling ANGLE makes the problem disappear I am assuming that there is a issue between the Geometry apis and ANGLE. I have found 2 problems in Bugzilla that Matt was working with the Mozilla in regards to ANGLE.


In one of the bug reports Matt thought the issue was resolved in Firefox 36. The other report did not specify which version of Firefox would contain the fix.

Hope this helps

Jerry