cesium icon indicating copy to clipboard operation
cesium copied to clipboard

PerInstanceColorAppearance rendering striations without `flat : true` option present

Open hotpocket opened this issue 5 months ago • 1 comments

What happened?

While attempting to render a Cesium.Rectangle there exists striations where a solid color should exist. A solid color can be forced if {flat:true} is passed to PerInstanceColorAppearance but from what I gather this should not be necessary.

See the sandcastle which is inlined here because I have seen OpenPGP Secret Key used to point to prior sandcastles expire after a time

const viewer = new Cesium.Viewer("cesiumContainer");

const { scene } = viewer;

const rectangleInstance1 = 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)
  }
});
const rectangleInstance2 = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-130.0, 20.0, -90.0, 30.0),
  }),
  id : 'rectangle',
  attributes : {
    color : new Cesium.ColorGeometryInstanceAttribute(1.0, 1.0, 0.0, 0.5)
  }
});
scene.primitives.add(new Cesium.Primitive({
  geometryInstances : [rectangleInstance1, rectangleInstance2],
  appearance : new Cesium.PerInstanceColorAppearance(),
//  appearance : new Cesium.PerInstanceColorAppearance({flat:true}),
}));

The striations appear to be an attempt to render smaller rectangles in 3D. You can notice this by moving left & right and seeing what appear to be shadows, change shape. Farthest right: Screenshot from 2024-09-26 16-22-13

Farthest left: Screenshot from 2024-09-26 16-22-01

Reproduction steps

see sandcastle example for demo. uncomment line with flat option to see rendering differences.

Sandcastle example

https://sandcastle.cesium.com/#c=xVPLTsMwEPwVK5cmUus0PA5AWoGKhJCQqEDiQji4zrZYOHZkO61K1X/HdpqSPrhwgEssz87MescOlUIbNGewAIUGSMACjUCzqsAvHguzgPr9SApDmACVBdFVJjJBvXKFNAUBaG3FtUurqIAaImYc7u2OCArJbos7kAUYtWzK4SoTCM02KLpsc58ar0ZUk9F3E8vf5+KpksUtzBSADnvJWR/3u+jUf3tJ368Oi7rOal0vLLdGna1rx4PEGMUmlQFti5vGVHKpdg85ctD+VDeNNvQNk+2nj88j3zgTa5fpD6Gd/G9odVwndWgX2wT/KrN2XEcy868Pl4oVzLA5aEzyPGy5j5vKbkxNH3e018Nn2j1yC2/1UGUJRDlgd4oxqIbpB7rZ8kIXURz/SrqacmIujarAB72OoqugG6TaLDkM60QRumZFKZVBleIhxrGBorQq0PGkoh9gMNXaJeWoadyWpjmb26sbHPnFEeVEa1uZVpw/s0/IgmEaW/6BlEuSMzF7nIPiZOlo78nwoQYxxmlst8eVRko+IWrP+Qs

Environment

Browser: Chrome 129.0.6668.70 CesiumJS Version: 1.121 Operating System: Ubuntu 22.04.5 LTS

hotpocket avatar Sep 26 '24 23:09 hotpocket