सामग्री पर जाएं
Chandler Nguyen
AI10 मिनट पढ़ने का समय

three.js में एक कमरा बनाने में चार कोशिशें लगीं

X पर कमाल का 3D काम देखकर मैं three.js में कुछ बनाना चाहता था। एक कमरा मेरी कसौटी पर खरा उतरने से पहले चार कोशिशें, कई AI models और ढेर सारे ठुकराए गए versions लगे। हर बार क्या गलत हुआ, और taste के बारे में मैंने क्या सीखा।

मैंने अभी इस site पर एक कमरा रखा है। यह एक ऐसे घर की study है जो असल में है ही नहीं, समुद्र के ऊपर एक पहाड़ी पर, और आप उसमें घूम सकते हैं, बैठ सकते हैं और चीज़ें उठा सकते हैं। घर काल्पनिक है। उसमें जो कुछ भी आप उठा सकते हैं, वह असली है: मेरी किताबें, मेरे किए हुए courses, मेरे बनाए products, मेरे देखे हुए parks और LinkedIn पर सहकर्मियों की लिखी मेरी recommendations।

यहाँ तक पहुँचने में चार कोशिशें लगीं, और पहली तीन नाकाम रहीं। मुझे लगता है कि वे कैसे नाकाम हुईं, यह कमरे से ज़्यादा काम की बात है, इसलिए यह post उसी के बारे में है।

आखिर three.js ही क्यों

शुरुआत X (Twitter) से हुई। मुझे वहाँ कमाल का 3D काम दिखता रहता था, ऐसी चीज़ें जो लोगों ने three.js से browser में चलाने के लिए बनाई थीं, और मैं खुद इसे आज़माना चाहता था। असल में बस इतना ही कारण था। पहली कोशिश का लक्ष्य जब हमने लिखा, तो वह सीधा-सा था: मकसद three.js में कुछ बनाना है। मुझे उत्सुकता थी।

पहली कोशिश: एक ही idea के दस रूप

सितंबर के आखिर में मैंने अपने blog archive को विषय बनाकर शुरू किया: 523 posts, जो समय और topic के हिसाब से space में सजे थे। हमने छह concepts असली renders के रूप में बनाए: खंभों का एक landscape, दो रंगों की स्याही वाला risograph print, एक star map, कागज़ों का तूफ़ान, एक terrain relief और एक छोटा desk diorama। चार और ideas (एक किताब, एक पेड़, एक press room, पानी में स्याही) rough mocks तक ही पहुँचे। दस में से नौ नीचे हैं। खंभों वाला landscape कभी save नहीं हुआ।

दो रंगों की स्याही वाला print
एक star map
एक terrain
कागज़ों का तूफ़ान
कागज़ों से भरी एक desk
एक किताब, mock रूप में
एक press, mock रूप में
एक पेड़, mock रूप में
पानी में स्याही, mock रूप में

मैंने दसों ठुकरा दिए। जब हमने लिखा कि क्यों, तो निष्कर्ष सीधा था। हर कोशिश एक ही idea थी, उन्हीं posts से बने बिंदु, बस renderer अलग। दस बार technique बदलने से इस बात का हल नहीं निकल सकता था कि इस काम का कोई असली विषय ही नहीं था। हमने उसी data को एक सादे 2D chart के रूप में भी बनाया था, उस कसौटी के तौर पर जिसे 3D version को पार करना था। जो भी सिर्फ़ 3D के शौक में उसकी ओर खिंच रहा हो, उसके लिए मैं इस जाँच की सलाह दूँगा।

उन्नीस सालों की 523 posts का एक सादा 2D chart, हर topic के लिए एक पंक्ति, जो वह कसौटी थी जिसे हर 3D version को पार करना था

दूसरी और तीसरी कोशिश: असली विषय, और गलत लड़ाई

अक्टूबर की शुरुआत में मैंने असली विषयों के साथ फिर कोशिश की: Ask Sydney किसी जवाब के पीछे के sources कैसे ढूँढता है, और मेरा एक product अंदर से कैसे काम करता है। पहले versions सादे थे, और वे दरअसल मेरे जैसे लोगों के लिए बने थे, जिन्हें पहले से परवाह है कि pipeline कैसे चलती है।

इसलिए हमने दोनों पर एक ढंग का art direction pass किया। Blender में बने models, रोशनी वाला माहौल, bloom, depth of field, कोहरा और नरम परछाइयाँ। ये pieces जाँचे हुए, accessible और अनुवाद के लिए तैयार थे। फिर भी मैंने इन्हें काफ़ी अच्छा नहीं माना, क्योंकि मैं इनकी तुलना उस concept art से कर रहा था जो मैंने शुरू करने से पहले एक image model से बनवाई थी, और उसके सामने ये हर बार हार जाते थे।

यहाँ हर piece तीन चरणों में है: पहला version, art-directed version, और वह concept art जिससे मैं उसकी तुलना कर रहा था। पहले, Ask Sydney अपने sources कैसे ढूँढता है:

पहला version
Art-directed
Concept art

और DIALØGUE एक episode कैसे बनाता है:

पहला version
Art-directed
Concept art

हमने जो सबक लिखा, वह यह था कि real-time three.js किसी photoreal offline render की बराबरी नहीं कर सकता। एक still image एक frame पर मिनटों खर्च कर सकती है, ताकि रोशनी, depth of field और हर texture ठीक वैसा बैठे जैसा चाहिए। Browser के पास हर frame के लिए कुछ milliseconds होते हैं। इसलिए अगली कोशिश का नियम बन गया: real-time 3D यथार्थवाद की होड़ में कभी नहीं उतरता। वह इसलिए जीतता है कि अपने सामने खड़े व्यक्ति को जवाब देता है, और अगर कोई video उस piece की जगह ले सकता है, तो वह piece गलत है।

चौथी कोशिश, और फिर भी बहुत सारे "ना"

उन तीनों कोशिशों में अलग-अलग models और tools इस्तेमाल हुए, जिनमें DeepSeek और OpenAI का GPT भी था। उनमें से कोई भी मेरी quality की कसौटी तक नहीं पहुँची। चौथी कोशिश, नवंबर की शुरुआत में, Claude Code में Claude Opus 5.5 के साथ हुई।

मैं कहना चाहूँगा कि यह पहली बार में ही चल गया। ऐसा नहीं हुआ। कमरे से पहले मैंने कई चीज़ों को ना कहा: पानी के गिलासों का एक सेट जो दिखाता था कि media budget कैसे बाँटा जाए (बहुत tactical), एक स्याही वाला piece, उड़कर देखने के लिए कटे हुए कागज़ का एक landscape (बहुत फीका), दूसरी दुनियाओं के चार sketches, मेरे career का एक घूमने लायक museum, और छह desks वाला एक studio, हर marketing discipline के लिए एक। Studio पर मेरा नोट था कि वह उस "wow factor से बहुत दूर" है जो मैं ढूँढ रहा था और कि "छह desks बेकार हैं"। वे सचमुच थे।

पानी के गिलास: बहुत tactical
एक स्याही वाला piece
कागज़ का landscape: बहुत फीका
पक्षियों का झुंड
रंगीन काँच वाला हॉल
एक छोटी दुनिया
रात का एक शहर
मेरे career का museum
छह desks वाला studio

जो idea चला, वह मुझसे आया, model से नहीं। अगर visitor मेरे सपनों के घर में मेहमान हो, और मैं उसे अपनी study दिखाऊँ तो? मैंने कमरे का वर्णन वैसे किया जैसा मैं उसे कल्पना करता हूँ: खिड़की की ओर पीठ करके रखी मेरी desk, किताबों की अलमारी, एक लंबा sofa और बैठकर कॉफ़ी पीने और बातें करने के लिए एक मेज़, एक अँगीठी, और बाहर पेड़ और समुद्र की लहरें, Big Sur जैसी। जब मैंने पहला चलता हुआ version देखा, तो मैंने कहा "हाँ, यही सही दिशा है"।

फिर आए बारीक ब्योरे। मैंने फूले-फूले sofas, एक आम-सी मेज़, एक भद्दा दरवाज़ा, एक floor lamp और ऐसे पेड़ ठुकरा दिए जो Big Sur जैसे नहीं लगते थे। मैंने जो माँगा, वह था एक "विश्वस्तरीय, शांत विलासिता वाला study room"। परियोजना में पहले मैंने इस एहसास को बताने की कोशिश एक अच्छे hotel lobby से की थी, जहाँ खुशबू और फूल आपको सुरक्षित और देखभाल में होने का एहसास देते हैं, और रेमन के एक कटोरे से, जो "देखने में सादा लगता है, पर उसे ठीक से बनाना बहुत मुश्किल है"। मेरे पास आज भी इससे बेहतर वर्णन नहीं है।

बाईं ओर कमरे का एक शुरुआती version है, और दाईं ओर आज का कमरा।

sofa से एक ही दृश्य दो बार: शुरुआती version में फूले हुए sofas, एक गहरी अंडाकार मेज़ और एक floor lamp, और आज का कमरा जिसमें नीचा, सलीके से सिला sofa, हल्के पत्थर की मेज़, एक गोल कुर्सी और बाहर तट दिखता है

यह कैसे बना है

Blender कमरे को बनाता है और अपने Cycles renderer से उसमें रोशनी को पहले से पकाकर (bake करके) बिठा देता है, ताकि browser को यह हिसाब न लगाना पड़े कि सूरज की रोशनी फ़र्श पर कैसे पड़ती है। फिर three.js कमरे को live draw करता है और हर वह चीज़ संभालता है जो आपके जवाब में बदलती है: चलना, बैठना, चीज़ें उठाना, शाम होने तक रुके रहना।

एक ईमानदारी का नियम है। घर काल्पनिक है और यह बात साफ़ कही गई है, लेकिन मेहमान जो कुछ भी उठाता है, वह असली है और उसका एक source है। हर वस्तु पर लिखे शब्द छोटे हैं, क्योंकि कमरे के लिए मेरा नियम था कि उसे 3D में दिखाया जाए, एक छोटी पंक्ति के साथ, न कि लंबे पाठ की दीवार के साथ।

कमरा 13 भाषाओं में भी चलता है, और screen readers के लिए, और उन सबके लिए जिनका browser उसे draw नहीं कर सकता, इसका एक लिखित version भी है।

पहले दस सेकंड

Launch से पहले हमने कमरे को एक development build पर परखा, जो असली site से धीमा होता है, तीन stand-in visitors के साथ, जिनमें से हर एक को अलग भूमिका, device और connection speed दी गई थी, और page के बारे में कुछ समझाया नहीं गया था। वे AI agents थे, असली लोग नहीं, इसलिए मैं इसे शोध नहीं, एक smoke test मानता हूँ। फिर भी नतीजा साफ़ था। सबसे तेज़ वाले को लगभग आठ सेकंड तक black screen पर "स्वागत है, आराम से देखिए।" लिखा दिखा। बाकी दो ने पूरे दस सेकंड black ही देखा। उनमें से दो ने कहा कि वे अपने आप छोड़कर चले जाते। "आराम से देखिए" का मतलब उन्होंने "रुकिए" निकाला, और किसी चीज़ ने यह नहीं बताया कि page क्या है।

इसलिए अब कमरे की एक still तस्वीर पहले ही सेकंड से दिखती है, उसके नीचे मेरा नाम और एक पंक्ति के साथ, और park की तस्वीरें कमरे के तैयार होने के बाद ही load होती हैं। असली visitors का data मेरे पास अभी नहीं है।

Launch के बाद मैं लगा रहा, क्योंकि एक simulated धीमा phone अब भी live होने में लगभग 8 सेकंड ले रहा था। अब browser कमरे को page के साथ ही download करना शुरू कर देता है, page के code के load होने का इंतज़ार नहीं करता, समुद्र का दृश्य आधे आकार में आता है और थोड़ी देर बाद साफ़ हो जाता है, और 3D model खुद 2.8 MB से घटकर 0.81 MB हो गया, बिना किसी ऐसे फ़र्क के जो मुझे दिखता हो। एक simulated धीमे phone पर कमरा अब लगभग 4.5 सेकंड में live हो जाता है। मेरे अपने phone पर यह smooth चलता है।

मैंने क्या सीखा

Taste पहले से कहीं ज़्यादा मायने रखता है। आपके पास taste होना चाहिए, और वह शब्दावली भी, जिससे आप machine से वह बनवा सकें जो आपके मन में है। पूरे समय ideas और "ना" मेरे थे, और AI models ने बनाने का काम किया। यह बात कि चीज़ अच्छी बनी या नहीं, इस पर टिकी थी कि क्या मैं बता सकता था कि क्या गलत है (फूला हुआ, आम-सा, बहुत फीका, Big Sur जैसा नहीं) और उसकी जगह मुझे क्या चाहिए। जब मैं वर्णन नहीं कर पाता था, तो मुझे गलत चीज़ का बहुत अच्छी तरह बना हुआ version मिलता था।

Product अपने आप में मकसद नहीं, मकसद तक पहुँचने का ज़रिया है। आपको समझना होगा कि आप इसे क्यों बना रहे हैं, यह किसकी सेवा कर रहा है और लोगों के मन में आप कौन-से निष्कर्ष या छाप छोड़ना चाहते हैं। पहली कोशिशें एक technique से शुरू हुई थीं। कमरा एक ऐसे visitor से शुरू हुआ जो मुझसे कभी मिला नहीं: वह क्या उठाता है और जाते समय क्या सोचता है। जब यह साफ़ हो गया, तो बहुत-से फ़ैसले अपने आप हो गए।

क्या model से फ़र्क पड़ा? मुझे लगता है पड़ा। यही पहला model है जिसने कमरे को मेरी कसौटी के पार पहुँचाया। फिर भी, जब मैं चारों कोशिशों के नोट्स वापस पढ़ता हूँ, तो विषय और मकसद उतने ही बदले जितना model बदला, और सच कहूँ तो मैं दोनों को अलग नहीं कर सकता।

कमरा chandlernguyen.com/study पर है। यह phone पर भी चलता है, मैंने अपने पर देखा है। अगर आपने AI के साथ 3D में कुछ बनाया है, या कोशिश करके छोड़ दिया है, तो आपको किसने रोका? मैं जानना चाहूँगा कि वह tools थे या idea।