How Can I Make The Canvas Transparent On WebGL?

Hi,

I followed step defines in below document. But not get a result.
https://support.unity3d.com/hc/en-u...w-can-I-make-the-canvas-transparent-on-WebGL-

Am I missing something?

Unity version - Unity 2018.4.15f1 (64-bit)

Thanks in advance.

 

Bump

 

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

 

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;

}

 

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

 

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

 

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://forum.unity.com/threads/web...42.2038369983.1586999210-215010673.1586999210

 

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

 

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

 

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

 

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

 

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

 

@brendanduncan_u3d With URP, it's not transparent.

Without URP, it's transparent.

 

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

 

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.

 

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.

 

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

 

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

 

Is it possible to just draw another invisible panel behind canvas with html?

style display: block; visible: false; something like this

 

This works for me with URP. Very simple!

 

I tried，but need disable hdr

 

Hi,
I don't know much about web coding at all but I was wondering, where do I put this in the Index file? I'm using URP.
Thanks,
Pete