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

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

Thomas Steiner

Jannis Petersen

บทนำ

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

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

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

EyeDropper API

Blockbench มีฟีเจอร์วาดรูปด้วย ซึ่งคุณสามารถใช้เพื่อติดแท็กรถไฟได้หากต้องการ โปรดอย่าทำเช่นนี้ในชีวิตจริง คุณจะเห็นว่าเราใช้สีส้มสดในการติดแท็ก

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

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

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 ก็เลือกสีได้ตามใจชอบ