【無駄のないVtuber作製講座】Part 4: トランスファー 編

posted in: 3D Modeling | 0

本章では、これまでにBlenderで作製してきた3Dモデルを、Unreal Engineに移します

これをGAINENZではトランスファーと呼んでいます

トランスファーは、主にBlenderでのエクスポート作業とUnreal Engineでのインポート作業からなります

最後に、Unreal Engine側で3Dモデルのマテリアル設定を行い、Blenderで設計した通りの表示となるように調整します

それではBlenderでのエクスポート作業から見ていきましょう(図1)

まずは3Dモデルのボーンとメッシュをまとめて選択します

続いて、FileのExportからFBXを選択します

このとき、VtuberのFBXファイルを格納するための新しいフォルダを作製しておくことをオススメします

次に選択項目に対し画像の通りにチェックを入れたあと、Export FBXをクリックし、新規フォルダにFBXを保存します

このフォルダには3Dモデルのテクスチャも保存しておきましょう

図1. Blenderでのエクスポート作業

以降ではUnreal Engine側での操作になります

Epic Games LauncherからUnreal Engineを起動しましょう

起動したら、新規プロジェクトの作製からゲーム、サードパーソンを選択し、プロジェクト作製をクリックします(図2)

コンテンツブラウザのThirdPersonBPというディレクトリ内で新規フォルダを作製し、そこへ先ほどの.fbxファイルを追加します

画像の通りにチェックを行い、全てインポートを選択しましょう

これでUnreal Engineへ3Dモデルを移せたことになります

図2. Unreal Engineでのインポート作業

これでUnreal Engineに3Dモデルを取り込めたものの、Blenderで行ったマテリアル設定情報は失われてしまっています

もう一度、Unreal Engine側でマテリアル設定を行いましょう

例として、ネンズ君の顔部分(Face)にテクスチャを設定する手順を示します(図3)

編集したいマテリアルのアイコンをダブルクリックしたあと、Blenderと同様にノードを連結させます

出力はベースカラーに繋がるように設定しましょう

編集後は保存と適用をクリックし、設定完了とします

図3. Unreal Engine上でのマテリアル設定

本章の最後に、Unreal Engineのデフォルトキャラクターとして表示されるマネキンを、自作Vtuberを入れ替えましょう(図4)

ThirdPersonBPフォルダ内、BlueprintsというディレクトリにあるThirdPerson Characterのアイコンをダブルクリックし、その設定画面に入ります

画面上の表示がViewportとMeshになっていることを確認し、さらにSkeletal Meshから自作のスケレタルメッシュを選択します

サイズの最適化、カメラの配置、当たり判定の設定を行った後、コンパイルをクリックしてプレイしてみましょう

W, A, S, DキーでVtuberを操作することができます

図4. Unreal EngineのマネキンをVtuberで置換する方法

本章での解説は以上となります

読んでいただき、ありがとうございました

【無駄のないVtuber作製講座】Part 3-2: アニメーション 編

posted in: 3D Animation, 3D Modeling, Technology | 0

本記事では、作製したキャラクターを動かすためのアニメーション設定について解説します

アニメーションの下準備

アニメーション設定では、これまで構築してきた3Dモデルに動きを与えることになります

ただし今回作製するのはVtuberですので、動画作成を目的とした一般的なアニメーションとは異なります

今回作製するアニメーションは、以下の2点を満たすようなものです

それは、①キーボード操作による移動時には歩行動作を示すことと、②人の表情変化に対応して表情変化を示すことの2点です

今回利用するのはiPhoneによるFacial Motion Capture機能であるため、この制約上、リアルな人間と対応させられるのは顔の表情のみとします

ここで①と②の動作は、それぞれ異なる原理に基づいて作成されます

①はボーンアニメーション、②はシェイプキーアニメーションと呼ばれます

①はその名の通り、骨組みを3Dモデルに導入し、さらにその骨組みを動かすことによって周りの3Dモデルを追従させるような仕組みです

②の場合は骨を用いず、頂点を直接動かすような仕組みとなります

ボーンアニメーションには下準備が必要ですので、まずはこれを行っていきましょう

最初に行う下準備として、ボーンの動きを制限します(図1)

これをボーンコンストレイント(Bone Constraint)と呼びます

この機能を用いると、例えば足の回転範囲を設定でき、その向きが反対方向を向いてしまうような不自然な動きを抑制できます

図1中の局所座標に着目すると、ローカル座標のX軸が高さ方向の軸であることが分かります

ボーンのアイコンからAdd Bone Constraintを選択し、X軸周りに「Min: -30°, Max: 20°」という制約を記述します

これで、足の回転が最小でも-30°、最大でも20°で止まるようになります

次に、歩行動作のアニメーション設定を効率化するために、右足と左足が逆に動くような設定を行いましょう

すなわち、右足が上がれば左足が下がる、といった具合です

右足の骨(図ではFoot_R)を選択し、ボーンのアイコンからTransformationを選択します

続いて右足の動作を左足の動作に反映させるため、TargetのBoneとして左足(Foot_L)を選択しましょう

最後に、2つの足の動作が真逆になるようにMap FromとMap Toの値を入力します

二つの足の座標方向が揃っていれば、Map From「Min: -20°, Max: 20°」に対し、Map Toは「Min: 20°, Max: -20°」と逆の関係になります

図1では二つの足の座標方向が既に反対となっているので、Map FromとMap Toにそれぞれ同じ値を入力することで、動作が反対になります

図1. ボーンの動きに制約を課す設定

さらに、下準備の続きとしてDriverを利用します

このDriverは、足の回転と上下 (グローバル座標でのZ軸) の動きを対応させるという役割を担うことができます

これによって、キャラクターは歩行時に上下に跳ねるような挙動を示すので、その動きをよりリアルに近づけることができます

ここでは例として、左足が-20°分下がったら、キャラクターはz軸上方向に0.06 m跳ねるとしましょう(図2)

この場合、左足のZ軸回転に対応する値を変数として受け取り、その変数の絶対値を20分の0.06倍としてから、RootボーンのZ軸位置へ代入することとなります

このためにはまず、Foot_LボーンのRotation内にあるZ軸の値をCopy as New Driverし、さらにRootのLocation内にあるZの入力ボックスに対してPaste Driverを行いましょう

Pasteされた値は紫の背景を伴って表示されます

その後、この値を角度から距離へ変換するために、値の右クリックで出現するEdit Driverをクリックし、Scripted Expressionとして図のように数式を入力します

これによって、左足がZ軸方向に20°回転する際、キャラクターはZ軸方向に0.06 m跳ねあがるようになります

(図2中でZの値が-0.06 mとなっているのは、RootボーンのZ軸方向が下側を向いているためです。各自のRootボーンに合うようにScripted Experssionの符号を設定しましょう)

これで、アニメーションの下準備は終わりです

図2. 足の動きと高さ方向の位置を対応させる設定

続いて、アニメーションの本格的な設定を行っていきます

先ほども少し触れましたが、アニメーションには2種類の設定方法があります(図3)

一つはShape Keysを用いる方法で、もう一方はBone Animationとなります

Shape keysはBlenderのみで設定します

その推奨用途としては、表情などといった、頂点の平行移動を伴う動作設定です

一方Bone Animationの推奨用途としては、足などといった、回転を伴う体部分の変形に関する設定です

回転を伴う”顔”部分の変形の設定については、Blenderではメッシュとボーンを関連付けるのみで、そのほかは主にUnreal Engineで行います

このメッシュとボーンの関連付けについては、既に「ウェイトペイント」の項目で解説しております

本章の残りの部分では、Blenderで可能な範囲のアニメーション設定を行います

図3. Vtuber作製において活用するアニメーション設定の方法

シェイプキー アニメーション

まずはVtuberに表情変化を与えるため、シェイプキーの設定を行います

頂点マークのアイコンから、Shape Keysの下のプラスボタンをクリックし、動作に対応する名称に書き換えます

例えば、左目を閉じる動作なら、eyeBlinkLeftという名称が既に決まっています(図4)

名称を書き換えたら、そのシェイプキーを選択した状態で、動作の最終状態となるように頂点を編集します

このとき、目を閉じるような動作であっても、2つ以上の頂点が同じ座標を占有しないように注意しましょう

動作確認はObject Modeから、シェイプキーのValueを0から1に近づけて確認しましょう

Valueが0から1に近づくに従い、動作は初期状態から最終状態へと連続的に変化します

図4. シェイプキーを用いて、人の顔と対応するような表情変化を設定する方法

ボーン アニメーション

最後に、ボーンアニメーションを設定しましょう

Animationタブに移ります

Graph Editorを表示させ、ボーンの位置や角度といった変形情報を可視化させましょう

左下にはAction Editorを表示させ、キーフレームを把握しましょう

キーフレームとは、動作が記録されたフレームのことです

また、右下にあるフレームのStartとEndは、それぞれ0と16にしておきましょう

以下では例として、走る動作”Run”のアニメーションを設定しています(図5)

フレーム0, 8, 16においては、足のボーンを無回転の状態としたままiキーを押し、Rotationを選択してフレーム登録します

フレーム4においては、片方の足のボーンを上げた状態とし、iキーからフレーム登録します

フレーム12においては逆に、先ほどの足のボーンを下げた状態とし、iキーからフレーム登録します

BlenderにおけるアニメーションはSpaceキーから再生できます

再生して確認しましょう

Runの設定ができたら、ぜひ、キャラクターが止まっている状態での動作”Wait”も作製しましょう

このアニメーションをつくっておかないとキャラクターは常に棒立ちになってしまい、違和感を生じてしまいます

図5. ボーンアニメーションに基づいた、走る動作の設定方法

以上でBlenderでのVtuberキャラクターの制作は終了です!

読んでいただき、ありがとうございました

Arduinoを使ったテトリスのゲーム機の作り方part3 3Dプリント編

posted in: 3D Printing, Electronics | 0

(本記事は高校生の電子工作日記様に執筆していただきました!)

目次

  1. 準備・印刷
  2. 組み立て

1. 準備・印刷

3Dプリンタ―で印刷するためには以下の準備があります。

①CADソフトを使った設計

まず、このようなソフトでスケッチを書いて設計し、それを3D化します。おすすめはFusion360というソフトです。

Fusion360のダウンロードURLは以下の通りです

Fusion 360 | 3D CAD/CAM/CAE/PCB クラウドベースのソフトウェアAutodesk 公式

テトリスの外装のデータファイルです。ダウンロードしてお使いください。

②スライサーソフトでGコードに変換

設計した3Dデータを3Dプリンタ―本体が理解できるようにするためには、スライサーソフトでGコードに変換します。その他にも印刷する時の詳細設定などもできます。おすすめはCuraというソフトです。

CuraのダウンロードURLは以下の通りです

UltiMaker Cura:強力で使いやすい3Dプリントソフトウェア

③3Dプリンタ―の設定

3Dプリンタ―に先ほどのGコードを読み込ませて印刷します。そしてフィラメントを設置し、レベリングをして土台の位置を調節します。

印刷する手順はこれで以上です!それでは実際に印刷してみましょう。先ほどのファイルのPart1とPart2はそれぞれ異なる色で印刷するのがおすすめです。

2. 組み立て

印刷が出来たら、早速組み立てていきましょう。

①Part2に含まれていた白い丸をタクトスイッチに接着剤でくっつけます。

②Partsに含まれていた表側の部品にPart2の部品を取り付けます。この部品は飾りなのでなくてもOKです。

③電子部品を組み込んでいきます。

まずON,OFFのボタンを取り付けます。Part1の表側の穴に取り付けます。

スイッチのリンクはこちら

④リチウムイオン電池の充電基板を取り付けます。充電端子を穴にはめ込むようにしてスマホのように充電できるようにします。

充電基板のリンクはこちら

回路製作編で作った回路とドットマトリクス、リチウムイオン電池を取り付けます。ボタンは穴にちょうど入るはずです。回路や電池はグルーガンやボンドなどで固定しておくことをお勧めします。

最後に裏側に蓋を取り付けたら終わりです!

完成後は以下のような外観になります

お疲れ様でした!!これで完成です!


www.youtube.com

分からないことや間違っているところがあれば気軽に連絡・コメントしてください!

これで最終編の終わりとなります。読んでいただきありがとうございました。

参考にしたサイトはこちら

Hardr!ve – Quod natura non dat, Salmantica non praestat

画像形式のグラフから数値データを得る方法

posted in: Computational Science | 0

意義

世の中には様々な形式のデータがあります

大きく分ければ、数字が文字で表されているか、それ以外の方法で表されているか、となるでしょう

前者の場合、数字を表から直接読み取ることになりますし、後者の場合であれば、棒グラフや散布図から数字を視覚的に把握することになります

特に、膨大な量のデータであれば、グラフから一挙に読み取ることが効率的です

このようなグラフは多くの場合、画像形式で論文などに掲載されています

しかし、そうするとプロットの大まかな値は読み取れても、正確な数値を読み取ることは難しくなります

さらに、全てのプロットの正確な数字を知りたい場合には、手作業で読み取っていたのでは膨大な時間がかかる恐れがあります

そこで、そのような問題を解決するツールがweb上に存在します

WebPlotDigitizerというツールです

WebPlotDigitizer – Extract data from plots, images, and maps (automeris.io)

このツールに画像形式のグラフを読み込ませると、画像上のピクセル座標とプロットの値をいくつか対応させることで、残りのプロットの値を自動で読み取ってくれます!

読み取ってくれたデータは、.csv形式でダウンロード可能です

それでは、その使い方を見ていきましょう

使用方法

今回GAINENZではこのようなデータを用意しました

時間の進行にしたがって材料の弾性率が小さくなるようなイメージを表したグラフです

材料は数種類あるとしています(それぞれ赤、オレンジ、水色、紫色で表示)

また一般的なレオメーターによる測定を想定して、初期の時間だけプロット間隔を狭めてあります

この画像をWebPlotDigitizerに読み込ませていきましょう

上のリンクを開きます

Load Imageから読み込ませたいグラフの画像をアップロードします

散布図の場合は、 2D (X,Y) Plotを選び、Align Axesをクリックします

ピクセル座標とプロットの値を対応させます

4点選択しますが、注意点があります

x座標の左端・右端、y座標の下端・上端

という順番で画像の上をクリックしましょう

さらに、選んだ4点の対応する値をそれぞれ入力しましょう

チェックボックスとOKをクリックし、次に進みます

ここで解析モードになります

色ごとにプロットの値を得るのが、選択的かつ効率的なやり方となります

画像では水色のプロットを解析するために、Penツールでその上をなぞっています

解析対象部分は黄色で表されます

Foreground Colorは解析対象となるプロットの色に合わせましょう

ΔXとΔYにプロット点の大きさを入力し、Runをクリックします

すると解析後のプロットが赤色で示されます

上手く解析できていれば、画像のように元のプロットの上に、解析後のプロットがピッタリと一致して表示されます

(今回、紫のプロットだけは一度に解析するのが困難でしたので、0.8くらいを区切りとして左側と右側を別々に解析し、最終的にこれらのデータを組み合わせています)

得られたデータの値はView Dataから閲覧できます

Download .CSVからダウンロードでき、エクセルなどのソフトで読み込むことができます

得られた数字からグラフを再現し、元のグラフと比較してみましょう

元のプロットの色は時間増加に伴って薄くなるという、やや複雑な描画でしたが、今回のツールから得られたプロットはそれを再現できています

見た目を議論する上ではほぼ問題なさそうですし、非公式な議論用であれば近似式を算出してもよさそうです

以上、画像形式のグラフからプロットの値を取り出す方法でした