とあるプログラマーのブログ
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

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

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

Amebaでブログを始めよう！
次ページ >>

2020に出来たこと

少し早いけど今年も振り返りしてみましたニヤリ

 

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

 

2020年の目標は以下の4つにしてました。


１）Three.jsのコミュニティ活動の活発化
コロナの影響でThree.js Meetupは出来てないですね。
1〜2月は登壇者や会場調整をしてたのだけども、コロナの影響で難しく断念しました...。
オンラインの手段もありましたが、自分がclusterやMozilla Hubsに慣れておらず開催は自然消滅しました。

 


２）作品や3Dモデル制作の公開
ゆるキャラが好きなので現場猫などの設定資料を調べてましたが、3Dモデルは作ってないです。
ゆるキャラ以外では、サーフィンのフィンを3Dモデリングして試乗する目標設定をしただけです。
 

Looking Glassを買ったので、GoogleのMediaPipeでハンドトラッキングアプリを作る予定でした。

ただ、手首を横に回転した際の認識度が微妙なこと、Oculus系のVRハンドトラッキングの方が精度が良くてモチベーションダウンして開発は中断してます。


VRゴーグルからの見下ろし視点とPCカメラからの認識度では精度が異なるのが仕方ないな〜って思いましたアセアセ
PCカメラだと2D画像になるので深度とかの認識が難しいかもと思いました。

 

 

３）英会話スキルUP
Webグラフィックスアドベントカレンダーにも書きましたが翻訳をめっちゃしました。

 

 

翻訳作業は翻訳ツールが色々とあるので、どのように分かりやすい日本語にするかが大事と実感しました。
前よりは英語に慣れてきた気がします。
 

 

４）身体能力の強化
毎週サーフィン後に筋肉痛なので、6月ぐらいから改善しようと毎日筋トレを始めました。
始めは腕立て・腹筋・スクワッド・背筋を20回の1セットでしたが、今は4セットになりました。
体力もついてきて前は2hぐらいサーフィンしてヘトヘトでしたが、今は4〜6hぐらいサーフィンできるようになった。
少しぽっこりしてたお腹もシックスパックに割れてきて、普段の筋トレ大事だなーって思いましたニヤリ
あと サーフィン系のyoutube も見る事で平日もイメトレできてyoutuber素晴らしいですねビックリマーク

 

 

ひらめき電球来年の目標
 

１）WebGL系のコミュニティ活動
来年もコロナが収まってるか微妙なのでOSS活動はしていきます。
翻訳 or 何かのライブラリ改善PRするか未確定ですが、最近はWebGL2やWebGPUに興味があります。
 

 

２）作品や3Dモデル制作の公開
毎年の目標にしつつ、何もできてないので来年こそ達成したいです。
今年は3Dプリント系のサーフボードの記事を調べてるだけでしたが、実用的な3Dプリントが目標です。

あと、サーフィンVRを作りたいですね！

神奈川の波は基本は緩やかなので、天気が良い日でも波がなくてガックリという事が結構あります。

理想的には行きつけのサーフショップにVR機器を置いて、波が弱い日はサーフィンVRしてもらえると最高かなと思います。
 

来年は何か3DCG系の仕事をしたいなーってふんわり思っています（Webフロントエンドはフォーム作成ばかりで飽きた）
FOVEとOculus GOは持ってますが、もう下火なのでOculus Quest2はほしい感じがします。
でわでわ、来年もよろしくお願いしますビックリマーク

2019に出来たこと

今年も振り返りしてみたニヤリ
このブログ、もはや1年の振り返りしか使って無いですね。

 

去年はこんな事をかいていた　→ クリップ2018に出来たこと

 

2019年の目標は3DCGやWebGLを再開して、どこかで登壇したいと書いてますね。
今年はThree.js Meetupに登壇したり、再び3DCGの興味UPして達成してましたビックリマーク

というか目標が低すぎたせいもありますが、やっとWebGL周りの情報を更新できた。
3DCGやWebXR周りの情報チェックしてたら「8th-WallってARは何？」や「今のグラボはGTXじゃなくて、RTXなんてあるの！？」とか色々と知識がレガシー化してました汗

 

１）プライベートの勉強
正月に機械学習入門してから放置して、最近はHand TrakingしたくてTnsorFlow.jsを触ってます。
WebGL系ではデータ可視化に興味が出て、Uber社のDeck.GLとか勉強してました。
blenderは2.8リリース後に再開してチュートリアルで少しずつ触ってますね。

 
また、Three.jsを使った最近人気のライブラリを調べたり、Three.jsのgithubやForumをWatchしてました。

たぶん、Three.js MeetUpがなければダラダラと勉強してたと思います（あれが機会でモチベUPした）

アドベントカレンダーもはじめは人が少なかったので、4本書きました。

登壇とか久々で色々と追い詰められたけど、ちゃんとエンジニア活動した感じがします。

やる気が出てきてLooking Glassも買っちゃいましたひらめき電球

 

２）趣味
サーフィンは相変わらず毎週行ってますね（10月は休日も業務スキルUPで行けてないけど）

最近は少しスランプ気味なので、人の滑りをよく観察するようになりました。

乗ってる時間より観察時間が長いけど、学びがたくさんありました！
前はコナミスポーツで泳いでたけども、忙しくていけない事が多かったので、解約してちゃいました。

３）仕事
blender仲間から声をかけられて、活躍できて満足できる環境を目指そう！って思い、転職活動をし始めました。
そして、8月で1年働いたWeb＆3Dコンテンツ制作の会社を退社しました（表参道でお洒落なオフィスで良かったけど、自分のキャリアパスと少し合わなかったため）
たまたま、ForkWellで自分の尊敬するエンジニアが多数いる会社に声をかけられたのがきっかけで、

9月に今の会社に転職しました。

自分がエンジニアになってから、神レベルと思うエンジニアが3人いる会社とかなかなかないので。

ただ、入社してから3ヶ月間はスキル不足過ぎて、帰宅後や休日もスキルUPに時間を費やしてました（Angular、TypeScript、RxJs、Jasmine、Jest、Redux、Python & Falcon、OpenAPIなど）

業種は同じくWeb系だけど3Dプリンターも絡むので、3Dファイルも扱います。
最近やっと業務スキルレベルに達したので、改善活動や業務効率化など取り組んでいけそうニコ

3DプリンターにもWeb APIとかあるので、何か作って遊びたいです！

 

 

来年の目標
１）Three.jsのコミュニティ活動の活発化

　Three.js Meetupのオーガナイザーになったので、コミュニティ活動をしていきます。

　（翻訳やPR、キャッチアップした情報共有や制作物のLTなど）

 

２）作品や3Dモデル制作の公開

　Three.js系の活動しつつ、Looking Glassのコンテンツ制作をしていく予定です。

　何々をやってる人とか認知されるようになりたいですね。

　blenderでオリジナルモデルを作って、Skecthfabで公開もしたいと思います。

　ワンフェスや何かしらの展示会に出展したいですおーっ！

 

３）英会話スキルUP

　将来的にはインドネシアに住みたいと思うので、日常会話レベルOKにしたいです。

　DMM英会話やゼブ島留学などするかは未定だけど、インドネシアは一度観光いきたい。　

 

４）身体能力の強化

　長時間サーフィンができるように強化したいですね。あと心の余裕というか平穏を得たい。

　またサーフィンスクールやヨガスクールを再開しようかと。

 

精神的に余裕が出てきて前職のLive2D社も応援したいと思うので、何かしら協力したいと思います。
でわでわ、来年もよろしくお願いします！

2018に出来たこと

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

 

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

 

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

 

 

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

 

 

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

 

 

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

 

 

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

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

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

2017に出来たこと

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

 

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

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

 

残業時間と新しい事への学習時間が半端ないし、関ゲ部や東ゲ部など勉強会の参加も絡み少なすぎだった（関ゲ部と東ゲ部は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はこんな感じ

　 

 

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

 

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

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

 

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

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

2016に出来たこと

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

 

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

 

 

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

 

 

１）セミナーや登壇など

　・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寺子屋に参加して、基本操作などは覚えました。
　　作りたいモデルはあるけど、結局手付かずでした...。
 

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

 

２）ブログ更新

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

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

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

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

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

 

 

３）仕事について

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

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

 

 

ひらめき電球来年の目標

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


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

 

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

ブループリントで-10～10を繰り返す

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

AndroidのChromeデバッグ

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

 

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

 

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

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

 

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

 

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

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

GrayちゃんをWebGLで描画トライ

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

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


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


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

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


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

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

エラー内容：

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


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


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

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


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


３）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画像エディターでテクスチャマッピングします。
体についてはマルチテクスチャのため、シームごとに選択して調整しました。

 



４）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>

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




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

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

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

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



５）COLLADA出力させる

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

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

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

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


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

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



６）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>
でもなぜか上手くいかず・・・。とりあえず先に進みます。



７）アニメーション再生する

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ツールの競合エラー

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

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

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



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

ワコムタブレットの反応悪い時

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

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

次ページ >>