Satu kanvas WebGL, empat paket yang dibuktikan sekaligus. Semua yang Anda lihat di bawah berjalan langsung di peramban Anda sekarang: shader kami sendiri, fisika kami sendiri, dan angka performa yang kami tampilkan apa adanya.
HUD Performa
WebGL tidak tersedia di peramban ini. Yang tampil adalah poster statis, bukan kanvas kosong.
Orbit memakai batas sudut kutub sehingga kamera tidak pernah menembus lantai. Perpindahan antar mode memakai easing 900 milidetik, ambang yang kami pakai untuk menekan rasa pusing.
Tiga benda di dalam scene dipilih lewat raycast pada layer khusus, dibatasi 30 pemeriksaan per detik. Panel informasi muncul dan kamera bergerak halus ke objeknya.
Seret gasing untuk memutarnya. Perlambatannya dihitung dengan integrasi fixed-step 120 Hz buatan sendiri: gesekan kering, gesekan udara, lalu kemiringan dan presesi diturunkan dari sisa kecepatan sudut. Tanpa pustaka fisika.
Tiga tingkat ini benar-benar mengubah resolusi render, jumlah instance, dan pass pascaproses. Perhatikan HUD saat menekannya: itulah cara kami bekerja, mengukur dulu baru mengoptimalkan.
Papan ketik: fokuskan kanvas, lalu pakai panah atau W A S D. Tanda tambah dan kurang mengatur jarak orbit. Seluruh fungsi juga tersedia lewat tombol di atas.
Kanvas di atas bukan hiasan. Setiap tombolnya memperagakan satu hal yang kami jual, dan tautannya menuju harga paket yang bersangkutan.
Tombol Orbit dan First-person memindahkan kamera lewat easing 900 milidetik, bukan lompatan. Orbit dikunci pada batas sudut kutub sehingga kamera tidak pernah menembus lantai maupun berdiri tegak lurus. Mode berjalan memakai tinggi mata tetap 1,7 meter dan tabrakan lingkar sederhana terhadap alas dan batas arena.
Tiga benda di dalam scene dipilih lewat raycast, bukan lewat tombol HTML yang ditempel di atas kanvas. Pemeriksaan sorotan dibatasi 30 kali per detik. Saat dipilih, panel informasi berlatar solid muncul dan kamera bergerak halus ke titik pandang objeknya. Hanya satu panel aktif pada satu waktu.
Gasing di tengah arena diputar dengan seretan, lalu melambat karena gesekan. Integrasinya fixed-step 120 Hz dan terpisah dari laju render, jadi perilakunya sama di perangkat cepat maupun lambat. Ditulis sendiri, tanpa satu pun pustaka fisika ikut diunduh.
HUD memperlihatkan FPS, jumlah draw call, jumlah segitiga, dan resolusi render yang diperbarui tiap frame. Tombol Rendah, Sedang, dan Tinggi mengubah devicePixelRatio, jumlah instance prisma, dan pass pascaproses. Angkanya berubah di depan Anda. Inilah urutan kerja kami: ukur dulu, baru optimalkan.
Demo 3D gampang dibuat mengesankan selama sepuluh detik pertama. Yang menentukan layak pakai atau tidak justru enam hal berikut, dan semuanya sudah terpasang di kanvas ini.
Bila sistem Anda meminta gerak minimal, kanvas menyajikan bingkai statis. Loop hanya hidup selama ada gerak yang Anda minta sendiri, lalu berhenti lagi. Tombol Animasi memberi kendali penuh untuk menyalakannya.
Render dihentikan ketika tab tidak aktif atau kanvas keluar viewport. Bukan sekadar melewatkan gambar, tetapi benar-benar melepas permintaan animation frame supaya baterai tidak terkuras diam-diam.
devicePixelRatio tidak pernah melewati 2, berapa pun rapatnya layar Anda. Bila FPS bertahan di bawah 45 selama beberapa detik, resolusi render diturunkan sendiri dan HUD menandainya sebagai auto.
Bila peramban tidak mendukung WebGL, yang tampil adalah poster statis beserta keterangannya, bukan kotak hitam kosong. Three.js pun tidak ikut diunduh.
Three.js diunduh lewat dynamic import ketika kanvas mendekati viewport. Halaman lain di situs ini tidak memuat satu byte pun dari pustaka 3D.
Saat halaman ditinggalkan, seluruh geometry, material, render target, dan konteks WebGL dibuang. Kebocoran memori pada sesi panjang adalah penyebab tersering karya 3D terasa makin berat.
Buka halaman ini di ponsel yang paling lambat yang Anda punya, lalu tekan Tinggi. Kirimkan hasil HUD-nya kepada kami beserta tipe perangkatnya, dan kami balas dengan perkiraan lingkup yang realistis.