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

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

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


テーマ:

今年も振り返ってみましたにやり

 

去年はこんな事を書いてました → クリップ2017に出来たこと

 

2018年の目標は「無理ない範囲で仕事して、色々な人と絡んで楽しく過ごしたい」でした。
ただ、2017年の無茶な仕事ぶりのせいか、心療内科にも通って4月にはリーダー職を降りてますねショボーン
まぁ、ディレクター&プログラマーというのは物量的に無理だったのだと思います。

 

 

1)プライベートの勉強
3DCG、WebGLはほとんど触ってないですねえーん
何でも屋状態になっていたので、フロントエンドに特化したいと思って色々と頑張ってました。
転職に備えてVue.jsやSassを勉強したり、githubを結構更新してました。
qiitaの記事は4記事投稿してました(Python、C#、テストツールなど)

 

 

2)趣味
サーフィンを毎週のように頑張ってました。ショートボードも結構乗れる様になりました音譜
パドリング練習のため、ジムでも1kmは最低ノルマで泳いでました(25m x 40本)

 

 

3)仕事
4年間がんばった会社を8月で退社しました。
まぁ、色々と自由にやりたい事はできたので、この会社でやりたい事はなくなったと思ったからです。
9月からはフロントエンジニアとして、働いてますビックリマーク
イライラする事もありますが、色々と学びが多くて管理業務もないし、楽しく過ごしています。

 

 

来年の目標
フロントエンジニアとして、必要なスキルも業務レベルに達したので、また3DCGやWebGLに力を入れて行きたいです。
来年はどこかで登壇したりしたいですね。

今年はあまり勉強会とかも参加できず、外部の人と繋がりがなかったので。
機械学習も興味をもってきたので勉強中ですビックリマーク
あと、さすがにそろそろプラベートを落ち着きたい。

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


テーマ:

今年もざっくりと振り返ってみましたかお
去年はこんな事を書いてました → 2016に出来たこと

 

2017年の目標は、モデリングやお絵かきを再開して、WebGLやUE4で何か展示できるものを作ると書いてました。

結果としては、色々とあがいたけど何もできてないという感じ汗
ブログも一切更新してないし、ディレクター業務が忙しすぎ...あせる
(C#、DotnetCore、フロントエンド、GCP、Webデザイン、ディレクションと覚えるべき事が多すぎ)

 

残業時間と新しい事への学習時間が半端ないし、関ゲ部や東ゲ部など勉強会の参加も絡み少なすぎだった(関ゲ部と東ゲ部は1回行ったぐらい)

 

一応、あがいたリストは以下の通り。

1)プライベートで勉強
・zbrushでドラゴン作ってみた → 上手く作れず、SNSにもUPしてない
・UE4本の復習 → 「UE4ゲーム開発入門」と「UE4で極めるゲーム開発」をやった。
・VRアプリを作るためにFOVE購入 → UE4プラグインが上手く動作せず断念...。
・Cubism3.0を動画を見ながら勉強
・Cubism3.0 SDK WebGLをTyranoScript用にカスタム
・Euclidで簡単なモデル制作 → コロ助モデル作ってた。3Dはblender
・ASP&TypeScriptを勉強
・DotnetCore、C#、GCPを勉強
・Webディレクションを勉強
・フロントエンド勉強(flexbox、sass、pixi.js)
・サーバーサイドからフロント、GCPやWebディレクションの本を多数読んだ
 

 少しテクスチャがバグってるけど、Euclidはこんな感じ

  

 

2)趣味
・サーフィンを再開 → 本格的にやるためにサーフボード、ウェットスーツ購入
・ジム通いを再開
 

 

3)仕事
・DMMで英会話勉強(SXSW用) → 仕事でアメリカのオースティンへ(SXSW)
・Live2DのWPプラグイン開発 → Creative Studioサイトで活用
・Webサービスのディレクション業務
 

総括
趣味でLive2DのCubismやEuclidを触ってたけど、やはりモチベが落ちてる。
業務で自社製品(EditorやSDK)を触る機会が全くないため、仕事を続ける意味を見失っている気がする。
冬休みにTyranoScriptプラグインやUE4プラグイン開発を試みるけど、モチベ上がらなければ難しいかもしれない。
まぁ、ジムやサーフィンや婚活など、色々と再開して準備を整えた年だったと思う。
 

 

来年の目標
無理ない範囲で仕事して、色々な人と絡んで楽しく過ごしたいですねひらめき電球
(何人ものフォロワーから直接会った時に「病んでるけど大丈夫?」と心配されたので)
プライベートを犠牲にして仕事するのはよくない...。
ディレクションとプログラミングの両方を勉強するのはつらいので、趣味以外ではプログラミングしないつもり。

でわでわ、来年もよろしくお願いしますビックリマーク


テーマ:

今年もざーっと振り返ってみましたビックリマーク
ちなみに去年はこんな事を書いてました → 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スキルアップのために、レイトレにも手を出したいです。
あとディレクタースキルが低いので、色々アプリを試したり遊んで知見を広げねばと。

 

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


テーマ:

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の間で返してくれた。


テーマ:

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

 

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

 

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

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

 

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

 

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

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


テーマ:
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参照もできるし簡単に描画とアニメーション再生できてゲームエンジンって素晴らしいなって思いました


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

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

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



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


テーマ:
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


テーマ:
今年も何をしてきたか振り返ってみました
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コンテストやワンフェスなどに参戦です

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

Ameba人気のブログ