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

效果演示
- Unity中
- 网页中
实现过程（以Unity2018.4.2f1为例）
- 1.创建.jslib文件，文件内容如下：
- 2.修改Camera相机参数
- 3.打包。
- 4.修改Build文件夹下的json文件
- 5.打开index.html查看效果即可
PostProcess后处理
色彩空间-Gamma与 Linear
Unity2020打包后修改
粒子消失问题
最后

效果演示

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

Unity WebGL网页背景透明化（2021更新）相关推荐

Unity 制作签名背景透明化效果，抠字效果
不知道公司是不是和我杠上了,进公司做的第一个项目是拍照,后面连续几个都有拍照功能,而且设计方案上还多加了签名的功能. https://blog.csdn.net/weixin_37608784/art ...
Unity WebGL打包网页端运行显示Not allowed to access uv4 on mesh
项目场景:Unity WebGl网页连接后台服务器提示:这里简述项目相关背景: 该项目实现的是Unity Web端联网后台读取数据主要功能问题描述提示:这里描述项目中遇到的问题: 在该项目中在U ...
Unity WebGL/WebPlayer与html通信对比，在html添加网页端按钮直接测试
Unity WebPlayer与html通信,在html添加网页端按钮直接测试由于现在各大浏览器的升级,UnityWebPlayer的网页方式逐渐被摒弃掉,但是很多老项目或者追求稳定的开发者还在选择 ...
Unity Webgl内嵌网页页面
Unity Webgl端有时候会有这样一个需求,在Unity界面上内嵌一个网页,并且可以在界面上把这个网页关掉(不是重新打开新的标签页) 效果如下: 现在来实现这个功能: 1.在Assets文件夹下新 ...
Unity发布WebGL注意事项以及移动端打开webgl网页
Unity发布WebGL网页端 Unity发布webGL项目时存在很多的易错点,这些错误点没有统一的规律,因为是跨平台开发,开发过程中需要去解决未知的和已知的报错点,下面就我这两年开发WebGL遇到的 ...
6个网页背景特效源码 canvas+three.js科技贴图 webgl源码
隧道穿梭特效粒子矩阵特效几何随机变换特效下载地址: 6个网页背景特效源码 canvas+three.js科技贴图 webgl源码-素材美
Unity发布WebGL网页版
开始WebGL开发什么是 Unity WebGL?** WebGL工程选项允许Unity以JavaScript程序形式发布使用HTMl5技术和WebGL渲染API.在网页浏览器中运行的Unity内容 ...
unity webgl自适应网页尺寸
我使用的是unity 2019.4 LTS版一共有两步 1 在Index.html中修改 <!DOCTYPE html> <html lang="en-us"& ...
Unity WebGL错误集锦
ips: 0 Unity的PlayerSettings的otherSettings或者Publish Settings里面的Enable Exceptions里面选择Full StackTrace , ...

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

目录