Bounding volumeReal-Time collision detectionOpenGL collision detectionAABB treeProcessing collisionOBB collisionThree js collision3D collision detection - Game development | MDN
文章推薦指數： 80 %
As with 2D collision detection, axis-aligned bounding boxes (AABB) are the quickest algorithm to determine whether the two game entities are ...
SkiptomaincontentSkiptosearchSkiptoselectlanguageGamedevelopmentTechniquesforgamedevelopment3DcollisiondetectionArticleActionsEnglish(US)Axis-alignedboundingboxesBoundingspheresUsingaphysicsengineSeealsoRelatedTopics
Introduction
Introduction
Anatomy
Examples
APIsforgamedevelopment
Canvas
CSS
Fullscreen
Gamepad
IndexedDB
JavaScript
PointerLock
SVG
TypedArrays
WebAudio
WebGL
WebRTC
WebSockets
WebVR
WebWorkers
XMLHttpRequest
Techniques
Usingasyncscriptsforasm.js
Optimizingstartupperformance
UsingWebRTCpeer-to-peerdatachannels
Efficientanimationforwebgames
AudioforWebGames
2Dcollisiondetection
Tilesandtilemapsoverview
3DgamesontheWeb
3DgamesontheWeboverview
Explainingbasic3Dtheory
BuildingupabasicdemowithA-Frame
BuildingupabasicdemowithBabylon.js
BuildingupabasicdemowithPlayCanvas
BuildingupabasicdemowithThree.js
WebVR
3Dcollisiondetection
BoundingvolumecollisiondetectionwithTHREE.js
Implementinggamecontrolmechanisms
Controlmechanisms
Mobiletouch
Desktopwithmouseandkeyboard
Desktopwithgamepad
Other
Tutorials
2DbreakoutgameusingpureJavaScript
2DbreakoutgameusingPhaser
2Dmaze_gamewithdeviceorientation
2DplatformgameusingPhaser
Publishinggames
Publishinggamesoverview
Gamedistribution
Gamepromotion
Gamemonetization
Axis-alignedboundingboxesBoundingspheresUsingaphysicsengineSeealso3DcollisiondetectionThisarticleprovidesanintroductiontothedifferentboundingvolumetechniquesusedtoimplementcollisiondetectionin3Denvironments.Followuparticleswillcoverimplementationsinspecific3Dlibraries.Axis-alignedboundingboxesAswith2Dcollisiondetection,axis-alignedboundingboxes(AABB)arethequickestalgorithmtodeterminewhetherthetwogameentitiesareoverlappingornot.Thisconsistsofwrappinggameentitiesinanon-rotated(thusaxis-aligned)boxandcheckingthepositionsoftheseboxesinthe3Dcoordinatespacetoseeiftheyareoverlapping.
Theaxis-alignedconstraintistherebecauseofperformancereasons.Theoverlappingareabetweentwonon-rotatedboxescanbecheckedwithlogicalcomparisonsalone,whereasrotatedboxesrequireadditionaltrigonometricoperations,whichareslowertocalculate.Ifyouhaveentitiesthatwillberotating,youcaneithermodifythedimensionsoftheboundingboxsoitstillwrapstheobject,oropttouseanotherboundinggeometrytype,suchasspheres(whichareinvarianttorotation.)TheanimatedGIFbelowshowsagraphicexampleofanAABBthatadaptsitssizetofittherotatingentity.Theboxconstantlychangesdimensionstosnuglyfittheentitycontainedinside.
Note:CheckouttheBoundingVolumeswithThree.jsarticletoseeapracticalimplementationofthistechnique.
Pointvs.AABBCheckingifapointisinsideanAABBisprettysimple—wejustneedtocheckwhetherthepoint'scoordinatesfallinsidetheAABB;consideringeachaxisseparately.IfweassumethatPx,PyandPzarethepoint'scoordinates,andBminX–BmaxX,BminY–BmaxY,andBminZ–BmaxZaretherangesofeachaxisoftheAABB,wecancalculatewhetheracollisionhasoccurredbetweenthetwousingthefollowingformula:
f
(
P
,
B
)
=
(
P
x
>=
B
m
i
n
X
∧
P
x
<=
B
m
a
x
X
)
∧
(
P
y
>=
B
m
i
n
Y
∧
P
y
<=
B
m
a
x
Y
)
∧
(
P
z
>=
B
m
i
n
Z
∧
P
z
<=
B
m
a
x
Z
)
f(P,B)=(Px>=B{minX}\wedgePx<=B{maxX})\wedge(Py>=B{minY}\wedgePy<=B{maxY})\wedge(Pz>=B{minZ}\wedgePz<=B{maxZ})
OrinJavaScript:
functionisPointInsideAABB(point,box){
return(point.x>=box.minX&&point.x<=box.maxX)&&
(point.y>=box.minY&&point.y<=box.maxY)&&
(point.z>=box.minZ&&point.z<=box.maxZ);
}
AABBvs.AABBCheckingwhetheranAABBintersectsanotherAABBissimilartothepointtest.Wejustneedtodoonetestperaxis,usingtheboxes'boundaries.Thediagrambelowshowsthetestwe'dperformovertheX-axis—basically,dotherangesAminX–AmaxXandBminX–BmaxXoverlap?
Mathematicallythiswouldlooklikeso:
f
(
A
,
B
)
=
(
A
m
i
n
X
<=
B
m
a
x
X
∧
A
m
a
x
X
>=
B
m
i
n
X
)
∧
(
A
m
i
n
Y
<=
B
m
a
x
Y
∧
A
m
a
x
Y
>=
B
m
i
n
Y
)
∧
(
A
m
i
n
Z
<=
B
m
a
x
Z
∧
A
m
a
x
Z
>=
B
m
i
n
Z
)
f(A,B)=
AndinJavaScript,we'dusethis:
functionintersect(a,b){
return(a.minX<=b.maxX&&a.maxX>=b.minX)&&
(a.minY<=b.maxY&&a.maxY>=b.minY)&&
(a.minZ<=b.maxZ&&a.maxZ>=b.minZ);
}
BoundingspheresUsingboundingspherestodetectcollisionsisabitmorecomplexthanAABB,butstillfairlyquicktotest.Themainadvantageofspheresisthattheyareinvarianttorotation,soifthewrappedentityrotates,theboundingspherewouldstillbethesame.Theirmaindisadvantageisthatunlesstheentitytheyarewrappingisactuallyspherical,thewrappingisusuallynotagoodfit(i.e.wrappingapersonwithaboundingspherewillcausealotoffalsepositives,whereasanAABBwouldbeabettermatch).Pointvs.sphereTocheckwhetheraspherecontainsapointweneedtocalculatethedistancebetweenthepointandthesphere'scenter.Ifthisdistanceissmallerthanorequaltotheradiusofthesphere,thepointisinsidethesphere.
TakingintoaccountthattheEuclideandistancebetweentwopointsAandBis
(
A
x
-
B
x
)
2
)
+
(
A
y
-
B
y
)
2
+
(
A
z
-
B
z
)
\sqrt{(A_x-B_x)^2)+(A_y-B_y)^2+(A_z-B_z)}
,ourformulaforpointvs.spherecollisiondetectionwouldworkoutlikeso:
f
(
P
,
S
)
=
S
r
a
d
i
u
s
>=
(
P
x
-
S
x
)
2
+
(
P
y
-
S
y
)
2
+
(
P
z
-
S
z
)
2
f(P,S)=S_{radius}>=\sqrt{(P_x-S_x)^2+(P_y-S_y)^2+(P_z-S_z)^2}
OrinJavaScript:
functionisPointInsideSphere(point,sphere){
//weareusingmultiplicationsbecauseisfasterthancallingMath.pow
vardistance=Math.sqrt((point.x-sphere.x)*(point.x-sphere.x)+
(point.y-sphere.y)*(point.y-sphere.y)+
(point.z-sphere.z)*(point.z-sphere.z));
returndistance
延伸文章資訊
- 1Collision detection - LearnOpenGL
Because the ball is a circle-like object, an AABB is probably not the best choice for the ball's ...
- 2AABB Collision Detection Tutorial - TutorialEdge.net
AABB Collision Detection or "Axis-Aligned Bounding Box" Collision detection as it stands for is t...
- 3A Primer on AABB Collision Resolution - Deen Games
AABB (Axis Aligned Bounding Boxes) means two non-rotated boxes, that are aligned on one axis. · C...
- 4What is AABB - Collision detection? - Stack Overflow
AABB stands for "Axis-Aligned Bounding Box." It is a fairly computationally- and memory-efficient...
- 5Using Swept AABB to detect and process collision
AABB stands for Axis-Aligned Bounding Box, it is an algorithm to detect collision between a recta...
