XOR टेक्सचर (2004)

 (lodev.org)
1 पॉइंट द्वारा GN⁺ 2024-12-19 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • XOR टेक्सचर एक सरल procedural texture है, जिसे pixel के x, y coordinates को XOR करके बनाया जाता है। image file के बिना texture mapper को जल्दी टेस्ट करने के लिए यह उपयोगी है
  • C++ में ^ operator से x ^ y value बनाई जाती है और इसे RGB में डालने पर grayscale pattern बनता है। XOR तभी 1 लौटाता है जब दो bits एक-दूसरे से अलग हों
  • texture size 2 की power हो तो pattern बेहतर दिखता है। 256 से छोटे size में value range संकरी होने से यह गहरा दिखता है, जिसे color values को multiply करके सुधारा जा सकता है
  • 256 से बड़े XOR texture में 8-bit channel की 0~255 color range सीमा बन जाती है, इसलिए quality नहीं बढ़ती। बड़े size के लिए value division या अधिक bit channels की जरूरत होती है
  • इसी coordinate-based तरीके में & और | लगाने से AND, OR textures भी बनाए जा सकते हैं। AND ज्यादा dark और OR ज्यादा bright होता है, और XOR व AND का sum OR होता है

XOR टेक्सचर कहाँ काम आ सकता है

  • XOR टेक्सचर बनाना बहुत आसान है और visually भी ठीक-ठाक दिखने वाला procedural texture है
  • demo या intro releases में इसका बहुत ज्यादा इस्तेमाल हो चुका है, इसलिए यह अच्छा choice नहीं है। games में भी flashy floor tiles जैसे use case के अलावा इसकी practical उपयोगिता कम है
  • image file load किए बिना या complex generation code लिखे बिना, नया texture mapper काम कर रहा है या नहीं, यह जल्दी check किया जा सकता है

coordinate XOR से pattern बनाना

  • basic idea मौजूदा pixel के x coordinate और y coordinate को XOR करना है
  • C++ में XOR operator ^ है
  • example code 256×256 screen के हर pixel के लिए value calculate करता है
    • Uint8 c = x ^ y
    • ColorRGB(c, c, c) से grayscale color set करता है
  • run result coordinates के bit patterns के combine होने से बने XOR pattern के रूप में दिखता है

size और color range की सीमाएँ

  • texture size 2 की power हो तो pattern बेहतर दिखता है
  • color component values 0 से 255 तक होती हैं
  • XOR operation से बनने वाली maximum color value, texture size 2 की power होने पर, texture dimension के बराबर होती है
    • 64 जैसे 256 से छोटे patterns बहुत dark दिखते हैं
    • color value को 4 गुना multiply करने से brightness वापस लाई जा सकती है
  • 512 जैसे 256 से बड़े size में color को 256 से ऊपर न जाने देने के लिए limit करना पड़ता है
    • 256 से modulo operation किया जा सकता है, लेकिन तब वह असली XOR pattern नहीं रह जाता
    • 2 से divide करना बेहतर है
  • 8-bit channel में अलग पहचानी जा सकने वाली color values कम होती हैं, इसलिए 256×256 से बड़े XOR textures की quality नहीं बढ़ती
  • यदि color mode ज्यादा bit depth support करता है, तो बड़े textures की सीमा अलग हो सकती है

XOR operation का bit behavior

  • XOR दो integers के binary representation में corresponding bits पर operation करता है
  • Exclusive OR दो bits अलग हों तो 1, समान हों तो 0 लौटाता है
  • truth table इस प्रकार है
    • 0 XOR 0 = 0
    • 0 XOR 1 = 1
    • 1 XOR 0 = 1
    • 1 XOR 1 = 0
  • उदाहरण के लिए 5 XOR 13 = 8 है
    • binary में यह 0101 XOR 1101 = 1000 है

color variations

  • XOR value को केवल grayscale ही नहीं, बल्कि RGB के हर channel पर अलग तरह से apply किया जा सकता है
  • example में c = x ^ y का इस्तेमाल करके color बनाया जाता है
    • r = 255 - c
    • g = c
    • b = c % 128
  • XOR value को HSV color के hue के रूप में इस्तेमाल करके HSVtoRGB function में भी डाला जा सकता है
    • example में ColorHSV(c, 255, 255) को HSVtoRGB से convert करके pixel color के रूप में इस्तेमाल किया गया है

AND और OR textures

  • XOR की जगह AND और OR operators इस्तेमाल करके भी मिलते-जुलते coordinate-based textures बनाए जा सकते हैं
  • C++ में AND operator &, OR operator | है
  • AND तभी 1 लौटाता है जब दोनों bits 1 हों
    • 0 AND 0 = 0
    • 0 AND 1 = 0
    • 1 AND 0 = 0
    • 1 AND 1 = 1
  • OR तब 1 लौटाता है जब दोनों में से कोई एक या दोनों 1 हों
    • 0 OR 0 = 0
    • 0 OR 1 = 1
    • 1 OR 0 = 1
    • 1 OR 1 = 1
  • AND texture ज्यादा dark होता है क्योंकि 1 लौटाने का case सिर्फ एक है, और OR texture ज्यादा bright होता है क्योंकि 1 लौटाने के cases ज्यादा हैं
  • XOR texture और AND texture का sum OR texture बनता है

निष्कर्ष और example उपयोग

  • XOR texture बनाना आसान है, इसलिए texture renderer काम कर रहा है या नहीं यह test करने में उपयोगी है
  • art work या games जैसी applications के लिए यह suitable नहीं है
  • इसे x ^ y ^ z form के 3D texture के रूप में भी इस्तेमाल किया जा सकता है, और example में planet texture renderer सही से काम कर रहा है या नहीं, यह check करने के लिए इसका इस्तेमाल हुआ है

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

1 टिप्पणियां

 
GN⁺ 2024-12-19
Hacker News की रायें
  • मिडिल स्कूल में मैंने कोडिंग को थोड़ा-बहुत छुआ था, लेकिन सिर्फ़ terminal में चलने वाली साधारण CLI applications ही बना पाता था। फिर एक दिन Lode's Computer Graphics Tutorial मिला और पहली बार ऐसे आसान examples देखे जिनमें window खोलकर screen पर graphics draw किए जाते थे
    इसकी वजह से मैं Pacman, Snake, Space Invaders जैसे retro games फिर से बना पाया, और वे काम संभव हुए जो सिर्फ़ terminal से नहीं हो सकते थे
    मुझे लगता है यह site काफ़ी कम उम्र में software development career शुरू करने की वजह बनी। उस समय मैं https://lodev.org/cgtutor/ के pages और examples लगभग रट चुका था, और maths के कुछ हिस्से तब बिल्कुल समझ नहीं आते थे
  • पहले मैंने इसी तरह की technique से images generate करने वाला एक छोटा x86 assembly program बनाया था, जिसमें color 1-bit था
    x ^ y की जगह parity(x ^ y) इस्तेमाल किया था: अगर 1-bits की संख्या even हो तो एक color, odd हो तो दूसरा color। यह visually दिलचस्प था, क्योंकि यह लगभग repeat होता हुआ, लेकिन पूरी तरह repeat न होने वाली tiling जैसा दिखता था
    पुराने files खंगाले तो पता चला कि इसे 2019 में fasm से लिखा था और यह XPM2 file generate करता था, जिसे देखने के लिए manually XPM3 में convert करना पड़ता था। Result image यहाँ है: https://i.postimg.cc/FsFhXSHG/xortiles.png
    चाहें तो code भी डाल सकता हूँ, लेकिन पता नहीं किसी को ख़ास दिलचस्पी होगी या नहीं
  • Hamming distance texture याद आती है: https://chalkdustmagazine.com/features/the-hidden-harmonies-...
  • एक मज़ेदार बात: XOR texture का हर point वह सबसे छोटा integer है जो उसके ऊपर या बाईं तरफ़ दिखाई नहीं दिया है
    अपना blog चुपके से छोड़ते हुए भागता हूँ: https://nicknash.me/2012/10/26/happy-halloween/
    • example matrix में 5 से शुरू होने वाली row गलत है, और यह ऐसी होनी चाहिए
      5 4 7 6 1 0 3 2
  • color = (y == (x ^ t)) जैसी function से t की value बदलते हुए animation करें तो similar effect आता है, जिसे munching squares कहा जाता है
    मूल रूप से यह 1960s की शुरुआत में PDP-1 के लिए लिखा गया था, और मैंने इसे Computer History Museum के PDP-1 पर demo होते देखा है
    PDP-1 display सिर्फ़ points plot कर सकता है और bitmap framebuffer इस्तेमाल नहीं करता, तो मैं हमेशा सोचता था कि इसकी खास XOR texture कैसे बनती है
    पता चला कि यह screen phosphor की लंबी persistence का फायदा उठाता है, और हर point की brightness समय के साथ घटती है
    CHM पर चलने का video है, लेकिन phosphor persistence effect अच्छी तरह capture नहीं होता: https://www.computerhistory.org/collections/catalog/10266415...
    MAME में चलाए गए video में कुछ हद तक दिखता है कि phosphor persistence XOR texture कैसे बनाती है: https://youtu.be/AxJzUiaQ7xM?si=X9K47c4WyD6AisUp
  • ऐसी हज़ारों examples वाली एक site है: https://www.dwitter.net/
    Dwitter canvas इस्तेमाल करने वाली one-line JavaScript examples के लिए Twitter जैसी जगह है, और users को अपना काम 140 bytes के भीतर रखना होता है
  • मैंने इस texture का इस्तेमाल करके एक quilt बनाया था
    site के आख़िरी हिस्से की images में से एक जैसी rainbow color scale इस्तेमाल की, इसलिए यह काफ़ी मिलता-जुलता दिखता है, और 6 feet × 6 feet की decoration के रूप में दीवार पर टंगा है
  • काफ़ी शानदार site है। एक level ऊपर जाकर बाकी pages भी देखने की सलाह दूँगा
    material 20 साल पुराना है, लेकिन खासकर अगर आप shader work करते हैं, तो इसमें आज भी कई जगह काम आने वाली चीज़ें हैं
  • हाल ही में मैंने J में इस pattern से खेला था, और इसे ऐसे express किया जा सकता है
    ~:\"1/~&.#:i.2^8
    यहाँ देखा जा सकता है: https://jsoftware.github.io/j-playground/bin/html2/#base64=b...
  • अभी-अभी https://news.ycombinator.com/item?id=42414817 पढ़ा, तो लगता है XOR texture भी शायद संयोग से ही खोजी गई थी