Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice
  3. Join us on November 16th, 2023, between 1 pm and 9 pm CET for Ask the Experts Online on Discord and on Unity Discussions.
    Dismiss Notice

WebGL alpha blending when not clearing the screen

Discussion in 'WebGL' started by crushforth, Feb 8, 2016.

  1. crushforth

    crushforth

    Joined:
    Jul 22, 2010
    Posts:
    113
    We have a fairly unique situation where because of a chromebook driver bug we have to disable clearing the color buffer because if creates large amounts of screen flickering. Discussed somewhat in this thread:

    http://forum.unity3d.com/threads/webgl-flickering-screen-on-chromebook.382590/

    However once you stop clearing the color buffer it affects how blending works with all transparent object, seems the more transparent they are the brighter they become.

    I've tried only clearing the alpha channel with the following code but this seems to clear all channels.

    Code (csharp):
    1.  
    2. GLctx.colorMask(false, false, false, true);
    3. GLctx.clearColor(0, 0, 0, 1);
    4. GLctx.clear(0x00004000);
    5. GLctx.colorMask(true, true, true, true);
    6.  
    Does anyone have any suggestions on how we can not clear the color buffer and still have blending working correctly?

    The following screenshots are an empty project with a black transparent cylinder, with glClear commented out the cylinder appears light gray.

    Screen Shot 2016-02-08 at 8.52.45 AM.png Screen Shot 2016-02-08 at 8.53.17 AM.png
     
  2. crushforth

    crushforth

    Joined:
    Jul 22, 2010
    Posts:
    113
    In case anyone else find themselves in a similar situation and need to disable screen clearing in WebGL for whatever reason. You can achieve the correct blending by playing around with he following gl context attributes in your javascript.

    Code (csharp):
    1.  
    2.       contextAttributes.alpha = false; /*!!HEAP32[((attributes)>>2)];*/
    3.       contextAttributes.preserveDrawingBuffer = true;/*!!HEAP32[(((attributes)+(20))>>2)];*/
    4.  
    You'll need to decompress the .jsgz file, patch it to how ever you require and then re compress it