1. Effect

2. Matters needing attention

There are a lot of ways to load ab package with webgl on the Internet. In fact, the operations written by them have failed. In the end, I summed up the three problems that webgl should pay attention to when loading ab package:

1. The creation of the ab package generates the BuildTarget type. Pay attention to using WebGL (we will tell you where this step is)

2. Load using the WWW or UnityWebRequest method (officially described, Baidu also has a method, I won't go into details here)

3. This point is very important, and it is also the primary problem that I can’t package when stepping on the pit. The MIME extension type of IIS registers your ab package type, otherwise there will be a 404 error when accessing (in fact, if you have a special background website, you can get it directly This ab package file will not have this problem)

Three, AB package production and loading

The deployment starts below

1. First create a script for the ab package

The creation and loading of Unity's AB package - Programmer Sought

This link is the method of creating ab package written before, just replace the script for creating ab package directly. Other operations are the same.

using UnityEngine;
using UnityEditor;
using System.IO;

/// <summary>
/// AB包创建
/// </summary>
public class CreateAssetBundles : MonoBehaviour
{
    
    [MenuItem("AssetBundles/Build AssetBundles(WebGL)")] //特性
    static void BuildAssetBundle_WebGL()
    {
        string dir = Application.streamingAssetsPath + "/AssetBundles"; //相对路径
        if (!Directory.Exists(dir))   //判断路径是否存在
        {
            Directory.CreateDirectory(dir);
        }
        BuildPipeline.BuildAssetBundles(dir, BuildAssetBundleOptions.None, BuildTarget.WebGL); //这里是第一点注意事项，BuildTarget类型选择WebGL
    }
}

2. The way to load the ab package

The principle is the same as the article I wrote before. Here is a simple script to write it for easy understanding.

using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;
using UnityEngine;
using UnityEngine.Video;
using UnityEngine.Networking;

/// <summary>
/// 主界面管理器
/// </summary>
public class MainManager : MonoBehaviour
{
    //提示文字
    [SerializeField] Text text;

    //加载按钮
    [SerializeField] Button loadBtn;

    void Start()
    {
        //按钮监听
        loadBtn.onClick.AddListener(Load);
    }

    //监听方法
    private void Load()
    {
        IEnumerator ie = load();
        //开启协程
        StartCoroutine(ie);
    }

    string url;
    IEnumerator load()
    {

        if (Application.platform == RuntimePlatform.WindowsEditor)
        {
            //unity编译器运行时，ab包的加载路径
            text.text = "WindowsEditor";
            url = Application.streamingAssetsPath + "/AssetBundles/cube.model";
        }
        else if (Application.platform == RuntimePlatform.WebGLPlayer)
        {
            //网页WebGL运行时，ab包的加载路径
            text.text = "WebGLPlayer";
            url = Application.streamingAssetsPath + "/AssetBundles/cube.model";
        }

        //UnityWebRequest获取ab包
        UnityWebRequest www = UnityWebRequestAssetBundle.GetAssetBundle(url, 0);
        yield return www.SendWebRequest();

        if (www.isNetworkError || www.isHttpError)
        {
            Debug.Log(www.error);
        }
        else
        {
            //获取ab包内容
            AssetBundle ab = DownloadHandlerAssetBundle.GetContent(www);
            //创建指定名称的ab包模型，其中cube代表ab包中模型的名称
            GameObject cube = ab.LoadAsset<GameObject>("cube");
            Instantiate(cube);
        }
    }
}

interface layout

After mounting the above script, you can assign values to the buttons and text.

Fourth, the packaged WebgGL file configuration

This corresponds to the third item of the above precautions, adding the MIME extension type of IIS, here we have not installed the Web service of IIS, so configure it first in the way of text.

Create a web.config file under the packaged folder

The content of the file is:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".unityweb" mimeType="application/binary" />
            <mimeMap fileExtension=".model" mimeType="application/octet-stream" />
        </staticContent>
        <directoryBrowse enabled="false" />
    </system.webServer>
</configuration>