unity发布WebGL相关
替换自己的WebGL模板
- Assets文件夹下创建WebGLTemplates文件夹
- 在该文件夹下创建自己的模板文件夹(多个模板就创建多个文件夹)
在projectsetting中可以看到自己创建的模板，打包时勾选对应模板即可
自定义模板相关
官方文档
注意模板内的html部分路径是根据打包生成的，如果写死会造成打不开，用相对于的js宏更改，打包后可自动替换。
我看20版本的宏变成了三个花括号的了
记录下老版的：
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>%UNITY_WEB_NAME%</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {
onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 1920px; height: 1080px"></div>
<!-- <div class="footer"> -->
<!-- <div class="webgl-logo"></div> -->
<!-- <div class="fullscreen" οnclick="unityInstance.SetFullscreen(1)"></div> -->
<!-- <div class="title">WebGL_Output</div> -->
<!-- </div> -->
</div>
</body>
</html>
JS调用unity函数
简便方式：
unity准备
- 在unity场景里最上层新建一个空物体"newGameObject"
- 在该物体上挂载脚本"CallFuncScript"
- 在脚本中写public函数"MyFunc1"，例如：注意函数参数目前好像只能有一个，多个会调用失败。所以下边是解析字符串来获取参数了。
public void ScrollByAngle(string cmd)//也可以是float，int等
{
string[] spl = cmd.Split('/');
float angle;
float time;
float.TryParse(spl[0], out angle);
float.TryParse(spl[1], out time);
//obj.Rotate();
if (dotww != null)
{
dotww.Complete();
}
Vector3 euler = obj.localRotation.eulerAngles;
euler.z += angle;
dotww = obj.DOLocalRotate(Quaternion.Euler(euler).eulerAngles, time);
}
js调用
以默认模板为例：
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/test_1.json", {
onProgress: UnityProgress});
</script>
实例命名为unityInstance
调用方式：注意和unity端命名对应一下
unityInstance.SendMessage("newGameObject", "MyFunc1", "90/2");
发布的WebGL背景透明
注意：
透明后不能使用后处理效果，异常
方式
- 创建txt文件
- 输入：
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);
- 将后缀txt修改为jslib
- 将该文件拖入项目的Assets文件夹下的Plugins文件夹中(没有就创建一个)
- 相机设置：相机模式设置成纯色(solid color)，背景色透明度设置0
- 打包
- 打包后的html中将unity的canvas的background 设置为transparent
模型面闪烁：
- 检查两个面距离
- 模型的材质投射和接收阴影选项更改(关闭或者其他选项尝试)
- 增加抗锯齿级别
资料：
webgl完全开发指南