Skip to content

Instantly share code, notes, and snippets.

@thelucre
Last active August 11, 2023 07:44
Show Gist options
  • Save thelucre/da56a5b22740eeb4116f to your computer and use it in GitHub Desktop.
Save thelucre/da56a5b22740eeb4116f to your computer and use it in GitHub Desktop.
Transparent WebGL Rendering
// 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);
@wywarren
Copy link

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.

@fabriziospadaro
Copy link

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.

@omid3098
Copy link

omid3098 commented Feb 11, 2022

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

@Kottakji
Copy link

Kottakji commented Nov 2, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment