Kakalagay ko lang ng isang kuwarto sa site na ito. Isa itong study sa isang bahay na hindi umiiral, sa burol sa itaas ng karagatan, at puwede mo itong lakarin, umupo at humawak ng mga bagay. Kathang-isip ang bahay. Totoo ang lahat ng puwede mong hawakan dito: ang mga libro ko, ang mga kursong kinuha ko, ang mga produktong binuo ko, ang mga parkeng napuntahan ko at ang mga recommendation na isinulat ng mga kasamahan ko para sa akin sa LinkedIn.
Apat na attempt ang inabot bago ako nakarating dito, at nag-fail ang unang tatlo. Sa tingin ko mas kapaki-pakinabang kung paano sila nag-fail kaysa sa mismong kuwarto, kaya iyon ang paksa ng post na ito.
Bakit nga ba three.js
Nagsimula ito sa X (Twitter). Paulit-ulit akong nakakakita roon ng mga kamangha-manghang 3D work, mga bagay na binuo ng mga tao para tumakbo sa browser gamit ang three.js, at gusto ko itong subukan. Iyon talaga ang buong dahilan. Nang isulat namin ang goal para sa unang attempt, simple lang: ang punto ay bumuo ng isang bagay sa three.js. Na-curious lang ako.
Unang attempt: sampung itsura ng iisang ideya
Noong huling bahagi ng Setyembre, sinimulan ko sa blog archive ko bilang paksa: 523 post, nakaayos sa espasyo ayon sa oras at paksa. Gumawa kami ng anim na concept bilang totoong render: isang landscape ng mga haligi, isang two-ink risograph print, isang star map, isang bagyo ng papel, isang terrain relief at isang maliit na desk diorama. Apat pang ideya (isang libro, isang puno, isang press room, tinta sa tubig) ang umabot lang sa magaspang na mock. Nasa ibaba ang siyam sa sampu. Hindi kailanman na-save ang landscape ng mga haligi.
Tinanggihan ko ang lahat ng sampu. Nang isulat namin kung bakit, simple ang konklusyon. Iisang ideya ang bawat attempt: mga tuldok na gawa sa parehong mga post, iba lang ang renderer. Hindi maaayos ng sampung beses na pagpapalit ng technique ang katotohanang walang tunay na paksa ang piyesa. Gumuhit din kami ng parehong data bilang simpleng 2D chart, bilang bar na kailangang lampasan ng 3D na bersyon. Mahusay na test iyon na irerekomenda ko sa sinumang natutuksong gumamit ng 3D para lang sa sarili nito.
Ikalawa at ikatlong attempt: isang tunay na paksa, at maling laban
Sa simula ng Oktubre, sinubukan kong muli gamit ang mga tunay na paksa: kung paano nahahanap ng Ask Sydney ang mga source sa likod ng sagot, at kung paano gumagana sa loob ang isa sa mga produkto ko. Simple ang mga unang bersyon, at ginawa talaga ang mga ito para sa mga taong tulad ko, na interesado na sa kung paano gumagana ang isang pipeline.
Kaya gumawa kami ng maayos na art direction pass sa dalawa. Mga model na gawa sa Blender, may ilaw na environment, bloom, depth of field, fog at malalambot na anino. Na-test, accessible at handa nang i-translate ang mga piyesa. Gayunman, hinusgahan ko pa ring hindi pa sapat ang galing, dahil ikinukumpara ko ang mga ito sa concept art na na-generate ko gamit ang isang image model bago kami nagsimula, at kung ihahambing doon, natatalo sila sa bawat pagkakataon.
Narito ang bawat piyesa sa tatlong yugto: ang unang bersyon, ang art-directed na bersyon at ang concept art na pinagkukumparahan ko. Una, kung paano nahahanap ng Ask Sydney ang mga source nito:
At kung paano gumagawa ng episode ang DIALØGUE:
Ang aral na isinulat namin ay hindi kayang tapatan ng real-time na three.js ang photoreal na offline render. Puwedeng gumugol ng ilang minuto ang isang still image sa iisang frame para tama ang lighting, ang depth of field at bawat texture. Ilang millisecond lang ang mayroon ang browser sa bawat frame. Kaya ang naging patakaran para sa susunod na attempt: hindi kailanman nakikipagkumpitensya sa realism ang real-time 3D. Nananalo ito sa pagtugon sa taong nasa harap nito, at kung kayang palitan ng video ang piyesa, mali ang piyesa.
Ikaapat na attempt, at marami pa ring pagtanggi
Magkakaibang model at tool ang ginamit sa tatlong attempt na iyon, kasama ang DeepSeek at GPT ng OpenAI. Wala sa mga attempt na iyon ang umabot sa quality bar ko. Ang ikaapat na attempt, noong simula ng Nobyembre, ay gamit ang Claude Opus 5.5 sa Claude Code.
Gusto kong sabihing gumana ito sa unang subok. Hindi. Bago ang kuwarto, tinanggihan ko ang isang set ng mga baso ng tubig na nagpapakita kung paano dapat hatiin ang media budget (masyadong tactical), isang piyesa ng tinta, isang landscape ng ginupit na papel na puwedeng lipadan (masyadong bland), apat na sketch ng ibang mundo, isang mapaglalakarang museo ng career ko at isang studio na may anim na desk, isa para sa bawat marketing discipline. Ang note ko sa studio ay "napakalayo sa wow factor" na hinahanap ko at "napakapangit ng anim na desk". Pangit nga ang mga iyon.
Sa akin nanggaling ang ideyang gumana, hindi sa model. Paano kung bisita ang dadalaw sa dream home ko, at ipinapakita ko sa kanila ang study ko? Inilarawan ko ang kuwarto ayon sa naiisip ko: ang desk na nakatalikod ako sa bintana, ang bookshelf, isang mahabang sofa at isang mesang mapupuwestuhan para magkape at mag-usap, isang fireplace, at sa labas, mga puno at alon ng karagatan, tulad ng Big Sur. Nang makita ko ang unang tumatakbong bersyon, sinabi kong "oo, ito ang direksyon".
Pagkatapos ay ang mga detalye. Tinanggihan ko ang mga puffy na sofa, isang generic na mesa, isang pangit na pinto, isang floor lamp at mga punong hindi mukhang Big Sur. Ang hiniling ko ay isang "world class na study room na quiet luxury ang dating". Mas maaga sa proyekto, sinubukan kong ilarawan ang pakiramdam gamit ang isang magandang hotel lobby, kung saan ang amoy at ang mga bulaklak ay nagpapadama sa iyo na ligtas ka at inaalagaan, at gamit ang isang mangkok ng ramen, na "mukhang simple pero napakahirap gawin nang tama". Iyon pa rin ang pinakamagandang paglalarawan na mayroon ako.
Nasa kaliwa ang isang maagang bersyon ng kuwarto, at nasa kanan ang kuwarto ngayon.
Paano ito ginawa
Binubuo ng Blender ang kuwarto at ibina-bake nito ang ilaw sa loob, gamit ang Cycles renderer nito, kaya hindi na kailangang kalkulahin ng browser kung paano tumatama ang sikat ng araw sa sahig. Pagkatapos, ang three.js ang gumuguhit ng kuwarto nang live at humahawak sa lahat ng tumutugon sa iyo: paglalakad, pag-upo, paghawak ng mga bagay, pananatili hanggang gabi.
May isang patakaran sa katapatan. Kathang-isip ang bahay at sinasabi nitong ganoon nga, pero totoo ang lahat ng hinahawakan ng bisita at may source ito. Maikli ang mga salita sa bawat bagay, dahil ang patakaran ko para sa kuwarto ay ipakita ito sa 3D, na may isang maikling linya at walang pader ng text.
Gumagana rin ang kuwarto sa 13 wika, at may nakasulat na bersyon para sa mga screen reader at para sa sinumang hindi ito kayang i-render ng browser.
Ang unang sampung segundo
Bago ang launch, sinubukan namin ang kuwarto sa isang development build, na mas mabagal kaysa sa totoong site, kasama ang tatlong stand-in na bisita, na bawat isa ay may ibang role, device at bilis ng koneksyon, at walang paliwanag tungkol sa page. Mga AI agent sila, hindi totoong tao, kaya itinuturing ko ito bilang smoke test sa halip na research. Gayunman, malinaw ang resulta. Ang pinakamabilis ay nakakita ng itim na screen na may "Maligayang pagdating, dahan-dahan lang." sa loob ng mga walong segundo. Ang dalawa pa ay nakakita ng itim sa buong sampung segundo. Dalawa sa kanila ang nagsabing aalis sila nang kusa. Nabasa nilang "maghintay" ang "dahan-dahan lang", at walang nagsabi kung ano ang page.
Kaya ngayon, may still na larawan ng kuwarto mula sa unang segundo, kasama ang pangalan ko at isang linya sa ilalim nito, at naglo-load lang ang mga litrato ng parke pagkatapos maging handa ang kuwarto. Wala pa akong data mula sa mga totoong bisita.
Pagkatapos ng launch, nagpatuloy ako, dahil umabot pa rin sa mga 8 segundo bago maging live ang kuwarto sa isang simulated na mabagal na phone. Sinisimulan na ngayon ng browser ang pag-download ng kuwarto kasabay ng page sa halip na pagkatapos ma-load ang code nito, dumarating ang tanawin ng karagatan sa kalahating laki at lumilinaw makalipas ang sandali, at ang 3D model mismo ay bumaba mula 2.8 MB hanggang 0.81 MB, nang walang pagkakaibang nakikita ko. Sa simulated na mabagal na phone, nagiging live na ang kuwarto sa mga 4.5 segundo. Sa sarili kong phone, smooth ito.
Ang natutunan ko
Mas mahalaga ang taste kaysa dati. Kailangan mong may taste, at may bokabularyo rin, para hilingin sa makina na likhain ang nasa isip mo. Sa buong proseso, akin ang mga ideya at ang mga pagtanggi, at AI model ang bumuo. Ang nagpasya kung magiging maganda ito ay kung masasabi ko ba kung ano ang mali (puffy, generic, masyadong bland, hindi Big Sur) at kung ano ang gusto ko bilang kapalit. Kapag hindi ko ito ma-describe, nakakakuha ako ng napakahusay na pagkakagawang bersyon ng maling bagay.
Paraan para sa isang layunin ang produkto, hindi ang layunin mismo. Kailangan mong maunawaan kung bakit mo ito binubuo, kanino ito nagsisilbi at anong mga konklusyon o impresyon ang gusto mong iwan sa mga tao. Nagsimula sa isang technique ang mga unang attempt. Nagsimula naman ang kuwarto sa isang bisitang hindi pa ako nakikilala: kung ano ang hahawakan nila at kung ano ang iisipin nila pag-alis. Nang luminaw na iyon, maraming desisyon ang kusang nabuo.
Mahalaga ba ang model? Sa tingin ko, oo. Ito ang una na nakapagpasa sa kuwarto sa bar ko. Gayunman, nang basahin ko ulit ang mga note mula sa lahat ng apat na attempt, nagbago nang kasing-dami ng model ang paksa at ang layunin, at tapat kong masasabing hindi ko mapaghihiwalay ang dalawa.
Ang kuwarto ay nasa chandlernguyen.com/study. Gumagana rin ito sa phone, tiningnan ko ang akin. Kung may binuo ka na sa 3D gamit ang AI, o sinubukan mo at sumuko, ano ang pumigil sa iyo? Gusto kong malaman kung ang mga tool ba o ang ideya ang dahilan.