HTML5 3D and 2D visualization QuadTree quad-tree collision detection _ PHP Tutorial

HTML5 achieves 3D and 2D visual QuadTree quad-tree collision detection. HTML5 achieves 3D and 2D visualization QuadTree quad-tree collision detection QuadTree quad-tree as the name suggests is a tree data structure, each of which has four child nodes, supports 2D plane recursion and HTML5 for 3D and 2D visualization QuadTree collision detection

A QuadTree tree is a tree-like data structure. each node has four child nodes, which can recursively split two-dimensional planes into subareas. QuadTree is often used for spatial database indexing, 3D visible area cropping of vertebral bodies, and even image analysis. today we are introducing the collision detection that QuadTree is most commonly used in the gaming field. The QuadTree algorithm is used to greatly reduce the number of collision tests and improve the game refresh performance. In this example, the Canvas topology based on HT for Web and the 3D engine component of WebGL are used, share the same data model DataModel through GraphView and Graph3dView, and present 2D and 3D collision View effect under QuadTree algorithm: http://v.youku.com/v_show/id_XODQyNTA1NjY0.html

Http://www.hightopo.com/demo/QuadTree/ht-quadtree.html

The implementation of QuadTree has many mature versions. I chose the runtime two hundred code. It is also very easy to use. construct a Quadtree object. The first parameter is used to input rect information to specify the game space range. each time requestAnimationFrame refreshes frames, it uses quadtree. clear () to clear old data and use quadtree. insert (rect) inserts a new rectangular area of the node, so that the quadtree is initialized. The rest is to call the quadtree as needed. retrieve (rect) obtains the array of rectangular objects that may be located at the intersection of a specified rectangle.

I built two HT (http://www.hightopo.com/) GraphView and Graph3dView components through ht. widget. split the SplitView left and right. because both views share the same DataModel, we focus only on DataModel data operations and constructed 200 ht records. node object. The attr attributes of each object store random motion direction vx and vy, and the rectangular object that will be inserted into the quadtree repeatedly. This avoids repeated object creation when each frame is updated, at the same time, the rectangle object also references ht. node object, used when the quadtree. when retrieve (rect) obtains the rectangle object to be checked, we can specify the associated ht. node object, because we need to set the red color effect for the final collision elements, that is, ht. node usually displays the default blue color, which will change to red when they collide with each other.

You need to note from quadtree. retrieve (rect) obtains the array of rectangular objects to be checked and contains its own elements. at the same time, these elements may only conflict with each other and do not mean they have already been collided. because we use a rectangle in this example, therefore, ht is used. default. intersectsRect (r1, r2) determines whether the two centers are intersecting. if your example is a circle, you can calculate whether the distance between the two centers is smaller than two radius to determine whether the two centers are intersecting, therefore, the final judgment criteria vary according to the game type.

QuadTree greatly improves the computing performance. otherwise, 100 elements need to be monitored 100*100 times. in this case, 100*(10 ~ 30) the amount of http://v.youku.com/v_show/id_XODQyNTA1NjY0.html

Http://www.hightopo.com/demo/QuadTree/ht-quadtree.html

In addition to collision detection QuadTree algorithm also has a lot of interesting application areas, interested can play with this https://github.com/fogleman/Quads

All the code is as follows:

Function init () {d = 200; speed = 8; dataModel = new ht. dataModel (); g3d = new ht. graph3d. graph3dView (dataModel); g2d = new ht. graph. graphView (dataModel); mainSplit = new ht. widget. splitView (g3d, g2d); mainSplit. addToDOM (); g2d. translate (300,220); g2d. setZoom (0.8, true); for (var I = 0; I <100; I ++) {var node = new ht. node (); node. s3 (randMinMax (5, 30), 10, randMinMax (5, 30); node. p3 (randMinMax (-d/2, D/2), 0, randMinMax (-d/2, d/2); node. s ({'batch': 'group', 'shape': 'rect ', 'Shape. border. width ': 1, 'Shape. border. color ': 'white', 'WF. visible ': true, 'WF. color ': 'White'}); node. a ({vx: randMinMax (-speed, speed), vy: randMinMax (-speed, speed), obj: {width: node. getWidth (), height: node. getHeight (), data: node}); dataModel. add (node);} createShape ([{x:-d, y: d}, {x: d, y: d}, {x: d, y :- D },{ x:-d, y:-d}, {x:-d, y: d}]); quadtree = new Quadtree ({x:-d, y:-d, width: d, height: d}); requestAnimationFrame (update);} function update () {quadtree. clear (); dataModel. each (function (data) {if (! (Data instanceof ht. shape) {var position = data. getPosition (); var vx = data. a ('vx '); var vy = data. a ('vy'); var w = data. getWidth ()/2; var h = data. getHeight ()/2; var x = position. x + vx; var y = position. y + vy; if (x-w <-d) {data. a ('vx ',-vx); x =-d + w;} if (x + w> d) {data. a ('vx ',-vx); x = d-w;} if (y-h <-d) {data. a ('vy',-vy); y =-d + h;} if (y + h> d) {data. a ('vy',-vy); y = d- H;} data. setPosition (x, y); var obj = data. a ('obj '); obj. x = x-w; obj. y = y-h; quadtree. insert (obj); setColor (data, undefined) ;}}); dataModel. each (function (data) {if (! (Data instanceof ht. shape) {var obj = data. a ('obj '); var objs = quadtree. retrieve (obj); if (objs. length> 1) {for (var I = 0; I
 
  

  

  

  
The QuadTree tree is a tree-like data structure. each node has four child nodes, which can recursively split two-dimensional planes...