Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

WebGL Development Notes

foreword
1. Set up the environment first
2. Unity settings
3. Precautions for programming
- 1. Things that will report errors
- 2. Database
Summarize

foreword

`The PC project has encountered some pitfalls when transferring to WebGL, so it is better to record it.

1. Set up the environment first

1. The browser chooses Firefox, the reason is that it is convenient to run directly locally to see the effect, related settings:

Firefox browser webgl related settings:
Address bar input: about:config
Search: webgl.force-enabled is set to true
Search: security.fileuri.strict_origin_policy is set to false
insert image description here

2. Deploy IIS locally

The configuration is simple and you can use other browsers to see the final effect.
Control Panel-Programs-Enable or close windows function-check Internet Information Services-check all application development functionsControl
insert image description here
Panel-Management Tools-Internet Information Services (IIS) Manager-Add Website- Set the website name, physical path, port number

Add MIME type:
.unity3d application/octet-stream
.unityweb application/binary

3. Firewall rule setting

Enable the BranchCache content retrieval (HTTP-In) rule
Add the TCP port to the inbound rule of the firewall, the port must be consistent with the port set by IIS
insert image description here

2. Unity settings

1. Cut platform

insert image description here

2.Player Settings settings

insert image description here
Check the background action. As for the WebGL Template, it says to

automatically simplify the code, which is very easy to use.

Usually, enable Exceptions and choose Explicitly Thrown Exceptions Only to check exceptions. Use None when there is no problem in the official version

3. Make a version to see the effect

Firefox browser directly double-click the local browser or Firefox/Google/EDGE any browser to enter the local IP: port
insert image description here

4. Custom web page login style

insert image description here
Create a WebGLTemplates folder in the project, and customize the style as index.html in its subfolder. The most streamlined code is as follows:

<!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 | %UNITY_WEB_NAME%</title>
   <script src="%UNITY_WEBGL_LOADER_URL%"></script>
   <script>
   var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
   </script>
 </head>
 
 <body>
   <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
 </body>
 
</html>

The new functions are written in the script block (such as the progress bar), and the width and height are centered in the body. It feels the same as writing HTML for a website (probably.. I haven’t touched a website for more than 10 years).

insert image description here

3. Precautions for programming

1. Things that will report errors

The DllImport class loads the C++ library. Calling the DLL must report an error.
webgl does not support multi-threading.
webgl does not support System.IO.
Webgl’s built-in fonts will not display Chinese characters. You must import TTF format fonts by yourself.
JSON and other external files must be read using the WWW method, such as putting It cannot be obtained directly in the StreamingAssets folder. The example code is as follows:

using UnityEngine.Networking;
public class JsonManager:MonoBehaviour
{
    
    
	JsonData _data;
	string path = Application.streamingAssetsPath + "/test.json";
	void ReadJson() {
    
    
        StartCoroutine(WWWLoadJsonFile());
    }

    IEnumerator WWWLoadJsonFile() {
    
    

        UnityWebRequest www = UnityWebRequest.Get(path);
        yield return www.SendWebRequest();

        if (www.isNetworkError || www.isHttpError)
        {
    
    
            Debug.LogError(www.error);
        }
        else {
    
    
            //Debug.Log(www.downloadHandler.text);
            byte[] result = www.downloadHandler.data;
            //有中文的JSON，格式要存utf8+bom
            string jsondata = System.Text.Encoding.UTF8.GetString(result, 3, result.Length-3);
            _data = JsonMapper.ToObject<JsonData>(jsondata);
        }

    }
}

The Resources folder can be loaded normally.

2. Database

The original project used the convenient and small SQLite, but unfortunately sqlite3.dll didn’t give face, and WebGL would report an error, so I switched to the smaller (the author didn’t even write the user manual) iboxDB. I personally tested that it supports WebGL, but there is a small problem. I am doing local storage. The saved database will be stored in the browser's UserData depending on the browser. It is a bit fragile, but it can still be used.

//创建数据库
DB.Root(Application.persistentDataPath);
DB db = new DB (6);

//保存数据库，如果使用火狐浏览器会自动保存不需要这条
Application.ExternalEval("FS.syncfs(false, function (err) {});");

//删除数据库，这个6对应创建时的iddress
//如果是PC端则自动生成db6.box，不过现在讲webgl就呵呵呵，火狐能用谷歌这条没效果
BoxSystem.DBDebug.DeleteDBFiles(6);

Summarize

As long as you know the rules, it will be easy to develop in the future.
PS: no lake bottom mud fun

[Unity WebGL Development Notes]