1. A concise explanation of the problem you’re experiencing.
When I load website, in a start animation globe need to be transparent, but after animation end, it needs to set background color (actually, it needs to stay transparent, but an unwanted stroke appears around the globe, it seems to be bug, and i don’t know how to prevent it. https://www.screencast.com/t/UYhBuCIqku
2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.
I need something like that viewer.scene.contextOptions.webgl.alpha = true; but I don’t know how to do that
3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
We actually just made a fix in the latest CesiumJS 1.61 to always make sure the canvas renders at the resolution expected by the device, which might help with the labels looking blurry. Can you try to upgrade to the latest CesiumJS and let me know if that helps?
Wow, that works very well! Thanks a lot!
I have a question about labels on the desktop. Is it possible to render that without artifacts with transparent background ? https://www.screencast.com/t/Qoe4lAYolH7
Many thanks
I’d like to bump the original question here. I’m trying to dynamically turn the webgl.alpha option on/off in order to take screenshots of the canvas with a transparent background,
then set it back to black or whatever color the user has selected while they are navigating around. We found there were issues with antialiasing and a couple other performance
things that are not worth it to keep the alpha option on, but we really need the ability to have transparent background screenshots.
I tried the following but had no luck (this does work if the webgl alpha is set before constructing the scene to begin).
Is there a way to change this value on the fly? We have a lot of setup with saved drawings and large B3DM models so deleting and reloading in the entire scene is not a great solution here. Thanks for any help in advance!
The web browser does not allow you to change the WebGL context attributes after the canvas has already been created, so I don’t think there’s an easy solution around that other than destroying and recreating the canvas.
Are you rendering your b3dm models with the globe turned off during the application (or just when you need to take a screenshot) ?
So this is just one small aspect of what we need this transparent background for, but when the user creates layers on top of the mesh (examples attached are derivative TINs), and they turn off the mesh and globe as being visible
we want to be able to export those with a transparent instead of black background. These screenshots would be used in marketing emails and added to custom project reports etc, where we don’t know what the background will be.
It could be an image or something other than a plain color. And unfortunately using imaging libraries to replace the background color with transparent has proved to be a non-perfect solution. But anyway, thanks for the response, it
sounds like I will have to re-instantiate the canvas unfortunately.
Thanks for sharing a bit more about your use case. This sounds like a pretty cool project! I think it may be possible to have a solution where you take a primitive like a 3D Tileset (or a set of primitives) and render them to an off-screen buffer, and then capture the output of that into an image. That way you have full control of exactly what’s included in that image and what the background is.
Alternatively, if all you need is this alpha option, perhaps it would be possible to create a WebGL canvas yourself, and swap out the canvas that CesiumJS references with the alpha one when needed. All of these would require changing the source code and may not be trivial though. But if this kind of use case continues to come up I imagine it may be either a built-in part of the library in the future or at least there may exist some tutorial/doc to help with this.
