1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Unity WebGL背景透明化(画布透明) 显示Html网页背景

Unity WebGL背景透明化(画布透明) 显示Html网页背景

时间:2023-10-17 08:51:06

相关推荐

Unity WebGL背景透明化(画布透明) 显示Html网页背景

实现效果演示

unity中:

网页中:

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文件夹下任意位置,

文件链接: /s/1j8LFBHwbPCDhgIzOBOr0Ww 密码:6f7l

2.修改Camera相机参数

修改Clear Flags 为Solid Color

Background 中 Alpha值为0。

3.打包。

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

更新:打包设置中的ColorSpace 需要设置为Gamma。

若设置成Linear,透明无效。

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,颜色会异常,因为背景颜色透明后,是根据html颜色来判定的。

说明:本项目使用的Unity版本为.4.2f1。

.jslib文件链接:/s/1j8LFBHwbPCDhgIzOBOr0Ww 密码:6f7l

项目和Demo链接:/download/boyZhenGui/12330739

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

如果对你有帮助,可以给我点个赞,收藏一下,谢谢。

参考资料:

/hc/en-us/articles/208892946-How-can-I-make-the-canvas-transparent-on-WebGL-?_ga=2.179246048.597631836.1586496094-324193956.1586496094

/threads/webgl-transparent-background.284699/?_ga=2.210898705.524976980.1586484471-1016004096.1586484471

主要是这篇帖子中chitzui的回答,不过经测试,并不需要修改打包参数,也可以完成背景透明化。

/threads/webgl-with-transparency-on-the-cavas.327425/?_ga=2.34395042.2038369983.1586999210-215010673.1586999210

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。