Search Unity

How Can I Make The Canvas Transparent On WebGL?

Discussion in 'Web' started by TechnicalArtist, Feb 19, 2020.

  1. TechnicalArtist

    TechnicalArtist

    Joined:
    Jul 9, 2012
    Posts:
    736
    Last edited: Feb 19, 2020
  2. TechnicalArtist

    TechnicalArtist

    Joined:
    Jul 9, 2012
    Posts:
    736
  3. microtech2

    microtech2

    Joined:
    Jul 16, 2020
    Posts:
    1
    I just did it with success:

    1- Camera clear flags set to Depth Only
    2- Create a file named TransparentBackground.jslib with following code inside and place it in root|assets folder:

    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);

    3- Build
    4- Edit the .json file (in Build folder) and set the "backgroundColor" to "transparent"
    5- Success
     
    DerrickBarra and gtk2k like this.
  4. qoobit

    qoobit

    Joined:
    Aug 19, 2014
    Posts:
    51
    An additional step is actually required. After the index.html is generated, you need to write custom css to make the canvas itself actually transparent.


    #unity-canvas{
    background: transparent !important;
    }
     
    dnnkeeper likes this.
  5. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    544
    There is no .json file in the build folder. Not on Unity 2020.1 at least.
     
    Thaina and AdamBourke like this.
  6. od3098

    od3098

    Joined:
    Apr 29, 2015
    Posts:
    56
    Can't make this work in Unity 2020 and URP as there are no Clear flags for camera. any solutions?
     
  7. HyunMok_Moon

    HyunMok_Moon

    Joined:
    Oct 14, 2016
    Posts:
    24
    Hello,

    I set camera Clear flag with Depth only.
    I put TransparentBackground.jslib in asset/plugin folder.
    I set backgroundColor to transparent at json file.
    I add canvas transparent at style.css.

    But only black background color when build and test.
    at Unity 2018.3

    Thank you.

    -------------------------

    I found a solution.
    Camera clear flog, solid color with black (0,0,0,0) alpha 0
    I need TransparentBackground.jslib for GLClear.
    I change backgroundColor to transparent in json.

    When I change color space to **gamma**, then transparent background is working.
    But I don't know this color space and GL clear relation.

    There is about PlayerSetting is here. When I change to Auto Graphic API, There is warning about color space linear. So I change to gamma.
    https://forum.unity.com/threads/web...42.2038369983.1586999210-215010673.1586999210
     
    Last edited: Mar 30, 2022
    daogework and Thaina like this.
  8. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    1,161
    OK, all of these seem to work only in legacy and seem to not work in URP (it should be but I cannot as of yet)

    It seem in URP they don't use `glClear` anymore so even it merged it was not being called as in legacy
     
  9. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    1,161
    Highly apologize to bother you but @jonas-echterhoff are there anyway we can get this work in URP ?
     
  10. brendanduncan_u3d

    brendanduncan_u3d

    Unity Technologies

    Joined:
    Jul 30, 2019
    Posts:
    434
    I made a really simple WebXR test project that does transparent rendering onto the back-buffer, in this case for rendering onto the Augmented Reality camera frame. I believe it was working with URP. This is unsupported, I won't be maintaining it, but in case it's helpful: https://github.com/brendan-duncan/unity_webar_demo

    Specifically in https://github.com/brendan-duncan/unity_webar_demo/blob/main/Assets/Plugins/WebGL/webar.jspre
    It overrides GLctx.bindFramebuffer to detect when Unity is drawing to the canvas/back-buffer.
    It overrides GLctx.colorMask and detect if it's going to be clearing the alpha for the back-buffer.
    It overrides GLctx.clear and skip the clear if it was clearing the alpha for the back-buffer.
    It overrides GL.createContext to make sure "preserveDrawingBuffer" is true when creating the WebGL context.
    It overrides window.requestAnimationFrame to keep track of what the last framebuffer bound for the frame was.

    At some point I will be looking into providing a proper transparent canvas rendering mode. These is just a suggestion for a possible workaround in the meantime.
     
    Thaina likes this.
  11. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    1,161
    Thank you very much and very appreciate the work on this feature. And yes, I really need to do exactly this currently now so thanks again for the working project

    Is this also working in safari ios?

    edit: This seem to not work in safari ios because it was rely on webxr. While what I need is just AR image detection from device camera and draw the stream as background, which should be able to do even without immersive mode

    I am trying to hack that repo but it would be great if unity would also provide us that mode too. ios seem not to care much about webxr and it was forcing other browser to use it
     
    Last edited: Apr 23, 2022
  12. brendanduncan_u3d

    brendanduncan_u3d

    Unity Technologies

    Joined:
    Jul 30, 2019
    Posts:
    434
    While Apple doesn't provide any information about unreleased products, there are a lot of indications that Safari will implement WebXR in the "near" future.
     
  13. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    1,161
    By my investigation and speculation the `near` of ios not seem to happen in this year. They even put it on experimental but even enabled it that was still not support any immersive mode (maybe inline mode possible? not sure and just planning to try today). And also even there was enable experimental, other browser like chrome are not allow to utilize it even they need to rely on safari underlyingly

    Which indicate that they really put not much thought in their mind, as always, apple never on their right mind, like webpush
     
    Last edited: Apr 24, 2022
    brendanduncan_u3d likes this.
  14. Seto

    Seto

    Joined:
    Oct 10, 2010
    Posts:
    243
    I tried your method. It's working without URP. It's not working with URP.
     
  15. Seto

    Seto

    Joined:
    Oct 10, 2010
    Posts:
    243
  16. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    1,161
    Maybe because there is Volume something object in the scene? Any thing that make screen space effect most likely mess with clear mask

    I would like to suggest trying the samplescene in that repo instead
     
  17. Seto

    Seto

    Joined:
    Oct 10, 2010
    Posts:
    243
    The SampleScene in that repo is not URP.
    And I find out the problem.
    • HDR
    • Post Processing
    To make it support transparent, I have to disable HDR. Because the HDR format for URP seems to be B10G11R11 always. There's no way to modify now. Maybe it will be solved after this is merged to the main branch. https://github.com/Unity-Technologies/Graphics/pull/6728
    And also, I have to disable Post Processing even after disable the HDR. Maybe the uber post processing fill the alpha always 1.
    upload_2022-4-25_12-23-57.png
     
    Last edited: Apr 25, 2022
    colin-defais and Thaina like this.
  18. Marks4

    Marks4

    Joined:
    Feb 25, 2018
    Posts:
    544
    Just import this package. You should have transparent background on Unity 2019 and higher. No need to have a custom template to change the canvas' background, this can be done on a jspre file.
     

    Attached Files:

    daogework likes this.
  19. daogework

    daogework

    Joined:
    Jul 17, 2020
    Posts:
    3
    I tried your solution and found just need
    TransparentBackground.jslib
    Camera solid color with alpha 0
    css background: transparent

    All has nothing to do with Graphic API
     
    gareth_untether and Regone like this.
  20. C0lonnello

    C0lonnello

    Joined:
    Nov 7, 2022
    Posts:
    30
    Hi! I managed to implement a transparent background with URP, but i need to understand something else.

    Using this method, it seems that my clicks pass through the canvas and propagate to the html page that lies behind the unity canvas; while it is really comfortable to have, I'd like to know if there is a way to disable it and so to NOT propagate clicks in the document behind the canvas
     
  21. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    1,161
    Is it possible to just draw another invisible panel behind canvas with html?

    style display: block; visible: false; something like this
     
  22. gareth_untether

    gareth_untether

    Joined:
    Jan 5, 2018
    Posts:
    69
    This works for me with URP. Very simple!
     
  23. wuxiaojing

    wuxiaojing

    Joined:
    Jan 6, 2017
    Posts:
    1
    I tried,but need disable hdr