This is an animated GIF of two versions of the code:
Yes, itās subtle: You used "
(double quotes) inside the string. This means that the value of pos
there is
vec3(" + XYZ[0] + "," + XYZ[1] + "," + XYZ[2] + ")
You have to use '
(single quotes) in the string, as in
pos: 'vec3(' + XYZ[0] + ',' + XYZ[1] + ',' + XYZ[2] + ')',
so that the resulting string actually is
vec3(4401688.591363471,225003.70009621087,4595441.614419247)
Butā¦
ā¦ the section about Defining Variables in the specifications says
A define expression may not reference other defines
But you could just define the āpositionā outside of the style (because it only depends on the click position anyhow) - for example, like this:
function applyStyle(ts, cartesian) {
const XYZ = [cartesian.x, cartesian.y, cartesian.z];
const posString = 'vec3(' + XYZ[0] + ',' + XYZ[1] + ',' + XYZ[2] + ')';
// DEBUG OUTPUT:
console.log(XYZ);
console.log("The posString is "+posString);
ts.style = new Cesium.Cesium3DTileStyle({
defines : {
distance : 'clamp(distance(${POSITION_ABSOLUTE}, ' + posString + ') / 25.0, 0.0, 1.0)'
},
show: "clamp(${distance}, 0.0, 0.3) < 0.3",
color : 'mix(color("yellow"), color("red"), ${distance})'
});
}
The sandcastle:
(The interaction is still a bit glitchy, but ā¦ the shader error should be resolved nowā¦)