(sim) การเขียนเชดเดอร์สำหรับทรงกลม Vegas

 (whenistheweekend.com)
1 คะแนน โดย GN⁺ 2023-12-01 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • หน้า The Sphere แสดงตัวอย่าง 5 รายการและชิ้นส่วนเชดเดอร์ GLSL เพื่อสาธิตวิธีคำนวณสีบนพื้นผิวทรงกลม
  • อินพุตของเชดเดอร์ประกอบด้วย time, vUv, vNormal โดยเวลาและพิกัด UV เป็นแกนหลักของการเปลี่ยนสี
  • main() คำนวณสีสุดท้ายของแต่ละพิกเซลด้วยการใส่ vec4(...) ลงใน gl_FragColor
  • ค่า RGB ถูกสร้างโดยอิงจาก cos(time + vUv.xyx + vec3(0., 2., 4.)) เพื่อแสดง การเปลี่ยนแปลงตามเวลา
  • vNormal ที่ประกาศไว้ไม่ได้ถูกใช้ในชิ้นส่วนโค้ดที่ให้มา จึงไม่มีผลต่อการคำนวณสีในปัจจุบัน

โครงสร้างหน้า The Sphere

  • ชื่อเรื่องคือ The Sphere
  • ในเนื้อหามีการระบุตัวอย่างตั้งแต่ example 1 ถึง example 5
  • จากนั้นมีโค้ดเชดเดอร์ที่ดูเหมือนเป็น GLSL วางอยู่

ลำดับการทำงานของโค้ดเชดเดอร์ GLSL

  • ตัวแปรอินพุตมีสามตัว ได้แก่ time, vUv, vNormal
    • time เป็น uniform float
    • vUv เป็น varying vec2
    • vNormal เป็น varying vec3
  • ฟังก์ชัน main() ตั้งค่า gl_FragColor
  • สีถูกคำนวณในรูปแบบ 0.5 + 0.5 * cos(...)
  • อินพุตของ cos() ประกอบด้วย ค่าเวลา, vUv.xyx และ vec3(0., 2., 4.)
  • ค่าอัลฟาถูกกำหนดคงที่เป็น 1.

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

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

 
GN⁺ 2023-12-01
ความคิดเห็นบน Hacker News

  • ทำเอฟเฟกต์ Matrix ให้ทำงานได้แล้ว
    พยายามจะปรับ UV ให้เห็นด้านบนของทรงกลมแต่ก็ยอมแพ้ไป แต่พบว่าสามารถอ้างอิง uniform ของ three.js อย่าง projectionMatrix และ modelViewMatrix ได้ เพียงประกาศไว้ที่ด้านบนของ GLSL

  • ทำ Penrose tiling แบบคงที่ขึ้นมา: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    ทรงกลมไม่ใช่อนันต์ ดังนั้นการใช้ tiling แบบไม่เป็นคาบจึงไม่มีความหมายเชิงปฏิบัติมากนัก แต่ก็ยังดูสวยอยู่ดี
    ยังไม่รู้ว่ามีชุดแผ่นกระเบื้องหรือโมโนไทล์ที่คล้ายกันซึ่งสามารถปูบนกรวยอนันต์ได้หรือไม่

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

  • ออกนอกประเด็นไปนิด แต่สิ่งที่น่าทึ่งคือ The Sphere เป็นโครงการวิศวกรรมขนาดใหญ่แค่ไหน
    ตั้งแต่ตัวโครงสร้างเอง ไปจนถึงการซิงก์แผง LED หลายพันแผงทั้งภายในและภายนอกทรงกลม การระบายความร้อนท่ามกลางอากาศร้อนของลาสเวกัส และการทำให้ที่นั่งภายใน 18,000 ที่เย็นพอและมีอากาศถ่ายเทเพียงพอ
    แม้แต่อาคารสำนักงานธรรมดาหลายแห่งยังระบายอากาศได้ไม่ดีเลย

    • ใช้ความพยายามและทรัพยากรมหาศาลทั้งหมดนั้น สุดท้ายก็เพื่อดึงสายตาผู้คนให้จดจ่อกับ โฆษณา มากขึ้นเท่านั้น
    • ข้างใน Sphere สามารถสร้าง ลมเย็น สำหรับเอฟเฟกต์พิเศษได้ด้วย เจ๋งมากจริง ๆ

  • ลองทำ smiley.frag แบบง่าย ๆ: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • โปรเจกต์ดีมาก
    ถ้าแต่ละโค้ดมี URL แยกของตัวเองก็น่าจะแชร์ได้ง่ายขึ้น อาจใช้วิธีฝังโค้ดไว้ใน URL ก็ได้

  • ทำเชดเดอร์ หน้ายิ้ม ขนาดใหญ่ขึ้นมา
    เป็นโค้ด GLSL ที่ใช้ sdRing ทำปาก ใช้สมมาตรซ้ายขวาจัดการดวงตาในทีเดียว แล้วแสดงผลเป็นสีเหลือง

  • เพิ่งลองเล่นเชดเดอร์ครั้งแรกและทำ แตงโมหมุนได้ ขึ้นมา
    พอจะเข้าใจว่ามันจัดการ RGB tuple, fract() ดูเหมือนการหารเอาเศษ, และนำค่านั้นมายกกำลังสองแล้วบวกกันเพื่อทำแถบที่นุ่มนวล แต่ก็ยังไม่ชัดว่าเชดเดอร์ทำงานอย่างไรแน่ vUv คืออะไร และ gl_FragColor ถูกนำไปกำหนดที่ไหน

    • GPU จะรับวัตถุใน model space คือรายการจุดยอดของสามเหลี่ยม ตำแหน่งกล้อง และ vertex shader ที่แปลงสิ่งเหล่านี้ไปเป็น screen space
      จากนั้นก็แบ่งสามเหลี่ยมออกเป็นชิ้นย่อยหรือพิกเซล และรัน fragment shader สำหรับแต่ละชิ้น
      ในที่นี้อินพุตคือ uniform time ที่มีค่าเดียวกันสำหรับทุกชิ้น และ vUv ที่ถูกส่งออกมาจาก vertex แล้วถูกทำ linear interpolation ภายในสามเหลี่ยม โดย vUv สอดคล้องกับพิกัดพิกเซลบนทรงกลม
      gl_FragColor คือเอาต์พุตสี RGBA ที่จะถูกใช้กับชิ้นนั้น
      ถ้าเป็นเชดเดอร์ในเกมทั่วไปหรือ Google Earth ก็จะมีการทำ texture และแสงเพิ่มเข้ามา และแม้โมเดลการทำงานของ GPU จะดูเหมือนเราเขียนโค้ดให้ทีละพิกเซล แต่จริง ๆ แล้วเป็นแบบ SIMT ดังนั้น NVIDIA จะประมวลผลครั้งละ 32 พิกเซล และ AMD ครั้งละ 64 พิกเซล
      โดยทั่วไปสามารถมองได้ว่าเงื่อนไข if จะถูกแปลงเป็นการคำนวณแบบมีเงื่อนไขที่รันทั้งสองทาง
    • มันคือการรันโค้ดกับทุกพิกเซลบนแคนวาส
      น่าจะชอบ https://www.shadertoy.com/ ด้วย

  • เชดเดอร์จาก https://www.glslsandbox.com ก็น่าดูเหมือนกัน
    แต่ต้องระวัง เพราะที่นั่นมักมีคนที่ยังไม่โตพออัปโหลด เชดเดอร์ NSFW บ่อย ๆ และดูเหมือนผู้ดูแลจะไม่ได้ตรวจละเอียดมากนัก

    • การสร้างร่างกายด้วย GLSL หลายร้อยบรรทัดก็ว่าน่าทึ่งแล้ว แต่การประกอบฉากหมู่ด้วยเพียง 11 บรรทัด นี่ไปอีกระดับเลย
      เลยชวนให้สงสัยว่าความซับซ้อนแบบโคลโมโกรอฟของ “คอนเทนต์ GLSL แบบ NSFW” จะอยู่ประมาณไหน
      https://www.glslsandbox.com/e#108133.0
    • อันนี้คืออัจฉริยะล้วน ๆ
      NSFW: https://www.glslsandbox.com/e#108230.3
      ในคอมเมนต์ของโค้ดมีพรอมป์ต์ที่บอกให้ ChatGPT ทำตัวละครให้อ้วนขึ้น เพิ่มเส้นเลื่อนฉากหลัง เปลี่ยนสี และเพิ่มอวัยวะบางส่วน
    • อย่างน้อยก็ถือว่าดีขึ้นมากเมื่อเทียบกับพวกที่เคยเอา Hakenkreuz ไปลงไว้ที่นั่น

  • ดีมากเลย
    ในโปรเจกต์ isocity ของฉัน มีคนส่งวิธีแก้ที่ทำให้แชร์เมืองที่สร้างขึ้นผ่าน URL ได้
    น่าจะทำแบบคล้ายกันได้: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere น่าจะเป็นสถานที่ที่ยอดเยี่ยมสำหรับจัดเดโมปาร์ตี้
    https://en.wikipedia.org/wiki/Demoscene#Parties