How Can I Make The Canvas Transparent On WebGL?

[Thaina]

@C0lonnello

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

[gareth_untether]

@daogework

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

This works for me with URP. Very simple!

[wuxiaojing]

@gareth_untether

This works for me with URP. Very simple!

I tried，but need disable hdr

[petey]

@qoobit

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;
}

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

[gamedevjake]

@petey

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

A couple options:

1. Put that in a CSS file that your index.html file references like
   <link rel="stylesheet" href="assets/mystyle.css">

2. Add it directly to the element in your index.html file, like

<canvas id="unity-canvas" width=312 height=256 tabindex="-1"
style="width: 312px; height: 256px; background: transparent;"></canvas>```

[petey]

Awesome, thanks @gamedevjake !

[zcdcvn]

just imported in in unity 2022 , it works thanks !

[dytek]

I sucess with URP and share my settings for someone need.

[Environment]
Unity 2021.3.15f1
WebGL
URP 12.1.8
Gamma Color Space

[Settings]
1.Base Camera
【Environment】
-【Background Type】set Solid Color
-【Background】set RGBA(0,0,0,0)

2.URP
In UniversalRenderPipelineAsset set 【HDR】 off
In UniversalRenderPipelineAsset_Renderer set 【Post-processing】 off

3.Color Space
【Project Settings】-【Player】-【Other Settings】-【Color Space】set Gamma

4.html
set css

body{
	background: transparent;
	margin: 0px;
	overflow: hidden;
}

unity-canvas{
	background: transparent !important;
}

5.TransparentBackground.jslib
download TransparentBackground.unitypackage provided by Marks4
add to Assets/Plugins/ folder

[Demo]
In of black line means unity app
out of black line means web

[MichaelGusak]

Also adding for future reference (these steps worked for me, but the link to the jslib is gone so here it is in text form (working in URP unity 6):
It can be anywhere in your Assets folder with any name as long as it has the file extension .jslib

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);