Transmission PBR material with CSS gradient background – best low-overhead solution?

Questions
,
1

Hey folks,

I’m using a customized CSS gradient as the canvas background (outside Babylon.js) to minimize GPU overhead for a mobile web app. However, I’ve run into an issue: when using PBR materials with transmission, the background color from CSS isn’t picked up correctly, since it’s not part of Babylon’s rendered scene.

My PG:

I’m looking for the best approach to:

  • Keep the low overhead advantage of a CSS gradient background on mobile devices.
  • Still allow transmission materials to show the background color properly.

Has anyone found an optimal solution for this?

Many thanks!
Tarnlift

2

It would be cheaper to draw it in the canvas :slight_smile: and not allow alpha on it so no blending would be needed between the canvas and the rest of the DOM.

3

@sebavan

Thank you for the response!

Could you provide a quick PG example? That would be super helpful! :grinning_face_with_smiling_eyes:

Many thanks,
Tarnlift

4

This should work: https://playground.babylonjs.com/#T7FXR8#85

5

@sebavan

Amazing thank you so much for providing the PG!

So this approach should be less overhead comparing using CustomProceduralTexture?

Many thanks,
Tarnlift

6

yup it will