3D prosedural tanpa GLTF — kenapa semua geometri saya generate dari kode

Kebanyakan demo web 3D mengirim .glb yang lebih besar daripada JavaScript-nya sendiri. VULPA-9 melakukan kebalikannya: setiap pin CPU, fin heatsink, dan dinding lab digenerate saat runtime dari primitif Three.js, shader, dan tekstur canvas.

Kenapa tidak import model saja?

Showroom hardware rata-rata dengan lima aset .glb menghabiskan 3–8 MB terkompresi. Itu sudah melewati budget performa sebelum kode dimuat. Generasi prosedural membalik biayanya:

• Tanpa request tambahan untuk model
• Instancing memakai ulang geometri (satu fin heatsink → 42 fin)
• Tekstur canvas menggantikan tekstur gambar tanpa fetch tambahan

Bundle awal jatuh <1 MB gzipped, dan aplikasi sepenuhnya bisa offline lewat Service Worker.

Satu fin menjadi empat puluh dua

Heatsink adalah contoh sempurna. Alih-alih memodelkan 42 fin manual, saya generate satu BoxGeometry dan meng-instance-nya:

const finGeometry = new THREE.BoxGeometry(0.02, 0.8, 0.6);
const fins = new THREE.InstancedMesh(finGeometry, material, 42);
for (let i = 0; i < 42; i++) {
  dummy.position.set(i * 0.035 - 0.7, 0, 0);
  dummy.updateMatrix();
  fins.setMatrixAt(i, dummy.matrix);
}
scene.add(fins);

Tambahkan shader emissive tipis dan canvas ambient-occlusion bake, dan hasilnya terlihat seperti cooler asli tanpa file tekstur.

Voice control tanpa frustrasi

VULPA-9 juga membawa Voice AI bilingual yang memahami Indonesia dan Inggris. Web Speech API powerful tapi sering salah dengar istilah teknis. Saya melapisi fuzzy matcher Levenshtein distance dengan threshold dinamis:

• Kata pendek (ram, cpu) threshold ketat (jarak ≤ 1)
• Frasa panjang (tampilkan mode x-ray) toleransi jarak ≤ 3
• Kamus fonetik memetakan salah dengar umum (vulpa ↔ falpa ↔ bulpa)

Pipeline transcript → tokenize → fuzzy match → intent itu mengubah “show ex-ray” menjadi XRAY_MODE dengan andal.

Batasan menjadi fitur

Menjadi model-free memaksa rekayasa yang lebih baik: instancing mengajarkan memori GPU, shader menggantikan Photoshop, dan pipeline suara membuat app aksesibel tanpa mouse. Terkadang aset termurah adalah tanpa aset sama sekali.

Prosedural bukan soal pamer. Ini soal membayar biaya di tempat yang penting — di kode yang bisa di-version, di-cache, dan dipakai ulang.