Use texture compression in WebGL to create builds that target platforms based on the texture compression formats they support.
Desktop and mobile devices support different texture compression formats. If you want your WebGL 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:
You can set the default texture compression format for your WebGL application from either the WebGL Build Settings window or the WebGL 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.
You can set the default texture compression format for your WebGL 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:
To select a default texture compression format using Player Settings:
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.
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 WebGL 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,
};