BlippAR 02

標準

BlippARアプリにいれる基本プログラム

package.jsonはだいたいどれにも共通なので割愛(前記事参照

main.jsについて

最初のBlipp例~基本

var blipp = require('blippar').blipp; //blipparクラスをすべて読み込み
var scene = blipp.addScene(); //最低ひとつのシーンが必要なので、シーンを世界に追加

// Scene creation
scene.onCreate = function() {
    var Plane = scene.addSprite().setColor('#ff7d32aa').setScale(400);
//  スプライト(枠)を追加する。色アルファを設定。スケールサイズを設定(400ピクセル四方)
}

両方のファイル(main.jsとpackage.json)をUTF-8で保存し、iTunesを通して、iOSデバイスに転送する。

公式チュートリアルにある、マーカー図形(下図)をBlipparアプリで覗くと、最初に設定されていた結果(マインクラフトっぽいデモデータ)と違う、薄いオレンジの四角形がマーカーの上に浮かび上がる。

m4__page_4

Blipparアプリで見た状態(下図)

blippar01

===============

何番目かのチュートリアルで、デバイスのスクリーン上に画像を貼り付けるという事例があり、その中で、setType(‘aura’) というのがあったので、setTypeについて

setType

 setType(’hider’ (default), ‘phantom’, ‘aura’, ‘solid’ or ‘sensor’)とは
奥行きバッファーをどう使うかを指定する
hider(デフォルト)はアルファが透過しない
aura は奥行きバッファーを考慮しない。したがって、オブジェクトは前面に描かれる。
phantom は奥行きバッファーを試すが、描かれない。つまり、後ろに配置されたものも描画される。
solid は奥行きは考慮されるがアルファは有効にならない。
sensor  は一切描かれない。

getScreenOrientation

getScreenOrientation(): 0 = Portrait, 90 = landscape left, 180 = upside down, 270 = landscape right
Returns number
.
getScreenHeight(): Height of the screen in pixels. This will ALWAYS be the narrow dimension of a rectangular screen
長方形スクリーンの細いほうの高さ(ピクセル単位)

setClickable

setClickable(boolean): Either true or false. Default is true Returns this.

 使い方 model.setClickable(false)

 

addScene

addScene(name): Add a scene with optional name in case of multiple scenes
Returns node
.
defaultという名前のシーンは必ずスタート時に必要。
シーンに名前を設定しておき、そのシーンに飛べ、という命令を出せそう

Parameter

name: optional name of the scene to create and add to the blipp

Usage
var scene = blipp.addScene('default')

addTransform

addTransform(name): Attach an invisible Transform to this node
Returns node
.
このノードに見えない変形を加える
使い方
var root = node.addTransform("root")
Overview
Base Class used for all default Node properties
Sceneのスーパークラスでもある

MakeHumanとBlender連携

標準

MakeHuman オープンソースにより人型モデル作成ソフトを提供してくれている

http://www.makehuman.org/

Blenderには、MakeHumanデータを直接読み込む機能もあるので、両者の親和性は高い

 

<キャラクターモデリング>

~正しいトポロジーを意識しながら~ 2016/4/10バージョン

※CGCookieのジョナサンさんの解説を参考に

数多くのモデリングチュートリアルは出ているが、人間の筋肉の流れを意識した四角メッシュで作成する方法を学んでおくのが、デフォルメキャラにも有効に思われる。

次の方法で訓練する。

 

1.MakeHuman http://www.makehuman.org/ から

1)モデルを作成して、保存する→Blenderのユーザー設定で、MakeHuman形式データのインポートができるように、Addonにチェックをいれる。

2)MakeHumanでいくらか体格を調整したら(練習用なので、凝る必要はない)

ジオメトリータブ→トポロジー(標準のまま)

→歯とまつげと舌 あり (眉毛はなくてもいい)

→目 あったほうがいい。ハイポリメッシュのほう

ファイル→エクスポート→メッシュフォーマット(Blender Exchange(mhx))

→単位(メートル)

→モデルの上の欄で、ファイルの保存場所と名前を設定

エクスポートする

 

 

参考:http://cgtracking.net/archives/24458

無料で作れる!スライダー調整で簡単に3DCGキャラクターを作成出来るソフト4本まとめ

BY TAKETYU · 2014年6月9日

 

ほかに

・Poser (有料13000円ぐらい)

・Autodesk® Character Generator(Autodeskが無償提供した3DCGキャラクター作成ソフト。

ソフトのインストールは必要無く、ブラウザがあれば3DCGキャラクターを作成する事が出来る。ただし、ダウンロードにコストがかかる。)

・Mixamo Fuse (Mixamoはアドビに吸収されたらしい。スライダーでの体格調整も可能。出力はOBJのみ。100MBソフトウェアサイズ。AdobeIDが必要(登録可))

・デザインドール(コミック用のドール多数。複数の組み合わせポーズも可能。ただし、無料バージョンでは、モデルのダウンロードができない)

 

2.Blenderでモデルを開く

1)インポートから、MakeHuman形式メッシュを選択

モデル保存場所は、自分が作業していたMakeHuman作業場所のexportsフォルダの中。

選択して開く

 

 

2)レイヤー1には、メッシュモデル、レイヤー2には、リグモデルが入っているので、レイヤー1だけクリックして表示(①)

3)レンズ焦点距離が35mmだと、モデルがゆがんでみえるので、150mmに変更する(②、③)

4)まず、ヘッドから練習するので、ヘッドを画面中央にもってくる(④)

 

5)下絵をいれる準備のため、モデルを選んで編集モードにしたら(①)、モデルの鼻の頭の点を選んで(②)、Shift-Sでスナップメニューを出す(③)。その中から、カーソルtoセレクティド、すなわち、3Dカーソルを今クリックしているところに持ってくるを選択(④)

 

6)これで、3Dカーソルが顔の真ん中(鼻の頭)に持ってこれたので、オブジェクトモードに戻す。

まつげは邪魔なので、クリックしてHで一時的に隠す(戻すのは、Alt-H)。

7)Shift-AからEmpty→イメージを選択(下図)

8)EmptyイメージをR-X-90でX軸(横軸)を中心に90度回転させて、図のように正面に立ち上がるようにする(①、②)

9)右のパネルからエンプティ設定ボタンをクリックし、イメージファイルを選択する(③)。ここでは、ワイヤーの入った正面図(head-simple-front.jpg)を選ぶ。(④)

10)エンプティイメージを、ひとまず、横からみて、顔よりも前のほうに移動し(①)、Transparency(透明度)をさげて(0.5ぐらいまで)、下が透けてみえるようにしておき(②)、大きさをあわせる(③)。サイズが0.3ぐらいでだいたい大きさがあうのでここでは0.3にした。鼻の頭がセンターにくるように、Xのオフセット(左右方向のずれ)(④)と、Yのオフセット(上下方向のずれ)(⑤)を調整する。

11)このままでは下絵がじゃまなので、顔の後ろにEmptyイメージを移動する(Y方向だけに移動するよう注意)(①)。モデルに隠れて、下絵がみえなくなってしまうので、オブジェクトのプロパティボタン(②)から、表示方法でX-Ray(レントゲン)設定をオンにする(③)

 

12)横顔の参考画面も設定する。

正面で使った、エンプティイメージを上からみて(①)、Shift-Dでコピー(②)。上からみて、90度(270度にしておいたほうが画像が逆向きにならないので、ここでは270度)回転させる(③)

画像は、半透明設定が生きているので、横からみて、だいたいの位置あわせをする(④)。

 

3.トポロジーをトレース

以上がこれからやる作業の準備。

ここからが本番。しばらくはサポートがある状態でモデルを作成していくが、だんだんにサポートなしでも自由に作成できるようになることが目標。この基本が出来れば、応用として、よりリアルなもの、逆に単純化したものというキャラクターモデルができるようになる(、、、、といいなあ)。

 

1)準備の1-5)でやったように、3Dカーソルを鼻の頭の点にもってくる。(実際には、鼻の頭でなく、Shift-Cで原点に持っていってもいいが)(①)

2)オブジェクトモードに戻し、Shift-Aから12角形のサークル(②)を出す。

半径は、0.025にしておく。(③)

これは、目のまわりになる。

3)エディットモードにし(①)、R-X-90で、X軸(横軸)を中心に90度回転する。

全体が、目のまわりにくるよう、サークル(円)を移動する(②)。

ミラーモディファイアをかける(③、④)。

 

4)今回は、サポートと土台として、MakeHumanのモデルを出しているので、そのモデルの表面をなぞるように、新しいモデルを作成していく。磁石マークをクリックし(①)、そのとなりの吸着対象をFace(面)にする(②)

5)目のまわりに沿うように、円を変形していく。緑ラインの内側をトレースする気持ちで。作業は、正面から行う。

6)一周全部選択し(Altを押しておいて、線分の上をクリック)、Eで拡張、一度マウス右クリックで場所移動のキャンセル。Sで外側に拡張。また、マウス右を使って、1点づつ丁寧に置いていく。今度は、緑のふちの外側をトレースする気持ちで。

 

 

7)6)と同じ方法でもう一周、目のまわりを拡張する。

8)今度は、鼻を作っていく。目のまわりの点のうち、どれでもいいので、1点クリック(①)。

ミラーモディファイアのオプションで、中央でクリッピングをオン(②)。

Shift-Dで点をコピーしたら、鼻の上、目に寄ったあたりに移動(③)。

そこからE(拡張)で、線を引き出し、顔の中心ラインまでまっすぐに線をのばす(④)。

 

9)8)で作成した鼻の上の線分を選択し、Eで、鼻の下へと延長していく(①)。いったん鼻の先で止めたら、今度は、鼻の中間からあごの下まで一周まわす(②)。

 

10)鼻と目を接続していく。四角の穴を埋めるのは、F(Fill~埋めるという意味から)。線のつながりを良く見ながら、どんどん埋めていく。

11)鼻の頭の線分を口のまわりまでEで伸ばして、そこから唇のまわりを一周囲むように作成する。

12)鼻のまわりを囲み終わったら、穴になる部分を一周選択し、Eで穴の中に向かって、拡張していく。2回ぐらい中に押し込んで、3回目には、S-0 で一点に集めて、穴が見えないように隠すとよい。

13)口の中も、一周選択したら、Eで口の中に2回押し込み、そのつど、形を整える。

14)額のほうへ面をのばしていく。3回ぐらいで頭のてっぺんに届くぐらい。横からの画像も参照しながら伸ばす。また、目の横の面は、耳の上を通って、頭の後ろまでつながっていく。これも意識するとよい。

四角をつくるのに線が足りないときは、ひとつの点からEで伸ばす。

また、分割線が足りないときは、Ctrl-Rを使う。

 

15)耳の後ろを通っている面の流れは、肩口に流れる。耳の下からの面の流れは、そのまま首の前へまわっている。そのあたりをよく観察し、面を延ばしていく。

 

16)ひとまわり囲めたので、もともとのMakeHumanを隠し、このモデルにNewHeadなどという名前をつける。ファイルは、適宜保存しておく。

 

17)オブジェクトモードにし、モデルをSmooth表現してレンダリングした結果(ポイントライトを3箇所ぐらい追加している)

何回も練習して、何もサポートなしでも作れるようにしてみよう

次は耳。

BlippAR でARに再チャレンジ 01

標準

最初のBlipp

1.インストールと設定

1)BlipparアプリをiOSデバイスとPCのiTunesにインストールする

2)デバイスでBlipparアプリを起動し、メニュー>設定>開発

3)公式サイトhttps://developer.blippar.com/ へのログインと同じIDでログインする

4)デバッグメニューとログが可能である(Enable Debug Menu and Log)というメッセージが左上に出ている画面に変わる

5)ホームに戻り、Blippingをスタートする Blipparは終了してよい。

6)iOSデバイスとPCをUSBケーブルで接続する

7)iTunesを開き、デバイスアイコンをクリックして開き、アプリ一覧からファイル共有の欄でBlipparを選択する(図は、公式サイトチュートリアルより拝借)

testing_ios

8)Blipparで必要なファイルをここにドラッグ(最初は空のはず)して使う (つまりside-loadを使ってプログラム転送)

===========転送プログラムの基本============

1.main.js

1)blipparクラスすべてをblippという変数に呼び込む require(‘blippar’).blipp

2)シーンが一つは必要なので、それを追加する addScene()

3)シーンの作成 scene.onCreate() = function(){ ….}

4)上記関数の中は、addSprite だったり、setColorだったり、setTextureだったり、setScaleだったり。。。

2.package.json

~BlippAR API Betaを使うために必要。

{
    "version": "1.0.0",
    "description": "Blippar JS test application",
    "main": "main.js",
    "blipp" : {
        "title": "My first blipp",
        "shortTitle": "1st blipp"
    },
    "dependencies": {
        "blippar": "1.2.45"
    }
}

main.jsも、package.jsonも、UTF-8の文字コードで保存したほうがよい。

3.その他

画像ファイルなども。

===

パブリッシュする場合には、

一つのフォルダに、

assets フォルダ および、javascriptフォルダにまとめ、ZIPで圧縮したファイルをオンラインBlippar作成サイトでアップロードすればよい。

Blenderサッカーボール

標準

Shift-A

Add Mesh ->Math Function->Regular Solid

左のツールシェルフ内オプションで、

プリセットのうち、

Truncated Icosahedronを選択

Blender Animationにチャレンジ01 シーンの追加の意味

標準

Blender Animationにチャレンジ

01 シーンの追加

同じキャラクタや小道具を使って、別の演技をしたいときには、シーンの追加→オブジェクトデータのコピーを選択する

詳しくはこちらで

https://wiki.blender.org/index.php/Doc:JA/2.6/Manual/Interface/Scenes

02 オニオンスキン

ポーズモードにしておき、アーマチュアを選択。右側アーマチュアパネルの中のゴーストでレンジを設定する

03 直前動作のやり直し

shift-R  履歴表示F3

04 蛇のボーン

4-1)snake01

4-2)

snake02

または

snake03

アーマチュアモディファイアは、サブディビジョンモディファイアよりも上にもってくる

4-3)ボーン表示をB-Boneにし、大きければ、Ctrl-Alt-Sで細く表示する
snake04

4-4)ポーズモードで、分割したいボーンを選択し、ボーン→デフォームのセグメント数を増やす(ここでは首から下のボーンを選んでセグメント4にした)。選択したボーン一気にセグメント数を設定したい場合は、Altキーを押しながら、数値をいれる

snake05

hebi-toguro-imageとぐろ巻いた

05 ボーンの向き
Rigifyで自動生成したアーマチュアで、手の向きが変だった理由が判明

ボーンの向きを整える必要があり。「折れ曲がる軸をX軸にする」と覚えておくとよい。

例えば、人差し指なら、第1関節、第2関節の折れ曲がるラインがX軸と揃う。まっすぐ伸びる指の向きがY軸。

必然的に関節折れた状態で外側に向くのがZ軸。こうなるように、Editモードで、ボーンの軸名を表示しながら、回転(ロール値の変更)させる。

bone%e5%90%91%e3%81%8d

自力でここまで(ボーンの手動回転)たどりついたーと思ったら、便利なショートカットキーの説明をゲット。

http://dskjal.com/blender/the-importance-of-local-axis.html

これにより、Ctrl-Nで出てくるメニューから、Blenderに向きを推論させることができる(なんと!)

06 Link Objectで読み込む

読み込む前に、1つから作成できる、オブジェクトのグループ化(Ctrl-G)を行っておく。

このグループをリンクで読み込むことで、一緒に読み込まれていたエンプティオブジェクトに対し、移動拡大縮小が可能になる。なので、独立に操作したいものは、座標原点に移動してから、ひとつづつグループ化するとよい。

どうしてもリンクの縛りを解除したい場合は、オブジェクトメニューからシングルオブジェクト化を選ぶ

07 Array  モディファイアを使ったアニメーション

Array モディファイアの中のオブジェクトオフセットをうまく使うことで、さまざまな変化を演出できる。

例)https://youtu.be/ZA37bp6RdYs

emptyを配列したいオブジェクトの中心に置き、それをオフセットオブジェクトに指定することにより、動かし方(G,S,R)で配列形状が変化する。もう一つemptyオブジェクトをいれ、モディファイアコピーを作成すると、両emptyの変更がさまざまな変化を生む。

アニメーションは、このemptyに対して、キーフレームを打っていくことにより、実行可能