ScratchでVRM(Scratch拡張機能)

VRMファイルのキャラクタを表示・動作させるScratch拡張機能の説明です(BVHモーションが動きます).

下記に置いています.

https://social-exp.site/scratch-gui/2023March1/

 

下記の動画では,VRoid Studioのエクスポートから説明しています.(エクスポートするときのオプションは例です,用途に合わせて設定ください.

 

 

youtu.be

動作はMMD版とほぼ同じです.

MMD版の説明は:

ScratchでMMD(Scratch拡張機能) - 技術や学びのメモ

BVHモーションは,一部のBVHファイル,ボーンの動作に対応できていないかと思います...(今後対応できるよう検討中)

VRMとBVHファイルを用意して,下記のボタンを押すとアップロードできます.

 

 

 

 

 

ScratchでMMD(Scratch拡張機能)

MMD(PMX/PMD)ファイルを閲覧するScratch拡張機能の説明です.

ここにScratch拡張機能をつけた版を置いています(ブラウザのみで動作します).

https://social-exp.site/scratch-gui/2023March1/

 

※ 別途透明化ツールと組み合わせることでデスクトップ上で動かすことも可能.

 

 

 

以降の説明では,自分が持っているキャラクタやモーションファイルを用いていますが,一般的なキャラクタファイル(PMX/PMD),モーションファイル(VMD),音楽ファイル(.mp3/.wav)が使えると思います.

 

(1)使い方

youtu.be

・通常のScratchと違い,”ブロックを繋げて実行する形”ではないので注意ください.

※再生(START)するときは,下記のようにブロックを繋げて実行できます.実行前に各種ファイルを準備(アップロード)する必要があります.なお,以降では「アップロード」の言葉を使いますが,データはサーバには保存されず,ブラウザ内(ブラウザ上のjavascript内)で処理されます.

 

拡張機能の選択方法:左下のボタンで拡張機能を選ぶことができます.

 

Chara-Zou4MMD with Scratchを選びます.

 

右のウィンドウに「準備ができました」と表示がされればOKです.

 

下記のブロックをひとつずつ押して再生の準備をします.

 

画像の表示

ブロックとしては繋げず,このブロックをクリックすると,画像を選ぶダイアログが開きます.

 

 

PMX/PMDファイルの表示(「フォルダ」を指定して複数ファイルをアップロード)

PMX/PMDのファイルは,テクスチャのファイルを含む場合があります.PMX/PMDファイルがある一つ上の「フォルダ」を選択してください.

また,フォルダ内には「.pmx(または.pmd)」のファイルは一つのみを置いてください.たとえば,下記のように.pmxファイルとtexフォルダに分かれている場合は一つ上の「sample1」のフォルダを選んでください.

 

下記のように.pmdファイルとテクスチャのフォルダが同じ場合は,一つ上の「sample2」のフォルダを選んでください.

フォルダを選ぶと下記のようなメッセージが表示されます.

 

 

VMDファイルの準備

ブロックとしては繋げません.このブロックをクリックすると,VMDファイルを選ぶダイアログが開きます.

 

音楽ファイル(.wavや.mp3)の準備

ブロックとしては繋げません.このブロックをクリックすると,音楽ファイルを選ぶダイアログが開きます.

 

Check Files ファイルの確認

チェックのボタンを押せば,準備ができているファイルが表示されます(しばらく経つと表示は消えます)

 

 

STARTボタン

再生が開始されます.

音楽ファイルが無い場合は音は再生されません.

 

 

(2)通常のウィンドウだけでなく,ポップアップのウィンドウも使用可能

ポップアップウィンドウを使いたい場合は,下記のブロックを押します.

このブロックを押した後,キャラクタの描画はポップアップウィンドウ側になります.

 

 

(3)「ファイルをアップロードする形式」だけでなく,「ファイルを他のサーバに置いておき,URLを指定してそのデータを使う」形式でも実行可能です.下記のボタンを用います.

・なお,サーバ側は,Access-Control-Allow-Origin レスポンスヘッダーの設定をしておく必要があるので注意ください(.htacessファイルなどを記述するなど).

・PMX,PMDファイルは,〇〇〇〇.pmxのようにファイル名を指定してください(上記の説明にあるようにアップロードするときは「フォルダ」でしたが,ここでは「ファイル名1つ」を指定します.テクスチャファイルなどは自動的に読まれます)

 

(4)注意:Scratchでブロックを繋げて使う場合

Scratchのブロックと組み合わせることもできますが,注意点があります.PMX/PMDやVMDなどは読み込み(アップロード)には時間がかかることに注意が必要です,あらかじめデータを読み込んだ後に,STARTできるようにブロックを作ることに注意が必要です.

追加:

ーーーー

一部のモーションを読み込んだとき,エラーすることが分かっています・・・(エラーメッセージ(Uncaught (in promise) unknown char code 131)
が表示される)

「指で2進数を数える方法」を画像認識で

指をビットに例えて,カウントしていく方法です.(二進指数え法)

 

画像認識を使って,2進数を10進数で表示します.授業のデモで使ってました.

 

開始時ライブラリを読むときに,時間がかかる(数秒,画面が止まったような状態になる)ことが欠点です.

 

 

 

github.com

 

ブラウザ上で動作するLinux

ブラウザ上で動作するLinuxを使った実習の動画の一部を紹介.

www.youtube.com

v86 https://copy.sh/v86/ を用いています.Linux(Buildroot)を用い,授業用にカスタマイズしました.構築方法は下記(去年2月)
https://l-expanse.hatenablog.com/entry/2022/02/06/001843

ディレクトリ内にサンプルファイルを用意してあり,Linux初心者向けに,ディレクトリの移動やファイル属性変更等の練習に使っています.VMwareやVirtual Boxの準備ができないときに,練習用ツールとして使えるかと思います.