WebGL with transparency on the cavas

This is a follow up to this post for which I have insufficient privileges to reply to: http://forum.unity3d.com/threads/webgl-transparent-background.284699/

I too have this need. Imagine having 3d on a web page without needing a rectangular background around/under it, but it floats over the rest of the web page. Actually this is getting more and more common, and here's one simple example: http://glecollinet.github.io/webgl-demo/ Mouse-over the 3 graphics to see them pop out. Sure THIS one could be done more traditionally, but it's the first thing I found. I've seen people using Three.js to spin cars and meteors and all sorts of things all over their pages.

I want this from Unity. I was thinking setting the Camera to Clear to Solid Color which has 0 for Alpha. Has there been any further discussion, coding, etc on this issue?

 

I also want this but cannot get it to work. i have tried different shaders but none of them seem to work.... ?
Is there anyone who has this working ?

 

I found I had to remove background colour from the .json file (in Build folder), it was overriding the CSS. (I'm viewing through iFrame).

Didn't have to worry about shaders as per

https://support.unity3d.com/hc/en-u...w-can-I-make-the-canvas-transparent-on-WebGL-

Also Camera clear flags set to Depth Only (or Don't Clear but this might get weird).

Solid Color with alpha 0 seemed to have a weird link with background (ie if background was black then canvas was coloured (from camera), but if background was white then canvas went white... have to see it really!). Also alpha of canvas and background seemed to be linked together. Might be useful for some kind of effect.

ie got Player background transparent, using iFrame portal. Generally setting background-color: rgba(255, 255, 255, 0); everywhere.

 

Worked with me, thanks mgmhunt

 

@mgmhunt I have the EXACT same issue as you have this the weird link with background.

1. If I set the alpha to 0 of the background colour:
- works fine in Chrome
- works fine in Opera
- fails in Firefox (I have the weird link with background issue as you described)
- fails in Safari (I have the weird link with background issue as you described)
- fails in Edge (I have the weird link with background issue as you described)

2. If I set the camera to Depth Only:
- works fine in Firefox
- works fine in Safari
- fails fine in Edge (it will not clear old pixels, also the background stays grey)
- fails in Chrome (it will not clear old pixels and sometimes even flash the background like crazy)
- fails in Opera (it will not clear old pixels and sometimes even flash the background like crazy)

As you can see, unfortunately, it always fails in Edge.

- I’m using the latest version of all of the stated browsers.
- I did remove the background colour from the .json file
- I also tried all possible combinations on the "player settings..." in Unity
- I also tried using different background colours and different apha values
- I also tried with iFrame / without iFrame / setting transparent colours to various elements in HTML
- I also tried with and without the script and with the script.

Damn this should not be so complicated since it is supported natively on WebGL & canvas…

So please help me here. Did you get it working cross-browser?
If so what exactly did you do?



@Edit: after almost 36 hours non stop experimenting I finally found the cross browser solution!!!
So what worked for me:

1. Add the transparency script from here: https://gist.github.com/thelucre/da56a5b22740eeb4116f
2. In Unity on your camera set the "Clear Flags" to R: 0, G: 0, B: 0, A: 0 (this is very important, no colours, all black, alpha to 0 !!)
3. Under "Player Settings" > "Other Settings"
- check "Auto Graphics API"
- check "Dynamic Batching"
- Runtime 3.5
- Api .NET 2.0 Subset
- Check all boxes in optimization
- Uncheck all boxes in logging
> "Publishing Settings"
- Enable Exceptions "none"
- check data cashing
- check webassembly (does not matter)
(not sure if any of there is even relevant but that is what I did to get it working)
4. Build
5. In the .json file set the "backgroundColor" to "transparent"
6. Enjoy that it is finally working in all browsers, you don’t even need to use the iframe.

Also, note that this was in Unity 2017.1.1f1 Personal (64bit)

this seems to be very sensible, so I can not guarantee, that it will work tomorrow. But for now, it does, at least.

 

Sorry @chitzui, didn't get notified of this... but didn't do any cross-browser testing, just on Chrome? ... hmm from above Firefox. . Seems like you saved me a lot of future headaches And agree, this should be default Unity export or at least a checkbox.

 

Hi Guys, my UI images having opaque when I set background color to transparent , anyone know this issue , please helpppp!!

 

One caveat seems to be that post processing disables the transparency. I couldn’t get the above working until I disabled the post process on the camera.

 

@chitzui Thanks for your research and dig helps a lot!