WebGL based on HTML5 combined with Box2DJS physics engine application_PHP tutorial

WebGL based on HTML5 combined with Box2DJS physics 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 presents the collision effect of the Box2DJS physics engine. Same as the previous article. In fact, Box2DJS is just a two-dimensional plane collision physics engine, but it also allows people to experience the collision effect more intuitively through 3D presentation. The final example effect:

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

Box2D was first presented as an example by Erin Catto at the GDC conference, and was later continuously improved into an open source physics engine library for C , over the years, versions such as Java, ActionScript and JS have been derived, which are widely used in the game field. It is indeed rich to say it is rich, but it is confusing to say it is confusing. If you look for the JS version of Box2D, there are many choices, and there are differences in the APIs of different versions. You can refer to the comparison here http://stackoverflow.com/questions/7628078 /which-box2d-javascript-library-should-i-use

Although there are many versions and it’s a bit confusing, the basic principles and APIs of each version are similar. The following is an example I wrote based on Box2DJS integrated with HT for Web code. Box2D has many parameter function points. In this example, 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 it with HT for Web in presentation.

The following code constructs the Node object of HT for Web in createNode. At the same time, it constructs the Body object of Box2D and associates them together through the userData attribute. In the rendering process of requestAnimationFrame, first pass world.Step(1 / 60, 10, 10); Update the internal operation of the physics engine, and then traverse all Body elements to synchronize the operation results, that is, the Body's position and rotation angle and other information, to the Node object of HT for Web, thereby achieving HT for Web and The powerful combination of Box2DJS each brings its own talents.

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 <p style="margin:10px auto;font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;line-height:21px;white-space:normal;">http://hightopo.com/demo/box2djs/ht-box2d-demo.html</p><p style="margin:10px auto;font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;line-height:21px;white-space:normal;">In the example, the object dropped below -150 and I deleted Box2DJS and HT The corresponding data element in the DataModel, and the selected graphic element will also automatically delete the graphic element. count % 10 === 0 This is used to generate a new cube after ten refreshes. Box2D can also play many tricks. If the amount of data is large, you can also consider referring to "3D Topology Automatic Layout - Web Workers" to perform the intensive operations of Box2DJS in WebWork. I have not evaluated the performance improvement. When the amount of data is large, The data serialization transfer of WebWork and GUI threads will also have burdens that need to be paid attention to. The 3D effect of the final example is quite interesting to play: http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html</p><p style="margin:10px auto;font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;line-height:21px;white-space:normal;"><img  class="mceItemMedia mceItemFlash lazy" src="/static/imghw/default1.png" data-src="http://www.bkjia.com/uploads/allimg/151208/114GJ930-0.gif"    style="max-width:90%"  style="max-width:90%" data-mce-json="{'video':{},'params':{'src':'http://player.youku.com/player.php/sid/XODM0OTQ0NzEy/v.swf','allowfullscreen':'true','allow.access':'always','quality':'high'},'name':null,'hspace':null,'vspace':null,'align':null,'bgcolor':null}" style="border:1px dotted #CC0000;cursor:default;background-image:url(http://common.cnblogs.com/editor/tiny_mce/themes/advanced/img/flash.gif);background-color:#FFFFCC;background-position:50% 50%;background-repeat:no-repeat;" alt="WebGL based on HTML5 combined with Box2DJS physics engine application_PHP tutorial" ></p><p style="margin:10px auto;font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;line-height:21px;white-space:normal;"><img class="alignnone size-full wp-image-276 lazy" src="/static/imghw/default1.png" data-src="http://www.bkjia.com/uploads/allimg/151208/114GMb6-1.png" alt="Screen Shot 2014-11-25 at 8.05.11 PM"    style="max-width:90%"  style="max-width:90%" data-mce- style="cursor:default;"></p><p align="left"></p><div style="display:none;">
<span id="url" itemprop="url">http://www.bkjia.com/PHPjc/1078320.html</span><span id="indexUrl" itemprop="indexUrl">www.bkjia.com</span><span id="isOriginal" itemprop="isOriginal">true</span><span id="isBasedOnUrl" itemprop="isBasedOnUrl">http: //www.bkjia.com/PHPjc/1078320.html</span><span id="genre" itemprop="genre">TechArticle</span><span id="description" itemprop="description">WebGL based on HTML5 combined with Box2DJS physics engine application In the previous article, we presented the 3D A* Search Algorithm based on HT for Web Pathfinding effect, in this article we will use HT for Web 3D to present Box2DJS physics...</span>
</div>
<div class="art_confoot"></div>