"do not render" transparent pixels on canvas

Questions
1

Unfortunately I don’t think this will work on the playground, as it involves writing to the canvas context.

I have searched for “transparent” in the forum, but nothing I found seemed to address the topic.

Generally, I think babylon renders the transparent scene color (elements behind the canvas) just fine. I understand that I can for example, turn the body/html background color green, and when I put the scene.clearColor to rgba(0,0,0,0), it will appear green behind my babylon shapes, if any. It would do the same for an image etc, with this kind of transparency.

What I would like to do that is similar in english, but not technically, is to prevent babylon from rendering any pixel that was transparent, such that if the canvas had been filled with green pixels, and the scene.clearColor was set to rgba(0,0,0,0)) then I would see the green colors from before babylon write to the canvas.

Ideally, I should be able to paint an arbitrary color or image to the canvas, and then have babylon not overwrite those pixels on the canvas.

I have tried setting some stencil and premultiplyalpha stuff but with no success.

My hope is that babylon is not required to write every pixel to the canvas, on each render pass.

2

Hello and welcome :slight_smile:

Sorry I struggle a bit to understand what you want to achieve because, on one side it seems that you want to prevent Babylon to overwrite the transparent pixels, but on the other side you also write :

Which I understand as the opposite : prevent Babylon to overwrite non transparent pixels.

Also, did you think about using multiple canvas on top of each other ? One for Babylon, and one for painting on it ?

Maybe sharing a photoshop edit of your expected result would help

++
Tricotou

1 Like
3

Sorry for the confusion, double canvas would work for the same reasons putting an image or so behind the div would. If I am out of options, I will end up using two canvas for this I believe.

Maybe I can say it better this way… Id like to write an image to the canvas, and then have babylon shapes and spheres render on top of that image, while only writing to the canvas the pixels that exist for the objects within babylons scene. Such as a sphere. The pixels for the sphere, and only those pixels would be written by babylon to the canvas. Hope that helps the context of what I mean. :slight_smile:

4

This how I understand the stuff :

  • You draw something on the canvas
  • If you set scene.autoClear = false it basically prevents BABYLON from clearing the canvas before rendering. Then a render would add “only” the pixels of the mesh like you say.
  • Problems arrive now : If your mesh has been rendered on top of the image (or part of the image) these pixels are lost. At a moment you need to clear your canvas and redraw your image, if you want to be able to have the mesh moving

Also, did you have a look at Stencil Buffers ? (A way to have a closer hand on which pixel is drawn)

1 Like
5

Ahh! Thank you for pointing me to the right place. Babylon.js docs – autoClear I believe is exactly what I am looking for.

I have not seen stencil buffers, but I will give them a look as well.

Thank you much!