koobas.hobune.stream
Embed webGL in webpage with transparent background
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/$$anonymous$$anual/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.
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);
$$anonymous$$ost shaders should work except some special shaders which require screen alpha values.
I haven't been able to get this to work. I thought maybe it was a shader issue but after some experimenting it doesn't appear to be. I'm not sure what my next step should be.
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 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
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.
The unity knowledge base contains a solution, including how to set up the shaders. https://support.unity3d.com/hc/en-us/articles/208892946-How-can-I-make-the-canvas-transparent-on-WebGL-
