Modern Tarayıcıda Sıfır-Jank & Kütüphanesiz Fizik Neden Kazanır?

Web geliştirmede çoğu insanın sesli söylemekten çekindiği açık bir sır var:

Yerçekimini simüle etmek için 300KB’lık bir fizik kütüphanesine ihtiyacınız yok. Dönen bir torus düğümünü çizdirmek için 1.2MB’lık 3D motoruna da ihtiyacınız yok. İhtiyacınız olan tek şey lise vektör matematiği ve bir Float32Array.

Yusuf ile bu sitedeki kum havuzlarını yapmaya başladığımızda herkesin yaptığı bariz bir eğilim vardı: npm install three matter-js tone. Bütün modern öğreticiler size bunu yapmanızı söyler.

Biz ise dedik ki: kesinlikle hayır.

Soyutlamanın Gizli Bedeli

Tarayıcıdaki her soyutlama katmanı beraberinde bir vergi getirir:

1. Çöp Toplayıcı (GC) Duraklamaları: Yüksek seviyeli kütüphaneler her karede yeni nesneler oluşturur (new Vector(x, y)). JavaScript motorunun çöp toplayıcısı belleği temizlemek için çalışmayı 16 milisaniye durdurur ve gözle görülür kare düşmelerine (jank) yol açar.
2. Paket Boyutu Şişkinliği: Tek bir sahne için kullanıcının 4G bağlantıyla 2 megabayt JavaScript indirmesini beklemek kullanıcının CPU’suna saygısızlıktır.
3. Kara Kutu Hataları: Devasa bir kütüphanede bir şeyler ters gittiğinde denklemlerinizi düzeltmek yerine 3 saatinizi minify edilmiş kaynak kodlarda kaybolarak geçirirsiniz.

TypedArray ve Saf WebAudio Süper Gücü

Örneğin Euler Akışkanlar Dinamiği simülasyonumuzun nasıl çalıştığına bakın:

// Saf bitişik Float32Array bellek düzeni
const size = (N + 2) * (N + 2);
const u = new Float32Array(size); // X Hızı
const v = new Float32Array(size); // Y Hızı
const dens = new Float32Array(size); // Boya Yoğunluğu

Bellek başlangıçta bir kez bitişik tip dizileri olarak ayrıldığı için:

• Kare başına SIFIR GC bellek tahsisi.
• Doğrudan CPU önbellek dostu bellek erişimi.
• Eski bir telefonda bile garanti 60 FPS akıcılık.

Aynı kural 8-Bit Chiptune Tracker ve Optik Teremin için de geçerlidir. Doğrudan tarayıcının yerel AudioContext API’si ile konuşuyor, osilatörleri biquad filtrelere ve gecikme hatlarına mikrosaniye hassasiyetiyle bağlıyoruz.

Saf Zanaatkârlığın Keyfi

Kodu en temel seviyesinde yazmak, size platformla hiçbir hazır çerçevenin sağlayamayacağı bir yakınlık kazandırır. Çift sarkacın neden ayrıştığını, Jos Stam’ın akışkan basınç Poisson denklemlerini nasıl çözdüğünü ve 16-QAM takımyıldızlarının hat gürültüsünde neden saçıldığını gerçekten anlarsınız.

Bir dahaki sefere web’de bir şey inşa ederken hazır paket yüklemeyi bir kenara bırakmayı deneyin. Matematiği kendiniz yazın. Kullanıcının işlemcisine saygı gösterin. Sıfır jank, nihai lükstür.