Clever Geek Handbook

TouchDesignerでIntel RealSenseカメラを使用します。 パート1





DerivativeのTouchDesignerは、パフォーマンス中にインタラクティブなソリューションやリアルタイムアニメーションを作成したり、3次元アニメーションを表示したり、マップや図を作成したり、最近ではバーチャルリアリティシステムで使用したりするために世界中で使用されている人気のあるプラットフォームおよびプログラムです。 カメラのサポートにより、 Intel RealSense TouchDesignerはさらに汎用性が高く強力なツールになりつつあります。 .fbxファイルを使用して、オブジェクトとアニメーションを他の3次元パッケージからTouchDesignerにインポートする機能、および既にレンダリングされているアニメーションクリップと画像を操作する機能に注意する必要があります。



この2部構成の記事では、Intel RealSenseカメラをTouchDesignerに統合する方法とその使用方法について説明します。 前半のデモでは、TOPノードを備えたIntel RealSenseカメラを使用します。 2番目のパートのデモでは、CHOPノードを使用します。 第2部では、Intel RealSenseカメラを使用した仮想現実シーケンスと半円形パノラマの作成についても説明します。



どちらの部分にも、アニメーションと、表示に使用できるダウンロード可能なTouchDesigner *（.toe）ファイルが含まれています。 TouchDesigner *（.toe）ファイルを受信するには、ここをクリックしてください 。 さらに、 TouchDesigner *の無料コピーが非営利目的で使用できます 。 完全に機能します（最大解像度が1280 x 1280に制限されていることを除く）。



ご注意 現在、Intel RealSenseカメラには、 F200短距離カメラとR200長距離カメラの2種類があります。 R200は超小型サイズであるため、パフォーマンスやカメラを非表示にする必要があるその他のユースケースに非常に便利です。 大きなF200とは異なり、R200は手と指の追跡、またはマーカーの追跡をサポートしていません。 TouchDesigner *は、Intel RealSenseカメラモデルの両方をサポートしています：F200とR200の両方。



TouchDesigner Webページを引用します 。「TouchDesigner *は、アーティストやデザイナーがオープンで無料の環境で素材を操作できるようにする革新的なソフトウェアプラットフォームです。 TouchDesigner *は、ビデオ、サウンド、3Dグラフィック、コントローラー経由の入力、インターネットとデータベース、DMX光源、環境センサーなど、想像できるすべてのものを使用するインタラクティブマルチメディアプロジェクトに最適なソリューションです。 これは、これらの要素すべてを無限の方法で混合するための強力な環境です。



Derivativeのシニア開発者であるMalcolm Bechardに、TouchDesignerでIntel RealSenseカメラを使用することについてコメントするよう依頼しました*：



「ノードベースのTouchDesigner *手続き型アーキテクチャのおかげで、Intel RealSenseカメラデータをすぐに受信して視覚化し、コードを書く時間を無駄にすることなく他のノードに転送できます。 アイデアをすばやくプロトタイプ化し、すぐにフィードバックして開発できます。 カメラはTouchDesigner *のノードで表されます。つまり、開発の繰り返しごとにアプリケーションを閉じて再コンパイルする必要はありません。 Intel RealSenseカメラは、ジェスチャー、ハンドトラッキング、顔トラッキング、深度データなどの多数の既製のモジュールをユーザーに提供することにより、TouchDesigner *の機能を拡張します。 これはすべて相互作用に使用できます。 ジェスチャを認識するために手の位置の低レベルのデータ分析を使用する必要はありません。これはすでに行われています。



TouchDesignerでIntel RealSenseカメラを使用する



TouchDesigner *は、Python *を主要なスクリプト言語として使用するノードベースのプログラムおよびプラットフォームです。 異なる操作を実行し、異なる機能を持つ5つのカテゴリのノードがあります：TOPノード（テクスチャ）、SOP（ジオメトリ）、CHOP（アニメーションとサウンド）、DAT（テーブルとテキスト）、COMP（3次元の幾何学的ノード、2次元を作成するためのノード）コントロールパネル）およびMAT（材料）。 TouchDesigner *プログラマーは、Intel開発者と協議して、Intel RealSenseカメラをプログラムに統合するために、Intel RealSense TOPカメラノードとIntel RealSense CHOPカメラノードの2つの特定のノードを作成しました。



ご注意 この記事は、TouchDesigner *とそのインターフェースにすでに精通しているユーザーを対象としています。 TouchDesigner *の経験がなく、この記事を徐々に理解する場合は、まずこちらのドキュメントを確認することをお勧めします。



ご注意 Intel RealSenseカメラを使用する場合、最適な結果を得るには範囲を考慮する必要があります。 このインテルのWebページには、すべてのカメラモデルの範囲が示されており、カメラの使用に関する推奨事項が示されています。



Intel RealSense TOPカメラノード



TouchDesigner *のTOPノードは、画像合成プログラムで通常見られる多くの操作を実行します。 Intel RealSense TOPカメラノードは、Intel RealSenseカメラからの2Dおよび3Dデータでこれらの機能を補完します。 Intel RealSense TOPカメラノードには、さまざまなタイプのデータを受信するための多くの設定が含まれています。



ご注意 このRealSensePointCloudForArticle.toeファイルをダウンロードして、Intel RealSenseカメラデータから3Dアニメーションジオメトリを作成するための簡単な初期テンプレートとして使用できます。 このファイルはさまざまな方法で変更できます。 Intel RealSenseカメラの上位3つのノード（ポイントクラウド、カラー、ポイントクラウドカラーUV）を一緒に使用すると、カラーイメージオーバーレイを使用してポイント（粒子）から3次元ジオメトリを作成できます。 これは多くの興味深い可能性を開きます。





点群のジオメトリ。 これは、Intel RealSenseカメラを使用して作成されたアニメーション化されたジオメトリです。 人前で話すときに使うのはとても良いことです。 話しているアニメーションキャラクターのサウンドを追加できます。 TouchDesigner *は、オーディオデータを使用してリアルタイムアニメーションを作成することもできます。



Intel RealSenseカメラCHOPノード



ご注意 3D追跡データと位置決めを担当する別のIntel RealSenseカメラCHOPノードがあります。 これについては、この記事の後半で説明します。



デモ1. Intel RealSense TOPカメラノードの使用



最初のTOPデモでは、記事の上部にあるボタンsettingUpRealNode2b_FINAL.toeをクリックします。

デモ1、パート 1。IntelRealSense TOPカメラノードを構成し、他のTOPノードに接続する方法を学習します。



1. [ 演算子の追加/ OP作成 ]ダイアログボックスを開きます。

2. [TOP]セクションで、[ RealSense ]をクリックします。

3. Intel RealSense TOPカメラノードの[セットアップ]ページで、 [ 画像 ]のドロップダウンメニューから[ 色 ]を選択します。 Intel RealSense TOPカメラノードは、従来のビデオカメラを使用している場合のように、カメラの目的の画像を表示します。

4. Intel RealSenseカメラを1920 x 1080の解像度に設定します。





Intel RealSense TOPノードの設定は簡単です。



5.レベルTOPノードを作成し、Intel RealSense TOPカメラノードに接続します。

6. Level TOPノードのPre parametersページで、 Invertを選択し、スライダーを1に移動します。

7. Level TOPノードをHSV To RGB TOPノードに接続し、最後のノードをNull TOPノードに接続します。





Intel RealSense TOPカメラノードを他のTOPノードに接続して、目的の画像を取得し、目的の効果を作成できます。



次に、作成した画像をPhong MATノード（マテリアル）に転送して、テクスチャとしてさまざまな幾何学的形状に重ね合わせることができます。



Intel RealSenseカメラデータを使用してジオメトリのテクスチャを作成する



デモ1、パート2。この演習では、Intel RealSense TOPカメラノードを使用してテクスチャを作成する方法と、それらをMATノードに追加して、プロジェクトにジオメトリを割り当てる方法を示します。

1. Geometry COMPノードをシーンに追加します。

2. Phong MATノードを追加します。

3. Null TOPノードを取得し、Phong MATノードのカラーマップパラメーターにドラッグします。





Phong MATノードは、そのカラーマップパラメーターにIntel RealSenseカメラデータを使用します。



4. Geo COMPノードの[レンダリングパラメーター]ページで、マテリアルとしてphong1タイプを追加して、マテリアルとしてphong1ノードを使用します。





Phong MATノードは、Geo COMPノードのRender / Materialパラメーターに追加されたそのカラーマップパラメーターにIntel RealSenseカメラデータを使用します。



Box SOPノードを作成し、新しく作成したPhongシェーダーでテクスチャリングする



デモンストレーション1、パート 3。IntelRealSenseカメラのデータを使用して作成したPhong MATシェーダーをキューブのGeometry SOPノードに割り当てる方法を学習します。

1.ノードgeo1をその子レベル（ / project1 / geo1 ）に移動します。

2. Box SOPノード、Texture SOPノード、Material SOPノードを作成します。

3.そこにあったトーラスSOPノードを削除し、box1ノードをtexture1およびmaterial1ノードに接続します。

4. material1ノードのMaterialパラメーターに、.. / phong1と入力します。 これは、親レベルで作成されたphong1 MATノードです。

5.キューブの各面にテクスチャを配置するには、texture1ノードのTexture / Texture Typeパラメータで、面を配置し、Texture / Offset putパラメータを.5 .5 .5に設定します。





geo1 COMPノードの子レベルで、Box SOP、Texture SOP、およびMaterial SOPノードが接続されます。 Material SOPノードは、親レベルのphong1 MATノードからテクスチャを取得するようになりました（... / phong1）。



Boxノードジオメトリのアニメーション化とインスタンス化



デモ1、パート 4。TransformSOPノードと単純な式を使用して、Geometry SOPノードを回転させる方法を学習します。 次に、Boxノードのジオメトリをインスタンス化する方法を学習します。 その結果、Intel RealSense TOPカメラノードからのテクスチャをそれぞれ持つ多数の回転キューブを備えた画面が得られます。

1. X軸を中心とするキューブの回転をアニメートするには、Texture SOPノードの後に​​Transform SOPノードを挿入します。

2.式を、transform1 SOPノードのRotateパラメーターのXコンポーネント（最初のフィールド）に配置します。 この式はフレームとは無関係であり、機能し続け、タイムライン上のフレームの終わりで繰り返されません。 値を10倍して速度を上げました： absTime.seconds * 10





ここで、キューブが回転することがわかります。



3.キューブを作成するには、親レベル（/ project1）に移動し、geo1 COMPノードの[インスタンスパラメーター]ページで、[インスタンス化]パラメーターを[オン]に設定します。

4. Grid SOPノードとSOP – DATノードを追加します。

5.グリッドパラメータを設定します：10行10列、サイズ-20および20。

6. SOPのSOP – DATノード設定で、grid1を指定し、 抽出パラメーターがポイントに設定されていることを確認します。

7. geo1 COMPノードの[インスタンスパラメーター]ページで、インスタンスCHOP / DATパラメーターを入力します：sopto1。

8.それぞれP（0）、P（1）、およびP（2）を使用してTX、TY、およびTZパラメーターを完了し、sopto1ノードのどの列をインスタンス位置に使用するかを示します。







9. Intel RealSenseカメラからの画像をフィルタリングなしで送信する場合は、レベルTOPおよびHSVからRGB TOPノードを無効にするか、これらのノードをバイパスします。







リアルタイムのレンダリングとアニメーション



デモンストレーション1、パート5。レンダリング用のシーンを設定し、直接表示モードまたはビデオファイルとして画像を表示する方法を学習します。

1.プロジェクトをレンダリングするには、Camera COMP、Light COMP、およびRender TOPのノードを追加します。 デフォルトでは、カメラはシーン内のすべてのジオメトリコンポーネントをレンダリングします。

2.カメラをZ軸に沿って約20ユニット後方に移動します。

3.レンダリング解像度を1920 x 1080に設定します。デフォルトでは、レンダリングの背景は透明です（アルファ値は0）。

4.背景を不透明な黒にするには、Constant TOPノードを追加し、 Alphaパラメーターを1に設定してColorパラメーターを0,0,0に変更し、色を黒に設定します。他の色を選択できます。

5. Over TOPノードを追加し、Render TOPノードを最初の接続に接続し、Constant TOPノードを2番目の接続に接続します。 この場合、背景ピクセルは値（0、0、0、1）を受け取ります。つまり、透明ではなくなります。

TOP透明度の値を1に変更する別の方法は、TOPノードの並べ替えを使用して、 出力アルファパラメータを入力1および1に設定することです。





不透明な黒い背景でシーンを表示します。





テクスチャ付き回転キューブを含むフルスクリーンがここに表示されます。



デモ中にリアルタイムでアニメーションを再生するのではなく、ファイルにアニメーションを出力する場合は、TouchDesignerプログラムのトップパネルのファイルセクションで[ ムービーのエクスポート ]ダイアログボックスを選択する必要があります。 TOP Videoノードパラメータで、この特定の例に対してnull2を入力します。 それ以外の場合は、レンダリングが必要なTOPノードを入力します。





これは、null2ノードを含む[ムービーのエクスポート]ペインです。 CHOPオーディオノードもある場合、null2のすぐ下にCHOPオーディオを配置します。



デモンストレーション1、パート 6。TouchDesigner*プラットフォームの便利な機能の1つは、リアルタイムでアニメーションを作成できることです。 この機能は、Intel RealSenseカメラを使用する場合に特に便利です。

1. Window COMPノードを追加し、operatorパラメーターにnull2 TOPノードを入力します。

2.解像度を1920 x 1080に設定します。

3. [場所]パラメーターで目的のモニターを選択します。 Window COMPノードを使用すると、選択したモニターにすべてのアニメーションをリアルタイムで表示できます。 Window COMPノードを使用して、画像を表示するモニターまたはプロジェクターを指定できます。





任意の数のWindow COMPノードを作成して、他のモニターに画像を表示できます。







デモ2. Intel RealSense TOPカメラノード深度データの使用



Intel RealSense TOPカメラノードには、テクスチャとアニメーションを作成するための他の多くの設定が含まれています。

デモ2では、深度データを使用して、カメラから受信した深度データに基づいて画像にぼかしを適用します。 アーカイブでは、ファイルRealSenseDepthBlur.toeを使用します。



最初にIntel RealSense TOPカメラノードを作成し、 ImageパラメーターをDepthに設定します。 深度画像には、カメラに近い場合は値が0（黒）で、カメラから遠い場合は値が1（白）のピクセルが含まれます。 ピクセル値の範囲は、 最大深度パラメーターによって決定され、その値はメートルで示されます。 デフォルトでは、このパラメーターの値は5です。これは、カメラから5メートル（またはそれ以上）の距離にあるピクセルが白になることを意味します。 値が0.5のピクセルは、カメラから2.5 mの距離にあります。 カメラとあなたの間の実際の距離に応じて、この値をより小さな値に変更することは理にかなっています。 この例では、このパラメーターの値を1.5 mに変更しました。



次に、深度を処理して、対象範囲外のオブジェクトを削除する必要があります。 このために、Threshold TOPノードを使用します。

1. Threshold TOPノードを作成し、realsense1ノードに接続します。 カメラから特定の距離を超えるすべてのピクセルを削除する必要があるため、 ComparatorパラメーターをGreaterに、 Thresholdパラメーターを0.8に設定します。 この場合、値が0.8（Intel RealSense TOPカメラノードのMax Depthパラメーターが1.5に設定されている場合は1.2 m以上の距離に対応）より大きいピクセルは0になり、他のすべてのピクセル-1になります。







2. Multiply TOPノードを作成し、realsense1ノードを最初の入力に接続し、thresh1ノードを2番目の入力に接続します。 ピクセルを1倍すると、それらは変更されずに残り、他のピクセルを0倍すると、ゼロにリセットされます。 これで、multiply1ノードには、画像のぼかしたい部分の0より大きいピクセルのみが含まれます。

3. TOPにMovie Fileノードを作成し、 Fileパラメーターの新しい画像を選択します。 この例では、TouchDesigner * Samples / MapフォルダーからMetter2.jpgを選択します。

4. Luma Blur TOPノードを作成し、moviefilein1をlumablur1の最初の入力に接続し、multiply1をlumablur1の2番目の入力に接続します。

5. lumablur1パラメーターで、White Valueパラメーターを0.4、Black Filter Widthパラメーターを20、White Filter Widthパラメーターを1に設定します。このため、最初の入力値が0のピクセルは20のぼかしフィルター幅を持ち、値0.4以上-ぼかし幅1。





すべてのすべて。



その結果、ユーザーが位置するピクセルがぼやけていない画像が得られ、他のすべてのピクセルはぼやけています。





Luma Blur TOPディスプレイに表示される背景は、画像がどの程度ぼやけているかを示しています。



デモ3：Remap TOPノードでのIntel RealSense TOPカメラノード深度データの使用



アーカイブでは、 RealSenseRemap.toeファイルを使用します。

ご注意 Intel RealSense TOPカメラノードの深度と色のカメラは物理的に異なる場所に配置されているため、デフォルトでは、それらが生成する画像は互いに一致しません。 たとえば、手がカラー画像の真ん中にある場合、深度画像の真ん中にはなく、左または右にわずかにシフトします。 UVカードをオフセットすると、ピクセルを整列させて正確に重ね合わせることにより、この問題を解消できます。 位置合わせされたTOPノードと位置合わせされていないTOPノードの違いに注意してください。





Remap TOPは、Intel RealSense TOPカメラノードから受信した深度データと同じノードから受信したカラーデータを、UVデータを使用して、同じ空間の深度とカラーを組み合わせて使用​​します。



デモ4. Intel RealSense TOPカメラノードでポイントクラウドを使用する



アーカイブでは、 PointCloudLimitEx.toeファイルを使用します。

この演習では、点群、Intel RealSense TOPカメラノード、Limit SOPノードを使用して、アニメーション化されたジオメトリを作成する方法を学習します。 このアプローチは、この記事の冒頭のポイントクラウドファイルの例とは異なることに注意してください。 前の例ではGLSLシェーダーを使用しているため、より多くのポイントを作成できますが、このタスクは複雑であり、記事の範囲を超えています。

1. RealSense TOPノードを作成し、 ImageパラメーターをPoint Cloudに設定します。

2. TOP – CHOPノードを作成し、Select CHOPノードに接続します。

3. Select CHOPノードをMath CHOPノードに接続します。

4. CHOP topto1ノードのTOPパラメーターに、realsense1と入力します。

5. [CHOPの選択]ノードの[ チャンネル名]パラメーターに、文字をスペースで区切ってrgbと入力します。

6.乗算パラメーター値フィールドのCHOPノードmath1で、4.2を入力します。

7. [ 範囲パラメーター]ページの[範囲パラメーター値]フィールドに、1と7を入力します。

8. Limit SOPノードを作成します。

www.derivative.caの Wikiページを引用するには：「Limit SOPは、 CHOPノードによって送信されたデータからジオメトリを作成します。 各サンプルポイントにジオメトリを作成します。 [チャンネル]ページの[出力タイプ]パラメーターを使用して、さまざまなタイプのジオメトリを作成できます。

1. limit1 CHOP Channelsパラメーターがあるページで、X Channelパラメーターにr、Y Channelパラメーターに「g」、Z Channelパラメーターに「b」を入力します。



ご注意 r、g、およびbの値を他のチャネルX、Y、およびZに移動すると、形成されるジオメトリが変更されます。 そのため、後で次のことを試すことができます。[ 出力パラメーター]ページの[出力タイプ]パラメーターで、ドロップダウンリストから[各点で球]を選択します。 SOP – DATノードを作成します。 SOPのパラメーターページで、limit1と入力するか、ノードlimit1 CHOPをこのパラメーターにドラッグします。 抽出パラメータのポイントのデフォルト値のままにします。 Render TOP、Camera COMP、およびLight COMPノードを作成します。 [TOPの並べ替え]ノードを作成し、[出力アルファ]を[入力1と1]に設定して、[TOPのレンダリング]ノードに接続します。





Intel RealSenseカメラの画像を変更すると、ジオメトリも変更されます。 これが最終プロジェクトです。





Over TOP CHOPノードの最終画像。 Limit TOPパラメーターでチャンネルの順序を変更することにより、点群に基づいてジオメトリを変更します。



この記事の第2部では、Intel RealSense CHOPカメラノードについて説明し、リアルタイムで記録およびデモンストレーションするためのコンテンツを作成し、半球パノラマと仮想現実システムをデモンストレーションします。 さらに、Oculus Rift CHOPノードの使用について説明します。 手の追跡、顔、マーカーの追跡について説明します。


More articles:


All Articles