Unity的WebGL发布在IIS上并加载资源的若干问题

Posted 2022-12-06 凯尔八阿哥

一、前言

     本此使用的Unity版本位2018.4.26，ISS为win10自带的版本。首先，在使用Unity的Webgl的时候我们就会遇到这几个问题：

1）webgl程序无法直接打开；

如果像Exe程序那样Build之后直接点index.html文件是无法运行的，会在浏览器中弹出如图1提示：显然，我们是不能这样直接打开webgl程序，当然，你可以选择直接BuildandRun，打包完之后会直接在浏览器中运行，可以看到此时运行的webgl程序的网址

图1

网站地址和直接点index.html文件的地址不一样，这个原因我放到后面来讲；

2）IIS部署的问题；

如按照网上的一些有关IIS部署网站的方法，还是无法打开我的webGL应用程序，unity的网站部署有些比较特殊的地方，这个需要注意到才不会出现这样的问题。

3）Assetbundle资源如何部署的问题；

4）通过www类加载服务器上的Assetbundle资源模型加载并显示的问题；

      Assetbundle资源的格式如果为.unity3d的可能会出现加载不到的情况，建议避免使用.unity3d作为Assetbundle的资源文件的打包格式，我测试使用的是.ab的格式。另外，加载完之后的显示也会遇到问题，如打包的资源里有unity自带的模型则可以加载并显示、而我导入的外部资模型则无法显示出来，但是可以加载读取。如果我事先在webgl工程场景中放置好了一个模型则使用WWW类读取服务器的Assetbunddle后可以显示，等等。这些问题都和打包的设置有关。

二、实现

2.1、ISS部署

IIS全称Internet Information Service，中文名：Internet信息服务，专用于微软操作系统平台，兼容微软的各项Web技术，尤其是ASP.NET。

步骤一、开启ISS服务

进入windows系统的控制面板，进入”程序和功能“，如图2所示，然后点击”启用或关闭windows功能“，然后就能看到一下选项，找到Internet Information Services（在Windows 7为Internet信息服务，下同），如图4所示，记住一定要将这个选项里面

图2

图3

 

 

图4

 

图5

所有内容都勾选上才会出现如图4所示的打勾状态，如果只是部分勾选会显示是方块状态。完成之后在浏览器中输入网址”http://localhost“后出现如图5所示的界面则说明IIS开启成功。

步骤二、关闭windows防火墙，并将IIS管理器添加到桌面

如果是本地测试关闭防火墙这一步可以酌情考虑。找到控制面板>管理工具>IIS管理器，如图6所示，右键点击”发送桌面快捷方式"即可，然后在桌面点击打开IIS管理器添加网站。

图6

步骤三、添加网站

在IIS管理器中右键点击“网站”选择“添加网站”，如图7所示。在弹出的框中，选择物理路径也即webGL发布后的index.html文件所在路径。网站名称可以自行任意输入，IP地址默认“全部未分配”，端口改成除80之外的任意的，如8082

图7

完成这一步其实我们就可以在通过添加的网站直接打开webGL程序了， 如图8所示，点击刚创建的网站Test，在操作栏点击“浏览‘网站，就可以在浏览器中打开我们发布的Unity的webGL程序。然而，这一步我们发现打开的网页会提示如图9所示的错误

图8

 

图9

这是还需要在webgl程序的文件夹内添加web.config文件， 新建一个文本文件，然后将文件的名称和后缀一起改为”web.config“，打开配置文件，在里面输入如下内容，，这些文件的作用就是要将unity webGL的一些文件通过后缀进行映射和关联，创建好了

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".mem" />
      <remove fileExtension=".data" />
      <remove fileExtension=".unity3d" />
      <remove fileExtension=".jsbr" />
      <remove fileExtension=".membr" />
      <remove fileExtension=".databr" />
      <remove fileExtension=".unity3dbr" />
      <remove fileExtension=".jsgz" />
      <remove fileExtension=".memgz" />
      <remove fileExtension=".datagz" />
      <remove fileExtension=".unity3dgz" />
      <remove fileExtension=".json" />
      <remove fileExtension=".unityweb" />
 
      <mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".data" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".membr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".databr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
      <mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
      <mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".ab" mimeType="application/octet-stream" />
    </staticContent>
        <directoryBrowse enabled="true" />
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Credentials: " value="true" />
                <add name="Access-Control-Allow-Headers" value="Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time" />
                <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
  </system.webServer>
</configuration>

 web.config文件之后，也可以在IIS管理器上手动添加对应文件的类型。

步骤四、添加MIME类型

如果没有经过上面的添加web.config文件，在IIS管理器中双击MIME类会弹出如图10所示的警告。

图10

经过上面的步骤之后，打开IIS管理器中的MIME类型，可以看到我们在上一步添加的web.config文件里的东西都可以在这里找到，我们在这里手动再添加一个我们即将加载的Assetbundle文件的类型，点击添加，如图11所示

图11

 在弹出的窗口输入文件扩展名未”.db“，MIME类型”application/octet-stream“，这样就嫩保证打包的Assetbundle文件未xxx.ab类型的文件的时可以被服务器识别并提供网络加载服务，这里注意使用".unity3d"的后缀名不太行。

图12

 步骤五、添加HTTP表头

这个表头的文件可以在unity的官方手册中找到WebGL网络，这里也说明了该表头文件的作用，将下列文件逐个添加到IIS管理器中的HTTP表头中，前面的为名称，后面的为值，添加完如图13所示，

"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Origin": "*",

图13

 这样就可以保证在使用WWW或WebRequest类加载资源的时候服务器能响应。

2.2、Assetbundle资源打包

我使用了AssetBundles-Browser插件进行打包，其实只要确保确保打包的资源后缀为前面设置的”.ab“即可。

2.3、webGL程序发布

如果没有架构IIS服务器也可以直接BuildAndRun发布之后直接能在浏览器中运行，只是网址不一样。在代码中不要使用阻止WWW或WebRequest下载的代码，如下所示：

while(!www.isDone) 

阻止WWW或WebRequest下载在Unity WebGL上不起作用。因为WebGL是单线程的，并且因为XMLHttpRequestJavaScript中的类是异步的，所以除非将控制权返回给浏览器，否则下载永远不会完成。相反，您的内容陷入僵局。而是使用协同程序和yield语句来等待下载完成。

发布的时候一定要在Playersetting里设置Script Engine Code不勾选，如图14所示，这个设置的意义就是程序打包发布的时候，没有用到的引擎默认或自带的代码都不会放进去。如果默认勾选上，就会出现我在第一章前言里描述的第四个问题，因为场景中如

图14

过有模型了就会将模型默认的Shader（引擎自带的）发布，如果场景中没有发布时就认为这个sahder没有用到就将该shader不打包发布出去，后续就有可能出现模型显示不出来的问题。

加载模型并显示的代码为

    public IEnumerator LoadModel(string url,string modelName)
    
        string progress = null;
        WWW w = new WWW(url);     
        yield return w;
        if (w.error != null)
        
            string tempE = "error:" + w.url + "\\n" + w.error;
           // Debug.Log();
            loadText.text = tempE;
        
        else
        
            AssetBundle bundle = w.assetBundle;
            GameObject modelPre = bundle.LoadAsset<GameObject>(modelName);
            GameObject modelClone = Instantiate(modelPre);
            bundle.Unload(false);
            loadText.text = "加载成功："+modelPre.name;
        
    

三、总结

3.1、IIS部署后一定要在wegGL文件目录下中添加web.config配置文件；

3.2、IIS部署后有了web.config配置文件后还要手动将Assetbundle的文件类型添加到MIME类型，如”xx.ab“文件；

3.3、一定要添加HTTP表头，确保使用WWW或WebRequest类能加载到模型；
3.4、不要使用会组织下载的代码 如while(!www.isDone)