“Verlet सिर्फ वही है जो France के Verlet इलाके से आया हो, वरना वह बस sparkling Euler है” वाला मज़ाक शानदार है
web development, Gradle और Java की knowledge से कोई इस तरह की चीज़ बनाने के स्तर तक कैसे पहुंचता है, यह जानने की जिज्ञासा है
CS undergrad नहीं किया, इसलिए कभी-कभी लगता है कि कितनी भी programming languages सीख लूं, ऐसी चीज़ें शायद कभी समझ ही नहीं पाऊंगा। OPENLY, LIBGDX, GODOT, Unity को थोड़ा छूकर देखा है, लेकिन कपड़े का simulation scratch से बनाना सच में बहुत भारी लगता है
यह सोच से कहीं ज़्यादा सरल है। इस thread में कहीं और linked “फटने वाला कपड़ा” demo मैंने software engineer career शुरू करने से पहले ही बना लिया था
यहां basic Verlet integration इस्तेमाल होता है: grid बनाने वाले 2D vectors को current position और previous position के आधार पर update करते हैं, और उन्हें पास-पड़ोस के points से एक तय दूरी बनाए रखने के लिए constrain करते हैं। उन points के बीच lines draw कर दें तो कपड़ा बन जाता है। physics simulation में fascination के चलते खोजते-खोजते यह सबसे आसान implementations में से एक लगा, इसलिए इसे सबसे पहले आज़माया था, और effort के मुकाबले result बहुत अच्छा था। बेशक उसके बाद चीज़ें बहुत ज़्यादा complex हो जाती हैं
physics simulation सीखना चाहता था, तो मुझे भी कुछ ऐसा ही महसूस हुआ था। समय के साथ सीखा कि physics जैसे knowledge domains और उन्हें implement करने वाले programming tools को अलग-अलग देखना चाहिए
खासकर game development से शुरुआत करने पर लगता है कि rigid bodies, cloth, springs, fluids जैसे हर major simulation के लिए कोई natural और idiomatic programming style होगा। शुरुआत में मुझे लगा था कि fluid simulation भी grid बनाकर और हर time step पर update rules चुनकर language के अंदर naturally express हो जाएगा। लेकिन असल में पहले problem को math और physics से model करना पड़ता है, फिर उसे language और tools पर map करना होता है, और tools हमेशा उसे idiomatically express नहीं कर पाते
particle positions और spring-based cloth simulation जैसे algorithms हैं जिन्हें code में आसानी से उतारा जा सकता है, लेकिन आगे बढ़ने की कोशिश में वही बात उल्टा misunderstanding पैदा कर रही थी। आखिरकार physics और numerical analysis में और गहराई तक जाना पड़ा, फिर problem को code में translate करना पड़ा, और final code थोड़ा rough और magic numbers से भरा हो सकता है
web development सिर्फ Java तक सीमित नहीं है और आम तौर पर component integration वाली problems से dominated होता है। structure बहुत होता है, content कम; computation libraries को delegate होती है; build time पर integration complexity और runtime पर distributed systems scale problem बनते हैं
इसके उलट simulation लिखना computation-heavy होता है, इसलिए code का अधिकांश हिस्सा वास्तविक content होता है। web development अगर heterogeneous चीज़ों का combination है, तो simulation ज्यादा homogeneous है। दिक्कत यह है कि frames per second से तय time budget के अंदर single-process performance से आप limited होते हैं
इसलिए एक execution environment पर focus कर सकते हैं। deployment problem हल कर देने वाले browser की सलाह दूंगा। Ganja[1] शायद “structure नहीं, content” के करीब ultimate simulation project हो सकता है। यह बहुत अनोखा और समझने में कठिन है, इसलिए maintenance रुक गई है, लेकिन यह काम करता है। थोड़ा ज्यादा structured दिशा में D3 है, और authors ने force-based graphs[2] जैसे modern visualization/layout algorithms पहले से बना रखे हैं। ज्यादा approachable starting point Processing[3] family हो सकता है, जो Java से शुरू हुआ और Python व JavaScript आदि में port हुआ
हालांकि एक cloth simulation, game engine से तुलना करें तो चूहे की एक cell जैसा स्तर है। game engines बहुत बड़े होते हैं, और वहां भी आप खुद simulation लिखने के बजाय बहुत सारी internal integration ही करते हैं
1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
2 - https://github.com/d3/d3-force/tree/main/src
3 - https://processing.org/
आखिरकार सब कुछ math और physics ही है
आपने खास तौर पर game development के बारे में नहीं पूछा, लेकिन graphics, math, lighting, physics जैसी knowledge आम तौर पर उसी field में काफी फैली हुई है। cloth simulation जैसे niche topic को अलग से खोजने पर game development material से अलग information पाना मुश्किल हो सकता है
आज https://alextardif.com/LearningGraphics.html पढ़ा, यह कई दिशाओं में guide कर सकता है। https://learnopengl.com/ को Vulkan, Metal, DX12 जैसे नए APIs के दौर में भी लगातार अच्छा माना जाता है। लेकिन API को solve होने वाली problem का करीब 5% मानें। सच कहूं तो इससे भी कम हो सकता है, लेकिन Vulkan सुनी-सुनाई बातों से भी ज्यादा heavy है
अगर C/C++ सीखना नहीं चाहते, तो WebGL community बड़ी है, इसलिए related subreddits या forums से शुरू कर सकते हैं। फिर भी API और platform, असल physics simulation वाले impressive और नए हिस्से के ऊपर की shell जैसे हैं
source जोड़ूं तो: मैं web development/Gradle/Java developer हूं, और कुछ साल पहले की कोशिश के बाद leisure time में फिर से game engine बना रहा हूं
यह इतना कठिन नहीं है। JavaScript में हर point को (x,y,z) के रूप में represent करें और उसे mass दें, फिर हर frame में gravity apply करें और जरूरत हो तो थोड़ा noise add कर दें
जब भी particle move करने की कोशिश करे, trigonometry से force को edges के जरिए दूसरे points तक transfer करें, और runaway न हो इसलिए थोड़ा damping डालें। mass बाद में तय करता है कि force से हर point कितना प्रभावित होगा। अगर 3D भारी लगे तो पहले 2D में करें
वीडियो में जिस बात पर पर्याप्त ज़ोर नहीं दिया गया, वह यह है कि कपड़े का एक functional मकसद भी होता है। कपड़ा दुश्मन की आकृति को छिपा देता है, जिससे model को पहचानना मुश्किल हो जाता है
FromSoft games का शायद सबसे innovative पहलू कहे जा सकने वाले सटीक hit detection और melee combat पर आधारित game में, आज़ादी से बहते कपड़े की वजह से यह तय करना कठिन हो जाता है कि attack hit कराने के लिए character को कितना पास रखना है, और hit से बचने के लिए कितना दूर रहना है। इसमें unpredictable movement और attack patterns जुड़ जाएँ तो difficulty और बढ़ जाती है और हर fight अलग महसूस होती है
असल दुनिया में भी कपड़े की यही प्रकृति होती है। robe या cloak पहने दुश्मन कहीं ज़्यादा खतरनाक और मुकाबला करने में कठिन होता है
gameplay loop की वजह से निजी तौर पर मैं FromSoft games का आनंद नहीं लेता, लेकिन design के लिहाज़ से उन्हें इतिहास के कुछ सबसे अच्छी तरह बनाए गए video games में मानता हूँ
मेरा 14 साल पहले बनाया हुआ version भी है: https://www.youtube.com/watch?v=G05M_Y6NQVM
मैं सहमत हूँ कि ऐसा basic setup implement करना बहुत आसान है, और result सच में शानदार दिखता है
वह मैंने बनाया था। Codepen पर डाला गया original version लगभग 13 साल पहले का था
मुझे भी यकीन नहीं होता, लेकिन जब सोचता हूँ कि यह मेरी पहली programming job मिलने से पहले की बात थी, तो सच में बहुत पुराना लगता है
2000 के video game Hitman में भी cloth था, और 2008 के Mirror's Edge में tearable cloth था। शायद दोनों में से कोई भी पहला नहीं रहा होगा
ऐसे cloth simulators हमेशा कुछ हद तक unstable लगते हैं। Grid cloth generate करके देखें तो वह उछलने लगता है और randomly move करना शुरू कर देता है
सोचता हूँ कि क्या यह IEEE 754 floating-point errors के जमा होने की वजह से होता है
physics simulation या game engine के context में numerical integration के बारे में देखना अच्छा रहेगा। शुरुआत के लिए https://en.wikipedia.org/wiki/Numerical_methods_for_ordinary... देख सकते हैं
मेरी समझ में यह सिर्फ floating-point error नहीं है, बल्कि continuous function को simple discrete steps से approximate करने की प्रकृति की वजह से भी होता है। linked Wikipedia article में भी एक graph है जिसमें बड़े steps पर floating-point precision समस्या बनने से काफी पहले ही errors जमा होते दिखते हैं
अलग-अलग numerical integration techniques में अलग-अलग trade-offs होते हैं। Euler method, Verlet, Runge-Kutta जैसी चीज़ें हैं; कुछ तरीकों में total energy जमा होने की प्रवृत्ति होती है और कुछ में energy loss होने की, और दोनों ही गलत behavior हैं। ज़्यादा complex तरीके थोड़ा बेहतर काम करते हैं, लेकिन फिर यह सवाल आता है कि हर step को complex बनाने का फायदा, ज़्यादा simple और तेज़ algorithm को अधिक बार repeat करने से बेहतर है या नहीं
physics simulation में energy conservation अपने-आप default रूप से काम नहीं करता, जब तक उसे explicitly code न किया जाए। उदाहरण के लिए, periodic direct correction जैसी चीज़ की ज़रूरत होती है
कारण सिर्फ rounding errors नहीं हैं, बल्कि time quantization और mathematical model खुद से आने वाली दूसरी छोटी errors भी हैं
अगर error damping की तरफ हो तो असलियत की तरह energy dissipate होकर movement अंततः रुकने का असर देती है, और अगर acceleration की तरफ हो तो simulation runaway हो जाता है
इस site के author से कहना चाहूँगा कि यह बहुत अच्छी तरह बनाया गया है। यह बिना external JavaScript के वैसे ही चलता है, और mobile पर भी काम करता है
आजकल ज़्यादातर text-based websites के बारे में ऐसा कहना मुश्किल है
सच में impressive काम है। simple है लेकिन देखते रहने पर मजबूर करता है, और अच्छी तरह दिखाता है कि Verlet integration natural और plausible cloth simulation बनाने में कितना powerful है
रुचि हो तो Hitman game engine से आया Jakobsen paper भी recommend करूँगा। यह classic material है
अच्छा लगता है कि कोई सच में यह कठिन सवाल पूछ रहा है कि ऐसी चीज़ें कैसे काम करती हैं। हर बार महसूस होता है कि सब कुछ वर्षों में जमा हुए अनगिनत छोटे steps से बनता है
सोचता हूँ कि क्या वे उस point पर पहुँचते हैं जहाँ math दीवार जैसी लगती है, या फिर समझ आने तक उस पर लगातार चोट करते रहते हैं
सबसे दिलचस्प बात यह है कि सिर्फ कुछ parameters और constraints set करने से इतनी realistic movement निकल आती है
लगता है कि हमारे आसपास की दुनिया भी शायद hidden models और forces का ही एक set है, और हमारा काम बस उन्हें discover और simulate करना है। खूबसूरत काम है
1 टिप्पणियां
Hacker News की राय
ब्राउज़र में देख सकने वाला एक और उदाहरण: https://oimo.io/works/cloth/
Marian Pekár का लेख पढ़कर Verlet integration समझ पाया और खुद कपड़े का simulation बना सका: https://pikuma.com/blog/verlet-integration-2d-cloth-physics-...
web development, Gradle और Java की knowledge से कोई इस तरह की चीज़ बनाने के स्तर तक कैसे पहुंचता है, यह जानने की जिज्ञासा है
CS undergrad नहीं किया, इसलिए कभी-कभी लगता है कि कितनी भी programming languages सीख लूं, ऐसी चीज़ें शायद कभी समझ ही नहीं पाऊंगा। OPENLY, LIBGDX, GODOT, Unity को थोड़ा छूकर देखा है, लेकिन कपड़े का simulation scratch से बनाना सच में बहुत भारी लगता है
यहां basic Verlet integration इस्तेमाल होता है: grid बनाने वाले 2D vectors को current position और previous position के आधार पर update करते हैं, और उन्हें पास-पड़ोस के points से एक तय दूरी बनाए रखने के लिए constrain करते हैं। उन points के बीच lines draw कर दें तो कपड़ा बन जाता है। physics simulation में fascination के चलते खोजते-खोजते यह सबसे आसान implementations में से एक लगा, इसलिए इसे सबसे पहले आज़माया था, और effort के मुकाबले result बहुत अच्छा था। बेशक उसके बाद चीज़ें बहुत ज़्यादा complex हो जाती हैं
खासकर game development से शुरुआत करने पर लगता है कि rigid bodies, cloth, springs, fluids जैसे हर major simulation के लिए कोई natural और idiomatic programming style होगा। शुरुआत में मुझे लगा था कि fluid simulation भी grid बनाकर और हर time step पर update rules चुनकर language के अंदर naturally express हो जाएगा। लेकिन असल में पहले problem को math और physics से model करना पड़ता है, फिर उसे language और tools पर map करना होता है, और tools हमेशा उसे idiomatically express नहीं कर पाते
particle positions और spring-based cloth simulation जैसे algorithms हैं जिन्हें code में आसानी से उतारा जा सकता है, लेकिन आगे बढ़ने की कोशिश में वही बात उल्टा misunderstanding पैदा कर रही थी। आखिरकार physics और numerical analysis में और गहराई तक जाना पड़ा, फिर problem को code में translate करना पड़ा, और final code थोड़ा rough और magic numbers से भरा हो सकता है
इसके उलट simulation लिखना computation-heavy होता है, इसलिए code का अधिकांश हिस्सा वास्तविक content होता है। web development अगर heterogeneous चीज़ों का combination है, तो simulation ज्यादा homogeneous है। दिक्कत यह है कि frames per second से तय time budget के अंदर single-process performance से आप limited होते हैं
इसलिए एक execution environment पर focus कर सकते हैं। deployment problem हल कर देने वाले browser की सलाह दूंगा। Ganja[1] शायद “structure नहीं, content” के करीब ultimate simulation project हो सकता है। यह बहुत अनोखा और समझने में कठिन है, इसलिए maintenance रुक गई है, लेकिन यह काम करता है। थोड़ा ज्यादा structured दिशा में D3 है, और authors ने force-based graphs[2] जैसे modern visualization/layout algorithms पहले से बना रखे हैं। ज्यादा approachable starting point Processing[3] family हो सकता है, जो Java से शुरू हुआ और Python व JavaScript आदि में port हुआ
हालांकि एक cloth simulation, game engine से तुलना करें तो चूहे की एक cell जैसा स्तर है। game engines बहुत बड़े होते हैं, और वहां भी आप खुद simulation लिखने के बजाय बहुत सारी internal integration ही करते हैं
1 - https://github.com/enkimute/ganja.js/blob/master/ganja.js
2 - https://github.com/d3/d3-force/tree/main/src
3 - https://processing.org/
आपने खास तौर पर game development के बारे में नहीं पूछा, लेकिन graphics, math, lighting, physics जैसी knowledge आम तौर पर उसी field में काफी फैली हुई है। cloth simulation जैसे niche topic को अलग से खोजने पर game development material से अलग information पाना मुश्किल हो सकता है
आज https://alextardif.com/LearningGraphics.html पढ़ा, यह कई दिशाओं में guide कर सकता है। https://learnopengl.com/ को Vulkan, Metal, DX12 जैसे नए APIs के दौर में भी लगातार अच्छा माना जाता है। लेकिन API को solve होने वाली problem का करीब 5% मानें। सच कहूं तो इससे भी कम हो सकता है, लेकिन Vulkan सुनी-सुनाई बातों से भी ज्यादा heavy है
अगर C/C++ सीखना नहीं चाहते, तो WebGL community बड़ी है, इसलिए related subreddits या forums से शुरू कर सकते हैं। फिर भी API और platform, असल physics simulation वाले impressive और नए हिस्से के ऊपर की shell जैसे हैं
source जोड़ूं तो: मैं web development/Gradle/Java developer हूं, और कुछ साल पहले की कोशिश के बाद leisure time में फिर से game engine बना रहा हूं
जब भी particle move करने की कोशिश करे, trigonometry से force को edges के जरिए दूसरे points तक transfer करें, और runaway न हो इसलिए थोड़ा damping डालें। mass बाद में तय करता है कि force से हर point कितना प्रभावित होगा। अगर 3D भारी लगे तो पहले 2D में करें
Elden Ring के शानदार cloth design का विश्लेषण करने वाला Polygon वीडियो याद आता है: https://youtu.be/wSSqx-Dh6ko
FromSoft games का शायद सबसे innovative पहलू कहे जा सकने वाले सटीक hit detection और melee combat पर आधारित game में, आज़ादी से बहते कपड़े की वजह से यह तय करना कठिन हो जाता है कि attack hit कराने के लिए character को कितना पास रखना है, और hit से बचने के लिए कितना दूर रहना है। इसमें unpredictable movement और attack patterns जुड़ जाएँ तो difficulty और बढ़ जाती है और हर fight अलग महसूस होती है
असल दुनिया में भी कपड़े की यही प्रकृति होती है। robe या cloak पहने दुश्मन कहीं ज़्यादा खतरनाक और मुकाबला करने में कठिन होता है
gameplay loop की वजह से निजी तौर पर मैं FromSoft games का आनंद नहीं लेता, लेकिन design के लिहाज़ से उन्हें इतिहास के कुछ सबसे अच्छी तरह बनाए गए video games में मानता हूँ
मुझे ऐसे cloth animations हमेशा पसंद रहे हैं। शायद पहली बार मैंने dissimulate का Codepen tearable cloth demo देखा था, और यकीन नहीं होता कि वह code 9 साल पहले लिखा गया था
[1] - https://codepen.io/dissimulate/pen/eZxEBO
[2] - https://github.com/Dissimulate/Tearable-Cloth
मैं सहमत हूँ कि ऐसा basic setup implement करना बहुत आसान है, और result सच में शानदार दिखता है
मुझे भी यकीन नहीं होता, लेकिन जब सोचता हूँ कि यह मेरी पहली programming job मिलने से पहले की बात थी, तो सच में बहुत पुराना लगता है
ऐसे cloth simulators हमेशा कुछ हद तक unstable लगते हैं। Grid cloth generate करके देखें तो वह उछलने लगता है और randomly move करना शुरू कर देता है
सोचता हूँ कि क्या यह IEEE 754 floating-point errors के जमा होने की वजह से होता है
मेरी समझ में यह सिर्फ floating-point error नहीं है, बल्कि continuous function को simple discrete steps से approximate करने की प्रकृति की वजह से भी होता है। linked Wikipedia article में भी एक graph है जिसमें बड़े steps पर floating-point precision समस्या बनने से काफी पहले ही errors जमा होते दिखते हैं
अलग-अलग numerical integration techniques में अलग-अलग trade-offs होते हैं। Euler method, Verlet, Runge-Kutta जैसी चीज़ें हैं; कुछ तरीकों में total energy जमा होने की प्रवृत्ति होती है और कुछ में energy loss होने की, और दोनों ही गलत behavior हैं। ज़्यादा complex तरीके थोड़ा बेहतर काम करते हैं, लेकिन फिर यह सवाल आता है कि हर step को complex बनाने का फायदा, ज़्यादा simple और तेज़ algorithm को अधिक बार repeat करने से बेहतर है या नहीं
कारण सिर्फ rounding errors नहीं हैं, बल्कि time quantization और mathematical model खुद से आने वाली दूसरी छोटी errors भी हैं
अगर error damping की तरफ हो तो असलियत की तरह energy dissipate होकर movement अंततः रुकने का असर देती है, और अगर acceleration की तरफ हो तो simulation runaway हो जाता है
इस site के author से कहना चाहूँगा कि यह बहुत अच्छी तरह बनाया गया है। यह बिना external JavaScript के वैसे ही चलता है, और mobile पर भी काम करता है
आजकल ज़्यादातर text-based websites के बारे में ऐसा कहना मुश्किल है
सच में impressive काम है। simple है लेकिन देखते रहने पर मजबूर करता है, और अच्छी तरह दिखाता है कि Verlet integration natural और plausible cloth simulation बनाने में कितना powerful है
रुचि हो तो Hitman game engine से आया Jakobsen paper भी recommend करूँगा। यह classic material है
अच्छा लगता है कि कोई सच में यह कठिन सवाल पूछ रहा है कि ऐसी चीज़ें कैसे काम करती हैं। हर बार महसूस होता है कि सब कुछ वर्षों में जमा हुए अनगिनत छोटे steps से बनता है
सोचता हूँ कि क्या वे उस point पर पहुँचते हैं जहाँ math दीवार जैसी लगती है, या फिर समझ आने तक उस पर लगातार चोट करते रहते हैं
सबसे दिलचस्प बात यह है कि सिर्फ कुछ parameters और constraints set करने से इतनी realistic movement निकल आती है
लगता है कि हमारे आसपास की दुनिया भी शायद hidden models और forces का ही एक set है, और हमारा काम बस उन्हें discover और simulate करना है। खूबसूरत काम है