Membangun aplikasi WebGL Anda

Untuk membuat build untuk WebGL, pergi ke File > Build Settings dari menu utama Unity. Dalam daftar Platform, pilih WebGL dan kemudian klik Switch Platform.

Ketika Anda telah mengkonfigurasi Pengaturan Build, pilih satu opsi berikut:

Build: Bangun aplikasi Anda ke dalam Pemain.
Build and Run: Bangun aplikasi Anda di Pemain, dan buka Pemain di platform target Anda.

Build Settings Window — Membangun jendela pengaturan

Sistem build Unity untuk WebGLLogin API yang membuat grafis 2D dan 3D di browser web. Opsi build Unity WebGL memungkinkan Unity untuk mempublikasikan konten sebagai program JavaScript yang menggunakan teknologi HTML5 dan WebGL rendering API untuk menjalankan konten Unity di browser web. More info
Lihat di Glossary mendukung pengaturan berikut:

Setting		Function
Texture CompressionA method of storing data that reduces the amount of storage space it requires. See Texture Compression, Animation Compression, Audio Compression, Build Compression. See in Glossary		Format texture compressionPerangkat keras grafis 3D memerlukan Tekstur untuk dikompresi dalam format khusus yang dioptimalkan untuk pengambilan sampel Tekstur cepat. More info Lihat di Glossary untuk digunakan untuk membangun. Pilihannya adalah:
	Use Player Settings	Ini adalah pilihan default. Ini menggunakan format kompresi tekstur yang Anda set di jendela Pengaturan pemainPengaturan yang memungkinkan Anda mengatur berbagai pilihan khusus pemain untuk permainan akhir yang dibangun oleh Unity. More info Lihat di Glossary.
	ETC2	Menggunakan format ETC2, yang banyak didukung pada perangkat seluler.
	ASTC	Menggunakan format ASTC, yang banyak didukung pada perangkat seluler.
	DXT	Menggunakan format DXT, yang banyak didukung pada perangkat desktop.
Development BuildA development build includes debug symbols and enables the Profiler. More info See in Glossary		Aktifkan pengaturan ini untuk menyertakan simbol debug scripting dan Profiler di build Anda. Ketika Anda mengaktifkan ini, Unity menetapkan skrip `DEVELOPMENT_BUILD` mendefinisikan. Anda harus menggunakan pengaturan ini hanya ketika Anda ingin menguji aplikasi Anda. Perhatikan bahwa pembangunan membangun tidak menambang konten, yang berarti pembangunan membangun sangat besar untuk mendistribusikan.
Code Optimization		Pilih mode optimasi untuk digunakan untuk membandingkan kode WebGL.
	Speed	Ini adalah pengaturan default. Memilih ini menghasilkan kode WebGL yang dioptimalkan untuk kinerja runtime.
	Size	Memilih ini menghasilkan WebGL kode yang dioptimalkan untuk membangun ukuran. Ini berguna ketika membangun game WebGL untuk berjalan di browser seluler di Android dan iOS, di mana opsi mengoptimalkan-for-speed default akan menghasilkan file WebAssembly yang lebih besar untuk perangkat seluler untuk dikonsumsi.
Autoconnect Profiler		Biasanya, ketika diaktifkan, pengaturan ini memungkinkan Anda untuk secara otomatis menghubungkan Unity Profiler untuk membangun Anda. Namun untuk WebGL, karena Anda tidak dapat menghubungkan ProfilerJendela yang membantu Anda untuk mengoptimalkan permainan Anda. Ini menunjukkan berapa banyak waktu yang dihabiskan di berbagai bidang permainan Anda. Sebagai contoh, dapat melaporkan persentase waktu yang dihabiskan rendering, aimating, atau dalam logika permainan Anda. More info Lihat di Glossary ke build yang berjalan, gunakan opsi ini untuk menghubungkan konten ke Editor. Ini karena koneksi Profiler ditangani menggunakan WebSockets di WebGL, tetapi browser web hanya memungkinkan koneksi keluar dari konten. Untuk pengaturan ini tersedia, Anda harus mengaktifkan opsi Development Build.
Deep Profiling		Aktifkan pengaturan ini untuk menyalakan Profil di Profiler. Ini membuat instrumen Profiler setiap panggilan fungsi dalam aplikasi Anda dan mengembalikan data profil yang lebih rinci. Ketika Anda mengaktifkan Dukungan Profil Dalam, mungkin memperlambat eksekusi skrip. Opsi ini hanya tersedia jika Anda mengaktifkan opsi Development Build.
Build		Gunakan aplikasi Anda.
Build And Run		Gunakan untuk melihat WebGL Player secara lokal. Unity menggunakan server web lokal untuk menghosting build Anda, dan membukanya dari URL localhost. Atau, Anda dapat menggunakan server web lokal kustom dengan header respons yang dikonfigurasi dengan benar. Untuk informasi lebih lanjut, lihat Membangun terkompresi dan konfigurasi server.

Untuk mengubah pengaturan untuk Asset Import Overrides, lihat Membangun Pengaturan.

Membangun Folder

Folder Build berisi file berikut ([ExampleBuild] mewakili nama folder build target).

Nama file	Contains
`[ExampleBuild].loader.js`	Kode JavaScript yang diperlukan halaman web untuk memuat konten Unity.
`[ExampleBuild].framework.js`	JavaScript runtime dan plugin.
`[ExampleBuild].wasm`	WebAssembly biner.
`[ExampleBuild].mem`	Gambar biner untuk menginisialisasi memori heap untuk Pemain Anda. Unity hanya menghasilkan file ini untuk membangun WebAssembly multi-threaded.
`[ExampleBuild].data`	Data aset dan ScenesAdegan berisi lingkungan dan menu permainan Anda. Pikirkan setiap file Adegan unik sebagai tingkat yang unik. Di setiap Adegan, Anda menempatkan lingkungan, hambatan, dan dekorasi, pada dasarnya merancang dan membangun permainan Anda dalam potongan-potongan. More info Lihat di Glossary.
`[ExampleBuild].symbols.json`	Nama simbol debug perlu untuk mengubah jejak tumpukan kesalahan. File ini hanya dihasilkan untuk membangun Rilis ketika Anda mengaktifkan opsi Simbol Debug (File > Build Settings > Player Settings.)
`[ExampleBuild].jpg`	Gambar latar belakang, yang menampilkan sementara build memuat. File ini hanya dihasilkan ketika Gambar Latar Belakang disediakan dalam Pengaturan Pemain (File > Build Settings > Player Settings > Splash Image. Lihat halaman Layar Splash untuk informasi lebih lanjut.

Jika Anda mengaktifkan Compression Method untuk membangun Anda, Unity mengidentifikasi ekstensi yang sesuai dengan metode kompresi dan menambahkan ekstensi ini ke nama file di dalam Build subfolder. Jika Anda mengaktifkan Decompression Fallback, Unity menerapkan ekstensi .unityweb ke nama file build. Jika tidak, Unity menerapkan ekstensi .gz untuk metode kompresi Gzip, atau .br untuk metode kompresi Brotli. Untuk informasi lebih lanjut, lihat WebGL: Membangun terkompresi dan konfigurasi server.

Jika Anda mengaktifkan Name Files As Hashes di Player Settings, Unity menggunakan hash konten file bukan nama file default. Ini berlaku untuk setiap file di folder build. Opsi ini memungkinkan Anda untuk meng-upload versi terbaru dari permainan membangun ke folder yang sama di server, dan hanya mengunggah file yang telah berubah antara membangun iterasi.

Note: Membuka Pemain langsung dari sistem file mungkin tidak bekerja di beberapa browser. Ini karena pembatasan keamanan yang diterapkan pada URL file lokal.

Dukungan Profil Dalam

Aktifkan pengaturan Deep Profiling Support untuk membuat profil Unity Profiler setiap panggilan fungsi dalam aplikasi Anda. Untuk informasi lebih lanjut lihat dokumentasi pada Profil.

Pengecualian yang Dapat Diaktifkan

Buka Publishing Settings untuk mengakses Enable Exceptions. Enable Exceptions memungkinkan Anda untuk menentukan perilaku kode yang tidak terduga (juga dikenal sebagai kesalahan) ditangani pada waktu berjalan. Ini memiliki opsi ini:

None: Pilih ini jika Anda tidak memerlukan dukungan pengecualian. Ini memberikan kinerja terbaik dan membangun terkecil. Dengan opsi ini, setiap pengecualian dibuang menyebabkan konten Anda berhenti dengan kesalahan dalam pengaturan itu.
Explicitly Thrown Exceptions Only (default): Pilih ini untuk menangkap pengecualian yang secara eksplisit ditentukan dari pernyataan throw di scriptsSepotong kode yang memungkinkan Anda untuk membuat Komponen Anda sendiri, memicu peristiwa permainan, memodifikasi sifat komponen dari waktu ke waktu dan menanggapi input pengguna dengan cara apa pun yang Anda sukai. More info
Lihat di Glossary Anda dan juga memastikan blok finally disebut. Perhatikan bahwa memilih opsi ini membuat kode JavaScript yang dihasilkan dari skrip Anda lebih lama dan lebih lambat; Ini mungkin hanya menjadi masalah jika skrip adalah kemacetan utama dalam proyek Anda.
Full Without Stacktrace: Pilih opsi ini untuk menangkap: * Kecuali yang ditentukan secara eksplisit dari pernyataan throw di skrip Anda (sama dengan opsi Jelas Lempar Kecuali Sitemap)
- Indeks Null
- Di luar akses Array Bounds
Full With Stacktrace: Pilihan ini mirip dengan opsi di atas tetapi juga menangkap jejak Stack. Unity menghasilkan pengecualian ini dengan mengecilkan pemeriksaan untuk mereka dalam kode, sehingga opsi ini mengurangi kinerja dan meningkatkan penggunaan memori browser. Hanya menggunakan ini untuk debugging, dan selalu menguji di browser 64-bit.

Caching Data

Untuk mengakses Data Caching, pergi ke Publishing Setings melalui File > Build Settings > Player Settings > WebGL. Ini memungkinkan browser untuk menyimpan file data utama ke database IndexedDB.

Menggunakan cache HTTP browser default tidak menjamin bahwa cache browser respons tertentu. Ini karena cache HTTP browser memiliki ruang terbatas, dan browser mungkin tidak dapat cache file yang terlalu besar.

Untuk meningkatkan kecepatan pemuatan Anda, IndexedDB memungkinkan Anda untuk menyimpan file di atas batas browser. Ketika Anda melihat lebih banyak file, Anda meningkatkan kemungkinan bahwa konten yang diunduh tersedia pada mesin pengguna selama perjalanan berikutnya dari build.

Data Caching hanya cache file .data di cache IndexedDB untuk tanggapan HTTP. Untuk cache AssetBundles, Anda perlu mengaktifkan Data Caching dan override unityInstance.Module.cacheControl(). Untuk melakukan ini, pastikan pengembalian Module.cacheControl(url) must-revalidate untuk URL Aset yang diminta. Misalnya, Anda dapat menimpa fungsi unityInstance.Module.cacheControl() dalam panggilan pemenuhan Promise yang membuatUnityInstance() kembali. Untuk informasi lebih lanjut tentang createUnityInstance() lihat WebGL: Membangun terkompresi dan konfigurasi server.

Kompresi Tekstur

Pengaturan kompresi tekstur di WebGL memungkinkan Anda membuat membangun platform target berdasarkan format kompresi tekstur yang mereka dukungan. Nilai format kompresi tekstur yang Anda set di sini memiliki prioritas atas nilai format kompresi tekstur Pengaturan pemain. Untuk menjalankan permainan Anda di kedua browser desktop dan seluler dengan tekstur terkompresi, Anda mungkin ingin membuat dua build: * Menargetkan browser desktop dengan DXT set sebagai format kompresi tekstur * Menargetkan peramban seluler dengan ASTC set sebagai format kompresi tekstur

Buat build untuk browser desktop dan seluler dari skrip

Anda dapat menjalankan build untuk browser desktop dan browser seluler dengan format kompresi tekstur yang sesuai secara bersamaan menggunakan skrip. Contoh:

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

Akhirnya, Anda dapat memodifikasi file WebGL template index.html untuk memilih file data yang sesuai jika ada dukungan untuk ekstensi format kompresi tekstur:

// 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_texutre_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,                                            
     };

Dihapus target tautan asm.js di Unity 2019. 1 Artikel
Membangun pembaruan file dan Caching Data ditambahkan pada Unity 2020. 1 Artikel

Membangun dan mendistribusikan proyek WebGL

Mengurangi waktu beban dengan AssetBundles