Amazon Sumerian Tutorial 36：Three Ways to Click an Entity

投稿日 2018年10月27日
著者 aws-recipe-user
カテゴリー Amazon Sumerian

こんにちは、ナレコム前川です。

今回は、Amazon Sumerian の公式チュートリアルの
Three Ways to Click an Entity を進めていきたいと思います。

ここでは、Amazon Sumerian の 3種類の Clicking について学んでいきます。

それでは、早速進めていきましょう。

1. シーンの作成

① ダッシュボードから Default Lighting を選択。
② シーン名を「Clicking」にし、シーン作成。

③ Create Entity から Box を追加。

※ シーン名も Entity も自由に設定して構いません。

これでシーンの準備は完了です。

2. 3種類のクリックオプションについて

ここからは、3種類のクリックオプションをそれぞれ説明していきます。

Hardware Picking

これは、マウスやVRコントローラーでシングルクリックがされるのを待機する際に最適です。
Hardware Picking を実装するのに最も簡単な方法は、State Machine で Pick アクションを追加することです。

それでは、実際に設定していきましょう。

① 先程追加した Entity を選択し、State Machine コンポーネントを追加。

② + をクリック。
③ State 1 に Pick アクションを追加。

④ 新しく State を追加し、その State に Fire FX アクションを追加。

追加できたら以下のように表示されます。

⑤ State 同士を以下のように繋げる。

⑥ シーンを実行。

マウスでクリックすると、Box から炎が上がりました。

Bounding Box Raycasting

これは、Hardware Picking よりもパフォーマンスが必要な場合に適しています。
しかし、このオプションは Hardware Picking ほど正確ではないようです。

ここでは、Script でクリックされたか判断するようにしていきます。

① Box に Script コンポーネントを追加し、Custom Script を新規追加。
② 以下のプログラムに置き換える。

var setup = function(args, ctx) {
    ctx.ray = new sumerian.Ray();

    ctx.onClick = function(evt){
        var dpr = ctx.world.sumerianRunner.renderer.devicePixelRatio;
        var x = evt.clientX * dpr;
        var y = evt.clientY * dpr;
        var activeCamera = ctx.activeCameraEntity.cameraComponent.camera;
        activeCamera.getPickRay(x, y, ctx.viewportWidth, ctx.viewportHeight, ctx.ray);
        var isHit = ctx.entity.meshRendererComponent.worldBound.intersectsRay(ctx.ray);
        if(isHit){
            sumerian.SystemBus.emit(args.channel);
        }
    };

    ctx.domElement.addEventListener('click', ctx.onClick);
};

var cleanup = function(args, ctx) {
    ctx.domElement.removeEventListener('click', ctx.onClick);
};

var parameters = [{
    key: 'channel',
    type: 'string',
    'default': 'pick'
}];

var setup = function(args, ctx) {

ctx.ray = new sumerian.Ray();

ctx.onClick = function(evt){

var dpr = ctx.world.sumerianRunner.renderer.devicePixelRatio;

var x = evt.clientX * dpr;

var y = evt.clientY * dpr;

var activeCamera = ctx.activeCameraEntity.cameraComponent.camera;

activeCamera.getPickRay(x, y, ctx.viewportWidth, ctx.viewportHeight, ctx.ray);

var isHit = ctx.entity.meshRendererComponent.worldBound.intersectsRay(ctx.ray);

if(isHit){

sumerian.SystemBus.emit(args.channel);

}

};

ctx.domElement.addEventListener('click', ctx.onClick);

};

var cleanup = function(args, ctx) {

ctx.domElement.removeEventListener('click', ctx.onClick);

};

var parameters = [{

key: 'channel',

type: 'string',

'default': 'pick'

}];

③ Channel に pick を設定。

これで、State Machine や Script から Pick イベントを検出できるようになりました。

Collider Raycasting

より精度の高いピッキングが必要な場合は、このオプションを使用する必要があります。
衝突判定があった場合にイベントを発生させたいときなどに使用できます。

① Box に Collider コンポーネントを追加。

② 以下のプログラムに置き換える。

var setup = function(args, ctx) {
    ctx.ray = new sumerian.Ray();
    ctx.physicsSystem = ctx.world.getSystem('PhysicsSystem');
    ctx.result = new sumerian.RaycastResult();

    ctx.onClick = function(evt){
        var dpr = ctx.world.sumerianRunner.renderer.devicePixelRatio;
        var x = evt.clientX * dpr;
        var y = evt.clientY * dpr;
        var activeCamera = ctx.activeCameraEntity.cameraComponent.camera;

        activeCamera.getPickRay(x, y, ctx.viewportWidth, ctx.viewportHeight, ctx.ray);
        ctx.physicsSystem.raycastClosest(ctx.ray.origin, ctx.ray.direction, args.maxDistance, {}, ctx.result);
        if(ctx.result.entity === ctx.entity){
            sumerian.SystemBus.emit(args.channel);
        }
        ctx.result.reset();
    };

    ctx.domElement.addEventListener('click', ctx.onClick);
};

var cleanup = function(args, ctx) {
    ctx.domElement.removeEventListener('click', ctx.onClick);
};

var parameters = [{
    key: 'channel',
    type: 'string',
    'default': 'pick'
},{
    key: 'maxDistance',
    type: 'float',
    'default': 10000,
    min: 0
}];

var setup = function(args, ctx) {

ctx.ray = new sumerian.Ray();

ctx.physicsSystem = ctx.world.getSystem('PhysicsSystem');

ctx.result = new sumerian.RaycastResult();

ctx.onClick = function(evt){

var dpr = ctx.world.sumerianRunner.renderer.devicePixelRatio;

var x = evt.clientX * dpr;

var y = evt.clientY * dpr;

var activeCamera = ctx.activeCameraEntity.cameraComponent.camera;

activeCamera.getPickRay(x, y, ctx.viewportWidth, ctx.viewportHeight, ctx.ray);

ctx.physicsSystem.raycastClosest(ctx.ray.origin, ctx.ray.direction, args.maxDistance, {}, ctx.result);

if(ctx.result.entity === ctx.entity){

sumerian.SystemBus.emit(args.channel);

}

ctx.result.reset();

};

ctx.domElement.addEventListener('click', ctx.onClick);

};

var cleanup = function(args, ctx) {

ctx.domElement.removeEventListener('click', ctx.onClick);

};

var parameters = [{

key: 'channel',

type: 'string',

'default': 'pick'

},{

key: 'maxDistance',

type: 'float',

'default': 10000,

min: 0

}];

これで Collider Raycasting が使えるようになります。

今回のチュートリアルは以上です。
お疲れ様でした。

この記事を書いた人

aws-recipe-user

記事一覧

Amazon Sumerian Tutorial 36：Three Ways to Click an Entity

1. シーンの作成

2. 3種類のクリックオプションについて

Hardware Picking

Bounding Box Raycasting

Collider Raycasting

この記事を書いた人

aws-recipe-user

Amazon Sumerian Tutorial 5：How to Create…

Amazon Sumerian Tutorial 25：Scripting Ba…

Amazon Sumerian Tutorial 51：VR Asset Pac…

Amazon Sumerian Tutorial18：Timeline Basi…