Version: 2023.1
언어: 한국어
Video playback in WebGL
WebGL의 내장된 리소스

Texture compression in WebGL

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

텍스처 압축 포맷

데스크톱과 모바일 디바이스는 서로 다른 텍스처 압축 포맷을 지원합니다.WebGL 애플리케이션이 두 가지 타입의 브라우저에서 압축 텍스처를 사용하려면, 먼저 지원되는 텍스처 압축 포맷을 선택해야 합니다.

압축 텍스처를 사용하여 데스크톱과 모바일 브라우저 모두에서 게임을 실행하려면 다음을 타게팅하는 두 가지 빌드를 생성할 수 있습니다.

  • 텍스처 압축 포맷이 DXT로 설정된 데스크톱 브라우저.
  • 텍스처 압축 포맷이 ASTC(적응형 스케일러블 텍스처 압축)로 설정된 모바일 브라우저.

압축 포맷 설정에 대한 우선 순위

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.

에디터는 Build Settings의 텍스처 압축을 Library 폴더에 직렬화합니다. 따라서 이는 버전 관리를 통해 관리되지 않습니다.

개별 텍스터에 대해 텍스처 압축 포맷을 커스터마이즈할 수도 있습니다. 개별 텍스처에 설정한 값이 기본 텍스처 압축 형식 값을 오버라이드합니다. 개별 텍스처의 텍스처 포맷을 변경하는 방법에 대한 자세한 내용은 텍스처 임포트 설정을 참조하십시오.

기본 압축 포맷 설정

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.

Build Settings를 사용하여 기본 텍스처 압축 포맷을 선택하려면 다음을 수행합니다.

  1. File > Build Settings를 선택합니다.
  2. Platform 창의 플랫폼 목록에서 Web을 선택합니다.
  3. Texture Compression 드롭다운 메뉴에서 압축 포맷을 선택합니다.

Player Settings를 사용하여 기본 텍스처 압축 포맷을 선택하려면 다음을 수행합니다.

  1. File > Build Settings를 선택합니다.
  2. Platform 창의 플랫폼 목록에서 Web을 선택합니다.
  3. Player Settings > Other Settings를 선택합니다.
  4. Texture compression format 드롭다운 메뉴에서 압축 포맷을 선택합니다.

해당 텍스처 압축 포맷으로 데스크톱 브라우저와 모바일 브라우저용 빌드를 동시에 생성하는 방법에 대한 예시는 스크립트에서 데스크톱 및 모바일 브라우저용 빌드 생성을 참조하십시오.

스크립트에서 데스크톱 및 모바일 브라우저용 빌드 생성

스크립트를 사용하여 해당 텍스처 압축 포맷으로 동시에 데스크톱 브라우저 및 모바일 브라우저용 빌드를 실행할 수 있습니다.예시:

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

텍스처 압축 포맷 확장자를 지원하는 경우 WebGL 템플릿index.html 파일을 수정하여 적절한 데이터 파일을 선택할 수 있습니다.

// ASTC 텍스처 압축 포맷의 지원 여부에 따라 데이터 파일을 선택합니다.
      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 WebGL
WebGL의 내장된 리소스