Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Babylon.js

Mengapa dan Bagaimana Kami Memigrasikan Babylon.js ke Azure

by
Read Time:13 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Oktavia maria putri (you can also view the original English article)

Anda sedang bekerja untuk startup. Tiba-tiba tahun yang sulit dari pengkodean itu membuahkan hasil — kesuksesan datang dengan lebih banyak pertumbuhan dan permintaan untuk skala aplikasi web Anda.

Dalam tutorial ini, saya ingin dengan rendah hati menggunakan salah satu "kisah sukses" kami yang lebih baru di sekitar kerangka kerja open-source WebGL, Babylon.js, dan its website. Kami senang melihat banyak pengembang game web mencobanya. Tetapi untuk memenuhi permintaan, kami tahu kami membutuhkan solusi hosting web baru.

Sementara tutorial ini berfokus pada Microsoft Azure, banyak konsep berlaku untuk berbagai solusi yang mungkin Anda sukai. Kami juga akan melihat berbagai pengoptimalan yang kami lakukan untuk membatasi sebanyak mungkin bandwidth keluaran dari server kami ke browser Anda.

Pengantar

Babylon.js adalah proyek pribadi yang telah kami kerjakan selama lebih dari satu tahun sekarang. Karena ini adalah proyek pribadi (yaitu waktu dan uang kami), kami telah menghosting situs web, tekstur, dan pemandangan 3D pada solusi hosting yang relatif murah menggunakan mesin Windows / IIS yang berdedikasi dan kecil. Proyek ini dimulai di Perancis, tetapi dengan cepat di radar dari beberapa 3D dan spesialis web di seluruh dunia serta beberapa studio game. Kami senang dengan umpan balik komunitas, tetapi kepadatan dapat tetap dikelola!

Misalnya, antara Februari 2014 dan April 2014, kami memiliki rata-rata 7K + pengguna / bulan dengan rata-rata 16 ribu + halaman dilihat / bulan. Beberapa peristiwa yang kami bicarakan telah menghasilkan beberapa puncak yang menarik:

Spikes in user dataSpikes in user dataSpikes in user data

Namun pengalaman di situs web masih cukup baik. Memuat adegan kami tidak dilakukan dengan kecepatan bintang, tetapi pengguna tidak terlalu banyak mengeluh

Namun, baru-baru ini, cool guy memutuskan untuk share our work on Hacker News. Kami benar-benar senang atas berita semacam itu! Tapi lihat apa yang terjadi pada koneksi situs:

Big spike in usersBig spike in usersBig spike in users

Game over untuk server kecil kami! Perlahan-lahan berhenti bekerja, dan pengalaman untuk pengguna kami benar-benar buruk. Server IIS menghabiskan waktunya melayani aset dan gambar statis besar, dan penggunaan CPU terlalu tinggi. Ketika kami akan meluncurkan proyek Assassin's Creed Pirates WebGL experience yang berjalan di Babylon.js, sekarang saatnya beralih ke hosting profesional yang lebih skalabel dengan menggunakan solusi cloud

Namun sebelum meninjau pilihan hosting kami, mari kita bahas secara singkat tentang spesifikasi mesin dan situs web kami:

  1. Semuanya statis di situs web kami. Saat ini kami tidak memiliki kode sisi server yang berjalan.
  2. Adegan kami (file .babylon JSON) dan tekstur (.png atau .jpeg) bisa sangat besar (hingga 100 MB). Ini berarti bahwa kita benar-benar perlu untuk mengaktifkan kompresi gzip pada file scene .babylon kami. Memang, dalam kasus kami, harga akan diindeks banyak pada bandwidth yang keluar.
  3. Menggambar ke kanvas WebGL membutuhkan pemeriksaan keamanan khusus. Anda tidak dapat memuat adegan dan tekstur kami dari server lain tanpa mengaktifkan CORS, misalnya.

Kredit: Saya ingin mengucapkan terima kasih khusus kepada Benjamin Talmard, salah satu Penginjil Teknis Azure Perancis kami yang membantu kami pindah ke Azure.

1. Pindah ke Situs Web Azure & Layanan Autosale

Karena kami ingin menghabiskan sebagian besar waktu penulisan kode dan fitur untuk mesin kami, kami tidak ingin kehilangan waktu di saluran air. Itulah mengapa kami segera memutuskan untuk memilih pendekatan PaaS dan bukan yang IaaS.

Selain itu, kami menyukai integrasi Visual Studio dengan Azure. Saya dapat melakukan hampir semuanya dari IDE favorit saya. Dan bahkan jika Babylon.js is hosted on GitHub, kami menggunakan Visual Studio 2013, TypeScript, dan Visual Studio Online untuk mengkodekan mesin kami. Sebagai catatan untuk proyek Anda, Anda bisa mendapatkan Visual Studio Community dan Azure Trial secara gratis.

Pindah ke Azure membutuhkan waktu sekitar lima menit:

  1. Saya membuat Situs Web baru di halaman admin: http://manage.windowsazure.com (bisa dilakukan di dalam VS juga).
  2. Saya mengambil changeet yang benar dari repositori kode sumber kami yang sesuai dengan versi yang saat ini sedang online.
  3. Saya mengklik kanan proyek Web di Visual Studio Solution Explorer.
Visual Studio Solution ExplorerVisual Studio Solution ExplorerVisual Studio Solution Explorer

Sekarang inilah kedahsyatan alat. Saat saya masuk ke VS menggunakan Akun Microsoft yang terikat ke langganan Azure saya, wizard membiarkan saya memilih situs web yang saya ingin gunakan.

Choose Web Site to deployChoose Web Site to deployChoose Web Site to deploy

Tidak perlu khawatir tentang otentikasi yang rumit, string koneksi atau apa pun.

"Berikutnya, Berikutnya, Berikutnya & Publikasikan" dan beberapa menit kemudian, pada akhir proses pengunggahan semua aset dan file kami, situs web itu telah aktif dan berjalan!

Di sisi konfigurasi, kami ingin mendapatkan keuntungan dari layanan autoscale yang keren. Itu akan sangat membantu dalam skenario Hacker News kami sebelumnya.

Pertama, contoh Anda telah dikonfigurasi dalam mode Standar di tab Scale.

web hosting plan mode selectionweb hosting plan mode selectionweb hosting plan mode selection

Kemudian, Anda dapat memilih hingga berapa banyak instance yang ingin Anda ukur secara otomatis, di mana kondisi CPU, dan juga pada waktu yang dijadwalkan.

Dalam kasus kami, kami memutuskan untuk menggunakan hingga tiga instance kecil (1 inti, memori 1,75 GB) dan untuk menghasilkan contoh baru secara otomatis jika CPU melebihi 80% dari penggunaannya. Kami akan menghapus satu contoh jika CPU turun di bawah 60%. Mekanisme penskalaan otomatis selalu aktif dalam kasus kami — kami belum menetapkan waktu terjadwal yang spesifik.

Size and scale settingsSize and scale settingsSize and scale settings

Idenya adalah benar-benar hanya membayar apa yang Anda butuhkan selama jangka waktu dan muatan tertentu. Saya suka konsepnya. Dengan itu, kami akan mampu menangani puncak sebelumnya dengan melakukan apa-apa berkat layanan Azure ini!

Anda juga memiliki tampilan cepat pada riwayat penskalaan otomatis melalui bagan ungu. Dalam kasus kami, karena kami telah pindah ke Azure, kami tidak pernah membahas satu contoh pun hingga saat ini. Dan kita akan melihat di bawah ini bagaimana meminimalkan risiko jatuh ke penskalaan otomatis.

Untuk menyimpulkan pada konfigurasi situs web, kami ingin mengaktifkan kompresi gzip otomatis pada sumber daya mesin 3D spesifik kami (file .babylon dan .babylonmeshdata). Ini sangat penting bagi kami karena dapat menghemat hingga 3x bandwidth dan dengan demikian ... harganya.

Situs Web berjalan di IIS. Untuk mengkonfigurasi IIS, Anda harus masuk ke file web.config. Kami menggunakan konfigurasi berikut dalam kasus kami:

Solusi ini bekerja cukup baik, dan kami bahkan menyadari bahwa waktu untuk memuat adegan kami telah berkurang dibandingkan dengan host kami sebelumnya. Saya rasa ini berkat infrastruktur dan jaringan yang lebih baik yang digunakan oleh pusat data Azure.

Namun, saya telah berpikir tentang pindah ke Azure untuk sementara waktu sekarang. Dan ide pertama saya tidak membiarkan situs web melayani aset besar saya. Sejak awal, saya lebih tertarik untuk menyimpan aset saya di penyimpanan gumpalan yang dirancang lebih baik untuk itu. Itu juga akan menawarkan kita skenario CDN yang mungkin.

2. Memindahkan Aset ke Penyimpanan Blob Azure, Mengaktifkan CORS, Dukungan Gzip & CDN

Alasan utama untuk menggunakan penyimpanan blob dalam kasus kami adalah untuk menghindari memuat CPU contoh situs web kami untuk melayani mereka. Jika semuanya dilayani melalui penyimpanan gumpalan kecuali beberapa file HTML, JavaScript, dan CSS, contoh situs web kami akan memiliki sedikit peluang untuk melakukan penskalaan otomatis.

Tapi ini menimbulkan dua masalah untuk dipecahkan:

  1. Karena konten akan dihosting di nama domain lain, kami akan jatuh ke masalah keamanan lintas domain. Untuk menghindarinya, Anda perlu mengaktifkan CORS di domain jauh (Azure Blob Storage).
  2. Azure Blob Storage tidak mendukung kompresi gzip otomatis. Dan kami tidak ingin menurunkan penggunaan situs web CPU jika sebagai gantinya kami membayar tiga kali lipat harga karena peningkatan bandwidth!

Mengaktifkan CORS di Blob Storage

CORS pada penyimpanan gumpalan telah didukung selama beberapa bulan sekarang. Artikel ini, Windows Azure Storage: Introducing CORS, menjelaskan cara menggunakan Azure API untuk mengonfigurasi CORS. Di sisi saya, saya tidak ingin menulis aplikasi kecil untuk melakukan itu. Saya telah menemukan satu di web yang sudah ditulis: Cynapta Azure CORS Helper – Free Tool to Manage CORS Rules for Windows Azure Blob Storage.

Saya kemudian mengaktifkan dukungan untuk GET dan header yang tepat di penampung saya. Untuk memeriksa apakah semuanya berjalan sesuai harapan, cukup buka bilah pengembang F12 Anda dan periksa log konsol:

F12 console logsF12 console logsF12 console logs

Seperti yang Anda lihat, garis log hijau menyiratkan bahwa semuanya berfungsi dengan baik.

Berikut ini contoh kasus di mana akan gagal. Jika Anda mencoba memuat adegan kami dari penyimpanan gumpalan langsung dari mesin localhost Anda (atau domain lainnya), Anda akan mendapatkan kesalahan ini di log:

Console errorsConsole errorsConsole errors

Kesimpulannya, jika Anda melihat bahwa domain panggilan Anda tidak ditemukan di header "Akses-Control-Allow-Origin" dengan "Access is denied" tepat setelah itu, itu karena Anda belum menetapkan aturan CORS dengan benar. Sangat penting untuk mengontrol aturan CORS Anda; jika tidak, siapa pun dapat menggunakan aset Anda, dan dengan demikian bandwidth Anda, menghabiskan uang tanpa memberi tahu Anda!

Mengaktifkan Dukungan Gzip di Penyimpanan Blob Kami

Seperti yang saya katakan sebelumnya, Azure Blob Storage tidak mendukung kompresi gzip otomatis. Tampaknya juga halnya dengan solusi pesaing seperti S3. Anda punya dua opsi untuk mengatasi itu:

  1. Gzip file sendiri pada client sebelum mengunggah, unggah di penyimpanan blob menggunakan alat klasik Anda dan atur content-encoding header to gziph. Solusi ini berfungsi, tetapi hanya untuk browser yang mendukung gzip (apakah masih ada browser yang tidak mendukung gzip?).

  2. Gzip file Anda sendiri pada klien dan unggah dua versi dalam penyimpanan blob: satu dengan default .extension dan satu dengan .extension.gzip, misalnya. Siapkan handler di sisi IIS yang akan menangkap permintaan HTTP dari klien, periksa untuk header accept-encodingset-set untuk gzip dan melayani file yang sesuai berdasarkan dukungan ini. Anda akan menemukan detail lebih lanjut tentang kode yang akan diterapkan dalam artikel ini: Serving GZip Compressed Content from the Azure CDN.

Dalam kasus kami, saya tidak tahu browser apa pun yang mendukung WebGL dan bukan kompresi gzip. Jadi jika browser tidak mendukung gzip, tidak ada minat yang nyata untuk melangkah lebih jauh, karena ini mungkin berarti bahwa WebGL tidak didukung juga.

Karena itu saya telah memilih solusi pertama. Karena kami tidak memiliki banyak adegan dan kami tidak menghasilkan adegan baru setiap hari, saat ini saya menggunakan proses manual ini

  1. Menggunakan 7-zip, saya mengompresi file .babylon di mesin saya menggunakan pengkodean gzip dan "tingkat kompresi" ke "tercepat". Tingkat kompresi lainnya tampaknya menghasilkan masalah dalam pengujian saya.
  2. Saya mengunggah file menggunakan CloudBerry Explorer for Microsoft Azure Cloud Storage.
  3. Saya secara manual mengatur content encoding  header HTTP ke gzip dengan CloudBerry.
manually set the HTTP header content-encoding to gzip with CloudBerrymanually set the HTTP header content-encoding to gzip with CloudBerrymanually set the HTTP header content-encoding to gzip with CloudBerry

Saya tahu apa yang Anda pikirkan. Apakah saya akan melakukan itu untuk semua file saya?!? Tidak, Anda dapat mengerjakan pembuatan alat atau skrip pasca-pembuatan yang akan mengotomatiskan itu. Misalnya, ini adalah alat baris perintah kecil yang saya buat:

Untuk menggunakannya, saya bisa melakukan hal berikut:

UploadAndGzipFilesToAzureBlobStorage Scenes / Espilit C: \ Boulot \ Babylon \ Scenes \ Espilit \ *. Babylon * untuk mendorong adegan yang berisi banyak file (adegan inkremental kami dengan berkas muliples .babylonmeshdata).

Atau hanya:

UploadAndGzipFilesToAzureBlobStorage Scenes / Espilit C: \ Boulot \ Babylon \ Scenes \ Espilit \ Espilit.babylon untuk mendorong file unik.

Untuk memeriksa apakah gzip berfungsi seperti yang diharapkan menggunakan solusi ini, saya menggunakan Fiddler. Muat konten Anda dari mesin klien Anda dan periksa jejak jaringan jika konten yang dikembalikan benar-benar dikompresi dan dapat dikompresi:

Fiddler Web DebuggerFiddler Web DebuggerFiddler Web Debugger

Mengaktifkan CDN

Once you’ve done the two previous steps, you just need to click on a single button in the Azure administration page to enable CDN and map it to your blob storage:

enable CDN and map it to your blob storageenable CDN and map it to your blob storageenable CDN and map it to your blob storage

Sesederhana itu! Dalam kasus saya, saya hanya perlu mengubah URL berikut: http://yoda.blob.core.windows.net/wwwbabylonjs/Scenes ke http://az612410.vo.msecnd.net/wwwbabylonjs/Scenes. Perhatikan bahwa Anda dapat menyesuaikan domain CDN ini dengan Anda sendiri jika Anda mau

Berkat itu, kami dapat melayani Anda aset 3D kami dalam cara yang sangat cepat karena Anda akan dilayani dari salah satu lokasi node yang tercantum di sini:

Situs web kami saat ini di-host di datacenter Azure Eropa Utara. Tetapi jika Anda berasal dari Seattle, Anda akan melakukan ping server ini hanya untuk mengunduh file index.html, index.js, index.css dasar kami, dan beberapa screenshot. Semua aset 3D akan dilayani dari node Seattle di dekat Anda!

Catatan: Semua demo kami menggunakan pengalaman yang sepenuhnya dioptimalkan (penyimpanan blob menggunakan caching gzip, CDN, dan DB).

3. Menggunakan HTML5 IndexedDB untuk Menghindari Mengunduh Kembali Aset

Mengoptimalkan waktu pemuatan dan mengendalikan biaya bandwidth keluaran bukan hanya tentang sisi server. Anda juga dapat membangun beberapa sisi klien logika untuk mengoptimalkan hal-hal. Untungnya, kami telah melakukannya sejak v1.4 mesin Babylon.js kami. Saya telah menjelaskan dengan sangat terperinci bagaimana saya telah menerapkan dukungan untuk IndexedDB dalam artikel ini: Using IndexedDB to handle your 3D WebGL assets: sharing feedbacks & tips of Babylon.JS. Dan Anda akan menemukan cara mengaktifkannya di Babylon.js di wiki kami: Caching the resources in IndexedDB.

Pada dasarnya, Anda hanya perlu membuat file .babylon.manifest yang cocok dengan nama scene .babylon, dan kemudian mengatur apa yang ingin Anda cache (tekstur dan / atau adegan JSON). Itu dia.

Misalnya, periksa apa yang terjadi dengan adegan demo Hill Valley. Saat pertama kali memuatnya, berikut adalah permintaan yang dikirim:

Requests sentRequests sentRequests sent

153 item dan 43,33 MB diterima. Tetapi jika Anda telah menerima mengizinkan babylonjs.com "menggunakan penyimpanan tambahan di komputer Anda", inilah yang akan Anda lihat untuk kedua kalinya Anda akan memuat adegan yang sama:

Only one request shownOnly one request shownOnly one request shown

1 item dan 348 byte! Kami hanya memeriksa apakah file manifes telah berubah. Jika tidak, kami memuat semuanya dari DB dan kami menghemat 43+ MB bandwidth.

Misalnya, pendekatan ini digunakan dalam game Assassin’s Creed Pirates:

Assassins Creed Pirates gameAssassins Creed Pirates gameAssassins Creed Pirates game

Mari pikirkan tentang hal ini

  • Permainan segera diluncurkan setelah dimuat sekali, karena aset dilayani langsung dari DB lokal.
  • Penyimpanan web Anda kurang ditekankan dan lebih sedikit bandwidth yang digunakan — menghabiskan biaya lebih sedikit!

Sekarang itu akan memuaskan baik pengguna Anda dan atasan Anda!

Artikel ini adalah bagian dari seri web dev tech dari Microsoft. Kami senang untuk berbagi Microsoft Edge dan EdgeHTML rendering engine baru dengan Anda. Dapatkan mesin virtual gratis atau uji jarak jauh di perangkat Mac, iOS, Android, atau Windows @ http://dev.modern.ie/.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.