“Ability proceeds from a fusion of skills, knowledge, understanding and imagination, consolidated by experience.”
MICHAEL KLARKE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare porttitor ipsum a mollis. Pellentesque sagittis enim ac libero luctus, at vulputate ante lobortis. Praesent lacinia, leo sit amet congue malesuada.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor ins.
RECENT ARTCLES
lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ets unsers.
babylon.js ステップ14 パーティクル表現
babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう！ パーティクルの作り方 パーティクルシステム 解説 パーティクルのテクスチャマスク パーティクルエミッタ ローカル空間 場所と広がり ライフタイム サイズ 色 ブレンドモード rate 放出方向 重力 回転 速度 速度リミット 抗力係数 整列 ノイズテクスチャ まとめ パーティクルの作り方 パーティクルシステム パーティクルシステムを用いたパーティクル表現の例はこちらです。コード中に説明を追加していますので順番にみていきましょう コード例は以下です。 var createScene = function () { var [...]
babylon.js ステップ13 スプライト(Sprites)
babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! ２つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から利用可能) スプライトの設定 スプライトアニメーション方法 スプライトマップ タイル表現に便利なスプライトマップタイル まとめ ２つのスプライト管理方法 スプライトは大量の2D画像を利用するため、パフォーマンス管理が重要です。babylon.jsでは２つの管理方法があります A uniform spritesheet (均一化されたスプライト)・・・SpriteManagerを利用 A packed spritesheet(パッケージされたスプライト)・・・SpritePackedManagerを利用 これらは、１枚のスプライトであってもManagerを使う必要があります。 スプライトマネージャー // 木の画像用のsprite managerの作成 var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene); [...]
babylon.js ステップ12 レイキャスト(Raycasts)
babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう！ レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelper まとめ レイキャストとは光線による衝突判定 前回の11回ではマウスの位置と、壁の衝突判定を行いましたが。レイキャストは、光線(レーザー・)による衝突または、交差チェックを行う機能です。FPSゲームの弾丸の軌道なんかはレイキャストで行います。 マウスクリックで、選択されたメッシュ情報を取得する方法(scene.pick)を使用しました。一方レイキャストでは似たようなメソッド、 scene.pickWithRay() を使っていきます 光線と最初に接したメッシュの取得 光線と最初に接したメッシュの取得をやっていきます。 真ん中に、光線を出力する赤い箱があります（箱はマウスで動かせる）そして、その光線と接する可能性のある、青い箱が２つと緑の箱があります。 なお、奥の青い箱は、光線が届きません。光線が当てられた箱は上に伸びていきます。 デモはこちらhttps://www.babylonjs-playground.com/#KNE0O#84 まず、最初に光線の出力もとである赤い箱には、衝突検出をoffにする設定を入れます。赤い箱自体が衝突判定されてしまっては困りますので。 box.isPickable = false; 次に、箱から出る光線のベクトルを定義します。その際,箱の位置()を差し引いて箱の原点origin(光線が始まる場所)からの方向を取得します。 // 赤い箱との方向ベクトル var forward = new BABYLON.Vector3(0,0,1); forward = vecToLocal(forward, box); [...]
test
test こんにちは！！！
babylon.js ステップ11 画面クリックとの衝突判定 (Picking Collisions)
babylon.js チュートリアル ステップ11 は画面クリックとのコリジョンです。コリジョンシリーズの３回目です。いきましょう！ 3Dオブジェクトのクリック(hit)を検出 ヒットした情報を用いて銃槍の位置をずらす デモ 3Dオブジェクトのクリック(hit)を検出 壁を表す平面と、銃創の絵が描かれた平面の２つを作成して、壁への衝突を検出し、衝突している場合は、そこに銃槍を刻むシーンをやってみます。 まず、クリックイベントで「pick」関数を使用して座標を取得します //クリックイベント検出 window.addEventListener("click", function () { // pickでポインタ情報を取得する var pickResult = scene.pick(scene.pointerX, scene.pointerY); }); pickResultオブジェクトは、主に4つの情報で構成されています。 hit （ブール値）：クリックがシーン内のオブジェクトにヒットした場合はtrue。 distance （float）：アクティブなカメラとヒットの間の距離（メッシュにヒットしなかった場合は無限） pickedMesh （BABYLON.Mesh）：オブジェクトにヒットしたメッシュ。hitしてない場合はnull pickedPoint （BABYLON.Vector3）：クリックしたVector3型で返す。hitしてない場合はnull ヒットした情報を用いて銃槍の位置をずらす pickResultを用いて // [...]
babylon.js ステップ10 メッシュの交差衝突判定 (Intersect Collisions – mesh)
メッシュ同士が、それぞれ衝突を検出する方法をやりますいきましょう！！ 説明 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 まとめ 説明 衝突検出の2つの方法を紹介します。 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 2つのメッシュが接触しているときに衝突イベントを発生させる方法 intersectsMesh()を使うことで、対象との交差(衝突)判定を行うことが出来ますコードは次の通り // 平面(plan1)とballoon1との交差判定 if (balloon1.intersectsMesh(plan1, false)) { balloon1.material.emissiveColor = new BABYLON.Color4(1, 0, 0, 1); } else { balloon1.material.emissiveColor = new BABYLON.Color4(1, 1, 1, 1); } [...]
