I’m currently integrating Babylon.js and Cesium using examples from the official website. I noticed that the transparency of the fluid rendered by fluidRenderer is 0. I want the transparency of the fluid to be non-zero while scene.clearColor = new BABYLON.Color4(0,0,0,0) is set. How can I achieve this?
Hi,
would you be able to provide a playground so we can all see what it is you are trying to do exactly? This way we can also share code changes and fixes instead of providing an abstract answer that we are not sure fits your use-case
Transparent background with no base color, fluid rendering is also transparent | Babylon.js Playground (babylonjs.com)
Hello,
You can comment out this line of code, scene.clearColor = new BABYLON.Color4(0,0,0,0) , to display the background.
because I need to integrate with Cesium, the background color of Babylon.js needs to be transparent. However, I don’t want to render any other objects to serve as the base color for the fluid. So, I’m thinking about how to make the transparency of the fluid not equal to zero.
As a beginner, I’m not familiar with writing fluid simulations directly using shaders on Cesium. Therefore, I’m considering using Babylon.js to achieve this task.
This PR should let you do what you want:
It adds a new compositeMode property. When set to true, the alpha channel is set to the calculated thickness if the background color has a zero alpha component at that pixel. So, if you clear the scene with a color like (1,1,1,0), you will see something like (https://playground.babylonjs.com/#KXUQLC#1):
Note that the rock background comes from a div element behind the canvas, it is not part of the Babylon scene.
Also, there won’t be any refraction effect under the fluid object, because the HTML background is not accessible to the fluid rendering code. Instead, a fixed color is used for the refraction, which is the color (rgb components) you set as the scene clear color.
2 Likes