CesiumGS / cesium

An open-source JavaScript library for world-class 3D globes and maps :earth_americas:
https://cesium.com/cesiumjs/
Apache License 2.0
13.03k stars 3.51k forks source link

PerInstanceColorAppearance rendering striations without `flat : true` option present #12218

Open hotpocket opened 2 months ago

hotpocket commented 2 months ago

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 commented 2 months ago

This seems similar to #8045