Embed webGL in webpage with transparent background

Archived Forums 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?

Haven't tried it yet, but Im guessing this will help: http://docs.unity3d.com/Manual/CustomizingtheUnityWebPlayerloadingscreen.html It's for webplayer though

 –

Also looking for a solution here. I tried to set the context clearColor but that stops the unity draw cycle. There's nothing mentioned about transparency or bg color in the Unity WebGL player docs, either.

 –

Nice, we finally have redirects ^^.

 –

2 Answers

2
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

Do you know what shaders this works with?

 –

Have you actually tried to set the clear color to a color that has 0 as alpha value? How do you actually clear the screen? What clearflags do you use on your camera? According to [this SO post][1] WebGL should support transparency out of the box. You just have to clear with alpha value 0. If that doesn't work from inside Unity you might want to simply set the clear color manually [1]: http://stackoverflow.com/questions/12273858/how-to-make-webgl-canvas-transparent

 –

I can't get this to work on 5.6.1f1 anymore. Has anybody find a workaround?

 –

While I get a transparent background in Chrome, this does not work in Firefox. I get a white background.

 –
3

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