Wie der 3D-Modelleditor Blockbench mithilfe der EyeDropper-API Farben von überall aus auswählen kann

Die EyeDropper API bietet einen Mechanismus zum Erstellen eines Pipetten-Tools, mit dem Nutzer Farben von ihren Bildschirmen auswählen können, auch außerhalb des Browserfensters. Hier erfahren Sie, wie der 3D-Modell-Editor Blockbench diese API in seinem Code verwendet.

Thomas Steiner

Jannis Petersen

Einführung

(Dieser Artikel ist auch als Video verfügbar.)

Blockbench ist ein kostenloser, moderner Modell-Editor für Low-Poly-Modelle mit Pixel-Art-Texturen. Wenn Sie schon einmal Minecraft gespielt haben, haben Sie wahrscheinlich schon Assets gesehen, die mit Blockbench erstellt wurden, z. B. die Ziege, die im Rahmen des Caves and Cliffs Update, Part 1 zu Minecraft hinzugefügt wurde. Der unter GPL Version 3 lizenzierte Blockbench-Code ist Open Source auf GitHub.

Wenn Sie Blockbench ausprobieren möchten, rufen Sie web.blockbench.net auf. Da es sich um eine PWA handelt, können Sie die App auf Ihrem Computer installieren und in einem separaten Fenster starten. Wenn Sie noch keine Erfahrung mit 3D-Modellierung haben, können Sie mit einem der vielen Open-Source-Beispiele für .bbmodel-Dateien beginnen, die Sie über die Codesuche von GitHub finden. Probieren Sie beispielsweise das Modell aus, das Sie im folgenden Screenshot sehen.

Die EyeDropper API

Blockbench bietet unter anderem eine Malfunktion. Wenn Sie also schon immer mal einen Zug taggen wollten, haben Sie jetzt die Möglichkeit dazu. Bitte tun Sie das nicht in der realen Welt. Für mein Tagging habe ich ein helles Orange verwendet.

Das ist eine Orange, die ich direkt aus dem macOS Ventura-Hintergrundbild über die EyeDropper API extrahiert habe. Wie Sie im folgenden Screenshot sehen, kann die Pipette (der orangefarbene Kreis links neben dem App-Fenster) über die Anwendung hinaus direkt auf meinen Desktop oder auf eine andere geöffnete App zugreifen.

Da Blockbench Open Source ist, können Sie nachvollziehen, wie die Entwickler die API implementiert haben. Der betreffende Code befindet sich in JannisX11/blockbench/blob/master/js/texturing/color.js. Blockbench ist auch als Electron.js-App verfügbar. Im Kommentar sehen Sie, dass es eine spezielle Verarbeitung für ein Problem in Electron gibt, bei dem die Farbauswahl keine Farben außerhalb des Fensters auswählen kann. Mit der Web-API, die im hervorgehobenen Teil des Code-Snippets zu sehen ist, ist das kein Problem. Die Verwendung der API ist ganz einfach. Instanziieren Sie eine neue EyeDropper-Instanz und rufen Sie die Methode open() auf. Diese Methode wird mit einem sRGBHex-String aufgelöst, der die ausgewählte Farbe im hexadezimalen sRGB-Format darstellt.

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);
    }
  },
});

Zusammenfassung

Farbauswahlen sind ein kleiner, aber wichtiger Bestandteil von Kreativsoftware wie Blockbench. Häufig ist die gewünschte Farbe nicht Teil des App-Fensters, sondern befindet sich irgendwo außerhalb, vielleicht sogar auf einem anderen Bildschirm. Eine Farbauswahl, mit der Sie in solchen Fällen keine Farben auswählen können, ist nahezu nutzlos. Die EyeDropper API wurde genau für solche Anwendungsfälle entwickelt und funktioniert seit der Implementierung im November 2021 hervorragend für Blockbench. Viel Spaß beim Auswählen der Farben mit Blockbench!