Material "slips" from the ground

1. A concise explanation of the problem you’re experiencing.

When you zoom to rectangle with material, the material “slips” and disappears from the edge closer to the viewer

Screenshots

Before zoom

after zoom

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

});

var worldRectangle;

var rectangle = Cesium.Rectangle.fromDegrees( 5.3, 52.8, 5.4, 52.9) ;

worldRectangle = viewer.scene.primitives.add(new Cesium.Primitive({

geometryInstances : new Cesium.GeometryInstance({

geometry : new Cesium.RectangleGeometry({

rectangle : rectangle,

vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT

})

}),

appearance : new Cesium.EllipsoidSurfaceAppearance({

aboveGround : false

}),

shadows : Cesium.ShadowMode.RECEIVE_ONLY,

}));

worldRectangle.appearance.material = new Cesium.Material({

fabric : {

type : ‘Water’,

uniforms : {

baseWaterColor : new Cesium.Color(0.024, 0.128, 0.225, 1.0), // baseWaterColor : new Color(0.2, 0.3, 0.6, 1.0),

blendColor : new Cesium.Color(0.0, 1.0, 0.699, 1.0), // blendColor : new Color(0.0, 1.0, 0.699, 1.0),

// specularMap : ‘images/specular.jpg’, // specularMap : Material.DefaultImageId,

normalMap: ‘Assets/Textures/waterNormals.jpg’, // normalMap : Material.DefaultImageId,

frequency : 5000.0, // frequency : 10.0,

animationSpeed : 0.0005, // animationSpeed : 0.01,

amplitude : 2, // amplitude : 1.0,

specularIntensity : 0.25, // specularIntensity : 0.5,

fadeFactor : 1.0 // fadeFactor : 1.0

}

}

});

viewer.camera.setView({

destination : Cesium.Rectangle.fromDegrees(5.1, 52.44, 5.6, 52.46),

orientation: {

heading : Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)

pitch : Cesium.Math.toRadians(-40), // default value (looking down)

roll : 0.0 // default value

}

});

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I’d like to put a water material over some region

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.45, Chrome

Vladimir

Hi Vladimir,

I think what you’re seeing may be the edge of the camera’s frustum, or the box which defines the area that the camera “sees”.

See the example at the top of the Camera reference documentation. You’ll want to adjust the near plane by setting camera.frustum.near to a lower number.

Thanks,

Gabby

Thank you, Gabby for the hint and idea.

In order to check it I took Materials example from Sandcaste, added 3 lines of code to test and set camera.frustum.near settings

console.log(scene.camera.frustum.near);

scene.camera.frustum.near = 0.01 ;

console.log(scene.camera.frustum.near);

Selected a Dot material for better visibility and still get the same effect as I mentioned.

And the camera is still far above the ground to expect the effect from the edge of camera’s frustum.

Vladimir

I still can’t understand this specific in material behavior.
Here is one more sample demonstrating this “slipping”.
I create two rectangles - entity(left) and primitive(right) sitting side by side with a similar Image material.

But when I set camera close to them, material from the primitive “slips” from ground.

I think it’s not linked to the frustum as distance is quite high from the ground.

You can also zoom in and out to see how it moves.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var rectangle = viewer.scene.primitives.add(new Cesium.Primitive({

geometryInstances : new Cesium.GeometryInstance({

geometry : new Cesium.RectangleGeometry({

rectangle : Cesium.Rectangle.fromDegrees(-102.5, 35.0, -92.5, 45.0),

vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT

})

}),

appearance : new Cesium.EllipsoidSurfaceAppearance({

material : Cesium.Material.fromType(‘Image’)

})

}));

rectangle.appearance.material.uniforms.image = ‘…/images/Cesium_Logo_Color.jpg’;

viewer.entities.add({

rectangle : {

coordinates : Cesium.Rectangle.fromDegrees(-112.0, 35.0, -102.5, 45.0),

material : '…/images/Cesium_Logo_Color.jpg’

}

});

viewer.camera.setView({

destination : Cesium.Cartesian3.fromDegrees(-102.5, 40, 15000.0),

orientation: {

heading : Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)

pitch : Cesium.Math.toRadians(-45), // default value (looking down)

roll : 0.0 // default value

}

});

Vladimir

I can duplicate, but I’m at a loss for what’s causing this.

I’ve gone ahead an opened Issue #6664 to track in GitHub. If you have anymore information that could help us track down the bug, please post it there.

Thanks,

Gabby