Hello.
I’m quite new to Cesium. So, please point me to an example or documentation with the next case:
The first. I’ve received png images within gltf. adding as entities works well on all needed targets except iPad (15.4).
On iPad I have white color instead of transparency.
In the second I have polygon entities with filling with transparency percentages.
Changing orderIndependentTranslucency to true fixes issues with png’s, but I lost semitransparency filling for polygon
Not sure what to do to get both - png and polygon with transparency filling.
Thank you.
Part of gltf with materials
"materials": [
{
"alphaCutoff": 0.80357140302658,
"alphaMode": "MASK",
"doubleSided": true,
"name": "fire.001",
"pbrMetallicRoughness": {
"baseColorTexture": {
"index": 0
},
"metallicFactor": 0,
"roughnessFactor": 0
}
},
{
"alphaMode": "BLEND",
"doubleSided": true,
"name": "Mat.004",
"pbrMetallicRoughness": {
"baseColorFactor": [
1,
1,
1,
0
]
}
}
],
"textures": [
{
"sampler": 0,
"source": 0
}
],
"images": [
{
"bufferView": 4,
"mimeType": "image\/png",
"name": "fire"
}
],
Hello there,
Is it possible to provide a minimal sandcastle code example for each of your issues so we can reproduce exactly what’s going wrong?
Also what generation of iPad are you having trouble with? Do you know if it has the M1 chip?
Thanks!
Gabby
1 Like
In order to narrow down the search space, and find out whether there is a general problem with Cesium, or the model, or with this particular model on this particular device, you might want to have a look at the “AlphaBlendModeTest” in the gltf-test repository - specifically, the preview of this model in the Cesium viewer. In terms of the transparency, it should look like the screenshot:
Does this look right on the iPad where you want to test this?
3 Likes
Hi Gabby, this is the first issue example when use png image inside gltf
js sandcastle example
I’m not setting lighting, but the white background is visible.
orderIndependentTranslucency: true because of the second issue - polygon material with opacity not rendered
UPD: The model is a cube with png placed on the top face, so the cube should be transparent.
yes, the model looks the same.
UPD: But, sorry. Looks like I’ve missed something kind of “lighting” on the blend point:
Hi Gabby, I think the “Blend” is different (yes M1 chip - IPad Pro 11 inch 3rd generation - brand new)
Thanks all,
We’ve seen some recent rendering differences with the M1 chip specifically.
@sean_lilley Is there a particular extension which may be causing this behavior? And should we open another webkit report?
What does it look like when orderIndependentTranslucency is disabled? That might help narrow it down.
const viewer = new Cesium.Viewer("cesiumContainer", {
orderIndependentTranslucency: false
});
Hi @sean_lilley it seems to solve it, but that then immediately causes a new problem (on iPad) whereby polygon fills all disappear, if no border the polygon of course then vanishes. So if you have a way to fix the polygon fills that don’t rely on this setting then both could be solved… but we’re not aware of how.
For Polygons - we use PolygonGraphics (entity):
var polygon = self.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(_polygonPathArr, ),
material: getCurrentCesiumMaterial(options),
heightReference: heightReference,
followSurface:new Cesium.ConstantProperty(false),
height: 0.8,
}
});
…
function getCurrentCesiumMaterial(options) {
if (options && options.color) {
const opacity = (options.opacity) ? options.opacity : 1;
return new Cesium.Color.fromAlpha(
new Cesium.Color.fromCssColorString(options.color),
opacity
);
}
var rgba = getCurrentRGBA();
if (!rgba) return Cesium.Color.BLACK;
var arr = [];
arr.push(rgba.red/256);
arr.push(rgba.green/256);
arr.push(rgba.blue/256);
if (parseFloat(options.opacity) === 0){
rgba.alpha = options.opacity;
}
arr.push(rgba.alpha);
var color = new Cesium.Color(...arr);
return color;
}
I tried to recreate that as a sandcastle: Cesium Sandcastle. Just to confirm, do you not see the polygon there?
@Gabby_Getz this could be a WebKit bug. Is is related to Fixes the extension check required for OIT by sanjeetsuhag · Pull Request #10417 · CesiumGS/cesium · GitHub?
It’s possible that any one of the WebGL extensions used by OIT is implemented incorrectly for M1.
@Simon_at_OnePlan one more thing to try - could you enable WebGL2?
const viewer = new Cesium.Viewer("cesiumContainer", {
orderIndependentTranslucency: true,
contextOptions: {
requestWebgl2: true,
}
});
Thanks Sean. This may be related to Fixes the extension check required for OIT by sanjeetsuhag · Pull Request #10417 · CesiumGS/cesium · GitHub. The related webkit thread talks about limitations of EXT_Color_buffer_float that are enforced in the Metal backend for WebGL (by spec).
Do you think that could be the culprit?
@Gabby_Getz EXT_color_buffer_float would be my first guess as well
@Simon_at_OnePlan what version of CesiumJS are you using?
Hi Sean, no joy in getting both issues solved at the same time…
Hi Sean, possible for you to take ownership of this problem to reduce delays on timezones? Do you have any iPad you can see the sandcastle on?
Updating is a good idea, but I think what will happen is that since EXT_float_blend isn’t supported on M1 it will automatically fall back to non-OIT. (Which is what should have always happened, but we weren’t properly checking for EXT_float_blend in the OIT code until Sam’s PR)
So then that leaves us to investigate the polygon fill issue when OIT is disabled.
I unfortunately don’t have an M1 device to test with.
@Gabby_Getz @sean_lilley with 1.94 what settings should we have for
orderIndependentTranslucency & requestWebgl2 ?
I believe you should then be able to use the default setting for both.
As @sean_lilley mentioned, this will likely still leave the polygon fill issue which we’ll need to investigate further. @sean_lilley What’s you’re recommendation for narrowing down the issue? If you don’t have an M1 device, is there anything Simon can do to help identify?
