HTML5-based WebGL combined BOX2DJS Physics engine Application _php Tutorial

HTML5-based WebGL combined with BOX2DJS physics engine application

In this article, we present A * search algorithm 3D pathfinding effect based on the HT for Web, which we will use HT for Web 3D to present the collision effect of the Box2djs physics engine, in fact Box2djs is just two dimensional plane collision physics engine, But also through the 3D rendering can give people a more intuitive experience of the collision effect, the final example effect:

Http://hightopo.com/demo/box2djs/ht-box2d-demo.html

Box2D is the first Erin Catto in the GDC conference, a showcase example, and then constantly improve into C + + Open source Physics engine Library, these years derived from Java, ActionScript and JS and other versions, is widely used in the game field. Said its rich is indeed very rich, said chaos is messy enough, to find a box2d JS version has n many choices, and different versions of the API there are differences, can refer to the comparison here http://stackoverflow.com/questions/7628078/ Which-box2d-javascript-library-should-i-use

Although the version is a bit messy, but the basic principles of the various versions and APIs are similar, the following is my example code based on BOX2DJS Fusion HT for Web write. Box2D has a lot of parameter function points, here we only present the most basic simple elements, mainly let us understand the basic use of the Box2djs engine, and how to show on how to combine with the HT for Web.

The following code builds the HT for Web node object in CreateNode, while building the box2d body object, and associating it with the UserData attribute, in the Requestanimationframe rendering process, first through the world. Step (1/60, 10, 10); Update the internal operation of the physics engine, and then traverse all body elements to synchronize the results of the operation, i.e., the body position and rotation angle, to the HT for Web node object, thus achieving the HT for The combination of web and BOX2DJS.

function init () {DM = new ht.    Datamodel ();    G3d = new Ht.graph3d.Graph3dView (DM);    G3d.setgridvisible (TRUE);    G3d.addtodom ();    G3d.seteye (100, 50, 150);    Define the world var gravity = new B2vec2 (0,-100);    var dosleep = false;    World = new B2world (gravity, dosleep);    CreateNode ([0, -3, 0], [, 6, +], false, 0);    CreateNode ([ -100, -50, 0], [, 6, +], false,-MATH.PI/8);    CreateNode ([ -50, 0], [6, +], false, MATH.PI/6);    CreateNode ([1, 0], [Ten, Ten, Ten], true);    CreateNode ([-1, 0], [Ten, Ten, Ten], true); Render ();} function CreateNode (P3, s3, dynamic, angle) {var node = new ht.    Node ();    NODE.P3 (p3);                   NODE.S3 (S3); Node.setrotationz (angle = = null?)    Math.PI * Math.random (): angle);    Dm.add (node);    var fixdef = new B2fixturedef ();        if (dynamic) {fixdef.density = 0.5;        Fixdef.friction = 0.5;                            Fixdef.restitution = 0.5; NODE.S ({' All.color ': ' Red ',            ' Batch ': ' Dynamic '});                        } else {fixdef.density = 0.0;    } var shape = new B2polygonshape (); Shape.    Setasbox (S3[0]/2, s3[1]/2);    Fixdef.shape = shape;    var bodydef = new B2bodydef (); Bodydef.type = dynamic?    B2Body.b2_dynamicBody:b2Body.b2_staticBody;    BodyDef.position.Set (P3[0], p3[1]);    Bodydef.angle = Node.getrotationz ();    bodydef.userdata = node; World. Createbody (Bodydef). Createfixture (fixdef);}    Count = 0function render () {count++;    if (count% = = = 0) {CreateNode ([-1, 0], [Ten, Ten], true); } world.    Step (1/60, 10, 10); var list = world.    Getbodylist ();        while (list) {var node = List.m_userdata; if (node) {var position = list.            GetPosition ();                if (Position.y < -150 | | g3d.isselected (node)) {Dm.remove (node); World.            Destroybody (list);     }else{           NODE.P3 (position.x, POSITION.Y, 0); Node.setrotationz (list.                                        Getangle ()); }} list = list.    GetNext (); } requestanimationframe (render);}

Http://hightopo.com/demo/box2djs/ht-box2d-demo.html

In the example, the object drops below 150 i delete the corresponding data element in the BOX2DJS and HT Datamodel, and the selected entity automatically deletes the entity, count% 10 = = 0 This is used to create a new cube without 10 refreshes. Box2D can also play a lot of tricks, if the data is large can also consider referring to the 3D topology automatic layout of the Web workers, the box2djs of dense operations in webwork execution, I did not evaluate the performance of the increase in the range, Data serialization of WebWork and GUI threads is also a burden to note when the volume is large, and the final example 3D effect is fun to play: http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html

http://www.bkjia.com/PHPjc/1078320.html www.bkjia.com true http://www.bkjia.com/PHPjc/1078320.html techarticle based on HTML5 's WebGL combined with Box2djs physics engine application, we present A * search algorithm 3D pathfinding effect based on the HT for Web, which we will use HT for Web 3D to present Box2djs physics ...

