How Can I Make The Canvas Transparent On WebGL?

Unity Engine
1

Hi,

I followed step defines in below document. But not get a result.

Am I missing something?

Unity version - Unity 2018.4.15f1 (64-bit)

Thanks in advance.

2

Bump

3

I just did it with success:

1- Camera clear flags set to Depth Only
2- Create a file named TransparentBackground.jslib with following code inside and place it in root|assets folder:

var LibraryGLClear = {
glClear: function(mask)
{
if (mask == 0x00004000)
{
var v = GLctx.getParameter(GLctx.COLOR_WRITEMASK);
if (!v[0] && !v[1] && !v[2] && v[3])
// We are trying to clear alpha only -- skip.
return;
}
GLctx.clear(mask);
}
};
mergeInto(LibraryManager.library, LibraryGLClear);

3- Build
4- Edit the .json file (in Build folder) and set the “backgroundColor” to “transparent”
5- Success

3 Likes
4

An additional step is actually required. After the index.html is generated, you need to write custom css to make the canvas itself actually transparent.

#unity-canvas{
background: transparent !important;
}
1 Like
5

There is no .json file in the build folder. Not on Unity 2020.1 at least.

2 Likes
6

Can’t make this work in Unity 2020 and URP as there are no Clear flags for camera. any solutions?

7

Hello,

I set camera Clear flag with Depth only.
I put TransparentBackground.jslib in asset/plugin folder.
I set backgroundColor to transparent at json file.
I add canvas transparent at style.css.

But only black background color when build and test.
at Unity 2018.3

Thank you.

I found a solution.
Camera clear flog, solid color with black (0,0,0,0) alpha 0
I need TransparentBackground.jslib for GLClear.
I change backgroundColor to transparent in json.

When I change color space to gamma, then transparent background is working.
But I don’t know this color space and GL clear relation.

There is about PlayerSetting is here. When I change to Auto Graphic API, There is warning about color space linear. So I change to gamma.
https://discussions.unity.com/t/581572 ?_ga=2.34395042.2038369983.1586999210-215010673.1586999210

2 Likes
8

OK, all of these seem to work only in legacy and seem to not work in URP (it should be but I cannot as of yet)

It seem in URP they don’t use glClear anymore so even it merged it was not being called as in legacy

9

Highly apologize to bother you but @jonas-echterhoff_1 are there anyway we can get this work in URP ?

10

I made a really simple WebXR test project that does transparent rendering onto the back-buffer, in this case for rendering onto the Augmented Reality camera frame. I believe it was working with URP. This is unsupported, I won’t be maintaining it, but in case it’s helpful: GitHub - brendan-duncan/unity_webar_demo: Demonstration project to use WebXR Augmented Reality with Unity

Specifically in unity_webar_demo/Assets/Plugins/WebGL/webar.jspre at main · brendan-duncan/unity_webar_demo · GitHub
It overrides GLctx.bindFramebuffer to detect when Unity is drawing to the canvas/back-buffer.
It overrides GLctx.colorMask and detect if it’s going to be clearing the alpha for the back-buffer.
It overrides GLctx.clear and skip the clear if it was clearing the alpha for the back-buffer.
It overrides GL.createContext to make sure “preserveDrawingBuffer” is true when creating the WebGL context.
It overrides window.requestAnimationFrame to keep track of what the last framebuffer bound for the frame was.

At some point I will be looking into providing a proper transparent canvas rendering mode. These is just a suggestion for a possible workaround in the meantime.

1 Like
11

Thank you very much and very appreciate the work on this feature. And yes, I really need to do exactly this currently now so thanks again for the working project

Is this also working in safari ios?

edit: This seem to not work in safari ios because it was rely on webxr. While what I need is just AR image detection from device camera and draw the stream as background, which should be able to do even without immersive mode

I am trying to hack that repo but it would be great if unity would also provide us that mode too. ios seem not to care much about webxr and it was forcing other browser to use it

12

While Apple doesn’t provide any information about unreleased products, there are a lot of indications that Safari will implement WebXR in the “near” future.

13

By my investigation and speculation the near of ios not seem to happen in this year. They even put it on experimental but even enabled it that was still not support any immersive mode (maybe inline mode possible? not sure and just planning to try today). And also even there was enable experimental, other browser like chrome are not allow to utilize it even they need to rely on safari underlyingly

Which indicate that they really put not much thought in their mind, as always, apple never on their right mind, like webpush

1 Like
14

I tried your method. It’s working without URP. It’s not working with URP.

15

8075123--1043873--upload_2022-4-25_11-44-45.png
8075123--1043873--upload_2022-4-25_11-44-45.png1569Ă—1074 28.1 KB

@brendanduncan_u3d With URP, it’s not transparent.
8075123--1043876--upload_2022-4-25_11-45-30.png
8075123--1043876--upload_2022-4-25_11-45-30.png1595Ă—1009 21.6 KB

Without URP, it’s transparent.

16

Maybe because there is Volume something object in the scene? Any thing that make screen space effect most likely mess with clear mask

I would like to suggest trying the samplescene in that repo instead

17

The SampleScene in that repo is not URP.
And I find out the problem.

  • HDR
  • Post Processing

To make it support transparent, I have to disable HDR. Because the HDR format for URP seems to be B10G11R11 always. There’s no way to modify now. Maybe it will be solved after this is merged to the main branch. https://github.com/Unity-Technologies/Graphics/pull/6728
And also, I have to disable Post Processing even after disable the HDR. Maybe the uber post processing fill the alpha always 1.
8075156--1043891--upload_2022-4-25_12-23-57.png

2 Likes
18

Just import this package. You should have transparent background on Unity 2019 and higher. No need to have a custom template to change the canvas’ background, this can be done on a jspre file.

8310864–1090410–TransparentBackground.unitypackage (1.09 KB)

3 Likes
19

I tried your solution and found just need
TransparentBackground.jslib
Camera solid color with alpha 0
css background: transparent

All has nothing to do with Graphic API

2 Likes
20

Hi! I managed to implement a transparent background with URP, but i need to understand something else.

Using this method, it seems that my clicks pass through the canvas and propagate to the html page that lies behind the unity canvas; while it is really comfortable to have, I’d like to know if there is a way to disable it and so to NOT propagate clicks in the document behind the canvas