Box2DJS 物理エンジンと組み合わせた HTML5 ベースの WebGL application_PHP チュートリアル

Box2DJS 物理エンジン アプリケーションと組み合わせた HTML5 ベースの WebGL

前回の記事では、HT for Web に基づく A* 検索アルゴリズムの 3D パスファインディング効果を紹介しました。この記事では、HT for Web 3D を使用してプレゼンテーションを行います。 Box2DJS 物理エンジンの衝突効果 、前の記事と同じです。実際、Box2DJS は単なる 2 次元平面衝突物理エンジンですが、3D プレゼンテーションを通じて衝突効果をより直感的に体験することもできます。効果:

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

Box2D は、GDC カンファレンスで Erin Catto によって例として初めて提示されました。その後、継続的に改善されてオープンソースの物理学になりました。 C++ 用のエンジン ライブラリであり、長年にわたって Java、ActionScript、JS などのバージョンから派生し、ゲーム分野で広く使用されています。確かに豊富と言えば豊富ですが、分かりにくいと言えば分かりにくい Box2D の JS バージョンを探すと選択肢が多く、バージョンごとに API の違いが参照できます。比較はこちら http://stackoverflow.com/questions/7628078 /what-box2d-javascript-library-Should-i-use

バージョンが多くて少しわかりにくいですが、各バージョンの基本原則と API以下は、HT for Web と統合された Box2DJS に基づいて作成したコード例です。 Box2D には多くのパラメーター関数ポイントがあります。この例では、主に Box2DJS エンジンの基本的な使用方法とプレゼンテーションでそれを HT for Web と組み合わせる方法を理解できるように、最も基本的で単純な要素のみを示します。

次のコードは、createNode で HT for Web の Node オブジェクトを構築し、同時に Box2D の Body オブジェクトを構築し、requestAnimationFrame のレンダリング プロセスで最初に world.Step( 1 / 60, 10 , 10); 物理エンジンの内部演算を更新し、すべての Body 要素を走査して演算結果、つまり Body の位置や回転角度などの情報を HT の Node オブジェクトに同期します。 Web では、HT for Web と 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 <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;"> この例では、オブジェクトが -150 を下回ったときに、Box2DJS と HT の DataModel 内の対応するデータ要素を削除しました。プリミティブも自動的に削除されます。 count % 10 === 0 は、10 回の更新後に新しいキューブを生成するために使用されます。 Box2D で多くのトリックを実行できる場合、データ量が大きい場合は、WebWork で Box2DJS の集中的な操作を実行することも検討できます。パフォーマンスの向上については評価していません。データ量が大きいため、WebWork スレッドと GUI スレッド間のデータのシリアル化転送にも注意が必要な負荷がかかります。最後の例の 3D 効果は非常に興味深いものです。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" 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="Box2DJS 物理エンジンと組み合わせた HTML5 ベースの WebGL application_PHP チュートリアル" ></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" 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-src="http://www.bkjia.com/uploads/allimg/151208/114GMb6-1.png" 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">本当</span><span id="isBasedOnUrl" itemprop="isBasedOnUrl">http://www.bkjia.com/PHPjc/1078320.html</span><span id="genre" itemprop="genre">技術記事</span><span id="description" itemprop="description"> HTML5 ベースの WebGL と Box2DJS 物理エンジン アプリケーションの組み合わせ 前回の記事では、HT for Web に基づく A* 検索アルゴリズムの 3D パスファインディング効果を紹介しました。この記事では、Web 3D の HT を使用して Box2DJS 物理エンジンを紹介します。 </span>
</div>
<div class="art_confoot"></div>