Unity2021发布WebGL背景透明方法

原创

已于 2024-10-15 14:32:33 修改 · 2.9k 阅读

标签

#unity #webgl

于 2021-11-01 11:56:00 首次发布

本文介绍如何在Unity项目中实现WebGL构建的透明背景效果。主要步骤包括：在Assets/Plugins目录下创建.jslib文件并编写特定JavaScript代码；调整摄像机参数以支持透明背景；以及修改发布的.html文件中canvas元素的背景属性。

首先是需要在工程的Asset目录里面建一个Plugins文件夹，然后在文件夹里面创建一个.txt文件，名字倒是无所谓，创建好后要把扩展名改成.jslib。文件必须要如下内容：

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

这个LibraryGLClear对象里面包含了一个glClear方法，这是让网页产生透明结果必须提供的一个方法，这个方法应该是Unity渲染过程中调用的方法。如果有必要，我们也可以在LibraryGLClear对象里面添加更多的方法，不过这不在本文讨论范围内。

其次是摄像机参数修改，要禁用摄像机的PostProcessing，摄像机的Clear Flags 应该设置为Solid Color，当然了，既然要背景透明，那么Background 颜色中的透明通道 Alpha应设置为0,最后是需要禁用摄像机的HDR。参考下图：