こんにちは、ナレコム前川です。
今回は、Amazon Sumerian の公式チュートリアルの
Three Ways to Click an Entity を進めていきたいと思います。
ここでは、Amazon Sumerian の 3種類の Clicking について学んでいきます。
それでは、早速進めていきましょう。
1. シーンの作成
① ダッシュボードから Default Lighting を選択。
① ダッシュボードから Default Lighting を選択。
② シーン名を「Clicking」にし、シーン作成。
③ Create Entity から Box を追加。
これでシーンの準備は完了です。
2. 3種類のクリックオプションについて
ここからは、3種類のクリックオプションをそれぞれ説明していきます。
Hardware Picking
これは、マウスやVRコントローラーでシングルクリックがされるのを待機する際に最適です。
Hardware Picking を実装するのに最も簡単な方法は、State Machine で Pick アクションを追加することです。
それでは、実際に設定していきましょう。
それでは、実際に設定していきましょう。
① 先程追加した Entity を選択し、State Machine コンポーネントを追加。
② + をクリック。
③ State 1 に Pick アクションを追加。
④ 新しく State を追加し、その State に Fire FX アクションを追加。
追加できたら以下のように表示されます。
⑤ State 同士を以下のように繋げる。
⑥ シーンを実行。
Bounding Box Raycasting
これは、Hardware Picking よりもパフォーマンスが必要な場合に適しています。
しかし、このオプションは Hardware Picking ほど正確ではないようです。
ここでは、Script でクリックされたか判断するようにしていきます。
① Box に Script コンポーネントを追加し、Custom Script を新規追加。
② 以下のプログラムに置き換える。
1var setup = function(args, ctx) {2 ctx.ray = new sumerian.Ray();34 ctx.onClick = function(evt){5 var dpr = ctx.world.sumerianRunner.renderer.devicePixelRatio;6 var x = evt.clientX * dpr;7 var y = evt.clientY * dpr;8 var activeCamera = ctx.activeCameraEntity.cameraComponent.camera;9 activeCamera.getPickRay(x, y, ctx.viewportWidth, ctx.viewportHeight, ctx.ray);10 var isHit = ctx.entity.meshRendererComponent.worldBound.intersectsRay(ctx.ray);11 if(isHit){12 sumerian.SystemBus.emit(args.channel);13 }14 };1516 ctx.domElement.addEventListener('click', ctx.onClick);17};1819var cleanup = function(args, ctx) {20 ctx.domElement.removeEventListener('click', ctx.onClick);21};2223var parameters = [{24 key: 'channel',25 type: 'string',26 'default': 'pick'27}];③ Channel に pick を設定。
Collider Raycasting
より精度の高いピッキングが必要な場合は、このオプションを使用する必要があります。
衝突判定があった場合にイベントを発生させたいときなどに使用できます。
① Box に Collider コンポーネントを追加。
1var setup = function(args, ctx) {2 ctx.ray = new sumerian.Ray();3 ctx.physicsSystem = ctx.world.getSystem('PhysicsSystem');4 ctx.result = new sumerian.RaycastResult();56 ctx.onClick = function(evt){7 var dpr = ctx.world.sumerianRunner.renderer.devicePixelRatio;8 var x = evt.clientX * dpr;9 var y = evt.clientY * dpr;10 var activeCamera = ctx.activeCameraEntity.cameraComponent.camera;1112 activeCamera.getPickRay(x, y, ctx.viewportWidth, ctx.viewportHeight, ctx.ray);1314 ctx.physicsSystem.raycastClosest(ctx.ray.origin, ctx.ray.direction, args.maxDistance, {}, ctx.result);15 if(ctx.result.entity === ctx.entity){16 sumerian.SystemBus.emit(args.channel);17 }18 ctx.result.reset();19 };2021 ctx.domElement.addEventListener('click', ctx.onClick);22};2324var cleanup = function(args, ctx) {25 ctx.domElement.removeEventListener('click', ctx.onClick);26};2728var parameters = [{29 key: 'channel',30 type: 'string',31 'default': 'pick'32},{33 key: 'maxDistance',34 type: 'float',35 'default': 10000,36 min: 037}];これで Collider Raycasting が使えるようになります。
今回のチュートリアルは以上です。
お疲れ様でした。
