HTML5-based WebGL combined with Box2DJS physical engine application

HTML5-based WebGL combined with Box2DJS physical engine application

In the previous article, we presented the 3D pathfinding effect of a * Search Algorithm Based on HT for Web. In this article, we will use HT for Web 3D to present the collision effect of the Box2DJS physical engine, as shown in the previous article, Box2DJS is only a two-dimensional physical engine for plane collision, but it also allows users to experience collision effects more intuitively through 3D presentation. The final example is as follows:

L

Box2D was a demonstration example of Erin Catto at the GDC conference. Later, it was constantly improved into a C ++ Open-Source Physical engine library. Over the years, it has been derived from Java, ActionScript, JS, and other versions, it is widely used in the game field. Said its rich indeed rich, said chaos enough chaos, find a Box2D JS version has N multiple options, and different versions of the API are still different, can refer to the comparison here http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use

Although the version is a little messy, the basic principles of each version are similar to those of the API. The following is an example code written based on Box2DJS integrated with HT for Web. Box2D has many parameter functions. Here we only present the most basic and simple elements, mainly to let everyone understand the basic use of the Box2DJS engine, and how to combine the presentation with HT for Web.

The following code creates a Node object of HT for Web in createNode, and a Body object of Box2D, which is associated with each other through the userData attribute. During the rendering process of requestAnimationFrame, first pass world. step (1/60, 10, 10); Update the internal operations of the physical engine, and traverse all Body elements to calculate the results, that is, information such as the Body position and rotation angle is synchronized to the Node object of HT for Web, so as to achieve the combination of HT for 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], [100, 6, 100], false, 0);    createNode([-100, -50, 0], [400, 6, 100], false, -Math.PI/8);    createNode([100, -50, 0], [50, 6, 100], false, Math.PI/6);    createNode([1, 50, 0], [10, 10, 10], true);    createNode([-1, 90, 0], [10, 10, 10], 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 % 10 === 0){        createNode([-1, 50, 0], [10, 10, 10], 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 this example, when an object falls below-150, I will delete the corresponding data elements in Box2DJS and HT DataModel, and the selected elements will also be automatically deleted, count % 10 = 0 this is used to generate a new cube without 10 refreshes. Box2D can also play a lot of tricks. If there is a large amount of data, you can also consider to refer to the automatic 3D topology layout Web Workers Article to execute intensive computation of Box2DJS in WebWork, I have not evaluated the performance of the increase, the amount of data is large, WebWork and GUI thread data serialization transmission will also have a burden to pay attention to, the final example of 3D effect to play very interesting: http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html