Transparent WebGL Rendering

transparentbg-unity-webgl.jslib

// Source: http://forum.unity3d.com/threads/webgl-transparent-background.284699/#post-1880667
// Clears the WebGL context alpha so you can have a transparent Unity canvas above DOM content
// Add this .jslib to your project et voila!
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);

In your project... You mean in your unity root project ? in the Asset folder ? next the Unity Build ? : s

@VgQD place it in /Assets/Plugins/WebGL

is there a way to this after building it. I have multiple projects where I want transparent background. So is it possible I do it from javascript at the server side? So that I don't have to worry about the jslib file for each project.

For people working with these keep in mind a few things else you need to do:

1. Set your camera clear flags to depth only
2. Add custom css to set #unity-canvas css background to transparent.

I don't have any problems with this system and unity <= 2019, but if I try this workflow with unity 2020 It just doesn't work, anyone figured it out.

I can't make this work using Unity 2020 in URP as there is no clear flags for camera. any solutions?

I only got it to work with the built in render pipeline. See https://docs.unity3d.com/Manual/class-Camera.html