MRが楽しい

MRやVRについて学習したことを書き残す

CLIP STUDIO PAINTで既存のパース定規の設定を3D素材に適用する

本日は CLIP STUDIO PAINT の使い方枠です。
CLIP STUDIO PAINTで既存のパース定規の設定を3D素材に適用する手順を記事にします。
f:id:bluebirdofoz:20210123001136j:plain

利用するパース定規

パース定規を作成済みのキャンバスを用意します。
今回は前回記事で作成した以下のキャンバスに3D素材を追加します。
bluebirdofoz.hatenablog.com
f:id:bluebirdofoz:20210123001209j:plain

パース定規が設定済みの場合

[素材]ウィンドウから3D素材をキャンパスにドラッグして追加します。
f:id:bluebirdofoz:20210123001231j:plain

キャンバスにパース定規が設定されている場合は自動で同じパースのパース定規が3D素材のレイヤーに設定されます。
f:id:bluebirdofoz:20210123001249j:plain

後からパース定規を設定する場合

次に既存のパース定規を無効化した状態で[素材]ウィンドウから3D素材をキャンパスにドラッグして追加します。
f:id:bluebirdofoz:20210123001404j:plain

この場合、3D素材のレイヤーに設定されるパース定規はデフォルトの物となります。
f:id:bluebirdofoz:20210123001414j:plain

後から3D素材のレイヤーにパース定規を設定する場合、一旦レイヤーのパース定規を削除します。
f:id:bluebirdofoz:20210123001426j:plain

利用したいパース定規をオブジェクト操作で選択し、[コピー]します。
f:id:bluebirdofoz:20210123001438j:plain

再び3D素材のレイヤーを選択し、[貼り付け]を実行します。
f:id:bluebirdofoz:20210123001451j:plain

これで3D素材のレイヤーにパース定規が設定されます。
f:id:bluebirdofoz:20210123001618j:plain

3D素材にパースを反映するには更にリンク手順を実施します。
追加されたパース定規を選択状態にします。
f:id:bluebirdofoz:20210123001629j:plain

[定規をレイヤーにリンク]のチェックを一旦外します。
f:id:bluebirdofoz:20210123001714j:plain

その後、再び[定規をレイヤーにリンク]のチェックを入れるとパースが反映されます。
f:id:bluebirdofoz:20210123001725j:plain

注意点

3D素材のレイヤーに設定できるパース定規は3点透視のみです。
1点透視、2点透視のパース定規は設定できません。
f:id:bluebirdofoz:20210123001735j:plain

ただし3点透視のガイド線の[+]アイコンを Shift を押しながらドラッグすることで消失点を無限遠に設定できます。
3D素材を使用して1点透視または2点透視を利用したい場合は、これを利用して3点透視でそれぞれの疑似パース定規を使用します。
f:id:bluebirdofoz:20210123001747j:plain

CLIP STUDIO PAINTでパース定規を設定する

本日は CLIP STUDIO PAINT の使い方枠です。
CLIP STUDIO PAINTでパース定規を設定する手順を記事にします。
f:id:bluebirdofoz:20210122231920j:plain

下絵の作成

パース定規を作成するにあたって、指標となるアタリの下絵を作成しました。
この下絵を元にパース定規を設定します。
f:id:bluebirdofoz:20210122231931j:plain

パース定規の作成

メニューから[レイヤー -> 定規・コマ枠 -> パース定規の作成]を実行してパース定規を作成します。
f:id:bluebirdofoz:20210122231941j:plain

作成の際、透視図法の消失点数を指定できます。ここでは3点図法を選択しました。
消失点は後から追加することもできます。
f:id:bluebirdofoz:20210122231951j:plain

これでパース定規が作成されます。
f:id:bluebirdofoz:20210122232002j:plain

アイレベルの調整

下絵を元にパース定規を調整します。
オブジェクト操作でパースを選択することで編集が可能です。
f:id:bluebirdofoz:20210122232011j:plain

最初に視点の高さであるアイレベルをおおよその目安で設定します。
ハンドルをドラッグして位置を決定します。
f:id:bluebirdofoz:20210122232022j:plain

アイレベルは[ツールプロパティ]の[アイレベルを固定]にチェックを入れておくと消失点の調整で動かないよう固定できます。
f:id:bluebirdofoz:20210122232032j:plain

ガイド線と消失点の調整

次にガイド線と消失点を下絵に合わせて調整します。
最初にガイド線の移動ハンドルを下絵の2つの平行なラインに合わせて配置します。
f:id:bluebirdofoz:20210122232044j:plain

2つのラインが下絵に合うように消失点を調整します。
綺麗に合わない場合はアイレベルの位置も調整して合わせます。
f:id:bluebirdofoz:20210122232053j:plain

同じように他の2つのガイド線と消失点も調整します。
f:id:bluebirdofoz:20210122232105j:plain

これで3点透視のパースができました。
[ツールプロパティ]から[グリッド]を有効にすることで各平面のより詳細なパースのガイドが確認できます。
f:id:bluebirdofoz:20210122232117j:plain

ペン入れ

パース定規を元にペン入れを行ってみます。
[新規ベクターレイヤー]を作成します。
f:id:bluebirdofoz:20210122232130j:plain

[特殊定規にスナップ]を有効にしておくと、パース定規に沿って線を引くことができます。
f:id:bluebirdofoz:20210122232146j:plain

ガイド線の方向に線を引くと自動的にガイド線に合わせて線が引かれます。
f:id:bluebirdofoz:20210122232158j:plain

ベクターレイヤーでペン入れを行うと、消しゴムツールの[ベクター消去]で[交点まで]の削除が行えるので便利です。
f:id:bluebirdofoz:20210122232211j:plain

パースに沿って線を引くと、立体感のある絵を正確に描くことができます。
f:id:bluebirdofoz:20210122232223j:plain

Windowsのフォトアプリで動画を結合して編集する

本日はフォトアプリの小ネタ枠です。
Windowsのフォトアプリで動画を結合して編集する手順を記事にします。
f:id:bluebirdofoz:20210121230325j:plain

ビデオプロジェクトの作成

Windows メニューなどから「フォト」アプリを起動します。
f:id:bluebirdofoz:20210121230251j:plain

[ビデオエディター]タブを開き、[新しいビデオプロジェクト]をクリックするとビデオプロジェクトを作成できます。
f:id:bluebirdofoz:20210121230342j:plain

ビデオの名前を設定して[OK]ボタンをクリックします。
f:id:bluebirdofoz:20210121230353j:plain

これでビデオプロジェクトが作成できました。
f:id:bluebirdofoz:20210121230403j:plain

動画の結合

結合したい動画をフォルダから[プロジェクトライブラリ]にドラッグします。
f:id:bluebirdofoz:20210121230414j:plain

[プロジェクトライブラリ]に取り込んだ動画は[ストーリーボード]に配置することで1つの動画に結合できます。
f:id:bluebirdofoz:20210121230427j:plain

[再生]ボタンをクリックして編集後の動画を確認できます。
f:id:bluebirdofoz:20210121230437j:plain

トリミングや効果を追加する場合はストリーボードの各ボタンから編集可能です。
f:id:bluebirdofoz:20210121230446j:plain

編集が完了したら[ビデオの完了]ボタンをクリックして動画を出力します。
f:id:bluebirdofoz:20210121230458j:plain

画質を指定して[エクスポート]ボタンをクリックします。
f:id:bluebirdofoz:20210121230507j:plain

出力フォルダとファイル名を指定すると、動画ファイルが出力されます。
f:id:bluebirdofoz:20210121230517j:plain

フォトアプリで動画を結合して編集することができました。
f:id:bluebirdofoz:20210121230526j:plain

MRTKのRadialViewを使ってUIやオブジェクトを視界に追従させる

本日は MRTK の小ネタ枠です。
MRTKのRadial Viewを使ってUIやオブジェクトを視界に追従させる手順を記事にします。
f:id:bluebirdofoz:20210120231423j:plain

RadialView

RadialView は MRTK の Solver 機能に含まれるコンポーネントです。
敷居値の範囲を超えたときに、Solver 設定に基づきオブジェクトが追従します。
microsoft.github.io

以前の Toolkit における Tagalong に相当する機能になります。
bluebirdofoz.hatenablog.com

MRTKのインポート

MRTKのインポート手順は以下の記事を参照ください。
bluebirdofoz.hatenablog.com

設定手順

サンプルシーンとして以下の Cube オブジェクトを正面に配置したシーンを用意しました。
f:id:bluebirdofoz:20210120231450j:plain

追従させたいオブジェクトに RadialView コンポーネントを追加します。
オブジェクトの Inspector ビューを開き、[Add Component]で[RadialView]を検索すると、検索結果に表示されます。
f:id:bluebirdofoz:20210120231511j:plain

これで RadialView コンポーネントを設定できました。
Solver の共通コンポーネントである[SolverHandler]と[RadialView]が追加されます。
f:id:bluebirdofoz:20210120231538j:plain

設定項目

コンポーネントはそれぞれ以下の設定項目を持ちます。
・SolverHandler

Tracked Target Type:頭や手などトラッキングする対象を設定します。
Additional Offset:トラッキング対象からのオフセット座標を設定します。
Additional Rotation:トラッキング対象からのオフセット回転を設定します。
Update Solvers:有効な場合、フレームごとにSolverUpdate()を呼び出します。

・RadialView

Update Linked Transform:有効な場合、位置と方向は計算されますが適用されません。
Move Lerp Time:移動に対する遅延時間を設定します。
Rotate Lerp Time:回転に対する遅延時間を設定します。
Scale Lerp Time:拡縮に対する遅延時間を設定します。
MaintainScale:有効な場合、ローカルスケールを使用します。
Smoothing:有効な場合、遅延時間に応じてトランスフォームがスムーズに変化します。
LifeTime:有効期限を設定します。0で無制限に動作します。
Reference Direction:カメラ方向などオブジェクトが正対する方向を設定します。
Min Distance:最小距離を設定します。この距離より近づくとオブジェクトが移動します。
Max Distance:最大距離を設定します。この距離より離れるとオブジェクトが移動します。
Min View Degrees:ビューの中心からの最小角度を設定します。この角度より近づくとオブジェクトが移動します。
Max View Degrees:ビューの中心からの最大角度を設定します。この角度より離れるとオブジェクトが移動します。
Aspect V:水平とは異なるクランプを垂直FOVに適用します。垂直FOVのクランプは 水平設定 * aspect V で計算されます。
Ignore Angle Clamp:有効な場合、角度のクランプを無視します。
Ignore Distance Clamp:有効な場合、距離のクランプを無視します。
Use Fixed Vertical Position:有効な場合、垂直方向の動きを無視してオブジェクトのY位置をロックします。
Fixed Vertical Position:垂直位置のオフセット量を設定します。
Orient To Reference Direction:有効な場合、Reference Direction の回転に正対します。

microsoft.github.io
microsoft.github.io

動作確認

各種設定を行い、シーンを再生して動作を確認します。
f:id:bluebirdofoz:20210120231658j:plain

オブジェクトが視界に追従して移動すれば成功です。
f:id:bluebirdofoz:20210120231706j:plain

UnityでMathfを使って複数のfloat値の最大値・最小値を求める

今日は Unity の小ネタ枠です。
Unity で UnityEngine.Mathf を使って複数のfloat値の最大値・最小値を求める手順を記事にします。

UnityEngine.Mathf

UnityEngine.Mathf は一般的な数学関数を扱うためのクラスです。
docs.unity3d.com

正負の判定や小数点の切り上げ、切り捨てといった一般的な数学関数のほか、座標や角度の補完といった Unity で役立つ数学関数が含まれています。

UnityEngine の Max/Min 関数は複数の float 値を渡して最大値や最小値を判定することができます。
一方で System.Mathf の Max/Min 関数は2つまでの値を比較して最大値、最小値を判定します。
docs.microsoft.com

Vector クラスなど3つ以上の値を扱う事の多い Unity では複数の値から最大値、最小値を求めることができる本関数が役立ちます。

Max/Min関数

以下に各軸のスケール値から最も大きい値を取得するサンプルスクリプトを作成しました。
・UnityMathfTest.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UnityMathfTest : MonoBehaviour
{
    void Start()
    {
        // オブジェクトのスケール値を取得する
        Vector3 sclaes = this.transform.localScale;

        // 各軸のスケール値から最大値を取得する
        float maxScale = UnityEngine.Mathf.Max(sclaes.x, sclaes.y, sclaes.z);

        // 各軸のスケール値を最大値に合わせる
        this.transform.localScale = new Vector3(maxScale, maxScale, maxScale);
    }
}

f:id:bluebirdofoz:20210119223628j:plain

各軸のスケール値が異なるゲームオブジェクトを作成し、そのオブジェクトにスクリプトをアタッチします。
f:id:bluebirdofoz:20210119223637j:plain

シーンを再生すると、最大値のスケール値に合わせて全ての軸のスケール値が再設定されます。
f:id:bluebirdofoz:20210119223647j:plain

Tokyo HoloLens ミートアップ vol.24での発表資料

Tokyo HoloLens ミートアップ vol.24 での発表資料です。
発表内容は「HoloLens2で3Dモデリングをリアルタイムにレビューする」です。

www2.slideshare.net

イベント情報

イベント情報は以下になります。
hololens.connpass.com

WindowsPCにLINEをインストールする

本日は環境構築のメモ枠です。
WindowsPCにLINEをインストールする手順を記事にします。

LINEのインストール

PC 版の Line は以下のページから取得できます。
トップメニューの[ダウンロード]をクリックします。
line.me
f:id:bluebirdofoz:20210117230656j:plain

各種環境用のダウンロードリンクが表示されます。
WindowsPC にインストールする場合、[Windows版をダウンロード]か[Windows Store]を選択します。
今回は[Windows Store]を選択しました。こちらを選択すると UWP アプリ版の LINE が取得できます。
f:id:bluebirdofoz:20210117230707j:plain

Windows Store のブラウザページが開くので[入手]ボタンをクリックします。
f:id:bluebirdofoz:20210117230721j:plain

[Microsoft Store]が起動して、LINE アプリのインストールページが開きます。
改めて[入手]ボタンをクリックすると、インストールが開始します。
f:id:bluebirdofoz:20210117230733j:plain

これでインストールは完了です。
[起動]ボタンをクリックして起動します。
f:id:bluebirdofoz:20210117230744j:plain

スマートフォン版との連携

初回起動時に、ログインのメールアドレスとパスワードの入力画面が開きます。
スマートフォン版でメールアドレスとパスワードの設定をしている場合、同じアカウントでログインすることで連携できます。
f:id:bluebirdofoz:20210117230755j:plain