ใช้เอฟเฟ็กต์ระยะชัดลึก (Depth of Field) กับภาพหน้าจอ

[GN⁺]

ความคิดเห็นบน Hacker News

• ทำสิ่งนี้ขึ้นมาเมื่อไม่กี่วันก่อน
  ตอนแรกทำขึ้นมาเพราะอยากลองทำ ระยะชัดลึก แบบ “ปลอม ๆ” ใน CSS และมีวิดีโอเดโมกับแรงบันดาลใจที่ได้จาก shuding_ อยู่ในทวีตรองสุดท้ายของลิงก์ด้านล่างเว็บไซต์
  แต่เมื่อคืนเพิ่งนึกได้ว่ามี ThreeJS อยู่ เลยเขียนใหม่ด้วย react-three-fiber และนี่เป็นครั้งแรกที่ได้ใช้ ซึ่งประทับใจมากเพราะออกแบบมาให้ใช้งานได้เป็นธรรมชาติมาก
  ไม่ได้เขียนไว้ในเอกสาร แต่สามารถลากด้วยคลิกขวาเพื่อเลื่อนหน้าจอได้

  • เจ๋งดี ผมก็ได้แรงบันดาลใจจาก Shuding แล้วทำระยะชัดลึกปลอมแบบใช้ CSS เหมือนกัน :)
    https://depth-of-field.vercel.app/
  • ชอบ ความโต้ตอบได้ ของ UI ทำได้ดีมาก
    เห็นฟีเจอร์ที่ไม่ได้เขียนไว้ในเอกสารด้วย แต่ค่อนข้างสงสัยว่าทำไมบน macOS ถึงเลื่อนด้วย ctrl+คลิกซ้ายไม่ได้

• ผมคาดหวังว่ามันจะเชื่อมกับ OS เพื่อถ่าย สกรีนช็อต 3D ในขั้นตอนก่อน window compositor แล้วกำหนดความลึก Z ให้แต่ละหน้าต่าง ให้เหมือนลอยอยู่เหนือเดสก์ท็อปและซ้อนทับกัน
  ถ้ามอง “สกรีนช็อต 3D” แบบนี้ด้วยการฉายภาพแบบออร์โธกราฟิกก็น่าจะดูเหมือนสกรีนช็อตปกติทุกอย่าง แต่พอใส่เอฟเฟกต์ระยะชัดลึกเข้าไป ความแตกต่างก็น่าจะปรากฏทันที
  แน่นอนว่าน่าจะมองด้วยการฉายภาพแบบอื่นได้ หรือเอียงในพื้นที่ 3D แบบที่นี่ ทำหมอกกับหน้าต่างที่อยู่ไกล หรือใช้แหล่งกำเนิดแสงแบบจุดให้หน้าต่างทอดเงาจริงใส่กันและกันก็ได้ พื้นที่กึ่งโปร่งใสอาจทำให้แสงผ่านได้มากขึ้นด้วย และถ้าจะให้ดี ตัว viewer ที่ฝังใน HTML5 ได้ควรรองรับฟีเจอร์พวกนี้ทั้งหมด
  รูปแบบและ viewer แบบนี้ดูมีประโยชน์ค่อนข้างชัดสำหรับการจำลอง การจัดวางหน้าต่าง AR แบบมี depth mapping ของ visionOS ให้เป็นสแนปช็อตนิ่งที่ “มองสำรวจไปรอบ ๆ ได้” ส่วนถ้าสามารถแนบ depth map แบบกำหนดเองให้กับหน้าต่างของเดสก์ท็อป OS แบบ 2D ได้ นั่นก็เป็นโบนัส

  • สิ่งที่ใกล้เคียงที่สุดที่เคยเห็นคือ UI debug viewer ของ Xcode สามารถหมุนดูองค์ประกอบ UI ทั้งหมดในพื้นที่ 3D แบบแยกชิ้นส่วนได้
    แต่ไม่มีแสงหรือเงา และจำกัดเฉพาะแอปที่มีสิทธิ์เข้าถึงสำหรับดีบัก
    Amazon Fire Phone ก็น่าจะเคยพยายามใช้กล้องติดตามดวงตาด้านหน้าหลายตัวกับไจโร+มาตรความเร่ง เพื่อขยับ UI ของโทรศัพท์และจำลองมุมมอง 3D ที่มีพารัลแลกซ์แบบเรียลไทม์ ในมุมมองแท็บของ Mobile Safari สมัยก่อน แท็บก็เคลื่อนตามทิศทางของอุปกรณ์ด้วย
    สักวันหนึ่งอยากเห็น UI แบบ global illumination แม้มันจะไม่ค่อยใช้งานได้จริงก็ตาม แต่อยากให้เหมือนดูเรนเดอร์ Windows ของทีม Microsoft Design แบบเรียลไทม์ คงเปลืองพลังงานมาก แต่เงานุ่ม ๆ แบบ path-traced น่าจะสวยมาก
  • แทบจะเข้าใกล้แรงจูงใจของ VisionOS หรือระบบปฏิบัติการที่มุ่งสู่พื้นที่ 3D แล้ว

• ช่วงนี้ผมคิดบ่อย ๆ ว่าสกรีนช็อตยังไม่เบลอพอ อันนี้กำลังดีเลย

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

• ดูเหมือน Screenstab [0] ที่เคยเป็น Show HN
  [0] https://www.screenstab.com/editor/
  [1] https://news.ycombinator.com/item?id=34729849

  • มีเครื่องมือคล้าย ๆ กันที่สร้าง วิดีโอมอนทาจ พร้อมระยะชัดลึกและการหมุนช้า ๆ จากชุดสกรีนช็อตกับแคปชันไหม?

• ตอบคำถามที่เห็นในคอมเมนต์อื่น ๆ อันนี้ทำด้วย three.js
  มองได้ว่าเป็นฉาก 3D ที่เรนเดอร์ภาพบนระนาบ 2D แล้วกล้องใช้ Gaussian blur บางแบบกับบางส่วนของภาพนั้น ส่วนการซูมเข้า/ออกและการหมุนภาพใช้ orbit controls

• นี่เป็นแค่การพูดให้ดูเท่ของคำว่า “ทำให้ส่วนที่เหลือทั้งหมดเบลอ” ในสกรีนช็อตหรือเปล่า? ส่วนตัวผมชอบ ครอปส่วนที่ไม่จำเป็นออก มากกว่า

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

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

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

• น่าจะเพิ่ม พิกเซล RGB เพื่อให้ดูสมจริงขึ้น เหมือนที่เคยลองทำใน Blender เมื่อหลายปีก่อน
  https://blenderartists.org/t/rgb-display-shader/684533

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

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