วิธีที่เครื่องมือแก้ไขโมเดล 3 มิติ Blockbench ใช้ EyeDropper API เพื่อให้ผู้ใช้เลือกสีได้จากทุกที่

EyeDropper API มีกลไกในการสร้างเครื่องมือดูดสีที่ช่วยให้ผู้ใช้สุ่มตัวอย่างสีจากหน้าจอของตน รวมถึงด้านนอกหน้าต่างเบราว์เซอร์ด้วย ดูวิธีที่เครื่องมือแก้ไขโมเดล 3 มิติ Blockbench ใช้ API นี้ในฐานของโค้ด

โธมัส สไตเนอร์
ยานนิส ปีเตอร์เซ่น
Jannis Petersen
Twitter GitHub

เกริ่นนำ

(บทความนี้ยังมีรูปแบบวิดีโออีกด้วย)

Blockbench เป็นเครื่องมือแก้ไขโมเดลสมัยใหม่ฟรีสำหรับโมเดลโลว์โพลีที่มีพื้นผิวแบบพิกเซล หากคุณเคยเล่น Minecraft คุณอาจจะเคยเห็นเนื้อหาที่สร้างด้วย Blockbench เช่น แพะ ที่เพิ่มไปยัง Minecraft ซึ่งเป็นส่วนหนึ่งของ Caves and Cliffs Update ตอนที่ 1 โค้ด Blockbench ที่ได้รับอนุญาตของ GPL เวอร์ชัน 3 เป็นโอเพนซอร์สบน GitHub

แกะ Minecraft ที่ออกแบบร่วมกับ Blockbench

หากต้องการลองใช้ Blockbench ให้เปิดแอปโดยไปที่ web.blockbench.net เมื่อใช้ PWA คุณจะติดตั้งในเดสก์ท็อปแล้วเปิดในหน้าต่างแบบสแตนด์อโลนได้ หากคุณเพิ่งเริ่มใช้การสร้างแบบจำลอง 3 มิติ คุณอาจเริ่มต้นด้วยตัวอย่างไฟล์ .bbmodel แบบโอเพนซอร์ส ซึ่งพบได้โดยใช้การค้นหาโค้ดของ GitHub เช่น ลองใช้โมเดลรถไฟที่คุณเห็นในภาพหน้าจอต่อไปนี้

การแก้ไขโมเดลรถไฟใน Blockbench

EyeDropper API

นอกจากจะมีคุณลักษณะอื่นๆ มากมายแล้ว Blockbench มีฟีเจอร์ที่เติมสีด้วย ดังนั้นถ้าอยากติดแท็กรถไฟตอนนี้ก็ทำได้แล้ว โปรดอย่าทำในโลกแห่งความเป็นจริง คุณจะเห็นว่าในการติดแท็กของผม ผมใช้สีส้มสว่าง

ป้าย "ธนาอยู่นี่แล้ว" และสัญลักษณ์สันติภาพที่เขียนบนโมเดลรถไฟ

นี่คือสีส้มที่เราดึงมาจากวอลเปเปอร์ macOS Ventura โดยตรงผ่าน EyeDropper API ดังที่คุณเห็นในภาพหน้าจอต่อไปนี้ หลอดดูดสี (วงกลมสีส้มด้านซ้ายของหน้าต่างแอป) สามารถเข้าถึงจากนอกแอปพลิเคชันมายังเดสก์ท็อปของฉันโดยตรง หรือแอปอื่นๆ ที่ฉันอาจเปิดอยู่

ตัวเลือกสีที่แสดงเมื่อแตะแอป Blockbench และเลือกสีจากภาพพื้นหลังของเดสก์ท็อป

เนื่องจาก Blockbench เป็นโอเพนซอร์ส คุณจะเรียนรู้วิธีที่นักพัฒนาซอฟต์แวร์นำ API ไปใช้ได้ โค้ดที่เป็นปัญหาคือ JannisX11/blockbench/blob/master/js/texturing/color.js Blockbench มีให้ใช้งานในรูปแบบแอป Electron.js เช่นกัน คุณจะเห็นจากความคิดเห็นว่ามีการจัดการกรณีพิเศษสำหรับปัญหาใน Electron ซึ่งเครื่องมือเลือกสีไม่สามารถเลือกสีนอกหน้าต่างได้ ปัญหานี้ไม่ใช่ปัญหาเมื่อใช้ Web API ซึ่งคุณจะเห็นในส่วนที่ไฮไลต์ของข้อมูลโค้ด การใช้ API นั้นทำได้ง่าย สร้างอินสแตนซ์ EyeDropper ใหม่และเรียกเมธอด open() ของอินสแตนซ์นั้น เมธอดนี้จะแปลค่าด้วยสตริง sRGBHex ที่แสดงถึงสีที่เลือกในรูปแบบ sRGB เลขฐานสิบหก

new Action("pick_screen_color", {
  icon: "colorize",
  category: "color",
  condition: () => typeof EyeDropper == "function",
  click: async function () {
    if (Blockbench.platform == "win32") {
      // workaround for https://github.com/electron/electron/issues/27980
      ipcRenderer.send("request-color-picker", {
        sync: settings.sync_color.value,
      });
    } else if (typeof EyeDropper == "function") {
      let dropper = new EyeDropper();
      let { sRGBHex } = await dropper.open();
      ColorPanel.set(sRGBHex);
    }
  },
});

บทสรุป

ตัวเลือกสีเป็นซอฟต์แวร์เพื่อความสร้างสรรค์ที่มีขนาดเล็กแต่มีความสำคัญอย่าง Blockbench ส่วนใหญ่แล้ว สีที่ต้องการไม่ได้เป็นส่วนหนึ่งของหน้าต่างแอป แต่เป็นสีที่พบเห็นที่อื่นนอกอาคาร หรือแม้กระทั่งบนหน้าจออื่น ตัวเลือกสีที่ไม่อนุญาตให้คุณเลือกสีในกรณีเช่นนี้อาจกลายเป็นสิ่งที่แทบไม่มีประโยชน์ EyeDropper API สร้างขึ้นสําหรับกรณีการใช้งานเช่นนี้โดยเฉพาะ และทำงานได้ดีกับ Blockbench มาโดยตลอดนับตั้งแต่มีการนำมาใช้ในเดือนพฤศจิกายน 2021 ถ้าคุณเล่นกับ Blockbench ขอให้สนุกกับการเลือกสี!