साइकेडेलिक ग्राफिक्स 0: परिचय

 (benpence.com)
1 पॉइंट द्वारा GN⁺ 2025-01-25 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • साइकेडेलिक animation और game visuals बनाने के लिए यह शुरुआती भाग है; बिना किसी पूर्व-ज्ञान के भी इसे follow किया जा सके, इसलिए यह UV और color calculation से शुरू करता है
  • 3D model में रंग भरने की कुंजी UV mapping/texturing को समझना है, जो 2D image area को 3D surface से जोड़ता है
  • UV coordinates texture पर position दिखाने वाली 0.0~1.0 range की दो values हैं; (0.5, 1.0) horizontal 50% और vertical 100% point के बराबर है
  • Graphics में colors आमतौर पर RGB की तीन values से represent किए जाते हैं, और UV के X·Y को red·green में बदलने पर coordinate changes color gradient के रूप में दिखते हैं
  • Example code पूरी screen को ढकने वाली एक 3D surface पर per-pixel independent calculation से color तय करता है, इसलिए general programming से अलग सोचने का तरीका चाहिए

Series का लक्ष्य और आधार

  • Psychedelic Graphics series animation और games में इस्तेमाल किए जा सकने वाले psychedelic visuals बनाने के तरीके पर है
  • Graphics या programming का prior knowledge जरूरी नहीं है, लेकिन trigonometry और programming experience समझने में मदद करता है
  • लक्ष्य video example में इस्तेमाल psychedelic graphics के basic principles सीखना है
  • Videos का अधिकतर हिस्सा Blender से बनाया गया है, लेकिन इस series की techniques को दूसरे environments में ले जाना आसान है और Blender को part 3 में cover किया गया है
  • Part 0 और part 1 web पर चलने वाले examples की ओर बढ़ते हैं

3D models और UV mapping

  • 3D model points और faces से बनी surface है

    • Computer graphics 3D जैसे दिखते हैं, लेकिन graphics code लिखते समय अक्सर 2D में सोचना पड़ता है
    • जब आप 3D editing program में model बनाते हैं, तो असल में आप space में मौजूद points यानी vertices और उन vertices को जोड़ने वाले faces बनाते हैं
    • Model एक hollow surface होता है, और screen पर केवल surface ही दिखती है
    • Games और animation की लगभग सभी 3D shapes आखिरकार ऐसे points और faces में ही बदलती हैं
    • Smooth दिखने वाले models में भी अक्सर इतने ज्यादा points और faces होते हैं कि boundaries पहचानना मुश्किल हो जाता है

  • Texture 3D surface पर लगाने के लिए 2D image है

    • 3D surface में रंग जोड़ने के standard तरीके के रूप में UV mapping/texturing इस्तेमाल किया जाता है
    • जैसे Earth का 2D projection कुछ areas में stretched या distorted दिख सकता है, वैसे ही 3D model के colors को 2D में unfold की गई image में भी distortion हो सकता है
    • Unfold की गई 2D image एक texture है, जिसमें बाद में 3D model surface पर लगाए जाने वाले colors होते हैं
    • Image texture बनाने का एक तरीका है कि खाली image file बनाई जाए, फिर 3D object के हर face के लिए तय किया जाए कि उस image का कौन-सा हिस्सा इस्तेमाल होगा
    • अलग-अलग 3D faces एक ही texture area share कर सकते हैं; symmetric body जैसी चीजों में एक तरफ color करके दोनों sides के faces को वही area assign करना आम है
    • हर face द्वारा इस्तेमाल texture area का actual 3D face के size या ratio जैसा होना जरूरी नहीं है

Texture painting और UV coordinates

  • Texture पर paint करने से वह model पर दिखता है

    • Texture पर paint की गई हर चीज 3D model पर दिखाई देती है
    • अधिकतर software 3D model पर सीधे paint करने पर image texture को आपकी ओर से color करने वाली सुविधा देते हैं

  • UV coordinates texture पर 2D position हैं

    • 3D model के हर face के लिए reserve किया गया texture area UV map है, यानी image texture के एक हिस्से और 3D model को जोड़ने वाला data
    • UV को image texture पर position दिखाने वाले 2D coordinates के रूप में देखा जा सकता है
    • हर 3D face कई points से define होता है, और जब वे points image texture पर placed होते हैं, तो हर point के पास UV coordinate होता है
    • (0.5, 1.0) में पहली value 0.5 left-right direction के halfway point को, और दूसरी value 1.0 vertical direction के very top को दर्शाती है
    • UV values दोनों आमतौर पर 0.0 से 1.0 के बीच होती हैं, और मुख्य रूप से (0, 0) और (1, 1) से घिरे rectangle के अंदर का coordinate space इस्तेमाल किया जाता है
    • Pixel position की जगह 0 और 1 इस्तेमाल करने से left-right और up-down में कितना move किया गया है, यह ratio में express किया जा सकता है; 100 से multiply करने पर इसे percentage की तरह समझ सकते हैं
    • असल में दो dimensions के नाम U और V हैं; X·Y·Z पहले से 3D position के लिए इस्तेमाल होते हैं, इसलिए UV नाम इस्तेमाल किया जाता है

Graphics में colors और data types

  • RGB तीन values से color represent करता है

    • Computer graphics में color आमतौर पर RGB, यानी red·green·blue से represent होता है
    • किसी single color में red, green और blue की मात्रा आमतौर पर 0.0 से 1.0 के बीच की value होती है
    • Red को (1.0, 0.0, 0.0), black को (0.0, 0.0, 0.0), white को (1.0, 1.0, 1.0) से represent किया जाता है
    • Web graphics में इस्तेमाल 0xff0000 जैसी hexadecimal notation भी वही information अलग तरीके से दिखाती है

  • UV को color के रूप में देखने पर coordinates दिखते हैं

    • UV coordinates visualize करते समय conventionally पहली value X को red, दूसरी value Y को green के रूप में इस्तेमाल किया जाता है, और blue को 0.0 रखा जाता है
    • UV (0, 1) color (0.0, 1.0, 0.0) बन जाता है और green दिखता है
    • UV (1, 0) color (1.0, 0.0, 0.0) बन जाता है और red दिखता है
    • Rectangle को UV position के हिसाब से color करने पर, ऊपर-बाईं ओर जाते हुए green मजबूत होता है और नीचे-दाईं ओर red हो जाता है
    • नीचे-बाईं ओर red और green दोनों 0 हैं, इसलिए black होता है; ऊपर-दाईं ओर red और green दोनों शामिल होते हैं, इसलिए yellow होता है

  • float, vec2, vec3

    • float एक decimal number, यानी floating-point number है
    • vec vector को दर्शाता है; vec2 दो decimal numbers की pair है, और vec3 तीन decimal numbers का group है
    • RGB color में red·green·blue तीन values होती हैं, इसलिए इसे vec3 से represent किया जाता है
    • UV में X और Y दो values होती हैं, इसलिए यह vec2 के बराबर है

Example graphics code कैसे execute होता है

  • इस series के code examples अलग 3D model इस्तेमाल नहीं करते, बल्कि पूरी screen घेरने वाली एक 3D surface इस्तेमाल करते हैं
  • Image texture से color जोड़ने के बजाय, code image texture पर colors को सीधे तय करता है
  • Processing flow इस प्रकार है
    • 3D scene का camera calculate करता है कि कौन-सी 3D surface दिख रही है
    • हर face के लिए reserve किए गए texture area, यानी UV mapping, का इस्तेमाल करके UV coordinates calculate किए जाते हैं
    • Calculated UV coordinates और 3D position जैसी information code को दी जाती है
    • Code उस position का color तय करता है
  • इस processing को प्रति second millions of times होने वाली प्रक्रिया के रूप में समझा जा सकता है
  • Graphics code screen के एक point से दूसरे point तक continuous line सीधे draw करने के तरीके जैसा नहीं है; यह ज्यादा उस तरीके जैसा है जिसमें हर location चुने जाने पर उस location का color answer किया जाता है
  • आप जो code लिखते हैं, वह पूरे color बनाने के लिए सिर्फ एक बार execute नहीं होता; बल्कि screen के छोटे हिस्से यानी हर pixel के लिए execute होता है
  • दूसरे screen areas के color को check न कर पाने की constraint के कारण, graphics programming में general programming experience होने पर भी अलग thinking model चाहिए
  • part 1 में इन्हीं constraints के अंदर interesting visuals बनाने के तरीकों की ओर बढ़ा जाता है

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

1 टिप्पणियां

 
GN⁺ 2025-01-25
Hacker News की राय

  • मैं David Tristram हूं। 1990 के दशक के कंप्यूटर ग्राफिक्स परफॉर्मेंस ग्रुप Raster Masters का संस्थापक सदस्य था, और जैसा @hopkins ने कहा, हम हाई-एंड Silicon Graphics वर्कस्टेशन से Grateful Dead, Herbie Hancock, Graham Nash जैसे लाइव संगीत के साथ सिंथेसाइज्ड वीडियो बनाते थे
    कई बदलावों के बाद अब मैं मुख्य रूप से 2D वीडियो प्रोसेसिंग एनवायरनमेंट Resolume Avenue और TouchDesigner में काम कर रहा हूं। ये लिंक प्रेरणा देते हैं

    • जानना चाहूंगा कि Raster Masters के बाकी सदस्य कौन थे, और Grateful Dead कॉन्सर्ट में कौन-सी पागलपन भरी घटनाएं हुई थीं
      आजकल प्रेजेंटेशन में लैपटॉप से प्रोजेक्टर जोड़ने पर भी स्क्रीन आएगी या नहीं, हर बार पासा फेंकने जैसा तनाव रहता है; उस समय बैंड के ऊपर स्क्रीन पर लाइव हाई-रेजोल्यूशन SGI वीडियो दिखाने के लिए किस तरह के प्रोजेक्टर, calibration और तैयारी की जरूरत पड़ती थी, यह भी जानना चाहूंगा
    • क्या देखने लायक काम के लिंक उपलब्ध हैं?
    • लगता है मैंने करीब 1992 में कुछ Dead शो में आपका काम देखा था

  • अगर बहुत low-level में उतरे बिना psychedelic graphics के साथ प्रयोग करना चाहते हैं, तो hydra अच्छा है। यह JavaScript आधारित live coding environment है और learning curve भी आसान है

    • क्या इसमें music input सपोर्ट करने वाली कोई चीज भी है? Winamp के दौर में visualization plugins बहुत पसंद थे, लेकिन आजकल लगता है वह कला जैसे मर गई है
    • dwitter.net पर भी JavaScript से बने psychedelic graphics के कई उदाहरण हैं

  • मूल डॉक्यूमेंट और UV coordinates की बात करें, तो पहले हम rectangular mesh के हर vertex के लिए UV texture coordinates को दिलचस्प तरीके से displace करने के तरीके काफी खोजते थे
    उस समय per-vertex रंगों का इस्तेमाल होता था, और आज होता तो शायद ShaderToy में दिखने जैसे fragment (pixel) shader इस्तेमाल करता। खास तौर पर दिलचस्प तरीका है flow field के साथ texture coordinates को advect करना। कोई भी 2D vector field लें और हर coordinate पर बार-बार displacement लागू करें। सिर्फ inaccurate explicit method से भी नतीजे अच्छे आते हैं
    जब coordinates बहुत दूर तक distort हो जाते हैं, तो image पहचानी नहीं जाती; इसका आसान हल है coordinates पर एक “restore” force लगाना, जो उन्हें मूल स्थिति में वापस लाए। तब वे mirror foil के टुकड़े को फैलाने जैसे अपनी जगह पर वापस उछलते हैं
    अब मैं इस तरह के displacement effects के साथ feedback भी इस्तेमाल कर रहा हूं। बहुत छोटे displacement को बार-बार apply करने पर fluid flow जैसी काफी मिलती-जुलती motion मिलती है

    • Jeremy Huxtable का बनाया PostScript melt भी इसी तरह था। वही व्यक्ति जिसने मूल NeWS “Big Brother” Eyes बनाया था, जिसने XEyes को प्रेरित किया
      किसी random rectangle को चुनकर random offset के साथ copy करने की प्रक्रिया दोहराने पर बहुत digital, square और sharp effect भी थोड़ी randomness (dithering) के जरिए smooth और organic effect में बदल जाता है। यह black-and-white में भी अच्छा काम करता था, और आखिरकार बस PostScript ही था
      https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
      Jeremy का मूल “Big Brother” eye.ps भी है। यह गोल NeWS eyeball window दिखाने वाला typical demo था
      https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
    • Kai Power Goo का सरल, direct-manipulation वाला मजा याद आ जाता है
      LGR: Kai's Power Goo – Classic 90s Funware for PC!
      https://www.youtube.com/watch?v=xt06OSIQ0PE

  • HTML में images पर काम करने वाले shaders आसानी से इस्तेमाल किए जा सकते हैं, यह अच्छी बात है। इस क्षेत्र में मेरी skill साधारण है, लेकिन लोग इसे कितनी दूर तक ले जाते हैं, यह देखना मजेदार है
    सिर्फ एक साधारण depth map approximation देने से भी परिणाम कहीं ज्यादा दिलचस्प हो जाते हैं। कुछ साल पहले मैंने इसी तरह की technique से images के बीच “interesting effects” के साथ smooth crossfade करने वाला project किया था; उसका article और demo है
    https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

  • सच कहूं तो इस लेख के साथ वाला Rolling Hills लेख कहीं ज्यादा दिलचस्प है
    खास तौर पर बीच के आसपास static image पर नीचे वाला code apply करने का हिस्सा प्रभावशाली है
    uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
    uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
    कई psychedelic अनुभव कर चुके व्यक्ति के तौर पर, कम से कम low, non-heroic dose पर यह असली visual experience के सबसे करीब दिखता है। waves को थोड़ा धीमा कर दें और movement range को हल्का कम कर दें तो शायद और मिलता-जुलता लगेगा
    मैं performance के लिए शानदार visual effects से ज्यादा psychedelic substances से induced visual hallucinations को reproduce करने में रुचि रखता हूं। बेशक, दोनों तरफ के artists का सम्मान है
    एक artist है जो modern tools से psychedelic videos बहुत बढ़िया बनाता है, लेकिन account name बिल्कुल याद नहीं आ रहा। मिल गया तो नीचे छोड़ दूंगा
    Rolling Hills लेख के इस हिस्से से तुलना करें तो Midsommar की mushroom tea scene, खासकर tree bark scene याद आता है। चीजों का “सांस लेना” और बहना सचमुच एक अनोखा visual experience है, और इसे अलग-अलग तरीकों से implement होते देखना अच्छा लगता है

    • शायद यह वही account न हो जिसका जिक्र किया गया था, लेकिन यह YouTube account visual experience को अच्छी तरह reproduce करता है और अन्य effects भी साथ में कवर करता है
      प्रकृति देखते समय वाली visuals, geometric patterns बनने की शुरुआत का तरीका, और “breathing” effect बहुत powerful हैं। यह कई substances को कवर करता है, सतह के हल्के सांस लेने या pulsate करने से लेकर DMT जैसे substances में दिखने वाली पूरी geometric “worlds” तक विस्तृत रूप से दिखाता है
      https://www.youtube.com/@josikinz

  • 90 के शुरुआती दशक में Todd Rundgren ने Mac ऐप Flowfazer जारी किया था। यह अनुभव को simulate नहीं करता था, लेकिन ध्यान को दूसरी ओर मोड़कर flow बनाए रखने में मदद करता था
    कुछ लोग इसे अपनी रचना के लिए guide की तरह भी इस्तेमाल करते थे
    [1] https://grokware.com/
    [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
    वह स्क्रीन सेवर और palette animation का दौर था

  • अगर आपको इस तरह की चीज़ें पसंद हैं और संगीतकार Tipper के performance में Fractaled Visions को visuals संभालते देखने का मौका मिले, तो वह जबरदस्त अनुभव होगा
    अब तक देखे गए psychedelic artifacts के visual depiction में यह सबसे सटीक था। पिछले साल उनका साथ वाला show देखा था, और वह मेरे जीवन का सबसे बेहतरीन कला-अनुभव था। Fractaled Visions के visuals की समृद्धि और जटिलता लगभग अविश्वसनीय थी
    shader programming वगैरह की काफी समझ होने के बावजूद कुछ effects देखकर लगा, “आखिर यह किया कैसे?” नीचे वाला set video अनुभव को पूरी तरह नहीं पकड़ पाता, लेकिन माहौल जरूर दे देता है। 4K 60fps में देखना बिल्कुल अलग स्तर की चीज़ था
    https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

  • यहाँ ShaderToy link चाहिए: https://www.shadertoy.com

  • इस field का पुराना Flash classic Flashback.swf याद आता है। video rendering यहाँ है: https://m.youtube.com/watch?v=KaSqrx93rS0

    • Flash के दौर में इसी video की वजह से मुझे electronic music group Shpongle के बारे में पता चला
      इस animation में Divine Moments of Truth remix इस्तेमाल हुआ था, और शायद वह “Russian Bootleg” version था। उससे पहले भी मैं electronic music सुनता था, लेकिन इस genre का electronic music पहली बार सुनकर सच में दिमाग उड़ जाने जैसा लगा

  • इस हफ्ते काम करते हुए मैं WebGL shaders लिख रहा था, और उन्हें physical camera effects जैसा दिखाने के लिए details पर काम कर रहा था
    लेकिन कभी-कभी जब गलती से कुछ गलत बन जाता है, तो इस लेख में दिखे नतीजों जैसा कुछ निकल आता है, और सच कहूँ तो वह standard image effects से कहीं ज्यादा दिलचस्प होता है
    visual रूप से इसका इस्तेमाल सीमित हो सकता है, लेकिन computer graphics कैसे काम करते हैं, इस बारे में बनाए गए हमारे models के साथ खेलना हर system को सीखने का बहुत अच्छा तरीका है। इससे सिर्फ graphics ही नहीं, बल्कि programming का basic math, GPU कैसे काम करता है और memory·CPU से उसका connection, आँखें कैसे काम करती हैं, और animation व time को handle करने का तरीका भी सीखा जा सकता है