Version: 2023.2
Video playback in Web
Embedded resources in Web

Texture compression in Web

Use texture compression in the Web platform to create builds that target platforms based on the texture compression formats they support.

Texture compression formats

Desktop and mobile devices support different texture compression formats. If you want your Web application to use compressed textures on both types of browsers, you must first choose a supported texture compression format.

To run your game on both desktop and mobile browsers with compressed textures, you might want to create two builds targeting:

  • Desktop browsers with DXT set as the texture compression format.
  • Mobile browsers with adaptable scalable texture compression (ASTC) set as the texture compression format.

Precedence for compression format settings

You can set the default texture compression format for your Web application from either the Web Build Settings window or the Web Player Settings window. Before you set the texture compression format, it’s important to decide which of these settings take precedence. The texture compression format value you set in Build Settings has priority over the value you set in Player Settings. By default, the Unity Editor sets the Build Settings value to Use Player Settings.

Note that Editor serializes the texture compression in Build Settings in the Library folder. This means that it’s not managed by version control.

You can also customize the texture compression format for individual textures. The value you set for an individual texture overrides the default texture compression format value. For information on how to change the texture format of individual textures, refer to Texture Import Settings.

Set the default compression format

You can set the default texture compression format for your Web application using either Build Settings or Player Settings. The texture compression format value you set in Build Settings has priority over the value you set in Player Settings. By default, the Unity Editor sets the Build Settings value to Use Player Settings.

To select a default texture compression format using Build Settings:

  1. Select File > Build Settings.
  2. From the list of platforms in the Platform pane, select Web.
  3. Select a compression format from the Texture Compression drop-down menu.

To select a default texture compression format using Player Settings:

  1. Select File > Build Settings.
  2. From the list of platforms in the Platform pane, select Web.
  3. Select Player Settings > Other Settings.
  4. Select a compression format from the Texture compression format drop-down menu.

For an example on how to simultaneously create builds for both desktop browsers and mobile browsers with their corresponding texture compression formats, refer to Create builds for desktop and mobile browsers from a script.

Create builds for desktop and mobile browsers from a script

You can run a build for both desktop browsers and mobile browsers with the corresponding texture compression formats simultaneously using a script. For example:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using System.Diagnostics;
using System.IO;
using UnityEditor.Build.Reporting;

public class comboBuild
{
    //This creates a menu item to trigger the dual builds https://docs.unity3d.com/ScriptReference/MenuItem.html 

    [MenuItem("Game Build Menu/Dual Build")]
    public static void BuildGame()
    {
      //This builds the player twice: a build with desktop-specific texture settings (WebGL_Build) as well as mobile-specific texture settings (WebGL_Mobile), and combines the necessary files into one directory (WebGL_Build)
      
      string dualBuildPath    = "WebGLBuilds";
      string desktopBuildName = "WebGL_Build";
      string mobileBuildName  = "WebGL_Mobile";

      string desktopPath = Path.Combine(dualBuildPath, desktopBuildName);
      string mobilePath  = Path.Combine(dualBuildPath, mobileBuildName);
      string[] scenes = new string[] {"Assets/scene.unity"};

      EditorUserBuildSettings.webGLBuildSubtarget = WebGLTextureSubtarget.DXT;
      BuildPipeline.BuildPlayer(scenes, desktopPath, BuildTarget.WebGL, BuildOptions.Development); 

      EditorUserBuildSettings.webGLBuildSubtarget = WebGLTextureSubtarget.ASTC;
      BuildPipeline.BuildPlayer(scenes,  mobilePath, BuildTarget.WebGL, BuildOptions.Development); 

      // Copy the mobile.data file to the desktop build directory to consolidate them both
      FileUtil.CopyFileOrDirectory(Path.Combine(mobilePath, "Build", mobileBuildName + ".data"), Path.Combine(desktopPath, "Build", mobileBuildName + ".data"));
    }  
}

You can modify the Web template’s index.html file to select the appropriate data file if there’s support for the texture compression format extension:

// choose the data file based on whether there's support for the ASTC texture compression format
      var dataFile = "/{{{ DATA_FILENAME }}}";                                  
      var c = document.createElement("canvas");                                 
      var gl = c.getContext("webgl");                                      
      var gl2 = c.getContext("webgl2");                                    
      if ((gl && gl.getExtension('WEBGL_compressed_texture_astc')) || (gl2 &&   
              gl2.getExtension('WEBGL_compressed_texture_astc'))) {             
        dataFile =  "/WebGL_Mobile.data";                                       
      }                                                                         

      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";                    
      var config = {                                                            
        dataUrl: buildUrl + dataFile,                                           
        frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",                 
#if USE_WASM                                                                    
        codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",                           
#endif                                                                          
#if MEMORY_FILENAME                                                             
        memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",                       
#endif
#if SYMBOLS_FILENAME                                                            
        symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",                     
#endif                                                                          
        streamingAssetsUrl: "StreamingAssets",                                
        companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
        productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
      productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},                
        showBanner: unityShowBanner,                                            
     };  

其他资源

Video playback in Web
Embedded resources in Web