Zum Hauptinhalt springen

Bild-Ziele

Die neue API ermöglicht die Definition von Bildzielen direkt im Code als "XrController.configure({imageTargetData: [{...}]})`".

Flaches Bildziel​

Wenn Sie ein neues flaches Bildziel einrichten:

  1. Konvertieren Sie das Bild zunächst in Graustufen und beschneiden/skalieren/rotieren Sie es auf 480x640 Pixel.
  2. Definieren Sie die Zielbilddaten:
const imageTarget = {
  "imagePath": "./path/to/image.png",
  "metadata": {}, // available for custom use cases
  "name": "my-image-target",
  "type": "PLANAR",
  "xrMetadata": {
    "left": 0,
    "top": 0,
    "width": 480,
    "height": 640,
    "originalWidth": 480,
    "originalHeight": 640,
    "isRotated": false, // set this to true if you rotated the image when you cropped it
  }
}

Zylindrisches Bildziel​

Für zylindrische Zielscheiben müssen mehr Parameter angegeben werden (cylinderSideLength, cylinderCircumferenceTop, targetCircumferenceTop, cylinderCircumferenceBottom, arcAngle, coniness)

  1. Definieren Sie die Zielbilddaten:
const imageTarget = {
  "imagePath": "./path/to/image.png",
  "metadata": {}, // available for custom use cases
  "name": "my-image-target",
  "type": "CYLINDER",
  "xrMetadata": {
    "left": 0,
    "top": 18,
    "width": 1476,
    "height": 1968,
    "originalWidth": 1476,
    "originalHeight": 2000,
    "isRotated": false, // set this to true if you rotated the image when you cropped it
    "cylinderSideLength": 135.5,
    "cylinderCircumferenceTop": 257.14, // This should match circumferencce bottom
    "targetCircumferenceTop": 100,
    "cylinderCircumferenceBottom": 257.14,
    "arcAngle": 140.0,
    "coniness": 0, // This should be 0 for all cylinders
    "inputMode": "BASIC",
    "unit": "mm",
  }
}

Konisches Bildziel​

Für konische Ziele gibt es die Unkonifizierung, und das Eingabeformat unterscheidet sich von dem, was ins Internet hochgeladen wurde.

  1. Beginnen Sie mit einem Regenbogenbild, das durch den oberen (gestrichelte grüne Linie) und unteren (fette grüne Linie) Radius beschnitten wurde.

  1. Dehnen Sie das Regenbogenbild so, dass es flach ist, und beschneiden/skalieren/rotieren Sie die Abmessungen des flachen, nicht vereinheitlichten Bildes so, dass es 480x640 Pixel groß ist (dieses beschnittene Bild sollte das im Bildpfad angegebene Bild sein).
  2. Definieren Sie die Zielbilddaten:
const imageTarget = {
  "imagePath": "./path/to/image.png", // path to unconified image
  "metadata": {}, // available for custom use cases
  "name": "my-image-target",
  "type": "CONICAL",
  "xrMetadata": {
    "left": 177,
    "top": 554,
    "width": 564,
    "height": 752,
    "originalWidth": 842,
    "originalHeight": 2000,
    "isRotated": false, // set this to true if you rotated the image when you cropped it
    "topRadius": 4479,
    "bottomRadius": 3630.644,
    "cylinderSideLength": 21.05,
    "cylinderCircumferenceTop": 100,
    "targetCircumferenceTop": 50,
    "cylinderCircumferenceBottom": 81.06,
    "arcAngle": 180,
    "coniness": 0.303, // log2(topRadius / bottomRadius)
    "inputMode": "BASIC",
    "unit": "mm",
  }
}