Rick and Morty SDF एनीमेशन प्रोग्रामिंग

 (danielchasehooper.com)
2 पॉइंट द्वारा GN⁺ 2025-02-08 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Shader प्रोग्रामिंग सीखें

  • Rick और Morty एनीमेशन बनाना: यह एनीमेशन 240 लाइनों के कोड से बनाया गया है, और बिना किसी लाइब्रेरी या इमेज के GPU shader और signed distance fields का उपयोग करके वीडियो, वीडियो गेम या सिर्फ़ मज़े के लिए एनीमेशन बनाना समझाता है।
  • Live coding editor: पेज में एम्बेड किए गए live coding editor के ज़रिए उदाहरणों को चलाया और संशोधित किया जा सकता है।

Shader की बुनियाद

  • GLSL का उपयोग: यह कोड OpenGL Shading Language (GLSL) में लिखा गया है, और इसके लिए color_for_pixel फ़ंक्शन चाहिए जो हर pixel के लिए GPU पर चलता है।
  • Pixel color तय करना: समय के अनुसार pixel का रंग तय करने वाला फ़ंक्शन एनीमेशन बनाने का मूल है।

बुनियादी आकृतियाँ बनाना

  • वृत्त बनाना: pixel के केंद्र से दूरी को visualize करके एक वृत्त बनाया जा सकता है।
  • Signed Distance Field (SDF): आकृति के अंदर की दूरी negative और बाहर की positive दिखाई जाती है, जिससे तरह-तरह के effects दिए जा सकते हैं।

अलग-अलग shape functions

  • Bezier curve, star, rounded rectangle: अलग-अलग SDF functions का उपयोग करके जटिल आकृतियाँ बनाई जा सकती हैं।

Rick बनाना

  • चेहरे को दोहराना: Rick के चेहरे को कोड में दोहराने के लिए काफ़ी trial and error करना पड़ा, और सटीकता बढ़ाने के लिए reference image का उपयोग किया गया।
  • Outline जोड़ना: signed distance functions का उपयोग करके आकृतियों की outline बनाई जा सकती है।

आकृतियों को जोड़ना और mirroring

  • आकृतियों को जोड़ना: दो आकृतियों को जोड़कर outline बनाते समय min() फ़ंक्शन का उपयोग किया जाता है।
  • Mirroring: abs() फ़ंक्शन का उपयोग करके आकृति को किसी axis के आधार पर symmetric बनाया जा सकता है।

उन्नत तकनीकें

  • Domain distortion: pixel की position को random offset देकर आकृति को distort किया जा सकता है।
  • एनीमेशन effects: domain distortion को animate करके अनोखे visual effects बनाए जा सकते हैं।

अनंत दाँत बनाना

  • Parabola का उपयोग: parabola का उपयोग करके दाँत का आकार बनाया जा सकता है, और कई दाँत बनाते समय code duplication से बचा जा सकता है।

यह लेख shader programming के ज़रिए जटिल एनीमेशन बनाने का तरीका समझाता है, और दिखाता है कि अलग-अलग तकनीकों और टूल्स की मदद से रचनात्मक परिणाम हासिल किए जा सकते हैं।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-02-08
Hacker News की राय

  • वाकई शानदार काम और बेहतरीन पोस्ट। SDF में स्मूद anti-aliasing के लिए aastep इस्तेमाल करना अच्छा रहेगा

  • shader development सचमुच अलग ही स्तर का है। floating-point मान बदलना और तुरंत नतीजा देख पाना बहुत संतोषजनक है

  • बहुत अच्छी पोस्ट। Inigo Quilez की संबंधित YouTube playlist की सिफारिश करता हूँ

  • काम की गुणवत्ता, व्याख्या की गुणवत्ता, और पाठक को दी गई चुनौती—सब कुछ शीर्ष स्तर का है। इसे साझा करने के लिए धन्यवाद

  • GLSL का यह बहुत अच्छी तरह संरचित परिचय था। जानना चाहूँगा कि Vulkan या WebGPU/WebGL में यह कैसा है

  • 8 महीनों में इस animation को पूरा करना जबरदस्त धैर्य को दिखाता है

  • जिज्ञासा है कि development के दौरान क्या दशमलव मानों को tweak करने का बहुत iterative काम किया गया, या कोई editor इस्तेमाल किया गया। 240 लाइनों के लिए सही दशमलव मान ढूँढना काफी समय लेने वाला हो सकता है

  • इस पेज की polish हैरान कर देने वाली है

  • shader programming अलग ही स्तर की है। animation बनाने में लगने वाली मेहनत और details पर दिया गया ध्यान चौंकाने वाला है। यह पारंपरिक development की तुलना में कहीं अधिक हाथ से किया जाने वाला काम लगता है

  • इस काम की प्रभावशालीता को शब्दों में बयां करना मुश्किल है