Component Transparent Background

CesiumJS
1

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

I have a Sketchup model with a component with a transparent background. I see this is as it should be while working in Sketchup. When I Khronos export the model to a .glb, the model in Cesium is as expected except the background of that particular component is solid black.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I wish to improve the quality of the view.

4. The Cesium version you’re using, your operating system and browser.

Cesium 150, Window 10 and Fireforx, Chrome, or Edge.

2

It sounds like it’s outputting the texture using a JPEG instead of a PNG. Is there an option that lets you select what format of image to use when exporting?

3

Hi,

Thanks, I looked at the Kronos site but could not find any option that applied. Would it be useful if I posted the .png I am using and sent you the link?

4

The problem is the glb has an embedded image, and if that’s getting converted to a JPEG then you’re going to lose transparency.

Is there an option to export .gltf with non-embedded images instead of .glb? That way the image file is external, and you can make sure it’s a PNG.

5

Hi,

I did the .gltf export.

What I see at the top is:

"asset": {
“version”: “2.0”,
“generator”: “Sketchup glTF Exporter v1.2.6 by Centaur”
},

I do see several entries such as:

{
“bufferView”: 33,
“mimeType”: “image/png”
},

At the bottom of the file is just encoded data:

"buffers": [
{

"uri": "data:application/octet-stream;base64,/9j/4AAQSkZJRgABAQEAYABgAA (a lot more)

"byteLength": 221882
}
]

6

Oh! I just remembered that you might need to set:

“alphaMode”: “BLEND”

``

on the material. This is something the exporter should be doing for transparent materials, or giving you a way to choose which materials are transparent. I know the glTF exporter in Blender can do this:

https://docs.blender.org/manual/en/dev/addons/io_gltf2.html#blend-modes

If you need to set this manually in the glTF, this sample model is a good example:

This line specifically:

7

Bingo!!!

Much Much Thanks.