DIYピクセルラボ

ここでは、私たちのLEDマトリックスで使用するメディアがすでにあると仮定します。

Resolumeのセットアップを開始し、ピクセルマップのため、アドバンスアウトプットでカスタム設定を作成しましょう。まず最初に、LEDマトリックススクリーンのためのカスタムフィクスチャーを作成します。Resolumeでは、フィクスチャーエディターを使用して様々なバリエーションのレイアウトを作成できます。 

フィクスチャーエディター

Resolumeで "Application”をクリックし、"Fixture Editor”を選択します:
フィクスチャーエディターは3つの窓に分かれています;

Fixtures(フィクスチャー)

あなたの全フィクスチャーのリストで、追加や削除、名称変更等々をおこないます。

Fixture Parameters(フィクスチャーパラメーター)

この窓では、編集中のフィクスチャーのパラメーターを設定します。どのようなチャンネルを設定するか、フィクスチャーの幅や高さ、方向、カラースペース等々です。

Pixels(ピクセル)

私たちが作成するフィクスチャーを、数値で表したものです。

私たちの14 x 14 ピクセルマトリックスにはトータルで 196ピクセルあります。1つのDMXユニバースに含まれるチャンネル数を思い出していただけば、マトリックスを1つのDMXユニバースに収めることはできないとわかるでしょう。なぜなら512バイトにつきRGBデータを170ピクセルしか収めることができないからです!  

ですから、パネルを2つの部分に分割する、2つのフィクスチャーを作る必要があります。シンプルにするため、マトリックスの左側と右側の、2つのフィクスチャーを作成します。これらのフィクスチャーを、2つのユニバースで使用します。ドライバー機器は、両ユニバースからのDMXデータのコンパイルと、LEDに適したレンダリングを実行します。心配は無用です。これについては後ほど解説します。
上の図は、私たちの14x14 マトリックスの、全ピクセルのレイアウトです。 

私たちは、"14x14_LEFT" と "14x14 _Right"と名付けた、2つのフィクスチャーを作成しましょう。2つの違いは、"distribution" 属性のみであることをご注意ください。

カスタムフィクスチャー

フィクスチャーパネルの "+" ボタンをクリックし、新規フィクスチャーを作成しましょう。左の窓でスクロールダウンし、新規フィクスチャーをダブルクリックして名称を変更します。 "14x14_LEFT"と名付けます。

このフィクスチャーの、"Fixture Parameters" へ行きます。

Width & Height(幅と高さ)

フィクスチャーの幅と高さを設定します。ここでは幅7ピクセル、高さ14ピクセルとします。 

Color Space(カラースペース)

カラースペース属性は、各ピクセルのカラーデータのオーガナイズ方法および、カラーの出現順をResolumeに伝達します。私たちのピクセルにはRGB LEDが内蔵されています「が」、この「が」が重要ですが、実際にLEDが受信し変換する順番は、ピクセルモデルによって変わります。 

ここはシンプルにするためRGBを使用し、ドライバー機器の実際のデータレイアウトを後ほどフィルタリングします。RBGW (ホワイト) または単なるホワイトのピクセルも駆動できますので、ご留意ください。異なる様々な構成から選択できます。 

Gamma(ガンマ)

2.5のままにしておきましょう。

Distribution(ディストリビューション)

おそらく最も重要な特性で、Resolumeに各ピクセルの物理的な配置を伝達します。私たちのパネルは方向づけがされているので、1番目のピクセルは左下隅へ、そしてデータがフローアップし、右へ回って次の列へ、下がり、右へ、上へ、、、と、私たちが選択したアイコンに表示されたとおりに動きます。

では2つ目のフィクスチャーを作成しましょう。現在のフィクスチャー"14x14_LEFT"を右クリックし"DUPLICATE(複製)"を選択します。そして"14x14_RIGHT"へ名称変更します。。

このフィクスチャーのパラメーターは同じです「が」、"Distribution(ディストリビューション)"を、パネルのこの部分のトップからスタートするよう、変更する必要があります!

これでカスタムフィクスチャーがセットアップできました。"Close"をクリックすると保存します! 

ピクセルマップ

次の手順は、これらをResolumeのアドバンスアウトプットのシステムに挿入し、バーチャルマッピングを調節して実際のメディアを配置することです。

Resolumeのメインウィンドウに戻り、'Output Menu' をクリックして'Advanced' を選択します。

左上の'PRESETS' メニューをクリックし、'NEW' をクリックして空白のレイアウトを作ります。スクリーンショット内の色のグラデーションは、私が選択したメディアです。これは'Gradient' というシンプルなシェーダーで、Resolumeに含まれています。

次に、新規 'DMX Lumiverse' を追加します。Resolume は Lumiverse を、固有のDMX Universe ID と Subnet ID を持つ、1つのDMX Universeとして扱います。 各Lumiverse は通常のDMX Universeと同様、最大512チャンネルとなります。 左上の大きな "+" アイコンをクリックし、"DMX Lumiverse"を選択します。

次に、レイアウトから"Screen 1" セクションを削除します。DMXアウトプットのみのシステムをセットアップするので、このデモの他のアウトプットなどは不要です。 "Screen 1" をクリックし、そして"X" をクリックして、レイアウトから削除します。すると"Lumiverse 1"のみが残ります。

Lumiverseを右クリックし、"Duplicate"を選択して複製します 。各Lumiverseで正しいフィクスチャーを選択していることを確認します。デフォルトでは、新規Lumiverseを作成すると、最後に作業していたフィクスチャーを追加します。 そのためもし正しいフィクスチャーでなければ 、左パネルでクリックし、右下のドロップダウンから正しいものを選択します。

アドバンスアウトプットレイアウトには、2つのLumiverseがあります。 Lumiverse 1 には "14x14_LEFT" が、Lumiverse 2 には "14x14_RIGHT"があります。

中央のパネルで、いずれかのフィクスチャーをクリックし、動かして、スクリーンにお好きなように配置してください。上のキャプチャ画像では2つのフィクスチャーを分かれて配置しているので、私がしていることがご確認いただけるでしょう。2つのことをする必要があります。上の2つを一緒にし、スケールに合わせてリサイズします。

スケールについて説明しましょう。上で確認できるように、フィクスチャーは等しい正方形として挿入されます。しかし、これらのフィクスチャーは幅7px 高さ14pxの長方形です。左のフィクスチャーをクリックし、右パネルの"Width and Height"属性を使って調節します。

わかりやすさおよび見やすさのため、1 LEDピクセルは、お使いのコンピューター画面上では50PXと等しいと想定します。すると、左のフィクスチャーは 幅 7x50=350px および 高さ 14x50=700pxとなります。
右のフィクスチャーも同様に属性を設定して、くっつけます。

私たちのパネルのための、バーチャルピクセルマップが作成できました。レイアウトを保存します。左上の "PRESETS"ドロップダウンをクリックし、"SAVE AS"を選択します。"14 x 14 Panel"と名付けます。

ユニバース IDSに戻り、各フィクスチャーをそれぞれ適したユニバースに割り当てる必要があります。するとドライバー機器はどのユニバースが、パネルのどの部分にレンダリングされるかを解析します。  

"Lumiverse 1"をクリックすると、左手側に"Subnet and Universe"が確認できます。これは 0:0のままにしておきます。  "Lumiverse 2"をクリックし、Subnet 0:  Universe 1 に設定します。

Resolume からは、2ブロックのデータが送信され、毎回、アウトプットからシングルフレームがレンダリングされます。ブロック 1には Lumiverse 1の全データが、ブロック 2にはLumiverse 2の全データが含まれています。お使いのドライバー機器はこの2つのブロックを受け取り、どのデータブロックを、マトリックスのどちら側にコピーするかを識別します。

DIYピクセルドライバー

この項では、WiFi経由でArt-Netデータを受信し、私たちの14x14 LED Matrixへと押し出す機器を構築します。 

私は、これに必要な要素を全て備えたシンプルなコードを用意しました。もしあなたがゼロからこの作業をするつもりなら、モジュラーとして設計され、非常に大規模なインスタレーションへ拡張可能な、これらのコードのほとんどを理解することが必要不可欠です。

下記のハードウェアおよびソフトウェアで作業をおこないます。参考に、私が実際使用している機器のリンクをこちらに掲載します。このガイドはWindows PC向けに書かれています。ここでは、PCが有線あるいは無線のネットワークに接続されており、ESP32(ネットワークレイアウトについては後述の内容をお読みください)を接続するためのWIFIネットワークがあることを前提にしています。Wifi SSDおよびキーが必要になります。お使いのPCは、WIFIネットワークに自由に伝達可能な状態である必要があります。

ハードウェア

ソフトウェア

Arduino IDEのインストールおよび ESP32 APIのセットアップ

arduino.cc よりArduino IDEをダウンロードし、インストールして、下の内容を、記載されている順番通りに実行してください:

  1.  ESP32 Arduino API ESP32 Arduino API を入手するため、Espressif GitHubへ行きます。
  2. 右上の"Clone or Download"をクリックし、"Download ZIP"を選択してお使いのコンピューターのデスクトップに保存します。
  3. お使いのローカルコンピューターの"Documents(書類)"フォルダで、 Arduinoフォルダを探します。 "C:\Users\USERNAME\Documents\Arduino"
  4. もし"Hardware"という名のフォルダがそこに無い場合は、作成します。
  5.  "Hardware"内に、"espressif"と名付けたフォルダを作成します。
  6. このフォルダ内で、手順2のZIPファイルを展開し、取り出したフォルダの名称を "esp32"に変更します。
  7.  "esp32\tools" フォルダへ入り、 "get.exe" という実行ファイルをダブルクリックして、コマンドプロンプトが消えるのを待ちます。これにより、Espressifサーバーから最新のAPIをダウンロードします。お使いのインターネット接続により変わりますが、大体5-10分かかります。コマンドプロンプトが消えたら、次の手順へ進みます。
  8. Arduino IDEを開きます。"Tools"メニューをクリックし、 ”Board”を選択して下へスクロールします。 上の手順で正しくインストールができていれば、下図のようなESP32ボードが確認できるはずです。

次に私の GitHub, からプロジェクトソースコードをダウンロードし、フォルダをデスクトップに保存して、プロジェクトファイル "ESP32ArtNetDriver.ino"を開きます。"Tools"メニューをクリックして、"Boards”を選択します。そして "Node32S" ボードを探して選択します。

ESP32をUSBでお使いのPCに接続し、ドライバーがインストールされるのを待ちます。そして Arduino IDEで、Toolsの”PORT”より、EPS32を接続しているポートを選択します。 これでコードをマイクロコントローラーへコンパイルおよびアップロードするための準備が整いましたが、いくつか変更を加える必要がありますので、引き続きお読みください。

22行目および23行目:

//Networking 

const char * ssid = "ArtNet"; 

const char * password = "megapixels";

SSIDおよびパスワードを、お使いのネットワーク名 (SSID) とそのWIFIパスワードに変更します。それが済んだら"UPLOAD"ボタンを押し、数秒間コードがコンパイルされた後、ESP32へアップロードされるのを待ちます。これでDevBoardの準備は万端です!ハードウェアをすべて接続しましょう! 

このラボのネットワーキングについてのノート

このハードウェアセットアップで最高の性能を引き出すため、Resolumeを起動しているコンピューターをネットワークへ接続する際には、有線ネットワークポートを使用するのがベストです。もちろん、ResolumeのWIFI 経由でArt-Net をストリームすることは可能ですが、UDPプロトコルによるラグや、多くのパケットロスに気づくことでしょう。下図は、このラボにおける推奨ネットワークセットアップです:

私はTP-LINK製の比較的安価なコンシューマーグレードのWIFIルーターを使用します。ですが、DHCPイネイブルドであれば、お好きなルーターをご使用いただけます。

ハードウェア接続例

すべてのハードウェアを、上の図のようにセットアップします。

私たちはSN74HCT245をレベルシフトに使用しています。SK9822ピクセルの "DATA" および "CLOCK"のラインは 0v = 0 および 5v = 1の、論理レベル 5Vを想定します。ESP32は論理レベルが 3.3V、 0v = 0 および 3.3v = 1です!

接続が完了したら、パワーサプライをオンにして、さあ、、、あれ、何も表示されない!  

Resolumeでアウトプットを有効にする

この段階では、Resolumeを開いてもパネルには何も表示されません。Resolumeからまだデータを何もアウトプットしていないからです!

Resolumeを開き、"Advanced Output"へ行きます。このデモでは、ESP32へのデータ送信に"Broadcast"メソッドを使用します。UDPパケットのブロードキャストには多くの障壁があり、特にWiFiは難しく、将来何かをおこなう際には、小規模なコントロールラボセットアップを除いて、この方法はご使用にならないことをお勧めします。

"Lumiverse 1"をクリックし、右側の"TargetIP"属性で"Broadcast"を選択し、"Lumiverse 2"でも同様におこなうと、お使いのマトリックスディスプレイにアウトプットが表示されるはずです!

関連記事