Unity WebGL 应用开发总结(unity webapi)
haoteby 2025-07-10 14:55 29 浏览
Unity WebGL 应用开发总结
1.开发环境
软件 | 版本 | |
Unity | 2020.1.0f1 | |
PyCharm | 2022.3.2 | |
Python | 3.7.3 |
2.编译WebGL
对 Unity 项目进行 WebGL 编译时,经常会出现如下问题:
1.Unable to parse Build/web.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header “Content-Encoding: gzip” present. Check browser Console and Devtools Network tab to debug. 此时,通过 Build Settings -> PlayerSettings -> Publishing Settings 中勾选 Decompression Fallback(解压缩回退)。
2.Unable to parse
Build/acWeb.framework.js.unityweb! The file is corrupt, or compression was misconfigured? (check Content-Encoding HTTP Response Header on web server) 此时,在 Build Settings -> PlayerSettings -> Other Settings -> Rendering
- 将Color Space 设置为Gamma
- 将Lightmap Encoding 设置为NormalQuality
然后重新构建即可。
3.获取 URL 请求参数
在项目的 Assets 文件夹下创建 Plugins\WebGL 目录,在 WebGL 目录下新建一个文本文件 xxx.jslib(如:QYPlugin.jslib),并在文件中编写函数如下:
var QYPlugin = {
FindURLParameter : function()
{
var parameters = window.location.search;
var bufferSize = lengthBytesUTF8(parameters) + 1;
var buffer = _malloc(bufferSize);
stringToUTF8(parameters, buffer, bufferSize);
return buffer;
}
};
mergeInto(LibraryManager.library, QYPlugin);
其中的方法不要写错,否则会导致 unity 打包不成功的问题出现。
然后,在 C# 脚本中通过如下方式来调用:
1.在脚本中添加引用
using UnityEngine;
using System.Runtime.InteropServices;
2.引用
#if !UNITY_EDITOR&&UNITY_WEBGL
[DllImport("__Internal")]
private static extern string FindURLParameter();
#endif
3.在需要的位置调用方法
#if !UNITY_EDITOR&&UNITY_WEBGL
string urlParameter = FindURLParameter();
Globals.SessionId = urlParameter.Substring(1);
#endif
4.网络请求
对于 Unity' WebGL 应用,网络请求目前不支持 Socket 和 WebSocket,只支持 HTTP 请求方式,所以在一般情况下,后台采用 RestAPI 提供接口,Unity WebGL 通过 HTTP 方式连接到网络来执行网络请求并获取数据。
对于 Unity 的 HTTP 请求,支持三种方式:
- WWW(基于协程,不适用于线程)
- UnityWebRequest(基于协程,不适用于线程)
- HttpWebRequest(C#原生的HttpWebRequest,同步接口,阻塞等待结果返回,适用于线程)
对于 WWW 目前官方已经不支持,其余两种方式在 WebGL 中只能使用 UnityWebRequest。
对 UnityWebRequest 请求的封装代码如下:
using System;
using System.Collections;
using System.Collections.Generic;
using System.Text;
using UnityEngine;
using UnityEngine.Networking;
using LitJson;
using UnityEngine.SceneManagement;
public class QYHttp : MonoBehaviour
{
private static QYHttp _instance;
public static QYHttp instance
{
get
{
if (_instance == null)
{
GameObject go = new GameObject("QYHttp");
_instance = go.AddComponent<QYHttp>();
}
return _instance;
}
}
public void PostFormRequest(string url, WWWForm form=null, Action<bool, string> callBack = null)
{
StartCoroutine(_PostForm(url, form, callBack));
}
private IEnumerator _PostForm(string url, WWWForm form=null, Action<bool, string> callBack = null)
{
if (form == null)
{
form = new WWWForm();
form.AddField("tmp", "tmp");
}
UnityWebRequest request = UnityWebRequest.Post(url, form);
request.SetRequestHeader("content-type", "application/x-www-form-urlencoded");
request.downloadHandler = new DownloadHandlerBuffer();
yield return request.SendWebRequest();
string responseStr = "";
if (request.isNetworkError || request.isHttpError)
{
responseStr = request.error;
}
else
{
responseStr = request.downloadHandler.text;
}
if (callBack != null)
{
callBack(request.isNetworkError || request.isHttpError, responseStr);
}
}
public void PostAuthRequest(string url, JsonData data, Action<bool, string> callBack = null)
{
StartCoroutine(_PostAuth(url, data, callBack));
}
private IEnumerator _PostAuth(string url, JsonData data, Action<bool, string> callBack = null)
{
if (data == null)
{
data = new JsonData();
data["tmp"] = "tmp";
}
data["authorization"] = Globals.TokenType + " " + Globals.AccessToken;
string jsonstring = JsonMapper.ToJson(data);
string ciphertext = QYEncrypt.AESEncryString(jsonstring);
JsonData jsonData = new JsonData();
jsonData["value"] = ciphertext;
jsonData["size"] = jsonstring.Length;
byte[] bytes = Encoding.UTF8.GetBytes(JsonMapper.ToJson(jsonData));
UnityWebRequest request = new UnityWebRequest(url, "POST");
request.uploadHandler = new UploadHandlerRaw(bytes);
request.SetRequestHeader("Content-Type", "application/json;charset=utf-8");
request.downloadHandler = new DownloadHandlerBuffer();
yield return request.SendWebRequest();
if (request.responseCode == 401) SceneManager.LoadScene("Scenes/ErrorScene");
string responseStr = "";
if (request.isNetworkError || request.isHttpError)
{
responseStr = request.error;
}
else
{
responseStr = request.downloadHandler.text;
}
if (callBack != null)
{
callBack(request.isNetworkError || request.isHttpError, responseStr);
}
}
}
以上代码封装的是两个 Post 方法,其中 PostFormRequest 是以表单数据为参数提交请求,PostAuthRequest 是携带请求令牌以 Json 数据为参数提交请求。
在携带请求令牌时没有使用 http Headers 的原因是:经过测试,通过 UnityWebRequest 的 SetRequestHeader 方法携带令牌在请求时不稳定,在服务端有时会出现获取不到令牌的情况。
所以,在封装 PostAuthRequest 方法时,使用了如下代码:
data["authorization"] = Globals.TokenType + " " + Globals.AccessToken;
string jsonstring = JsonMapper.ToJson(data);
string ciphertext = QYEncrypt.AESEncryString(jsonstring);
JsonData jsonData = new JsonData();
jsonData["value"] = ciphertext;
jsonData["size"] = jsonstring.Length;
将 authorization 参数直接写到 Json 格式的数据中,然后对 Json 字符串数据进行加密,加密后提交的数据只有两个字段:
- value:加密后的字符串
- size:原始字符串长度
5.数据传输
由于携带令牌出现了不稳定数据传输的情况,所以,我们将令牌与请求体合并通过 Json 格式进行数据传输,鉴于此,数据传输需要加密,加密采用的是 AES 算法,加密代码如下:
using System;
using System.IO;
using System.Security.Cryptography;
using System.Text;
using UnityEngine;
public class QYEncrypt
{
private static string AesKey = "****************"; // 可以是16/24/32位
public static string AESEncryString(string text)
{
byte[] bytes = Encoding.UTF8.GetBytes(text);
RijndaelManaged rijndael = new RijndaelManaged();
rijndael.Key = Encoding.UTF8.GetBytes(AesKey);
// rijndael.IV = Encoding.UTF8.GetBytes(AesIv);
rijndael.Mode = CipherMode.ECB;
rijndael.Padding = PaddingMode.PKCS7;
ICryptoTransform cryptoTransform = rijndael.CreateEncryptor();
byte[] resultBytes = cryptoTransform.TransformFinalBlock(bytes, 0, bytes.Length);
string AesStr = Convert.ToBase64String(resultBytes);
return AesStr;
}
public static string AESDecryString(string text)
{
byte[] bytes = Convert.FromBase64String(text);
RijndaelManaged rijndael = new RijndaelManaged();
rijndael.Key = Encoding.UTF8.GetBytes(AesKey);
// rijndael.IV = Encoding.UTF8.GetBytes(AesIv);
rijndael.Mode = CipherMode.ECB;
rijndael.Padding = PaddingMode.PKCS7;
ICryptoTransform cryptoTransform = rijndael.CreateDecryptor();
byte[] resultBytes = cryptoTransform.TransformFinalBlock(bytes, 0, bytes.Length);
string AesStr = Encoding.UTF8.GetString(resultBytes);
return AesStr;
}
}
后端采用 Python 的 FastApi 实现 RestAPI ,后端的解密算法如下:
# coding: utf-8
import base64
from Crypto.Cipher import AES
AesKey = "*****************"; #可以是16/24/32位
def pkcs7padding(text):
"""明文使用PKCS7填充"""
need_size = 16
text_length = len(text)
bytes_length = len(text.encode('utf-8'))
padding_size = text_length if (bytes_length == text_length) else bytes_length
padding = need_size - padding_size % need_size
padding_text = chr(padding) * padding
return text + padding_text
def AESEncryString(text=None):
text = pkcs7padding(text)
aes = AES.new(key=AesKey.encode("utf-8"), mode=AES.MODE_ECB)
en_text = aes.encrypt(text.encode('utf-8'))
result = str(base64.b64encode(en_text), encoding='utf-8')
return result
def AESDecryString(ciphertext=None):
aes = AES.new(key=AesKey.encode('utf-8'), mode=AES.MODE_ECB)
if len(ciphertext) % 3 == 1:
ciphertext += "=="
elif len(ciphertext) % 3 == 2:
ciphertext += "="
content = base64.b64decode(ciphertext)
text = aes.decrypt(content).decode('utf-8')
return text
if __name__ == '__main__':
res = AESEncryString(text="hello,呼和浩特")
print("加密后的密文是:",res)
res = AESDecryString(ciphertext=res)
print("密文解密后的明文是:",res)
后端令牌校验算法:
# Token校验
def verify_token(token: str, user_agent: str):
try:
payload = jwt.decode(token, settings.SECRET_KEY, algorithms=[settings.ALGORITHM])
logger.info(payload)
sub = json.loads(payload['sub'])
if sub['user_agent'] != user_agent:
return False
except Exception as ex:
logger.info(str(ex))
return False
return True
async def authorized(request: Request):
data: dict = await request.json()
value = data.get('value')
size = data.get('size')
if value is None or size is None: return False
plaintext = AESDecryString(value)
print(plaintext)
jsondata: dict = json.loads(plaintext[0:size])
# 若不存在authorization则返回鉴权失败
if not 'authorization' in jsondata.keys():
return False
authorization = jsondata.get('authorization')
logger.info(authorization)
# 若authorization类型不是Bearer则返回鉴权失败
if not authorization.startswith('Bearer'):
return False
token = authorization[7:]
logger.info(token)
# 若令牌校验失败则返回鉴权失败
logger.info(request.headers['user-agent'])
if not verify_token(token, request.headers['user-agent']):
return False
return True
RestAPI 对应的业务代码中,需要在每次请求时对令牌进行校验,而不是在中间件中进行校验,其代码类似于:
@router.post(path='/save_all_devices')
async def save_all_devices(request: Request, value: str = Body(..., embed=True), size: int = Body(..., embed=True)):
if (not await authorized(request)): raise HTTPException(status_code=401)
FastApi 跨域需要在主程序中增加代码如下:
app.add_middleware(
CORSMiddleware,
allow_origins=['*'],
allow_credentials=False,
allow_methods=["*"],
allow_headers=["*"],
)
6.WebGL 页面自适应显示
Unity 项目编译为 WebGL 页面后,如果想要在浏览器中让页面自适应显示,需要对编译后的 html 文件和 css 文件做一些修改。对于 Unity 2020.1.0f1 版本编译后的调整记录如下:
- 生成的 index.html:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | devicefix</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">devicefix</div>
</div>
</div>
<script>
var buildUrl = "Build";
var loaderUrl = buildUrl + "/webgl.loader.js";
var config = {
dataUrl: buildUrl + "/webgl.data.unityweb",
frameworkUrl: buildUrl + "/webgl.framework.js.unityweb",
codeUrl: buildUrl + "/webgl.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "devicefix",
productVersion: "0.1",
};
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "1024px";
canvas.style.height = "768px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
- 生成的 style.css:
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
修改如下:
1.修改 index.html 文件中的如下内容:
<div id="unity-footer">
为
<div id="unity-footer" style="display:none;">
将页面中下面的 logo、应用名称、全屏按钮等隐藏掉。
2.修改 index.html 文件中的如下内容:
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "1024px";
canvas.style.height = "768px";
}
将 else 语句体修改为:
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
3.在 style.css 文件的末尾增加如下代码:
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;}
#unity-canvas {width: 100%; height: 100%;}
#unity-container{width: 100%; height: 100%;}
7.WebGL 无法输入中文
Unity 发布为 WebGL 后,InputField 无法接受中文输入,原因为 Unity 在 WebGL 平台下对 IME 的支持有问题。Unity 与 IME 的官方描述:
解决方法:
使用github包【WebGLInput】,地址:
https://github.com/kou-yeung/WebGLInput
包介绍:
WebGLInput
IME for Unity WebGL ( Support TextMesh Pro from Unity2018.2 )
support “copy and paste”
support "tab" and "shift+tab" change focus to other InputField
support mobile. (Experiment)
DEMO
https://unityroom.com/games/webglinput
How to use
1.download WebGLSupport.unitypackage and import to project
2.add "WebGLInput" Component to InputField GameObject
3.build and run!!
no need to setting anything.
insert \t use tab key instead of changing focus
Add "WEBGLINPUT_TAB" to Scripting Define Symbols.
and check "Enable Tab Text" at WebGLInput.
使用方法:
1、在工程中导入Unity包【WebGLSupport.unitypackage】
2、在需要输入中文的 InputField 组件上挂载脚本【WebGLInput】
8.模型质量不高,锯齿严重
发布项目之前要查看 Unity 的 Quality Settings 是否设置正确,当出现的问题是模型锯齿比较明显时,需要调整 Anti Aliasing 为8倍,默认是2倍;为了发布出来的项目更加适合于 WebGL,将 Level 设置为对应的选项,设置为 Very High 最为适合 WebGL。具体操作步骤:
Edit -> Project Settings -> Quality,设置 Anti Aliasing 为 8x;
在 Quality 设置的顶部 Quality 部分设置,对 Levels 为 WebGL 列的 Default 行选择 Very High;
设置好后 build 即可。
相关推荐
- 一日一技:用Python程序将十进制转换为二进制
-
用Python程序将十进制转换为二进制通过将数字连续除以2并以相反顺序打印其余部分,将十进制数转换为二进制。在下面的程序中,我们将学习使用递归函数将十进制数转换为二进制数,代码如下:...
- 十进制转化成二进制你会吗?#数学思维
-
六年级奥赛起跑线:抽屉原理揭秘。同学们好,我是你们的奥耀老师。今天一起来学习奥赛起跑线第三讲二进制计数法。例一:把十进制五十三化成二进制数是多少?首先十进制就是满十进一,二进制就是满二进一。二进制每个...
- 二进制、十进制、八进制和十六进制,它们之间是如何转换的?
-
在学习进制时总会遇到多种进制转换的时候,学会它们之间的转换方法也是必须的,这里分享一下几种进制之间转换的方法,也分享两个好用的转换工具,使用它们能够大幅度的提升你的办公和学习效率,感兴趣的小伙伴记得点...
- c语言-2进制转10进制_c语言 二进制转十进制
-
#include<stdio.h>intmain(){charch;inta=0;...
- 二进制、八进制、十进制和十六进制数制转换
-
一、数制1、什么是数制数制是计数进位的简称。也就是由低位向高位进位计数的方法。2、常用数制计算机中常用的数制有二进制、八进制、十进制和十六进制。...
- 二进制、十进制、八进制、十六进制间的相互转换函数
-
二进制、十进制、八进制、十六进制间的相互转换函数1、输入任意一个十进制的整数,将其分别转换为二进制、八进制、十六进制。2、程序代码如下:#include<iostream>usingna...
- 二进制、八进制、十进制和十六进制等常用数制及其相互转换
-
从大学开始系统的接触计算机专业,到现在已经过去十几年了,今天整理一下基础的进制转换,希望给还在上高中的表妹一个入门的引导,早日熟悉这个行业。一、二进制、八进制、十进制和十六进制是如何定义的?二进制是B...
- 二进制如何转换成十进制?_二进制如何转换成十进制例子图解
-
随着社会的发展,电器维修由继电器时代逐渐被PLC,变频器,触摸屏等工控时代所替代,特别是plc编程,其数据逻辑往往涉及到数制二进制,那么二进制到底是什么呢?它和十进制又有什么区别和联系呢?下面和朋友们...
- 二进制与十进制的相互转换_二进制和十进制之间转换
-
很多同学在刚开始接触计算机语言的时候,都会了解计算机的世界里面大多都是二进制来表达现实世界的任何事物的。当然现实世界的事务有很多很多,就拿最简单的数字,我们经常看到的数字大多都是十进制的形式,例如:我...
- 十进制如何转换为二进制,二进制如何转换为十进制
-
用十进制除以2,除的断的,商用0表示;除不断的,商用1表示余0时结束假如十进制用X表示,用十进制除以2,即x/2除以2后为整数的(除的断的),商用0表示;除以2除不断的,商用1表示除完后的商0或1...
- 十进制数如何转换为二进制数_十进制数如何转换为二进制数举例说明
-
我们经常听到十进制数和二进制数,电脑中也经常使用二进制数来进行计算,但是很多人却不清楚十进制数和二进制数是怎样进行转换的,下面就来看看,十进制数转换为二进制数的方法。正整数转二进制...
- 二进制转化为十进制,你会做吗?一起来试试吧
-
今天孩子问把二进制表示的110101改写成十进制数怎么做呀?,“二进制”简单来说就是“满二进一”,只用0和1共两个数字表示,同理我们平常接触到的“十进制”是“满十进一”,只用0-9共十个数字表示。如果...
- Mac终于能正常打游戏了!苹果正逐渐淘汰Rosetta转译
-
Mac玩家苦转译久矣!WWDC2025苹果正式宣判Rosetta死刑,原生游戏时代终于杀到。Metal4光追和AI插帧技术直接掀桌,连Steam都连夜扛着ARM架构投诚了。看到《赛博朋克2077》...
- 怎么把视频的声音提出来转为音频?音频提取,11款工具实测搞定
-
想把视频里的声音单独保存为音频文件(MP3/AAC/WAV/FLAC)用于配音、播客、听课或二次剪辑?本文挑出10款常用工具,给出实测可复现的操作步骤、优缺点和场景推荐。1)转换猫mp3转换器(操作门...
- 6个mp4格式转换器测评:转换速度与质量并存!
-
MP4视频格式具有兼容性强、视频画质高清、文件体积较小、支持多种编码等特点,适用于网络媒体传播。如果大家想要将非MP4格式的视频转换成MP4的视频格式的话,可以使用MP4格式转换器更换格式。本文分别从...