How can one archive a transparent background color

[Tjerk-Haaye-Henricus]

Hey There,

I've tried a lot of ways until yet getting a transparent Background. Is it possible to get a transparent background / clearColor ?

[brianzinn]

Did you try with a Color4 alpha? What did you try - I think you mean the scene background color, but not sure.

[Tjerk-Haaye-Henricus]

Yes i tried that already. This is my code.

<Engine
  key={layer.image.data.id}
  antialias
  adaptToDeviceRatio
  canvasId="babylonJS"
  className="bp-transparent"
>
  <Scene clearColor={new BABYLON.Color4(0, 0, 0, 0)}>
    <arcRotateCamera
      name="arc"
      target={new BABYLON.Vector3(0, 2, 0)}
      alpha={-Math.PI / 2}
      beta={0.2 + Math.PI / 4}
      wheelPrecision={50}
      radius={14}
      minZ={0.001}
      lowerRadiusLimit={8}
      upperRadiusLimit={20}
      upperBetaLimit={Math.PI / 2}
    />
    <hemisphericLight
      name="hemi"
      direction={new BABYLON.Vector3(0, -1, 0)}
      intensity={1.7}
    />
    <Suspense>
      <Model
        sceneFilename={
          layer.image?.data?.attributes?.url
            .split("/")
            .at(-1) || ""
        }
        name={"crew"}
        rootUrl={
          layer.image?.data?.attributes?.url
            .split("/")
            .slice(
              0,
              layer.image?.data?.attributes?.url.split("/")
                .length - 1,
            )
            .join("/") + "/"
        }
      />
    </Suspense>
  </Scene>
</Engine>

[brianzinn]

That should work. How do you know it’s not transparent - you have something positioned behind the canvas?

[scdozer]

im having a similar issue, its very odd, but its like the scene needs a re-render. if i render my app, then save autoClear={true} -> autoClear={false} it works, but doesnt work on initial render

[brianzinn]

@scdozer that's useful info - do you have time to make a sandbox repro? There may be some new code when Scene was switched to SFC, but I don't see by looking at the code...

[scdozer]

yeah, will give it a try later. its odd, i just forked your example and updating autoClear on that one works, but it uses an older version of react-babylon

[scdozer]

https://codesandbox.io/s/pensive-fast-xlkhjc?file=/src/App.js

this version seems to do what my local does. on first render, no autoclear, if i update and save then i see the white bg

[fursund]

Same issue here. Any chance you found a work-around?

[scdozer]

i just ended up using straight babylon no wrapper because i had a short timeline

[brianzinn]

I finally had time to look, sorry for the delay. It is StrictMode causing the issue... it won't affect a production build at least. Hopefully I have time later this week for a fix.

[brianzinn]

This should be fixed - sorry for the long delay. https://codesandbox.io/s/xenodochial-bessie-hctvrs?file=/src/App.js

Please re-open if you have any questions or find it is not working still.