M5StickCPlus + ENVⅢ Hat による時刻・室温・湿度サンプル

IKEAで買った温度・湿度付きの時計がすぐにズレるのが気になったので、手持ちのM5StickCPlus + ENVⅢ Hatで簡単につくってみました。ENV Hatを本体に直付けすると熱がこもるか本体の温度に引っ張られるような感じで+2~3℃上がってしまう問題があったので適当に引き伸ばしています。

世のサンプルコードでSHT3Dのインスタンスに対してinitを呼んでないことが多かったのですが、それだと起動時点で動作が止まってしまうので sht30.init()呼んでいます。

サンプル

#include <M5StickCPlus.h>
#include <WiFi.h>
#include <NTPClient.h>
#include <WiFiUdp.h>
#include <Wire.h>
#include "M5_ENV.h"
#include "Adafruit_Sensor.h"
#include <Adafruit_BMP280.h>

WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", 3600 * 9);  // UTC+9 日本時間
String previousTime = "";                                // 前回の時刻を保存するための変数

SHT3X sht30;

const char *ssid = "********";  // あなたのWiFiのSSID
const char *password = "********";       // あなたのWiFiのパスワード

uint16_t rgbToColor(uint8_t r, uint8_t g, uint8_t b) {
  return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}

void setup() {

  setCpuFrequencyMhz(80);

  pinMode(33, INPUT_PULLUP); // GPIO33をプルアップ入力に設定

  M5.begin();
  M5.Lcd.setRotation(1);
  M5.Lcd.fillScreen(BLACK);
  uint16_t color = rgbToColor(100, 100, 100);  // 赤色を指定
  M5.Lcd.setTextColor(color);
  M5.Lcd.setTextSize(5);  // フォントサイズを大きく設定
//  M5.Axp.ScreenBreath(10); // 液晶の明るさ設定

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    M5.Lcd.print('.');
    delay(500);
  }

  timeClient.begin();

  Wire.end();
  Wire.begin(0, 26);
  sht30.init(); //この関数を呼ぶサンプルがなくてエラー履いていたのが、追加で動作した・・・
}

void loop() {

  timeClient.update();
  String currentTime = timeClient.getFormattedTime();

  if (currentTime != previousTime) {

    // 温度と湿度の読み取り
    sht30.get();
    float temperature = sht30.cTemp;  //Store the temperature obtained from shT30.
    float humidity = sht30.humidity;  //Store the humidity obtained from the SHT30.

    // センサーの値を画面に表示
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.setCursor(0, 10);
    M5.Lcd.println(currentTime);
    M5.Lcd.setCursor(40, 50);
    M5.Lcd.printf("%.1fC", temperature);
    M5.Lcd.setCursor(80, 90);
    M5.Lcd.printf("%.1f%%", humidity);

    previousTime = currentTime;
  }

  delay(250);
}

オーソドックスなカレーのレシピ

カレーについて特にコダワリがある訳では無いのですが、一回つくれば3日〜持つというコスパから今まで一番多く作ってきました。自分の中で確立したレシピといっても特別なスパイスを使ったりしない市販のルーを使った簡単なものですが残しておきます。

※写真は次回作った時に追加しておきます。

ポイント

  • 創味シャンタンで味に深み
  • 圧力鍋で肉を柔らかくする
  • 玉ねぎ・ジャガイモは圧力鍋で圧力をかけない(かけると消える)
  • 飴色の玉ねぎは、焦げる前にフライパンに水を投入し続ければ簡単

材料

  • 市販の中辛カレールー(2〜3箱)
  • 玉ねぎ(2〜3個)
  • ニンジン(2〜3本)
  • 煮込み用のブロック肉(200〜300g)
  • ジャガイモ(2〜3個)
  • 創味シャンタン(ひと匙)
  • サラダ油
  • 赤唐辛子など調整用スパイス

つくり方

1-1.圧力鍋で仕込み

  • 肉の表面を焼きます。塩をかける事で水分を飛ばすことで表面を焦げやすくする事ができます。
  • ニンジンを適当に大きめ一口サイズに切ります。めんどくさかったら皮は剥かなくても良いです。
  • 圧力鍋に肉・ニンジン・水200~300cc をつっこんで圧力を30分くらいかけます。ここにトマトを突っ込んでも面白いです。

※圧力鍋が無い場合は、肉は薄めのものを使ったり、煮込みの時間の延ばしても調理できます。

1-2.玉ねぎを炒める

  • 玉ねぎを剥いて、適当にくし切りします。
  • 鉄フライパンに油を敷いて、玉ねぎを弱火〜中火で炒めます。
  • 焦げつきそうになったら水を適当に100ccくらい突っ込んで鍋ごと冷まします。
  • 再度、焦げつきそうになったら水を投入し炒めます。
  • 繰り返してるといずれ飴色の玉ねぎになります。とにかく焦げ付かないように水を投入しましょう。

1-3.ジャガイモ

  • 圧力をかけて・玉ねぎを炒めてる間にジャガイモを処理します。
  • ジャガイモは皮を剥いて、メラニンを取って、1口サイズに切ります。
  • 電子レンジに入るサイズの皿にジャガイモを載せて、50ccくらい水をぶっかけます。
  • 電子レンジ(800w)で15分~ チンします。(なぜ圧力をかけないのか ⇨ 粉砕して存在が消えるのが嫌)

2.ルーを入れる

  • 圧力かけ終わった鍋を開けて、玉ねぎを入れます。
  • 具が浸るくらい水を入れます。
  • 創味シャンタン or 塩を大さじ1入れます。(入れすぎるとしょっぱくなるので注意)
  • 火をかけて沸騰する前にルーを少なめに入れます。
  • 味見しつつルーを足していきます。
  • 味に満足したらチンしたジャガイモを入れます。
  • 煮込みすぎるとルーの香りが飛ぶので火が通ったら止める。

3.完成

  • 辛味を調整したければ、赤唐辛子などを別で入れるのがおすすめです。家族で辛味の好き嫌いがある場合は特に。
  • 鍋ごと冷蔵庫に入れておいて次の日に食べるのが一番美味しいです。
  • 飽きてきたらカレーうどんやカレー蕎麦などに展開もいいですね。

慣れれば40分以内につくり終えます。40分の労働で8食〜作れればかなり野菜も取れるコスパも良い食事です。カレーさえ作れれば豚汁や鍋など他の煮込み系のレシピも理解できて衣食住の一つはクリアーできると思うので試してみてください。

22エクスプライド 163L-BFS の紹介

この竿はいいなと思ったので紹介しようと思います。

163L-BFSを買った経緯

一番よく行く近所のドブ川にフィットした竿を検討しました。要件としては

  • 川幅30m程度
  • 護岸整備されており、どこも同じような感じでポイントが絞れない
  • 釣れない割に釣り人が多く超ハイプレッシャー
  • バスのサイズは大きくても40cmくらい
  • 護岸の背にコンクリートの壁があり、大きく振りかぶれない
  • シマノの竿の中ではオーソドックスなデザインが好みなのでEXPRIDE
  • 手返しよく・遠くに投げたいBFS系ベイトリール(PE0.8号+10lbくらい)

といった感じで選定し

  • 釣り方 ⇨ 巻物
  • 曲がり方 ⇨ FF ~ FR ( 大きく振りかぶれない場所で投げるので曲がりすぎないのが重要)
  • 硬さ ⇨ ハイプレッシャー対応で小さめのハードルアーを巻く L ~ ML
  • ルアーの重さ ⇨ 3.5g ~ くらい下限をしっかり投げたい

163L-BFSにしました。

説明を読むともうちょいワーム寄り・もしくは宣伝を担当している黒田さんや佐々さんのようなボート釣りで使うような印象ですが多分使えるだろ〜と購入しました。

手返しの良さを突き詰めたハイレスポンスベイトフィネスロッド。リストパワーのみでキャスト、アクション、フッキングの完遂を要求する至近距離のピッチングに於いてストレスになる重量感を可能な限り低減。ティップセクションはルアーウェイトを乗せるためのクッション性だけを維持し、ベリー以下はブレ知らずのシャープなマテリアルを搭載。ソリッドティップでは実現し得ないブレにくい高精度なキャスティングと、キレの良いライトリグのリアクション性能を併せ持ちました。

https://fish.shimano.com/ja-JP/product/rod/bass/shimano/a075f00003vrczgqai_p.html

使ってみて

早速入魂できました。ほぼほぼ狙ってた仕様通りの使い勝手で大満足〜

  • 3.5g(1/8オンス)程度のルアーでも20m~くらい飛ばせました。
  • BFSロッドってライトリグ・ワーム寄りなのかなと思いますが、巻物に使ってみても芯がある中に柔らかさもあり全然使える印象です。
  • 最近のロッドはめちゃくちゃ軽い

個人的には買って良かったかなと思います。ロッドを購入する際にかなり明確な使用意図を検討した上で買うとハズれにくいのかなと思いきや・・・

165ML-Gも買ったけど

巻物といえばグラスだろ〜みたいに思って165ML-Gも買ったんですが、重量やリールのセッティングなどがまだしっくり行ってなくて使いこなせて無いので気が向いたらご紹介しようと思います。

jit.gl.model から読み込んだテクスチャのを取得し jit.gl.mesh / jit.gl.pbr で描画、そして決別・・・ #jitter #maxmsp

昨日の記事の続きです。まだ未読の方は是非ご覧ください。

jit.gl.modelにロードしたテクスチャマッピング済みのモデルからGPU上のUVマップ後のテクスチャを取得したいが方法が見つけられなくjit.gl.shaderから取得はできそうという内容でした。

その後、一晩寝てみたら落ち着いて、OpenGL対応の環境でテクスチャが取得できないなんてころあるんかと思い直し(諦めが悪い)

もう一度 jit.gl.modelのReferenceを見直すと gettexnames というメッセージを発見しました。

取得してみると

と .jpgの名前が取得できます。これは単にUVマップ前のテクスチャなのかなと思っ他のですが、先頭に “u514*****_” とついている事に気がつきました。おっこれはjit.gl.texture上に読み込まれた画像などにつく名前じゃないか?と

そこで jit_gl_texture + 先ほど取得したファイル名を組み合わせてjit.gl.pwindowに送ったところ見事にjit.gl.model内のテクスチャが取得できました。

しかしですね、複数グループにまたがるようなモデルをロードすると・・・描画されない

jit.gl.meshにはマテリアルが1つしかアタッチできないので描画が破綻してしまします。(昨日のパターン3の問題は解決できない)

ん・・・やはり厳しそうです。このリポジトリにあるglTFを色々と読み込んでみたのですが、3Dモデルって規格化されていないからテクスチャの順番だったり数だったりが全然揃ってないんですね。実は業務でUnityを使ったことが何度かあるのですが、やはり世界中で使われて鍛え上げられてるだけあって3D読み込みでこんな問題が起こったことは無く、もうこれはMaxでやろうとするのは厳しいと感じました・・・。

jit.gl(OpenGL)個人的総括

薄々は感じていましたが、UnityやUEのようにモデル読み込みを利用して3DCGのステージやオブジェクト・キャラクターなどをロードしてMV・VJ・アプリ等いじるには Jitterというかjit.glはあまりにも貧弱です。これでは3Dで何か制作する前に調整や調査で人生が終わってしまうような気がしました。

一ヶ月捧げてきたのも、とある敬愛する音楽アーティストさんのためにご協力したい思いから進めてきたのですが、時間がかかりすぎる・・・・もちろんプリミティブな3D描画・GPUの仕組みは以前より理解が進んだので集中講義だったと思えば無駄では無かったと思います。

ディスプレイに表示するまでとにかく行列演算

それでもMax自体はUDP送信や簡易MIDI/UIコントローラー、音楽関係、rnbo~やJitterで唯一イケてる jit.gl.pix(GLSLを出力できる)Node.js連携と良い部分も多いので使い続けると思います。今回はあくまで3Dでゴリゴリやるのは厳しいなと感じました。

jit.gl.mesh触り始めた時は何も分かってませんでした・・・
https://twitter.com/mirrorboy/status/1663814002814877702?s=20
jit.gl を調査して3週間の成果・・・ぶっちゃけUnityならジオメトリシェーダーの書き方を調べてDay1で出来そうではある

後学のために今回つくったコードは残しておきます。Jitterで3Dをやりたい物好きの方がいたら応援したいと思います。

code

----------begin_max5_patcher----------
2084.3ocyassajZCF95jmBKTuqoSwGA5Uock5KPq5MUUi7v3LC6x.HNjjsq1
285CLGxFXvvXXajxvBiI+966+n+s2ub+cdaxeUT4A9EveCt6tub+c2oej5A2
0d+cdG3uFmxqzCyKS7R9lO58f4qpEuVqebQYRV8wml0bHIKUTqeCX6CK30w6
Sx1stTDWajHKJXk+C.D0WcAiz2H+D7Om+Ck2Te7uje6SS1pEobZ7SPjm5Ye8
96Ue7fkXHN+vAw4o6IP7wj5U6RWcHeqHE7yfi2Jp1e9thMkWElOkmUmwOHz+
A+0MxuNOC7G7rJvukmt0qex.yzjPn5SlulKT7x.bgRbOwiEWNEtfeB8tXbUI
+qdbJIMAVSQ.EujWdFEcR.UeNKd.8NgpAIVegPL.GSVQ6ArnifnPeKVYtXdh
HiKo3KEm40p+bgvHK0zd8AdcYxqdO.77NIhKXI1TLh5wQnFrArYrNBDHTwAP
J0JGATeXcCOamBk5qcgTJYJPkWWW1jbUPoFhdrRpVTlvSWq7h7FxF.RYqnpK
9C.4dUucBSbzYIWJcFkSo0mMU7cm1NMmu0P5iSgSIDEtCH3UDLzmPQHe4yvH
oSe3Tohd053PGZf2jUvi+DvGTMZq7HsUNloU8A9S0JWmooOMOw09xfzwhSrO
1Xaq8iICgSrUdy8BXrCAbobNH.aaNTzIlQCqaMwzYQSU21ONmTldYt6J9Nw6
.5TfXqZEYbPwQtMhEzgpQUl5V2TB3wOJwJ.CPxek2k+zSUhZo6KFPAgi1E1j
fxWeAYT1WgCn1kT1965j6fP3bmUaG+vA9537REUjjm4csP6TUncFsMAmayrE
wbclswPC6EI61WutJlmJrfBfj4H4dD00Tfox1jrs4ubqk1xLg9HPcQsgsE5t
JfN1.gVX2ilTcqaZpqOa.O1BVB03BQN9oypQgD9+YsZnDpDpe6OnPenT4Fpy
uG5aVw13y0YgJlD4xrdbYrqmk0mO1LeAP5afOMfzSsqXm5oSc4ByJJEEhrsf
RAe6ns9CvWX825C3JTxftrGFhrmSJyyt76rtcLvPMJMo0M10H+wzNFFcJPYa
YdwSIohoNeQZkiY9RHNrlSFatqqnMB2UvX.88QdNZG5fRPU1MqeIYa8d0WwH
q5PqFvVnUS21hsKLgAOZDjrd0GUlHfh8404qqpa1ljuNM+o5064ooqQeZk30
SMlKMISDm2jUeoZej95gnnUnPBIH.GFEfBBPLYoLQl5eoSKX+tz0Jr1TJ50j
KHvy47Y0m9r70AOlj8TRVhbAdvIF+KhRVgoTVfOzG6GgBvx7.PBz4K1Kh7c2
w6HjQ5vJQgt1UKveUPzE+PocrvFe+umU6KkGOMSVKwUK0GpnIZ.aNVsCgtPQ
d9wd7ItV6.XAJjSPl8vHRcyT.tpaVcVcuq6jUxn6ikdgKp8jfXEDGrsz8AUH
ykU491HsfFJjHiWEFFr924aJShWugWI9PdZd4phyct8M4Lvis6WlEDQ7CunM
9jHG4E.cokvNY8+8z2GKL1YZi8Hz.VBgWMhee+1I18ce9vhMkfGU6QGP9ujK
.qSxHbPxfRz0eAwAtuYmyoCwOL5PcsM0nMNPjaWjGdRqYnQVcXyH1HV0VRcs
MesckqQsNvAV1ydY0TGZ29buKBz7m4e9C7Rcfl3yAZ.dOn938iKKWZFlNvfx
iiSapRxyVWl2rauJu7ZcF5zj3AdUwgjppjmE8MrtiK163t9zscPmlt5wchFu
b+p8GZCd5sH4qWVTGa4MDsx28sRfWntXuU3eIJ2xy3VXGZ1iAY8e56fNxUK.
10wA.56RtQ5QTNGLBD0t03TWRHn4mPpAof3TAuz4QqfgmNkHSO+iYp0I4f8l
cOIyFNJuUg8p96MGdRzT69vZJNCBil5Fwd0fQX+4mlt7jH8HuoNWV0RRL.Bd
baI+E8Qs.TKYircoht2V9ng1Su1UvgXyP0LtuDt87rsoBCWHyGVymRWMfHMj
olSdELz88wf3xx3504.M3orAYZakaKbC4d0p4j28nYSQjyhhl5wqVMX9XJT5
jsmsYmmWfSS0IlX3CSUj+bzDFm2Cl9Lv2ImKsYBFscd6AnKTuKkQD2tgyysV
9TA8Vzns1Ec5XcLJ36YiFUIw1IIghAMwQnvYwDG98F9CcbIgLygISFNKXFNS
EPrsDf9s0cK6aN135Is54ukUpxaJiOJ61N5HSEcZRrUTUmjw0GplyCByjChA
9mNY9QIIjMRhbZP4kaEk8qzsVzR9D3OjnMi4lDjZovx5.GPPTGHIL1B1DhdC
tcDapNzSCylLG.xH5hIIKDDzEFHAVHnHR2pM37KZRzbXwXkn05wf2KZzsIZa
LVON+tMIYSPl.jqjzPQYzghbuQjMhFylEiHjM7qSbRg1HIeWkuXvbhtvlgYi
e.yErGCtTdbzEy2lRrIrsKDDbgRDQWH4nNHoKiNhrXEKPVnpIwKUUIXaTRG0
j2ljXKE2Yi0.ZVRTYkngj2jH0QomwjEa8G13D.YK0Jc9lhubEcZ05FchGnME
2bjyuMIsXE2fsYwvThqjzfrmKBqfBVpjLHqbvbgdBsPYYzQCFxd.QbkjrJB7
MKIq0RvaURP3Bk5zHInERxMXBYgjPNQRXKjD9layo+HZwys2Q0EIXDz21k86
7RZrWzTm21Xq6XMx4n1FP6hf+VsdS36C+a13AdQwyhxp1gqEh2A9GyKOclM8
NjjYtUeh58JEOmbb7D8S3kw6SpEw5+iXn1AjWYDOyqlK4xrljV5TBOoH0api
dWIKZO3Z58949ud++AjHl8AM
-----------end_max5_patcher-----------

jit.gl.model のマテリアル・テクスチャマッピングについての調査報告 #jitter #maxmsp

3Dモデルを読み込むためのオブジェクト jit.gl.model のテクスチャマッピングについて調査したので書き残しておきます。上記は様々な苦労の果てに描画された至極単純なシェーディングの一枚・・・涙

jit.gl.modelの裏側では assimp

jit.gl.modelでglTFのpbrマテリアルモデルを読み込むとテクスチャ・マテリアルが反映された状態のモデルが読み込まれます。

ここでJitter大好きおじさん達からしたら、「えっ、jit.gl.materialもjit.gl.pbrも、ましてやjit.gl.textureでテクスチャ指定してないのに何なん?」ってなりますよね。私はなりました。

これに対しては Max8 の最近のアップデートに

と書いてありました。理由もよくわかりませんが、適応されるんだなと暗記します。モデル付属のテクスチャも自動で読んでくれています。

ちなみにjit.gl.modelはさまざまなモデルファイルに対応していますが、裏側ではassimpというC / C++ ライブラリで出来ているようなのです。glTFなど最近の3Dモデルも問題なく読み込めるようになったりするのはこのライブラリが進化しているからだと予想できます。adobeがsupportしてgithubもそこそこ活発なようなので今後も開発は続けられると予想されますね。

jit.gl.modelのマテリアル

jit.gl.modelを描画する際に jit.gl.meshと組み合わせたり、マテリアルやシェーディングを色々といじりたくなりますがこれがハイパー難解でした。色々あったのですが結論だけ用途に合わせていくつかのパターンで紹介します。

パターン1 : デフォルト pbr マテリアルを利用

@material_mode というアトリビュートがあるので、こちらを3:JMTL(Use Jitter Material)としておけば、自動設定されたCycling74オススメのpbr materialになります。単に3Dを表示させるだけならこれでいいでしょう。

ただし、現状(8.5.4)だと roughness / metalness などの jit.gl.pbr でいじれるようなアトリビュートは変更できません。モデルのテクスチャによって設定されています。

つまり色合いを調整したかったら3Dソフトに戻って変更してねという事です。私は3Dソフトについては素人なので具体的な方法は分かりません。

デフォルトpbrの問題は jit.gl.enviroment などを利用して環境マップを設定しないとめちゃ暗いなどの問題もあります。またMaxで3Dをやる薄い理由の一つでもある @outputmatrix 1 をした瞬間に利用できなくなり、デフォルトpbrを利用したオーディオリアクティブなメッシュなどを作り出すことはできなさそうです。(やり方見つけた方いたら教えてください)

パターン2 : jit.gl.shader (GLSL)マテリアルを利用

では自分好みのシェーディングをしたい場合はどうでしょうか

@material_mode 0~3 に設定しておきます。そうすると一旦テクスチャが反映されていない状態になります。

続いて jit.gl.shader に@name xxx と名前をつけ、jit.gl.model @shader xxx と指定します。この時 @materialで指定しないように注意して下さい。

具体的にどのような色を描画するかGLSLのシェーダーを書きます。サンプルプログラムを下の方に載せてあります。ポイントは ” <param name=”modelTexture” type=”int” default=”0″/> ” の部分で、modelTextureという変数のインデックスを変更する事で albedo / normal / roughness / metallic / ambient occlusion / height / emission /emvironment などのUVマップ完了後テクスチャにアクセスできます。modelTextureというのは私がつけた名前なので好きな変数名に変更できますが、変数がsampler2DRectと結びつく事でこの挙動を引き出しているのでしょう・・・また番号と内容の対応は要調査が必要です。

例えば modelTexture0 ~ 5 などを default = “0” ~ “5” のように作成すると全てのテクスチャにアクセスしながらシェーディングが行えます。

jit.gl.shader の例

<jittershader name="simplematerial">
	<description>
	simple material for 3d model
	</description>
    <param name="modelViewProjectionMatrix" type="mat4" state="MODELVIEW_PROJECTION_MATRIX" />
    <param name="textureMatrix0" type="mat4" state="TEXTURE0_MATRIX" />
    <param name="position" type="vec3" state="POSITION" />
    <param name="texcoord" type="vec2" state="TEXCOORD" />
	<param name="modelTexture" type="int" default="0"/>
	<language name="glsl" version="4.1">
		<bind param="width" program="fp" />
		<bind param="height" program="fp" />
		<bind param="threshold" program="fp" />
        <bind param="modelViewProjectionMatrix" program="vp" />
        <bind param="textureMatrix0" program="vp" />
        <bind param="position" program="vp" />
        <bind param="texcoord" program="vp" />
        <bind param="modelTexture" program="fp" />
		<program name="vp" type="vertex">
<![CDATA[
  
#version 410
 
in vec3 position; 
in vec2 texcoord; 

uniform mat4 modelViewProjectionMatrix;
uniform mat4 textureMatrix0;
 
out vec2 texcoord0;

void main( void ) 
{
	gl_Position = modelViewProjectionMatrix*vec4(position, 1);
	texcoord0 = vec2(textureMatrix0*vec4(texcoord, 0., 1.));
}

]]>
</program>
		<program name="fp" type="fragment">
<![CDATA[

#version 410

in vec2 texcoord0;

// samplers
uniform sampler2D modelTexture;

out vec4 outColor;

// entry point
void 
main()
{
    outColor = texture(modelTexture,texcoord0).xyzw;
}  
]]>
		</program>
	</language>
</jittershader>

パターン2 : 他のモデルのテクスチャをみてみよう

jit.gl.shader で様々なテクスチャを引いてこれる仕様を見つけるのが非常に困難で疲れた・・・のでもう少しお付き合いください。ひとつ車のモデルの例で見てみましょう。この画像自体はパターン1のデフォルトpbrシェーダーで描画されてます。やはり暗めですね。

この車のモデルには複数の元テクスチャがあるのですが、jit.gl.shaderで参照できるUVマップ後のテクスチャと比較してみましょう。

before(合成される前のテクスチャファイル)

after (jit.gl.model と jit.gl.shaderの組み合わせで取得できるテクスチャ)

なんと5種類しかないんですね。これは画像として用意されてる元のテクスチャをjit.gl.modelで読み込んだ瞬間に3D空間で使いやすい形式に再合成されているということですね。枚数が減ったからといって無駄になっているテクスチャはなさそうです。これを見つけるのに2日は費やしました。

パターン3(微妙):jit.gl.material や jit.gl.pbrを利用する

例えば、jitterのパターンとして jit.gl.model @outputomatrix 1 として内部のモデル行列をjit.gl.meshに送って描画する事があると思います。その時のテクスチャマッピングはjit.gl.meshに対してjit.gl.materialやjit.gl.pbr を接続し、jit.gl.textureなどを通して別途テクスチャを読み込み、マテリアルを反映させます。

ここで問題があります。パターン2の画像のように jit.gl.modelが1つのUVマップ後テクスチャを生成するのに複数の元テクスチャを利用していると、jit.gl.meshにおいて綺麗にテクスチャマッピんグをする事はできません。jit.gl.material / jit.gl.pbrに対して複数の元テクスチャを読み込みむ事ができないためですね。

この手法で上手く行く可能性があるのは元テクスチャとUVマップ後のテクスチャが1:1対応している場合なのかなと予想します。上記の車のテクスチャの例を見ると、8枚の画像から5枚のテクスチャを生成しており、albed以外でも複数の元テクスチャを参照してテクスチャマッピングをしているので様々3Dモデルを動的に読み込んで表現するのであればパターン3はオススメできません。

パターン2であれば、Vertex Shaderも使える!!!ので頂点・メッシュに対して変形処理を書くことができます。

まとめ

jit.gl.modelの難解なテクスチャマッピングの仕様を調査してみました。冒頭の画像はjit.gl.shaderでようやくシェーディングを描き始める事ができた画像という感じです。

昔JitterのVJを見る機会がありましたが jit.gl.gridshapeかjit.gl.platoなどのプリミティブな図形が利用されがちなのが理解できてきました。モデル読み込み&マテリアル適応の概念が難しすぎる。継承・関係性の仕様が隠蔽されていて厳しい!

今回の調査で自分でシェーダーを描きさえすれば好きなモデルを使えそうでという事で一歩前進したでしょうか。ぶっちゃけJitterは仕様を調べるのが大変すぎて何もつくれていません。MaxへのLoveで突き進んできましたが、これ以上理解が難しい問題があったら大人しくUnityかUnreal Engine使おうと思います。

厳しい

リンク

3Dモデルはこちらからお借りしました ⇨ glTF Sample Model – https://github.com/KhronosGroup/glTF-Sample-Models