Search Unity

WebGL with transparency on the cavas

Discussion in 'WebGL' started by webster, May 21, 2015.

?

Who else wants transparency for the webGL Canvas?

  1. I just KNOW I will never use it

    1 vote(s)
    4.5%
  2. I can see it in my immediate needs or coming soon

    21 vote(s)
    95.5%
  1. webster

    webster

    Joined:
    Jun 8, 2013
    Posts:
    11
    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?
     
    Last edited: May 21, 2015
  2. MartijnDekker

    MartijnDekker

    Joined:
    Feb 13, 2015
    Posts:
    8
    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 ?
     
  3. mgmhunt

    mgmhunt

    Joined:
    Apr 1, 2013
    Posts:
    51
    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.
     
    Last edited: May 3, 2017
    efge and mahdie like this.
  4. mahdie

    mahdie

    Joined:
    May 21, 2017
    Posts:
    3
    Worked with me, thanks mgmhunt
     
  5. chitzui

    chitzui

    Joined:
    Oct 13, 2017
    Posts:
    6
    @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.
     
    Last edited: Feb 13, 2018
    Stardog and mgmhunt like this.
  6. mgmhunt

    mgmhunt

    Joined:
    Apr 1, 2013
    Posts:
    51
    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.
     
    Last edited: Feb 28, 2018
  7. ttrungct12

    ttrungct12

    Joined:
    Jul 13, 2017
    Posts:
    1
    Hi Guys, my UI images having opaque when I set background color to transparent , anyone know this issue , please helpppp!!
    upload_2018-9-13_12-9-45.png
     
  8. bblakesley01

    bblakesley01

    Joined:
    May 11, 2018
    Posts:
    1
    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.