Embed webGL in webpage with transparent background

Questions & Answers
1

I’m looking to embed a simple Unity webGL object on my site homepage. I’d like to do it exactly like they’ve done on www.sketchfab.com. Ie the background (loading screen and scene view) is transparent & you can see the hero graphic and text underneath.

Is this possible?

2

Ok, found a working solution, though the Unity people admit it’s a little hacky.

Create a .jslib file in your project with this code. It will clear the alpha on the webGL context. Confirmed working with HTML elements below and above the renderer.

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

Source

3

The unity knowledge base contains a solution, including how to set up the shaders.