Replace your own WebGL template

Created under the Assets folderWebGLTemplatesfolder
Create your own template folder under this folder (multiple templates create multiple folders)

You can see the template you created in projectsetting, just check the corresponding template when packaging

Related to custom templates

Official documents
Note that the html part of the path in the template is generated according to the packaging. If it is hard-coded, it will not be opened. Use the corresponding js macro to change it, and it can be automatically replaced after packaging.
I see that the macro in version 20 has changed to three curly braces
Record the old version:

<!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 calls unity function

Easy way:

unity ready

In the unity scenePeakCreate a new empty object "newGameObject"
Mount the script "CallFuncScript" on this object
Write the public function "MyFunc1" in the script, for example:Note that there seems to be only one function parameter at present, and multiple calls will fail. So the next step is to parse the string to get the parameters.

 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 call

Take the default template as an example:

<script>
      var unityInstance = UnityLoader.instantiate("unityContainer", "Build/test_1.json", {
    
    onProgress: UnityProgress});
</script>

The instance is named as unityInstance
calling method:Note that it corresponds to the naming of the unity side

unityInstance.SendMessage("newGameObject", "MyFunc1", "90/2");

Published WebGL with transparent background

Notice:

Post-processing effects cannot be used after being transparent, exception

Way

create txt file
enter:

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);

Change the suffix txt to jslib
Drag the file into the Plugins folder under the Assets folder of the project (create one if not)
Camera settings: camera mode is set to solid color (solid color),Background color transparency set to 0
Pack
Set the background of unity's canvas to transparent in the packaged html

Model faces flicker:

Check the distance between two faces
The model's material casting and receiving shadow options change (turn off or try other options)
Increase the anti-aliasing level

Source:
webgl complete development guide

Unity releases WebGL key point records

Unity publishes WebGL related