先週あたりFaceRig SoftwareがLive2Dのモジュールをリリースしたのことで、自分も同じようなものをWeb版で作ってみようかと思いました。 Live2Dモジュール紹介動画：https://www.youtube.com/watch?v=IINyowbMqJI 以前にOpenGL版でLive2Dを動かしたことがあったので、それを元に作り上げていこうと思いました。 以下のものはLive2Dのウェブ版のサンプルから取り上げられたものです。 次に、顔のトラッキングを行うライブラリーもあったので、そのトラッキングアルゴリズムからでるパラメータでLive2Dのアバターを動かすように作ろうと考えた。 https://github.com/yutarochan/clmtrackr 元のLive2Dのアバターは、マウスやタッチなどといった方法で顔の角度を動かしていました。これを、トラッキングア
このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。
Live2D SDK WebGL版で簡易Live2DViewer作ってみました。 Live2Dモデルのファイルをサーバーにアップロードさせたくなかったので、全てHTML5の機能で実装してます。 ファイル選択とファイルのドラッグ＆ドロップに対応しています （テクスチャは複数選択してドラッグ＆ドロップして下さい） ・簡易Live2DViewer フォルダ構成 Live2D SDKのSimpleプロジェクトを元にカスタムしています。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Simple</title> </meta> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maxim
WebGLとCanvas2Dを併用できないかな〜とぼんやり考えてたら、以下のAPIを見つけました。 ・Canvasリファレンス なんと第1引数のimageにimg要素、canvas要素、video要素が指定できるとっ！ これで描画して更新すれば、canvas2DにWebGL描画できそうなのでやってみました。 WebGL描画をCanvas2Dに描画 ソースはこんな感じです。 ここには書いてないですが、別途WebGLのcanvasをgetElementByIdし、変数canvasを渡しておきdrawImageの第1引数に指定します // WebGLのcanvasとは別に、2D用のcanvasタグをHTML側に作って参照する var can_2d = document.getElementById("2dcanvas"); var ctx_2d = can_2d.getContext("2d")
Live2Dには、モデリングソフトとモーション付けソフトの他にLive2D ViewerというFlash製の動作確認ツールがあります。 Viewerを使うと髪揺れなどの物理演算の値を簡単に編集できます。 #Live2Dのワークフロー Unityに組み込む時のワークフローとしてはこんな感じです モーション付けソフトでも作れますが、Unityなどでインタラクティブな胸揺れする場合は物理演算を使うと便利かと思います。 ぶっちゃけ言うとモーションファイルや物理演算ファイルは、サンプルモデルから流用してもＯＫです。 サンプルの物理演算ファイルに、胸揺れがなかったのでさせてみました。 #準備するもの Modelerソフトのメニューからmocを書き出して、mocファイルをViewerにドラッグ＆ドロップします （moc出力したフォルダでもjsonファイルをドラッグ＆ドロップしてもＯＫです） ※ 書き出し
Live2D Advent Calendar 2015の17日目の記事です。 意外と知られてなさそうなので、パーツの表示・非表示させる小ネタを紹介します。 やり方としては、以下の2つあると思います。 １）Modelerでパラメーター制御する方法 ２）pose.jsonで制御する方法（アプリを作る人のみ） Modelerでパラメーター制御する方法 例えば、こんな感じのことをやりたい時 僕の場合は、まぶた部分のパーツの不透明度は以下のようにしています。 ###◆まぶたAのパラメーター まぶたAのパラメーターは-0.1〜1.0の間を持っていて、-0.1〜0.0の間で不透明度を0〜100%切り替えてます。 ###◆まぶたBのパラメーター まぶたBのパラメーターは-0.1のみあり、不透明度を100%にしてます。 あくまで「こんな感じでできるんじゃね？」と思い設定したものなので、参考程度にして下さい。
WebGL Advent Calendar 2014の15日目の記事になります。 Live2Dとは？ 1枚の2Dイラストからぬるぬる動かす技術です。 2Dと3Dの間にある技術のため、2.5Dとも言われています。 WebGL-β版は今週公開予定です 遅くなってすいませんが、今週中には公開されます。 以下の内容は、公開に先行した内容となっていますのでご注意下さい。 Live2DのソフトとSDKは無料で使う事ができます。 実際に触ってみたい方は以下のページにアクセスしてみて下さい。 WebGL対応でiPhoneのブラウザでもLive2Dアプリ！ WebGLでLive2Dモデルを表示 １）まずはLive2DのSDKをダウンロード Live2Dのサイトにいき、CubismSDK(WebGL)をダウンロードしてきます。 ２）Webサーバを準備する 今回は簡単にWebサーバが起動できる無料エディタ Br
Live2D Advent Calendar 2015の1日目の記事です！ 1日目なのでLive2D入門について軽く書こうと思います。 自分が初めてLive2Dに触った時は、Live2Dのミク本で勉強しました。 2年前はまだ便利機能がなく大変でしたが、今はソフトがバージョンアップして使いやすくなっています。 #テンプレート機能で簡単モデリングしてみる 今なら5ステップぐらいで簡単にモデリングできます １）PSDインポート PSDをインポートするだけでポリゴン割りが完了！ ２）テンプレートを適用 テンプレートを適用するだけでモデリング工程が大幅に短縮できます ３）パーツを関連付ける パーツ関連付きがずれてるものを合わます（この場合は髪と腕が関連付いてしまってる） ４）動かしてみておかしい部分の修正 白い点を動かしてまぶたが閉じるように修正 ５）Viewerで表示する Live2D Viewe
Live2DのWebGL版で複数のCanvas表示が可能になっています。 SDKサンプルコードのSimpleプロジェクトをクラス拡張すると、複数表示可能です。 複数CanvasにLive2Dモデルを表示する ###１）まずはLive2Dモデルファイルをassets配下に置きます ###２）HTML側のCanvasを複数にします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Simple</title> </meta> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0"> </meta> </head> <body onload="Simple
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Live2D Simple</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=4.0"> </head> <body onload="Simple()"> <!-- 選択ボタン --> <span style="font-size:14px;">モーション選択</span> <select id="selectmenu" onchange="motionChange()"></select> <br> <canvas id="glcanvas" style="border:dashed 1px #CCC
はじめに FaceRig Live2D Moduleが人気なようなので、既に多くの野生のプロの方々が解説してくれていますが、自分も使い方について記事にしてみようと思います。 参考元(2016/1/16 修正と追記) 公式ドキュメント 公式ドキュメント(和訳) 手前味噌ですがdocsで和訳しておきました 和訳ドキュメント 説明すること FaceRigにLive2Dモデルを追加する方法 FaceRigで表現できるLive2Dモデルのパラメータ FaceRig Live2D Moduleのコンフィグファイルの書き方1 説明しないこと Live2Dモデルの作成 Live2Dモデルのモーションファイルの作成方法 FaceRig上のUIについて FaceRigについて Steamで公開されているFaceRigというソフトウェアがあります。 FaceRigはWebカメラで顔を認識し、顔の動きを3Dアバタ
4月11 Unite2014公演してきました なんだか本ブログの更新は久しぶりですが、最近はLive2Dを広めるために各地で活動しています。美術系の学校で公演したり、GDC出展のため海外に出張したりしてました。 そして今週は、Unity最大のイベントであるUnite2014で「Live2D x Unity x Kinect」というタイトルで公演してきました。 タイトル通り、Unity上で、Live2Dキャラクターを、Kinectで体感的に動かす、という内容です。 Kinect以外にも、普通のゲームコントローラ、マイク、視線センサー、空中ジェスチャ操作デバイスなどいろいろなセンサーデバイスとの連動について話してきました。公演自体の動画はおそらくUnite公式サイトのアーカイブでいずれ公開されると思います。 作ったものの参考動画はこんな感じです。 Leap Motionを使ってみた動画 Eye
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
