Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

WebGL with transparency on the cavas

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


Who else wants transparency for the webGL Canvas?

  1. I just KNOW I will never use it

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

    58 vote(s)
  1. webster


    Jun 8, 2013
    This is a follow up to this post for which I have insufficient privileges to reply to:

    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: 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


    Feb 13, 2015
    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


    Apr 1, 2013
    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

    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


    May 21, 2017
    Worked with me, thanks mgmhunt
  5. chitzui


    Oct 13, 2017
    @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:
    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
    HyunMok_Moon, Stardog and mgmhunt like this.
  6. mgmhunt


    Apr 1, 2013
    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


    Jul 13, 2017
    Hi Guys, my UI images having opaque when I set background color to transparent , anyone know this issue , please helpppp!!
  8. bblakesley01


    May 11, 2018
    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.
  9. Joel123341


    Sep 5, 2019
    @chitzui Thanks for your research and dig helps a lot!