Dalam aplikasi 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, elemen kanvas adalah di mana browser menarik grafis ketika membuat permainan. Bagian ini menjelaskan cara mengkonfigurasi ukuran yang terlihat dari elemen kanvas WebGL, dan resolusi yang render permainan.
Untuk mengkonfigurasi ukuran WebGL Canvas Anda, Anda harus mempertimbangkan jenis ukuran kanvas berikut:
| Canvas Size elements | Description |
|---|---|
| Canvas element CSS size | Model Objek Dokumen ini (DOM) menentukan area yang terlihat di halaman web yang kanvas mengambil. Anda dapat mengkonfigurasi ukuran kanvas menggunakan HTML atau JavaScript. |
| WebGL render target size | Ukuran ini menentukan resolusi pixelUnit terkecil dalam gambar komputer. Ukuran piksel tergantung pada resolusi layar Anda. Pencahayaan pixel dihitung pada setiap piksel layar. More info Lihat di Glossary bahwa GPU membuat permainan Anda. Ukuran ini dapat dikelola 1: 1 dalam sinkronisasi dengan ukuran CSS untuk memberikan rendering yang sempurna pixel, atau dapat didepas dari ukuran CSS. |
Jika dua elemen ukuran kanvas di atas tidak cocok, browser akan meregangkan output WebGL yang diberikan untuk mengisi area kanvas yang terlihat di halaman web.
Decoupling resolusi render berguna ketika menerapkan downscaled rendah DPI (Dots per inci) rendering pada tampilan DPI tinggi. Ini membantu untuk tidak hanya mengkonsumsi daya pengisian GPU tetapi juga membantu jika aplikasi Anda sensitif terhadap resolusi rendering. Misalnya, jika logika aplikasi Anda menggunakan unit pixel ruang layar, tetapi untuk aplikasi itu sendiri untuk bekerja dengan benar, itu membutuhkan resolusi tertentu.
Secara default, Unity menjaga ukuran CSS elemen kanvas dan ukuran target render WebGL dalam sinkronisasi dan menyediakan rendering sempurna piksel 1. Jika ukuran kanvas CSS dimodifikasi oleh halaman web di JavaScript, Unity akan secara otomatis menyesuaikan ukuran target WebGL untuk mencocokkannya. Secara default, pertandingan ini dilakukan untuk menerapkan rendering DPI tinggi.
Jika Anda ingin menimpa skala DPI, buka file index.html dan tambahkan variabel konfigurasi Unity Instance devicePixelRatio=<double>. Misalnya, pengaturan devicePixelRatio=1 di halaman template situs WebGL akan memaksa Unity untuk selalu menerapkan rendering DPI rendah. Lihat Menggunakan template WebGL misalnya.
Untuk mengatur ukuran kanvas secara manual, Anda harus menonaktifkan sinkronisasi ukuran otomatis. Untuk melakukannya, dalam file index.html dari template WebGL, atur variabel konfigurasi Unity Instance ke false: matchWebGLToCanvasSize=false. Ketika ini ditetapkan, Unity meninggalkan ukuran target render dari kanvas as-is tetapi Anda selalu dapat mengkonfigurasi ukuran, jika diperlukan.
Misalnya, untuk mengubah ukuran css dari kanvas, edit teks berikut dalam file index.html:
<div id="unity-container" style="position: absolute; width: 100%; height: 100%">
<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: 100%; height: 100%"></canvas>
</div>