setting silhouetteSize causes code to crash

CesiumJS
1

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

Once setting the silhouetteSize the rendering crashes.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
var CesiumModel = {
    uri : './Models/CesiumMilkTruck/CesiumMilkTruck.gltf',
    minimumPixelSize : 16,
    maximumPixelSize : 256,
    color: Cesium.Color.fromAlpha(Cesium.Color['BLUE'],0.85),
    colorBlendMode: Cesium.ColorBlendMode['HIGHLIGHT'],
    silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color['YELLOW'],1.0) //,
   // silhouetteSize: 2.0
};

So if I uncomment the line with silhouetteSize the code will crash

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
N/A
4. The Cesium version you're using, your operating system and browser.
"cesium": "^1.42.1",

Error Message:

An error occurred while rendering. Rendering has stopped.
RuntimeError: Vertex shader failed to compile. Compile log: ERROR: 0:31: '*' : wrong operand types - no operation '*' exists that takes a left-hand operand of type 'uniform highp 3X3 matrix of float' and a right operand of type 'attribute highp 2-component vector of float' (or there is no acceptable conversion)
ERROR: 0:31: 'normalize' : no matching overloaded function found
ERROR: 0:31: '=' : dimension mismatch
ERROR: 0:31: '=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'

RuntimeError@http://localhost:8080/cesium.js:12824:28
createAndLinkProgram@http://localhost:8080/cesium.js:25852:39
initialize@http://localhost:8080/cesium.js:26057:43
_bind@http://localhost:8080/cesium.js:26074:19
beginDraw@http://localhost:8080/cesium.js:178471:17
draw@http://localhost:8080/cesium.js:178515:18
execute@http://localhost:8080/cesium.js:23119:21
executeCommand@http://localhost:8080/cesium.js:211550:28
executeTranslucentCommandsSortedMRT@http://localhost:8080/cesium.js:208827:28
executeCommands@http://localhost:8080/cesium.js:208841:48
_executeOITFunction@http://localhost:8080/cesium.js:211751:47
executeCommands@http://localhost:8080/cesium.js:211979:39
executeCommandsInViewport@http://localhost:8080/cesium.js:212319:24
updateAndExecuteCommands@http://localhost:8080/cesium.js:212167:38
render@http://localhost:8080/cesium.js:212703:33
tryAndCatchError@http://localhost:8080/cesium.js:212717:30
render@http://localhost:8080/cesium.js:212758:29
render@http://localhost:8080/cesium.js:227664:31
render@http://localhost:8080/cesium.js:227039:38

2

Does the silhouette sandcastle demo also crash for you? https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=3D%20Models%20Coloring.html&label=Showcases

3

Good question.

No, the sandcastle example works just fine.

4

I think the problem then is your model may not have normals, which are required for silhouettes. Could you check if the glTF contains an attribute called “NORMAL”?

We are moving to a general purpose post processing framework for effects like this, so eventually silhouettes willl work without normals. But until then they are required.

5

Hi Sean,

The model is the Cesium Milk Truck.

On SandCastle the silhouette works just fine. So, it must have normals.

I don't think thats the issue.

6

Ah good point, I should have checked the url.

I attempted to create a Sandcastle example similar to your code (below), and I can’t seem to trigger the problem. Is there additional code in your app that might be helpful to send over?

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

function createModel(url, height, heading, pitch, roll) {

var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.0);

var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll());

var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({

    url : url,

    modelMatrix : modelMatrix,

    minimumPixelSize : 16,

    maximumPixelSize : 256,

    color : Cesium.Color.fromAlpha(Cesium.Color.BLUE, 0.85),

    colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,

    silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.YELLOW, 1.0),

    silhouetteSize: 2.0

}));

model.readyPromise.then(function(model) {

    var camera = viewer.camera;

    // Zoom to model

    var controller = viewer.scene.screenSpaceCameraController;

    var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);

    controller.minimumZoomDistance = r * 0.5;

    var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());

    var heading = Cesium.Math.toRadians(230.0);

    var pitch = Cesium.Math.toRadians(-20.0);

    camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));

}).otherwise(function(error){

    window.alert(error);

});

}

createModel(’…/…/SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb’);

``

7

well, the sandcastle also works on my computer.

I am not sure about the rest of the code. As I mentioned, the entire code runs, as long as in the model I don't have sillouhette