เท็กซ์เจอร์ XOR (2004)

 (lodev.org)
1 คะแนน โดย GN⁺ 2024-12-19 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เท็กซ์เจอร์ XOR คือเท็กซ์เจอร์เชิงกระบวนวิธีแบบง่ายที่สร้างจากการนำพิกัด x, y ของพิกเซลมา XOR กัน มีประโยชน์เมื่อต้องการทดสอบ texture mapper อย่างรวดเร็วโดยไม่ต้องใช้ไฟล์ภาพ
  • ใน C++ ใช้ตัวดำเนินการ ^ เพื่อสร้างค่า x ^ y แล้วใส่ค่านั้นลงใน RGB จะได้แพตเทิร์นแบบเฉดเทา โดย XOR จะคืนค่า 1 เฉพาะเมื่อบิตทั้งสองต่างกันเท่านั้น
  • ขนาดเท็กซ์เจอร์จะดูดีเมื่อเป็น เลขยกกำลังของ 2 และสำหรับขนาดที่เล็กกว่า 256 ช่วงค่าจะแคบทำให้ภาพมืด จึงสามารถชดเชยด้วยการคูณค่าสีได้
  • เท็กซ์เจอร์ XOR ที่ใหญ่กว่า 256 จะถูกจำกัดด้วย ช่วงสี 0~255 ของช่องสี 8 บิต คุณภาพจึงไม่เพิ่มขึ้น และสำหรับขนาดที่ใหญ่กว่านี้จำเป็นต้องหารค่าหรือใช้ช่องสีที่มีบิตมากขึ้น
  • หากใช้ & และ | กับวิธีแบบพิกัดเดียวกัน ก็สร้างเท็กซ์เจอร์ AND, OR ได้เช่นกัน โดย AND จะมืดกว่า OR จะสว่างกว่า และผลรวมของ XOR กับ AND จะเป็น OR

เท็กซ์เจอร์ XOR ใช้ทำอะไรได้บ้าง

  • เท็กซ์เจอร์ XOR เป็นเท็กซ์เจอร์เชิงกระบวนวิธีที่สร้างได้ง่ายมากและดูมีความเป็นภาพพอสมควร
  • ในเดโมหรืออินโทรรีลีสมักถูกใช้บ่อยเกินไป จึงไม่ใช่ตัวเลือกที่ดี และในเกมก็มีประโยชน์เชิงปฏิบัติน้อย เว้นแต่จะใช้กับพื้นกระเบื้องฉูดฉาดอะไรทำนองนั้น
  • สามารถตรวจสอบได้อย่างรวดเร็วว่า texture mapper ตัวใหม่ทำงานหรือไม่ โดยไม่ต้องโหลดไฟล์ภาพหรือเขียนโค้ดสร้างที่ซับซ้อน

สร้างแพตเทิร์นด้วยการ XOR พิกัด

  • แนวคิดพื้นฐานคือการนำพิกัด x และพิกัด y ของพิกเซลปัจจุบันมา XOR กัน
  • ใน C++ ตัวดำเนินการ XOR คือ ^
  • โค้ดตัวอย่างคำนวณค่าของทุกพิกเซลบนหน้าจอ 256×256
    • Uint8 c = x ^ y
    • ตั้งค่าสีแบบเฉดเทาด้วย ColorRGB(c, c, c)
  • ผลลัพธ์ที่ได้จะแสดงเป็น แพตเทิร์น XOR ที่เกิดจากการรวมแพตเทิร์นบิตของพิกัดเข้าด้วยกัน

ข้อจำกัดด้านขนาดและช่วงสี

  • ขนาดเท็กซ์เจอร์จะดูดีกว่าเมื่อเป็น เลขยกกำลังของ 2
  • ค่าคอมโพเนนต์สีอยู่ระหว่าง 0 ถึง 255
  • ค่าสีสูงสุดที่ได้จากการดำเนินการ XOR จะเท่ากับมิติของเท็กซ์เจอร์ เมื่อขนาดเท็กซ์เจอร์เป็นเลขยกกำลังของ 2
    • แพตเทิร์นที่เล็กกว่า 256 เช่น 64 จะดูมืดเกินไป
    • หากคูณค่าสีด้วย 4 เท่า จะช่วยดึงความสว่างกลับมาได้
  • สำหรับขนาดที่ใหญ่กว่า 256 เช่น 512 ต้องจำกัดไม่ให้ค่าสีเกิน 256
    • สามารถทำ modulo ด้วย 256 ได้ แต่แบบนั้นจะไม่ใช่แพตเทิร์น XOR จริง ๆ แล้ว
    • การหารด้วย 2 เป็นทางเลือกที่ดีกว่า
  • ในช่องสี 8 บิต ค่าสีที่แยกแยะได้มีไม่พอ คุณภาพของเท็กซ์เจอร์ XOR ที่ใหญ่กว่า 256×256 จึงไม่สูงขึ้น
  • หากเป็นโหมดสีที่รองรับจำนวนบิตมากกว่า ข้อจำกัดของเท็กซ์เจอร์ขนาดใหญ่อาจเปลี่ยนไป

การทำงานระดับบิตของ XOR

  • XOR ทำการดำเนินการกับบิตที่สอดคล้องกันในรูปแบบเลขฐานสองของจำนวนเต็มสองตัว
  • Exclusive OR จะคืนค่า 1 เมื่อบิตทั้งสองต่างกัน และคืนค่า 0 เมื่อเหมือนกัน
  • ตารางค่าความจริงมีดังนี้
    • 0 XOR 0 = 0
    • 0 XOR 1 = 1
    • 1 XOR 0 = 1
    • 1 XOR 1 = 0
  • ตัวอย่างเช่น 5 XOR 13 = 8
    • ในเลขฐานสองคือ 0101 XOR 1101 = 1000

การแปลงสี

  • ค่า XOR ไม่ได้ใช้ได้แค่กับเฉดเทา แต่ยังสามารถนำไปใช้กับแต่ละช่อง RGB ต่างกันได้
  • ในตัวอย่างใช้ c = x ^ y เพื่อประกอบค่าสี
    • r = 255 - c
    • g = c
    • b = c % 128
  • นอกจากนี้ยังสามารถใช้ค่า XOR เป็น hue ของสี HSV แล้วส่งเข้าไปในฟังก์ชัน HSVtoRGB ได้
    • ในตัวอย่างแปลง ColorHSV(c, 255, 255) ด้วย HSVtoRGB แล้วใช้เป็นสีของพิกเซล

เท็กซ์เจอร์ AND และ OR

  • สามารถใช้ตัวดำเนินการ AND และ OR แทน XOR เพื่อสร้างเท็กซ์เจอร์แบบอิงพิกัดที่คล้ายกันได้
  • ใน C++ ตัวดำเนินการ AND คือ & และตัวดำเนินการ OR คือ |
  • AND จะคืนค่า 1 เฉพาะเมื่อบิตทั้งสองเป็น 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 มืดกว่าเพราะมีเพียงกรณีเดียวที่คืนค่า 1 ส่วนเท็กซ์เจอร์ OR สว่างกว่าเพราะมีหลายกรณีที่คืนค่า 1
  • ผลรวมของเท็กซ์เจอร์ XOR กับเท็กซ์เจอร์ AND จะเป็น เท็กซ์เจอร์ OR

บทสรุปและตัวอย่างการใช้งาน

  • เท็กซ์เจอร์ XOR สร้างง่าย จึงมีประโยชน์ในการทดสอบว่า texture renderer ทำงานหรือไม่
  • ไม่เหมาะกับแอปพลิเคชันอย่างงานศิลป์หรือเกม
  • ยังสามารถใช้เป็น เท็กซ์เจอร์ 3D ในรูปแบบ x ^ y ^ z ได้ และในตัวอย่างถูกใช้เพื่อตรวจสอบว่า planet texture renderer ทำงานถูกต้องหรือไม่

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-12-19
ความคิดเห็นจาก Hacker News
  • ตอนอยู่มัธยมต้นเคยลองแตะ ๆ การเขียนโค้ดมาบ้าง แต่ทำได้แค่ แอปพลิเคชัน CLI ง่าย ๆ ที่รันในเทอร์มินัล วันหนึ่งได้เจอ Lode's Computer Graphics Tutorial และได้เห็นตัวอย่างง่าย ๆ ที่เปิดหน้าต่างแล้ววาดกราฟิกบนหน้าจอเป็นครั้งแรก
    ด้วยเหตุนี้จึงสามารถลองสร้างเกมเรโทรอย่าง Pacman, Snake, Space Invaders ขึ้นมาใหม่ได้ และงานที่ทำด้วยเทอร์มินัลอย่างเดียวไม่ได้ก็ทำได้ขึ้นมา
    มองว่าเว็บไซต์นี้เป็นจุดเริ่มต้นที่ทำให้ได้เริ่มเส้นทางอาชีพด้านพัฒนาซอฟต์แวร์ตั้งแต่อายุยังน้อยพอสมควร ตอนนั้นแทบจะจำหน้าเว็บและตัวอย่างต่าง ๆ จาก https://lodev.org/cgtutor/ ได้ขึ้นใจ ส่วนคณิตศาสตร์บางอย่างในตอนนั้นไม่เข้าใจเลย
  • เคยทำโปรแกรม x86 assembly เล็ก ๆ ที่สร้างภาพด้วยเทคนิคคล้ายกันมาก่อน แต่ใช้สี 1 บิต
    แทนที่จะใช้ x ^ y ก็ใช้ parity(x ^ y) โดยถ้าจำนวนบิต 1 เป็นเลขคู่ก็ลงสีหนึ่ง ถ้าเป็นเลขคี่ก็ลงอีกสีหนึ่ง มันดูเหมือนลวดลายปูกระเบื้องที่เกือบจะซ้ำ แต่ก็ไม่ซ้ำสนิท จึงน่าสนใจทางสายตา
    ลองค้นไฟล์เก่า ๆ ดู พบว่าเขียนด้วย fasm ในปี 2019 และสร้างไฟล์ XPM2 ซึ่งถ้าจะดูต้องแปลงเป็น XPM3 ด้วยมือก่อน ภาพผลลัพธ์อยู่ที่นี่: https://i.postimg.cc/FsFhXSHG/xortiles.png
    ถ้าต้องการก็อาจเอาโค้ดขึ้นให้ได้ แต่ไม่แน่ใจว่าจะมีใครสนใจจริงไหม
  • นึกถึง Hamming distance texture: https://chalkdustmagazine.com/features/the-hidden-harmonies-...
    • ยังนึกถึงการทำให้อัลกอริทึมวงกลมจำนวนเต็มพังแบบกลิตช์ด้วย: https://nbickford.wordpress.com/2011/04/03/the-minsky-circle...
    • ถ้า XOR texture คือ Xor(x,y) งั้น Hamming distance ก็น่าจะเป็น PopCount(Xor(x,y))
      น่าจะใช่ไหม?
  • ข้อเท็จจริงสนุก ๆ อย่างหนึ่ง: แต่ละจุดของ XOR texture คือจำนวนเต็มที่เล็กที่สุดที่ยังไม่ปรากฏอยู่ด้านบนหรือด้านซ้ายของจุดนั้น
    ขอแปะบล็อกตัวเองไว้เนียน ๆ แล้วหลบ: https://nicknash.me/2012/10/26/happy-halloween/
    • ในเมทริกซ์ตัวอย่าง แถวที่เริ่มด้วย 5 ผิด ควรเป็นแบบนี้
      5 4 7 6 1 0 3 2
  • ถ้าทำแอนิเมชันโดยเปลี่ยนค่า t ในฟังก์ชันอย่าง color = (y == (x ^ t)) จะได้เอฟเฟกต์คล้ายกัน ซึ่งเรียกว่า munching squares
    เดิมทีถูกเขียนขึ้นสำหรับ PDP-1 ในช่วงต้นทศวรรษ 1960 และเคยเห็นมันถูกสาธิตบน PDP-1 ที่ Computer History Museum
    จอแสดงผลของ PDP-1 ทำได้แค่วางจุดและไม่ได้ใช้ bitmap framebuffer เลยสงสัยมาตลอดว่ามันสร้างลักษณะเฉพาะของ XOR texture ขึ้นมาได้อย่างไร
    ปรากฏว่ามันใช้ประโยชน์จากภาพติดค้างนานของสารเรืองแสงบนจอ และให้ความสว่างของแต่ละจุดค่อย ๆ ลดลงเมื่อเวลาผ่านไป
    CHM มีวิดีโอที่รันอยู่ แต่จับเอฟเฟกต์ภาพติดค้างของสารเรืองแสงได้ไม่ค่อยดี: https://www.computerhistory.org/collections/catalog/10266415...
    วิดีโอที่รันใน MAME แสดงให้เห็นได้พอสมควรว่าภาพติดค้างของสารเรืองแสงสร้าง XOR texture ได้อย่างไร: https://youtu.be/AxJzUiaQ7xM?si=X9K47c4WyD6AisUp
  • มีเว็บหนึ่งที่มีตัวอย่างแบบนี้เป็นพัน ๆ รายการ: https://www.dwitter.net/
    Dwitter เป็นเหมือน Twitter สำหรับตัวอย่าง JavaScript แบบบรรทัดเดียวที่ใช้ canvas และผู้ใช้ต้องทำผลงานให้พอดีภายใน 140 ไบต์
    • มีตัวอย่างแอนิเมชัน XOR texture ที่ทำด้วยโค้ด JavaScript เพียง 122 ตัวอักษร: https://www.dwitter.net/d/255
      ยังมีหลายรูปแบบที่ใช้ตัวดำเนินการไบนารีอื่นเพื่อสร้าง สามเหลี่ยมเซียร์ปินสกี: https://www.dwitter.net/h/sierpinski
  • เคยใช้ texture นี้ทำ ผ้าควิลต์
    ใช้สเกลสีรุ้งเหมือนรูปหนึ่งในช่วงท้ายของเว็บ เลยออกมาดูค่อนข้างคล้ายกัน และตอนนี้แขวนเป็นของตกแต่งขนาด 6 ฟุต×6 ฟุตไว้บนผนัง
  • เป็นเว็บที่เจ๋งมาก แนะนำให้ถอยขึ้นไปอีกระดับแล้วลองดูหน้าอื่น ๆ ด้วย
    แม้จะเป็นเนื้อหาอายุ 20 ปีแล้ว แต่โดยเฉพาะถ้าทำงานกับ shader ก็ยังมีหลายอย่างที่เอาไปใช้ได้อยู่
  • เมื่อไม่นานมานี้ได้ลองเล่นกับแพตเทิร์นนี้ใน J และเขียนแทนได้แบบนี้
    ~:"1/~&.#:i.2^8
    ดูได้ที่นี่: https://jsoftware.github.io/j-playground/bin/html2/#base64=b...
  • เพิ่งอ่าน https://news.ycombinator.com/item?id=42414817 แล้วคงถือได้ว่า XOR texture ก็ถูกค้นพบโดยบังเอิญเหมือนกัน