Unity WebGL网页背景透明化（2021更新）

最新推荐文章于 2024-05-24 13:37:19 发布

真鬼123

最新推荐文章于 2024-05-24 13:37:19 发布

阅读量3.1k

点赞数 12

分类专栏： UnityWebGl Unity 文章标签： unity webgl unity3d 游戏开发游戏引擎

本文链接：https://blog.csdn.net/boyZhenGui/article/details/120292856

版权

Unity 同时被 2 个专栏收录

63 篇文章 13 订阅

订阅专栏

UnityWebGl

13 篇文章 4 订阅

订阅专栏

针对上一篇文章Unity网页透明化，做进一步补充完善。

效果演示

Unity中

在这里插入图片描述

网页中

在这里插入图片描述

实现过程（以Unity2018.4.2f1为例）

1.创建.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);

注意 Mac系统中，文本文档编码问题，可能会导致修改后缀之后乱码。
命名随意，放在Asset文件夹下任意位置，
在这里插入图片描述
文件链接: https://pan.baidu.com/s/1j8LFBHwbPCDhgIzOBOr0Ww 密码:6f7l

2.修改Camera相机参数

修改Clear Flags 为Solid Color

在这里插入图片描述
Background 中 Alpha值为0。

3.打包。

经测试，并不需要修改打包设置，默认即可。

4.修改Build文件夹下的json文件

在这里插入图片描述
将 “backgroundColor”: 的参数修改为"transparent",

完整代码

{
"companyName": "DefaultCompany",
"productName": "NewTM",
"dataUrl": "newtm.data.unityweb",
"wasmCodeUrl": "newtm.wasm.code.unityweb",
"wasmFrameworkUrl": "newtm.wasm.framework.unityweb",
"TOTAL_MEMORY": 268435456,
"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundColor": "transparent",	
"cacheControl": {"default": "must-revalidate"}
}

5.打开index.html查看效果即可

在这里插入图片描述

PostProcess后处理

若用相机后处理插件PostProcess，颜色会异常，因为背景颜色透明后，是根据html颜色来判定Bloom的。

色彩空间-Gamma与 Linear

在Unity2018中，需将打包设置中的ColorSpace设置为Gamma空间，若设置为Linear空间，则透明无效。

在Unity2020中，使用LInear也可以透明化背景。

Unity2020打包后修改

Unity2020打包后的网页结构和2018区别很大，没有json文件了。

需要将html文件中的

<canvas id="unity-canvas" width=1920 height=1080 ></canvas>

修改为

<canvas id="unity-canvas" width=1920 height=1080 style="width: 1920px; height: 1080px; background: transparent"></canvas>

粒子消失问题

粒子不要用默认的材质，自定义一个材质就可以了。

最后

项目和Demo链接：https://download.csdn.net/download/boyZhenGui/12330739

积分不够的朋友可以私信我。

如果对你有帮助，可以收藏一下。顺手给我点个赞就更好啦，谢谢。

参考资料：
https://support.unity3d.com/hc/en-us/articles/208892946-How-can-I-make-the-canvas-transparent-on-WebGL-?_ga=2.179246048.597631836.1586496094-324193956.1586496094

https://forum.unity.com/threads/webgl-transparent-background.284699/?_ga=2.210898705.524976980.1586484471-1016004096.1586484471

主要是这篇帖子中chitzui的回答，不过经测试，并不需要修改打包参数，也可以完成背景透明化。
https://forum.unity.com/threads/webgl-with-transparency-on-the-cavas.327425/?_ga=2.34395042.2038369983.1586999210-215010673.1586999210