Axis Aligned Bounding Box: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Kowa (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
Kowa (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
Zeile 31: Zeile 31:
* <code>width</code>: Breite der Bounding Box
* <code>width</code>: Breite der Bounding Box
* <code>height</code>: Höhe der Bounding Box
* <code>height</code>: Höhe der Bounding Box
* <code>x</code>:  $x$-Koordinate der Drehpunkts (engl.: ''pivot'')  
* <code>x</code>:  $x$-Koordinate des Pivotpunkts (engl.: ''pivot'' = ''Drehpunkt'')  
* <code>y</code>:  $y$-Koordinate der Drehpunkts
* <code>y</code>:  $y$-Koordinate der Pivotpunkts
* <code>xPivot</code>:  Abstand der $x$-Koordinate des Drehpunkts vom linken Rand
* <code>xPivot</code>:  Abstand der $x$-Koordinate des Pivotpunkts vom linken Rand
* <code>yPivot</code>:  Abstand der $y$-Koordinate des Drehpunkts vom oberen Rand
* <code>yPivot</code>:  Abstand der $y$-Koordinate des Pivotpunkts vom oberen Rand
* <code>xAnchor</code>:  Relativer Abstand der $x$-Koordinate des Drehpunkts vom linken Rand
* <code>xAnchor</code>:  Relativer Abstand der $x$-Koordinate des Pivotpunkts vom linken Rand
* <code>yAnchor</code>:  Relativer Abstand der $y$-Koordinate des Drehpunkts vom oberen Rand
* <code>yAnchor</code>:  Relativer Abstand der $y$-Koordinate des Pivotpunkts vom oberen Rand
 
Beachten Sie bitte, dass eine Bounding Box gemäß Definition nicht gedreht werden kann. Daher ist der
Begriff ''Drehpunkt'' eigentlich falsch. Allerdings wird der Ankerpunkt eines geometrischen Objektes
üblicherweise als Drehpunkt verwendet. In Grafikbibliotheken wie {{zB}} [[pixi.js]] wird der Ankerpunkt
üblicherweise als Pivotpunkt bezeichnet, wenn die absoluten Abstände (in Pixeln oder anderen Grafikeinheiten)
von der linken oberen Ecke der Box aus angegeben werden, und als Ankerpunkt, wenn die relativen Abstände
hinsichtlich Breite und Höhe der Box von der linken oberen Ecke aus gesehen angegeben werden.
Diese Konvention wird hier beibehalten.


Für eine Bounding Box gelten folgende [[Integritätsbedingung]]en
Für eine Bounding Box gelten folgende [[Integritätsbedingung]]en
Zeile 44: Zeile 52:
* <code>rgt >= lft</code>
* <code>rgt >= lft</code>
* <code>btm >= top</code> (Koordinatensystem!)
* <code>btm >= top</code> (Koordinatensystem!)
* <code>width = rgt-lft >= 0</code>
* <code>width === rgt -lft >= 0</code>
* <code>height = btm-top >= 0</code> (Koordinatensystem!)
* <code>height === btm-top >= 0</code> (Koordinatensystem!)
* <code>lft = x-xPivot</code>
* <code>lft === x - xPivot</code>
* <code>rgt = x-xPivot+width = lft+width</code>
* <code>rgt === x - xPivot + width === lft + width</code>
* <code>top = y-yPivot</code>
* <code>top === y - yPivot</code>
* <code>btm = y-yPivot+height = top+height </code> (Koordinatensystem!)
* <code>btm === y - yPivot + height === top + height </code> (Koordinatensystem!)
* <code>xAnchor = xPivot/width</code>
* <code>xAnchor === xPivot / width</code>
* <code>yAnchor = yPivot/height</code>
* <code>yAnchor === yPivot / height</code>


===[[Kollisionserkennung und -behandlung|Kollisionserkennung]]===
===[[Kollisionserkennung und -behandlung|Kollisionserkennung]]===
Zeile 72: Zeile 80:
als der untere der anderen. Damit hat man folgende Bedingung:
als der untere der anderen. Damit hat man folgende Bedingung:


<source lang="javascript">
if (b1.left > b2.rgt || b2.lft > b1.rgt || b1.top > b2.btm || b2.top > b1.btm)
  { <b1 und b2 kollidieren nicht> }
</source>
Wenn man diese Aussage negiert, erhält man einen Kollisionstest
(man beachte den Negationsoperator <code>!</code>):
<source lang="javascript">
if (!(b1.left > b2.rgt || b2.lft > b1.rgt || b1.top > b2.btm || b2.top > b1.btm))
  { <b1 und b2 kollidieren> }
</source>
Nach dem [[De-Morganschen-Gesetze|De-Morganschen-Gesetz]] <code>!(a || b)  === !a && !b</code>
kann man diesen Test folgendermaßen vereinfachen:
<source lang="javascript">
if (b1.left <= b2.rgt && b2.lft <= b1.rgt && b1.top <= b2.btm && b2.top <= b1.btm)
  { <b1 und b2 kollidieren> }
</source>
===Verschiebung des Pivotpunkts===
[[Datei:BoundingBoxPivot.png|gerahmt|thumb|Verschiebung des Pivotpunktes]]


Wenn man den Pivotpunkt der Bounding Box verschieben will, ohne die Box selbst zu verschieben,
muss man eine Ausgleichrechnung durchführen.


Wie man dem nebenstehenden Bild entnehmen kann, verschiebt sich der Pivotpunkt <code>x</code>
um den Betrag </code>xPivot_neu - xPivot_alt</code>. Wenn nun  </code>lft_neu === lft_alt</code>
(und damit auch </code>rgt_neu === rgt_alt</code>) gelten soll, kommt die Integritätsbedingung
<code>lft === x - xPivot</code> zur Anwendung:


<source lang="javascript">
0 === lft_neu - lft_alt
  === (x_neu - xPivot_neu) - (x_alt - x_Pivot_alt)
  === x_neu - x_alt - (xPivot_neu - xPivot_alt)
</source>


Also gilt die Beziehung
<source lang="javascript">
x_neu === x_alt + (xPivot_neu - xPivot_alt)
</source>
==Quellen==
==Quellen==
<references/>
<references/>

Version vom 22. November 2017, 15:42 Uhr

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4
(großteils überprüft)
Umfang: 3
(einige wichtige Fakten fehlen)
Quellenangaben: 1
(fehlen großteils)
Quellenarten: 5
(ausgezeichnet)
Konformität: 5
(ausgezeichnet)

Definition (von Kowarschick[1])

zweidimensionale Bounding Box

Es sei $o$ ein kompaktes (d. h. ein abgeschlossenes und beschränktes) geometrisches 2D- bzw. 3D-Objekt. Eine Axis Aligned Bounding Box (AABB) oder kurz Bounding Box ist ein spezieller Hüllkörper für das Objekt $o$ in Form eines achsenparallelen Rechtecks (2D) bzw. Quaders (3D). Das Objekt $o$ berührt alle 4 bzw. 6 Seiten der Bounding Box.

Eigenschaften

  • Es gibt für jedes kompakte Objekt jeweils genau eine AABB. Dieses ist das kleinstmögliche achsenparallele Rechteck bzw. der kleinstmögliche achsenparallele Quader das bzw. der $o$ einschließt. Es wird sogar die konvexe Hülle von $o$ eingeschlossen.
  • Die Bounding Box kann bei polygonalen Objekten sehr einfach über eine Minimums- und Maximumssuche über die Koordinaten aller Eckpunkte des Objektes ermittelt werden.[2] Aber auch für andere geometrische Objekte, wie Kreise oder achsenparallele Ellipsen, ist die Ermittlung der AABB sehr einfach.

Integritätsbedingungen einer zwei-dimensionalen Bounding Box

Attribute einer zweidimensionalen Bounding Box

Es sei eine Bounding Box mit folgenden Attributen gegeben:

  • lft: $x$-Koordinate der beiden linken Ecken
  • rgt: $y$-Koordinate der beiden rechten Ecken
  • top: $x$-Koordinate der beiden oberen Ecken
  • btm: $y$-Koordinate der beiden unteren Ecken
  • width: Breite der Bounding Box
  • height: Höhe der Bounding Box
  • x: $x$-Koordinate des Pivotpunkts (engl.: pivot = Drehpunkt)
  • y: $y$-Koordinate der Pivotpunkts
  • xPivot: Abstand der $x$-Koordinate des Pivotpunkts vom linken Rand
  • yPivot: Abstand der $y$-Koordinate des Pivotpunkts vom oberen Rand
  • xAnchor: Relativer Abstand der $x$-Koordinate des Pivotpunkts vom linken Rand
  • yAnchor: Relativer Abstand der $y$-Koordinate des Pivotpunkts vom oberen Rand

Beachten Sie bitte, dass eine Bounding Box gemäß Definition nicht gedreht werden kann. Daher ist der Begriff Drehpunkt eigentlich falsch. Allerdings wird der Ankerpunkt eines geometrischen Objektes üblicherweise als Drehpunkt verwendet. In Grafikbibliotheken wie z. B. pixi.js wird der Ankerpunkt üblicherweise als Pivotpunkt bezeichnet, wenn die absoluten Abstände (in Pixeln oder anderen Grafikeinheiten) von der linken oberen Ecke der Box aus angegeben werden, und als Ankerpunkt, wenn die relativen Abstände hinsichtlich Breite und Höhe der Box von der linken oberen Ecke aus gesehen angegeben werden. Diese Konvention wird hier beibehalten.

Für eine Bounding Box gelten folgende Integritätsbedingungen (wenn man ein in der Computergrafik übliches Koordinatensystem zugrundelegt, bei dem sich der Null punkt in der linken oberen Ecke der Bühne befindet und die $y$-Werte in Richtung unterem Bühnenrand größer werden):

  • rgt >= lft
  • btm >= top (Koordinatensystem!)
  • width === rgt -lft >= 0
  • height === btm-top >= 0 (Koordinatensystem!)
  • lft === x - xPivot
  • rgt === x - xPivot + width === lft + width
  • top === y - yPivot
  • btm === y - yPivot + height === top + height (Koordinatensystem!)
  • xAnchor === xPivot / width
  • yAnchor === yPivot / height

Kollisionserkennung

Zwei kollidierende Bounding Boxes
Zwei nicht kollidierende Bounding Boxes

Die Kollisionserkennung ist für Bounding Boxes relativ einfach. Daher geht man in der Computergrafik oft zweistufig vor. Im ersten Schritt überprüft man, ob sich zwei Bounding Boxes berühren oder überlappen. Falls dies nicht der Fall ist, berühren oder überlappen sich die zugehörigen Objekte ebenfalls nicht. Das heißt, in diesem Fall liegt mit Sicherheit keine Kollision vor. Dieser Fall tritt sehr häufig ein, wenn sich viele relativ kleine Objekte auf der Bühne befinden. Falls die Bounding Boxes kollidieren, ist damit allerdings noch nicht gesagt, das auch die darin enthaltenen Objekte kollidieren. Das heißt, in diesem Fall müssen i. Allg. weitere mathematische Tests unternommen, um festzustellen, ob die beiden in den Boxen eingeschlossenen Objekte kollidieren. Falls dies der Fall ist, schließt sich daran üblicherweise die Kollisionsbehandlung an.

Um eine Formel für die Kollisionserkennung zweier Bounding Boxes b1 und b2 herzuleiten, ist es von Vorteil sich zunächst den gegenteiligen Fall anzusehen: Die Boxes überlappen sich genau dann nicht, wenn der linke Rand einer Box größer ist als der rechte der anderen oder der obere Rand der einen größer ist als der untere der anderen. Damit hat man folgende Bedingung:

if (b1.left > b2.rgt || b2.lft > b1.rgt || b1.top > b2.btm || b2.top > b1.btm)
  { <b1 und b2 kollidieren nicht> }

Wenn man diese Aussage negiert, erhält man einen Kollisionstest (man beachte den Negationsoperator !):

if (!(b1.left > b2.rgt || b2.lft > b1.rgt || b1.top > b2.btm || b2.top > b1.btm))
  { <b1 und b2 kollidieren> }

Nach dem De-Morganschen-Gesetz !(a || b) === !a && !b kann man diesen Test folgendermaßen vereinfachen:

if (b1.left <= b2.rgt && b2.lft <= b1.rgt && b1.top <= b2.btm && b2.top <= b1.btm)
  { <b1 und b2 kollidieren> }

Verschiebung des Pivotpunkts

Verschiebung des Pivotpunktes

Wenn man den Pivotpunkt der Bounding Box verschieben will, ohne die Box selbst zu verschieben, muss man eine Ausgleichrechnung durchführen.

Wie man dem nebenstehenden Bild entnehmen kann, verschiebt sich der Pivotpunkt x um den Betrag xPivot_neu - xPivot_alt. Wenn nun lft_neu === lft_alt (und damit auch rgt_neu === rgt_alt) gelten soll, kommt die Integritätsbedingung lft === x - xPivot zur Anwendung:

0 === lft_neu - lft_alt
  === (x_neu - xPivot_neu) - (x_alt - x_Pivot_alt) 
  === x_neu - x_alt - (xPivot_neu - xPivot_alt)

Also gilt die Beziehung

x_neu === x_alt + (xPivot_neu - xPivot_alt)

Quellen

  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)
  2. Bender, Brill (2006): Michael Bender und Manfred Bill; Computergrafik – Ein anwendungsorientiertes Lehrbuch; Auflage: 2; Verlag: Carl Hanser Verlag; Adresse: München, Wien; ISBN: 3-446-40434-1; 2006 (Buch), S. 55

Siehe auch