とあるプログラマーのブログ

Unityやblender、Live2Dについて書いていきます!


テーマ:

今年もざーっと振り返ってみましたビックリマーク
ちなみに去年はこんな事を書いてました → 2015に出来たこと

 

2016年の目標は、プログラミング控えめで3DCGモデリングとお絵かきに力を入れるって書いてました。
ただ、休日はプログラミング強化とディレクションのスキルアップで頑張っていて達成できてないというえっ
まさか仕事でディレクター的な立場になるとは思わなかったし、VRの知見とかもないしどうしようって悩みまくった(笑)

 

 

とりあえず、やったことを振り返ってみました。

 

 

1)セミナーや登壇など

 GLSLシェーダテクニック勉強会(2/14)で登壇しました

  

  おかげでWebGL界隈の知り合いが少し増えた気がします。
  レイトレにも興味を持つ事ができたので来年はチャレンジしたい!
 

 ・仕事でWebGL講師が経験できた

  スライド → Live2D WebGL SDK入門

  2h程度だけどこれは嬉しかった!!

  気合い入れて今までのノウハウが活かせたと思います。

 

 ・ゆるゆるモデリング部を開催した

  やってみたが、Live2D遊んでみる会があるのでもういいかなって思いました
 

 ・blender会のサポートや3DCGモーション講師をした
  blender界隈や東ゲ部の人と仲良くなれました。
  合わせて講師した事でblenderモーションの知見が増えました。

   → blender会サポート(9/24)

   → blender会講師(11/26)
 

 ・UE4やVR系のイベントも数回参加した

 

 ・zbrush講座を受けた
  3ヶ月コースとzbrush寺子屋に参加して、基本操作などは覚えました。
  作りたいモデルはあるけど、結局手付かずでした...。
 

 ・デッサン教室に通った
  アナログでデッサンしたり、粘土捏ねたりして楽しかったです。
  社内主催のイベント以降からぱったりお絵描きしてない。
 

 

2)ブログ更新

 qiitaは18記事ほど書きました(去年は34だった)
 アメブロも5記事ほどblenderやWebGLネタ書いてました。

 あとデスクトップマスコット作ったり、Three.jsプラグイン作ってましたね。

  → WebGLとNW.jsでデスクトップマスコット

  → three.jsのLive2Dプラグイン作った

 WebGL2.0やUnityシェーダー本も勉強したので、ネタが温まったら書こうかとメモ

 

 

3)仕事について

 会社主催のイベント準備やディレクター作業がかなり大変でした。
 正直いうと何回ブチ切れてたかわからない(笑)

 まぁ、元々プログラマーだし慣れない作業をやりくりするのは大変だった感じがします。
 あとQtやkotolinも少し勉強したけど、結局チームが変わってしまい無駄に...。

 

 

ひらめき電球来年の目標

モデリングやお絵描きは再開して、何かオリジナルキャラを作ろうと思います。
また、WebGLやWebVR、UE4アプリや作って出展しようと思います。
Live2D Cubism3.0もEuclidもリリースされる予定なので、プライベート時間にちょくちょく触ろうと思ってます(blenderとEuclid連携の研究は自分が一番頑張る気がする)


余裕があればCGスキルアップのために、レイトレにも手を出したいです。
あとディレクタースキルが低いので、色々アプリを試したり遊んで知見を広げねばと。

 

でわでわ、来年も宜しくお願いします!

AD
いいね!した人  |  リブログ(0)
最近の画像つき記事  もっと見る >>

テーマ:

Live2Dでよくある以下のようなコードをブループリントでもやってみた。

double t = (UtSystem.getUserTimeMSec()/1000.0) * 2 * Math.PI;
live2DModel.setParamFloat("PARAM_ANGLE_X", (float)(10 * Math.Sin(t/3.0)));

UE4ではTickイベントのDeita Secondsが毎フレーム決まった秒数を返してた。
float型に足しこんでいってSinでくるんでかけてやれば-10~10の間で返してくれた。

AD
いいね!した人  |  リブログ(0)

テーマ:

iPhoneの場合は、Lightingケーブル接続しPCとiPhoneでsafari起動してデバッグが便利音譜

 

クリップSafariのウェブインスペクター機能でページをデバッグする方法

 

Androidもできるんじゃね?って思ってたら、Chromeで簡単にできました。

しかもローカルWebサーバーで実行してるWebページも送れるとのが素晴らしいにひひ

 

クリップ知らないと損!?Remote Debuggingが個人的にすごかった件。

 

あとAndroid実機に写ってる画面がそのまま見えるし、めちゃくちゃ便利でしたビックリマーク

下の画像は、A-frameというWebVRライブラリで立体視している所ですが、デバッグできるしプレゼン用にも見せられて素晴らしいです!

AD
いいね!した人  |  リブログ(0)

テーマ:
blenderで作られたGrayちゃんをWebGLで描画してみたメモです

Grayちゃんモデルですが、ノードエディタやpsdを使っており、WebGLで描画するには色々と手間がかかりました。作業内容としては、以下の感じです。


1)テクスチャのベイクする
ノードエディターでカラー調整してるため、ベイクしないと同じ色が出ない...。


ベイクするとノードエディタで指定してるテクスチャに書き込まれるようです。

テクスチャ参照していないノードは、以下のリンク通りblankのテクスチャを作ってやります。


ちなみにノードにテクスチャがないとベイクする時に怒られます。

Grayちゃんの場合、OutLine系のノードがエラーになります。

エラー内容:

マテリアル「M_GrayChan_Outline_Hair」(1番、オブジェクト「Obj_Hair_Front」内)にアクティブな画像がありません。


blankテクスチャを作るのが面倒だったので、プロパティのマテリアルからOutLine系は削除しました。
また、Obj_Bodyメッシュで[_AOが初期化されない]とエラーがでるので、ノードエディタ上から消します。
メッシュを全て選択後にベイクする(2〜3分ほどかかります)


2)UV画像エディターのメニューから画像保存

Grayちゃんはpsdでテクスチャ参照してるので、jpgで保存し参照しなおします。


Blenderのテクスチャをファイル出力する方法


3)CyclesレンダーからBlenderレンダーに変更し、テクスチャマッピング
Blenderレンダーでテクスチャマッピングしないと、obj出力でテクスチャパスが出力されませんでした...。
まずはUV画像エディターでテクスチャマッピングし、obj出力できるようにします。
Grayちゃんの場合、以下のような構成になってました。

 Grayちゃんのテクスチャ構成(●が今回ベイクしたもの)
 ●T_GrayChan_Cloth.psd → 髪飾り、腕輪、服、体(ベイクする必要あり)
 ●T_GrayChan_Cloth_Details.psd → 髪飾り、腕輪、服、体(ベイクする必要あり)
 ・T_GrayChan_Cloth_MSR.psd → どこで使ってるのか不明
 ●T_GrayChan_Eyeball.png → 目のテクスチャ
 ・T_GrayChan_Eyeball_Beta.png → どこで使ってるのか不明
 ・T_GrayChan_Eyeball_GuruguruAlp.png → どこで使ってるのか不明
 ・T_GrayChan_Eyeball_HeartAlp.png → どこで使ってるのか不明
 ・T_GrayChan_Eyeball_Highlight.png → どこで使ってるのか不明
 ・T_GrayChan_Eyeball_ShiitakeAlp.png → どこで使ってるのか不明
 ●T_GrayChan_Hair.psd → 髪(ベイクする必要あり)
 ・T_GrayChan_Hair_LUT.psd → どこで使ってるのか不明
 ●T_GrayChan_Skin.psd → 顔の肌

Mesh選択し1つずつUV画像エディターでテクスチャマッピングします。
体についてはマルチテクスチャのため、シームごとに選択して調整しました。

 



4)obj出力し、WebGL描画する

ボーン部分は非表示にして、メッシュを全選択し以下の設定でobj出力します。
マルチテクスチャな部分があったので、マテリアルグループはチェックしました。

A-Frameのコードは<a-scene>配下に以下を追加します。

<a-assets>

    <a-asset-item id="tree-obj" src="GrayChan.obj"></a-asset-item>

    <a-asset-item id="tree-mtl" src="GrayChan.mtl"></a-asset-item>

</a-assets>

<!-- Grayちゃん用 -->

<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl" scale="0.01 0.01 0.01" position="0 0.2 -3"></a-entity>

これで描画すると顔がひどい感じになります。




4)顔が正しく描画されないので、不要な辺を削除する

原因は、上まぶたと顔を繋いでる線にありましたので、これを削除します。
(下画像の白い線部分。両目の2箇所を削除)

WebGLだと三角形しか描画できないため、描画できなかったようです。

これで無事にobj出力でWebGL描画ができました



5)COLLADA出力させる

obj出力できましたが、アニメーションはしません。

アニメーションさせるためにCOLLADA出力に対応させます。

色々いじってわかったのですが、obj出力とCOLLADA出力は以下の違いがありました。
COLLADA出力させるのには、UV画像エディター上でUV設定に加えて、プロパティ側でマテリアル&テクスチャ設定が必要です。
あとBlenderレンダーに変えるとプロパティのマテリアルがエラーになるので、削除してマテリアルとテクスチャを作り直します。

プロパティでテクスチャのシェーディングで放射にチェックをいれて、
シェーディングのプロパティをマルチテクスチャからGLSLに変更すると3Dビュー上で確認できます。


あとCOLLADA出力設定でシェイプキーを含むにチェックあるとファイルサイズが大きくなるので、自分は外しました(7MB→3MBぐらいになる)

また、出力されたdaeファイル内にテクスチャパスが絶対パスで出力されていたので、エディタで開いて修正が必要でした(相対パスで出力されない)



6)A-Frame上で描画する

以下のコードでCOLLADA描画できます(id=monsterは後述するアニメーション用です)

<a-assets>
    <a-asset-item id="GrayChan" src="GrayChan.dae">
</a-assets>
<a-collada-model src="#GrayChan" scale="1 1 1" position="0 0 -2.8" id="monster"></a-collada-model>
でもなぜか上手くいかず・・・。とりあえず先に進みます。



7)アニメーション再生する

A-FrameではCOLLADAのアニメーション再生がまだサポートされないようです。
別途アニメーション再生するプログラムが必要になります。

以下のリンクを参考に、Animation用のスクリプト参照と処理を追記しました。

https://github.com/aframevr/aframe/issues/1446


index.htmlに追加したソースコード

<script src="http://threejs.org/examples/js/loaders/collada/Animation.js"></script>
<script src="http://threejs.org/examples/js/loaders/collada/AnimationHandler.js"></script>
<script src="http://threejs.org/examples/js/loaders/collada/KeyFrameAnimation.js"></script>
<script>
(function(window) {
  function animate() {
    THREE.AnimationHandler.update( clock.getDelta() );
requestAnimationFrame(animate);
}
  function animator(child) {
 var animation = null;
if (child instanceof THREE.SkinnedMesh) {
 animation = new THREE.Animation(child, child.geometry.animation);
            debugger;
animation.play();
}
}
  
function onload() {
 var dae = window.mydae = document.getElementById('monster');
    dae.addEventListener('model-loaded', function() {
      dae.object3D.traverse(animator);
    }, false); 
    animate();
  }
  
  var clock = new THREE.Clock();
  window.onload = onload; 
})(window);
</script>

Three.jsに付属してるCOLLADAファイルだと描画もアニメーションも上手くできました。
ただ、Grayちゃんでアニメーションさせると頂点がぶっとんで上手くいかず、一旦あきらめました...


色々とWebGL上で試しましたが、UnityだとPSD参照もできるし簡単に描画とアニメーション再生できてゲームエンジンって素晴らしいなって思いました

いいね!した人  |  リブログ(0)

テーマ:
最近、WebGL Inspectorでキャプチャ後にChromeが固まる問題があった。
エラーログは以下のものが大量に出ていて、Option + command + escで強制終了しないと復活しない...。

WARNING: Too many active WebGL contexts. Oldest context will be lost. 

「古いWebGLコンテキストを失った??なんでだー!?」と思ってたらWebGL Insightを無効にしたら直った。



この2つのツールは併用しない方がいい感じです

いいね!した人  |  リブログ(0)

テーマ:
INTUOS PROでなんかもっさりして板タブが反応悪いって時があった。
デザイナーさんに聞いたら「ワコムタブレットのプロパティ」の「デジタルインク機能を使う」を外したらいいよと教えてもらった。

これで快適な板タブライフが送れます♪

いいね!した人  |  リブログ(0)

テーマ:
WebGLでフレームバッファ切り替える時、以下のエラーでハマって「前にあったな。なんだっけ?」となるのでメモ

glDrawElements: Source and destination textures of the draw are the same
エラー内容としては、シーン内に使っているテクスチャに書き込もうとするんじゃねぇってという内容。
activeTexture メソッド内で指定している「テクスチャユニット番号」とuniform1i メソッドの第二引数に指定する「整数値」が一致していない時に起きる。
つまり解決法としては、アクティブのテクスチャを変えてやればいい。

間違いコード
function render(){
   ・
   ・
// uniform変数にテクスチャ1を登録
gl.activeTexture(gl.TEXTURE1);
// フレームバッファのテクスチャ参照
gl.bindTexture(gl.TEXTURE_2D, ftexture[0]); 
gl.uniform1i(uniLocation[1], 0);
	// 描画
gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
// 繰り返し
requestAnimationFrame(render);
}

正しいコード
function render(){
   ・
   ・
// uniform変数にテクスチャ0を登録
gl.activeTexture(gl.TEXTURE0);
// フレームバッファのテクスチャ参照
gl.bindTexture(gl.TEXTURE_2D, ftexture[0]); 
gl.uniform1i(uniLocation[1], 0);
	// 描画
gl.drawElements(gl.TRIANGLES, index.length, gl.UNSIGNED_SHORT, 0);
// 繰り返し
requestAnimationFrame(render);
}


ちなみに以下のエラーはIBOの登録時のエラーの場合によく見るやつです。
vertexAttribPointer: index out of range
gl.getAttribLocationで紐付けた変数がシェーダー側に登録されていない時に起きる。
vertexシェーダーやfragmentシェーダーに登録すればOK!

WebGL: enablevertexattribarray index out of range

いいね!した人  |  リブログ(0)

テーマ:
今年も何をしてきたか振り返ってみました
1年間を振り返って何ができたかを確認するのは大事だと思うので。
ちなみに去年はこんな事を書いてました → 2014に出来たこと

2015年の目標は3DCGプログラミング3DCGモデリング強化、あと展示会へ出展と書いてました...。しかし、3DCGプログラミング強化しかできてないという

結構、頑張ったつもりなんですがいまいちですね


1)勉強会の主催やLT
Live2Dについては、今年は2回しか主催してないです(去年の1/3)
ちなみに会社から頼まれたとかでなく、個人で計画してやってます。

 ・pixivでLive2Dモデリング部(4/25)
 ・mixiでLive2Dプログラミング部(5/9)

blenderの方は、大阪と東京でLTしました。
ぶっちゃけblenderの界隈の方がTwitterと顔が一致してたりしますw
定期的にプレゼンしないとLTスキル弱くなるので、回数としてはまぁまぁかな。



2)勉強会やセミナーの参加
アンリアルフェス大阪・横浜に参加しました。
最近あんまりUE4いじれてないので、来年は頑張ろうかと。
(というかUE4が動くPCがお亡くなりになったのでSuface Book早く発売して)

あとは、HTML5カンファ、WebGLスクールGLSLスクールに参加しました。
ちょうどシェーダーやフレームバッファで困っていたので、本当に助かりました
合わせてUnityのシェーダーも理解が進みました。


3)プラグイン開発
WebGLとUnityのADVゲーム用のプラグインが作れました。
元々は個人でやろうと計画していたので、仕事でやらせてもらえて助かりました。
あと、blenderのWebGLプラグインはまだ開発中です...。


4)Live2Dのブログを結構書いた
34記事ほど書きました。ほぼ個人の時間で調べてプログラミングしてます。
(仕事でしても怒られないと思うけど、家で実装してる方が作業が進むので)
主にUnityユーザーが困らないように、はまる所を重点的に書きました。
フォーラムに投稿してくれる人は、本当にごく一部の人でググって情報なければ投げ出す人も結構いるんじゃないかなと思います。
だから、中の人もみんなブログを書いてくれれば助かるのになぁって前から思っています。

あとアドベントカレンダーも7記事ほど書きました。
毎年どこかに参加してるけど、年々書く記事が増えているというww

 ・Live2D Advent Calender 2015 → 5記事書いた
 ・WebGL Advent Calender 2015の13日目
 ・blender Advent Calender 2015の20日目


5)仕事について
イベントや展示会などプログラミング以外での苦労が多かった気がする
まぁ、来年はその経験を活かせると良いかなと思います。
あとLive2Dのプログラミング周りの情報が少ないので、個人で研究して増やしてましたね。


来年の目標
家でプログラミングする頻度は落として、モデリングに力いれようと思います。
あとお絵描きを半年ほどサボり中なので、来年はまた再開しようかと。
合わせてLive2Dモデリングを強化して、クオリティアップしたモデルを配布したい!
あとzbrushも買ったまま塩漬け状態なので、有効活用しようかと思います。
(オリジナルで書いた女忍者と妖怪を作りたい)

ちなみに、モデリング部も2月ぐらいから毎月開催しようかと思っています。
10名規模ぐらいでLive2D&3DCG&お絵描きをメインにする感じです。
(セミナーではないので、何も創作活動しない人や話を聞きたいだけの人は勘弁ね)

あとはUE4の方を本格的に力を入れる分、UnityやWebGLはゆるめる感じです。
目標としては、UE4コンテストやワンフェスなどに参戦です

でわでわ、来年も宜しくお願いします!
いいね!した人  |  リブログ(0)

テーマ:
Blender Advent Calendar 2015の20日目の記事です

4ヶ月前のBlender+αの大発表会3で「WebGLアドオン作り始めました!」というネタでLTしました。

目的としては、NativeなWebGLにて簡単に3Dモデルを扱えるようにしたかったから(あとは自分の3DCG研究のため)


そしてアドカレ期限が迫ってきて、思い出したようにここ数日開発してましたが・・・
「ほとんど成果をあげられませんでしたっ!」

とりあえず、現状の進捗は以下の感じです。
(進捗をアップする事でやるやる詐欺しないようにしようかと)


現在の進捗状況
まずは、blenderでトーラスを作ってエクスポートします

そうすると頂点情報がjs出力されます

これをhtmlのscriptタグで指定します

WebGLのコードもthree.jsを使わず自前でこんな感じです。
(頂点カラーは適当につけてます)

あとワイヤーフレーム表示ができます

現在、blenderでインデックスバッファの取得に手間取ってます

前に発表したスライド見てたら「テクスチャマッピングまでできたら公開!」と書いてたので、年内か年明け目標でgithubにアップしようと思います

次回のアドカレは、nbngさん宜しくお願いしまーす
いいね!した人  |  リブログ(0)

テーマ:
Windows7 ProでTotoiseGitを更新したら、右クリック後のコンテキストメニュー表示が4秒ぐらいかかるようになった...。

以下のブログにあるようにレジストリをいじって修正しました。
http://blogs.msdn.com/b/shintak/archive/2014/11/04/10569441.aspx


・デスクトップで何もないところで右クリックが遅い場合
HKEY_CURRENT_USER\Software\Classes\Directory\Background\shellex\ContextMenuHandlers
Git-Cheetah

アイコン・フォルダ右クリックが遅い場合
HKEY_CLASSES_ROOT\*\shellex\ContextMenuHandlers\Git-Cheetah
Git-Cheetah

HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers\
TotoiseGit

放置していて1週間ぐらいイライラしてましたが、やっと開放されました

いいね!した人  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。