Saya baru saja menaruh sebuah ruangan di situs ini. Ini adalah ruang kerja di sebuah rumah yang tidak ada, di atas bukit yang menghadap lautan, dan Anda bisa berjalan di dalamnya, duduk, dan mengambil benda-benda. Rumahnya imajiner. Semua yang bisa Anda ambil di dalamnya nyata: buku-buku saya, kursus yang pernah saya ikuti, produk yang saya bangun, taman yang pernah saya kunjungi, dan rekomendasi yang ditulis rekan kerja untuk saya di LinkedIn.
Butuh empat percobaan untuk sampai ke sini, dan tiga yang pertama gagal. Menurut saya cara kegagalan itu terjadi lebih berguna daripada ruangannya sendiri, jadi itulah isi tulisan ini.
Mengapa harus three.js
Semuanya bermula di X (Twitter). Saya terus melihat karya 3D yang menakjubkan di sana, hal-hal yang dibuat orang agar berjalan di browser dengan three.js, dan saya ingin mencobanya sendiri. Itu sebenarnya satu-satunya alasan. Ketika kami menuliskan tujuan percobaan pertama, isinya hanya bahwa intinya adalah membangun sesuatu di three.js. Saya penasaran.
Percobaan pertama: sepuluh tampilan untuk satu ide
Pada akhir September, saya memulai dengan arsip blog saya sebagai subjeknya: 523 tulisan, ditata dalam ruang menurut waktu dan topik. Kami membuat enam konsep sebagai render sungguhan: lanskap kolom, cetakan risograph dua tinta, peta bintang, badai kertas, relief medan, dan diorama meja kecil. Empat ide lagi (sebuah buku, sebuah pohon, ruang mesin cetak, tinta dalam air) hanya sampai tahap mock kasar. Sembilan dari sepuluh ada di bawah ini. Lanskap kolom tidak pernah disimpan.
Saya menolak kesepuluhnya. Ketika kami menuliskan alasannya, kesimpulannya sederhana. Setiap percobaan adalah ide yang sama, titik-titik yang dibuat dari tulisan-tulisan yang sama, dengan renderer yang berbeda. Mengganti teknik sepuluh kali tidak bisa memperbaiki kenyataan bahwa karya itu tidak punya subjek yang nyata. Kami juga menggambar data yang sama sebagai grafik 2D biasa, sebagai tolok ukur yang harus dilewati versi 3D. Itu uji yang bagus, yang akan saya sarankan kepada siapa pun yang tergoda memakai 3D hanya demi 3D itu sendiri.
Percobaan kedua dan ketiga: subjek yang nyata, dan pertarungan yang salah
Di awal Oktober saya mencoba lagi dengan subjek yang nyata: bagaimana Ask Sydney menemukan sumber di balik sebuah jawaban, dan bagaimana salah satu produk saya bekerja dari dalam. Versi pertamanya sederhana, dan sebenarnya dibuat untuk orang seperti saya, yang sudah peduli pada cara kerja sebuah pipeline.
Jadi kami melakukan tahap art direction yang serius pada keduanya. Model buatan Blender, lingkungan yang diberi pencahayaan, bloom, depth of field, kabut, dan bayangan lembut. Karya-karya itu sudah diuji, aksesibel, dan siap diterjemahkan. Namun, saya tetap menilainya belum cukup bagus, karena saya membandingkannya dengan concept art yang saya buat dengan model gambar sebelum kami mulai, dan di sebelah concept art itu, karya kami kalah setiap kali.
Berikut setiap karya dalam tiga tahap: versi pertama, versi hasil art direction, dan concept art yang saya jadikan pembanding. Pertama, cara Ask Sydney menemukan sumbernya:
Dan cara DIALØGUE membuat sebuah episode:
Pelajaran yang kami tuliskan adalah bahwa three.js real-time tidak bisa menyamai render offline yang fotorealistis. Sebuah gambar diam bisa menghabiskan beberapa menit untuk satu frame, membuat pencahayaan, depth of field, dan setiap tekstur pas sempurna. Browser hanya punya beberapa milidetik per frame. Maka aturan untuk percobaan berikutnya menjadi: 3D real-time tidak pernah bersaing dalam hal realisme. Kekuatannya ada pada kemampuan merespons orang yang ada di depannya, dan kalau sebuah video bisa menggantikan karya itu, berarti karyanya salah.
Percobaan keempat, dan masih banyak penolakan
Ketiga percobaan itu memakai model dan alat yang berbeda, termasuk DeepSeek dan GPT dari OpenAI. Tidak satu pun dari percobaan itu mencapai standar kualitas saya. Percobaan keempat, di awal November, memakai Claude Opus 5.5 di Claude Code.
Saya ingin sekali bisa mengatakan bahwa ini berhasil pada percobaan pertama. Nyatanya tidak. Sebelum ruangan ini, saya menolak serangkaian gelas berisi air yang menunjukkan bagaimana anggaran media sebaiknya dibagi (terlalu taktis), sebuah karya tinta, lanskap kertas potong untuk diterbangi (terlalu hambar), empat sketsa dunia lain, sebuah museum perjalanan karier saya yang bisa dijelajahi, dan sebuah studio dengan enam meja, satu untuk setiap disiplin pemasaran. Catatan saya tentang studio itu adalah bahwa studio itu "sangat jauh dari efek wow" yang saya cari dan bahwa "keenam meja itu buruk sekali". Memang begitu adanya.
Ide yang berhasil datang dari saya, bukan dari model. Bagaimana kalau pengunjung adalah tamu di rumah impian saya, dan saya menunjukkan ruang kerja saya? Saya menggambarkan ruangan itu seperti yang saya bayangkan: meja dengan punggung saya menghadap jendela, rak buku, sofa panjang dan meja untuk duduk mengelilinginya, minum kopi, dan mengobrol, perapian, dan di luar, pepohonan dan ombak lautan, seperti Big Sur. Ketika melihat versi pertama yang sudah berjalan, saya berkata "ya, ini arahnya".
Lalu datang soal detail. Saya menolak sofa yang menggembung, meja yang generik, pintu yang jelek, lampu lantai, dan pepohonan yang tidak terlihat seperti Big Sur. Yang saya minta adalah "ruang kerja kelas dunia dengan kemewahan yang tenang". Sebelumnya dalam proyek ini, saya pernah mencoba menggambarkan perasaan itu dengan lobi hotel yang bagus, tempat aroma dan bunga-bunganya membuat Anda merasa aman dan diperhatikan, dan dengan semangkuk ramen yang "terlihat sederhana tetapi sangat sulit membuatnya dengan benar". Itu masih deskripsi terbaik yang saya punya.
Di kiri adalah versi awal ruangan, dan di kanan adalah ruangan hari ini.
Bagaimana ini dibuat
Blender membangun ruangan dan menanamkan cahaya ke dalamnya (baking) dengan renderer Cycles-nya, sehingga browser tidak perlu menghitung bagaimana sinar matahari jatuh di lantai. three.js lalu menggambar ruangan itu secara langsung dan menangani semua yang merespons Anda: berjalan, duduk, mengambil benda, bertahan hingga petang.
Ada satu aturan kejujuran. Rumahnya imajiner dan mengatakannya, tetapi semua yang diambil seorang tamu itu nyata dan punya sumber. Tulisan pada setiap benda dibuat singkat, karena aturan saya untuk ruangan ini adalah menampilkannya dalam 3D, dengan satu baris pendek dan tanpa dinding teks.
Ruangan ini juga tersedia dalam 13 bahasa, dan punya versi tertulis untuk pembaca layar serta bagi siapa pun yang browsernya tidak bisa menggambarnya.
Sepuluh detik pertama
Sebelum peluncuran, kami menguji ruangan ini pada build pengembangan, yang lebih lambat daripada situs sebenarnya, dengan tiga pengunjung pengganti, masing-masing diberi peran, perangkat, dan kecepatan koneksi yang berbeda, tanpa penjelasan tentang halamannya. Mereka adalah agen AI, bukan orang sungguhan, jadi saya menganggap ini smoke test, bukan riset. Meski begitu, hasilnya jelas. Yang tercepat melihat layar hitam dengan tulisan "Selamat datang, silakan luangkan waktu Anda." selama sekitar delapan detik. Dua lainnya melihat layar hitam selama sepuluh detik penuh. Dua di antaranya mengatakan akan pergi begitu saja. "Luangkan waktu Anda" terbaca sebagai "tunggu", dan tidak ada yang menjelaskan halaman apa ini.
Maka kini sebuah gambar diam ruangan itu tampil sejak detik pertama, dengan nama saya dan satu baris di bawahnya, dan foto-foto taman baru dimuat setelah ruangannya siap. Saya belum punya data dari pengunjung sungguhan.
Setelah peluncuran, saya terus memperbaikinya, karena sebuah ponsel lambat yang disimulasikan masih butuh sekitar 8 detik untuk aktif. Browser kini mulai mengunduh ruangan bersamaan dengan halamannya, bukan setelah kodenya selesai dimuat, pemandangan lautan datang dalam setengah ukuran lalu menajam sesaat kemudian, dan model 3D-nya sendiri turun dari 2,8 MB menjadi 0,81 MB, tanpa perbedaan yang bisa saya lihat. Pada ponsel lambat yang disimulasikan, ruangan kini aktif dalam sekitar 4,5 detik. Di ponsel saya sendiri, jalannya mulus.
Apa yang saya pelajari
Selera lebih penting dari sebelumnya. Anda perlu punya selera, dan juga kosakata, untuk meminta mesin membuat apa yang ada di benak Anda. Sepanjang proses, ide dan penolakannya datang dari saya, dan model AI yang membangun. Yang menentukan apakah hasilnya menjadi bagus adalah apakah saya bisa mengatakan apa yang salah (menggembung, generik, terlalu hambar, bukan Big Sur) dan apa yang saya inginkan sebagai gantinya. Ketika saya tidak bisa menjelaskannya, saya mendapat versi yang dibuat sangat baik dari hal yang salah.
Produk adalah sarana untuk mencapai tujuan, bukan tujuan itu sendiri. Anda perlu memahami mengapa Anda membangunnya, siapa yang dilayaninya, dan kesimpulan atau kesan apa yang ingin Anda tinggalkan pada orang. Percobaan-percobaan awal berangkat dari sebuah teknik. Ruangan ini berangkat dari seorang pengunjung yang belum pernah bertemu saya: apa yang ia ambil dan apa yang ia pikirkan saat pergi. Begitu itu jelas, banyak keputusan menjadi dengan sendirinya.
Apakah modelnya berpengaruh? Menurut saya ya. Ini yang pertama berhasil membawa ruangan ini melewati standar saya. Namun, ketika saya membaca kembali catatan dari keempat percobaan, subjek dan tujuannya berubah sebanyak modelnya, dan sejujurnya saya tidak bisa memisahkan keduanya.
Ruangan ini ada di chandlernguyen.com/study. Ruangan ini berjalan di ponsel juga, saya sudah memeriksanya di ponsel saya. Jika Anda pernah membangun sesuatu dalam 3D dengan AI, atau mencoba lalu menyerah, apa yang menghentikan Anda? Saya penasaran apakah itu alatnya atau idenya.