Web版でLive2DとFaceRigアルゴリズムの再現 - Qiita
先週あたりFaceRig SoftwareがLive2Dのモジュールをリリースしたのことで、自分も同じようなものをWeb版で作ってみようかと思いました。 Live2Dモジュール紹介動画：https://www.youtube.com/watch?v=IINyowbMqJI 以前にOpenGL版でLive2Dを動かしたことがあったので、それを元に作り上げていこうと思いました。 以下のものはLive2Dのウェブ版のサンプルから取り上げられたものです。 次に、顔のトラッキングを行うライブラリーもあったので、そのトラッキングアルゴリズムからでるパラメータでLive2Dのアバターを動かすように作ろうと考えた。 https://github.com/yutarochan/clmtrackr 元のLive2Dのアバターは、マウスやタッチなどといった方法で顔の角度を動かしていました。これを、トラッキングア
Live2D FaceRig Avatars ドキュメント 和訳
Live2D FaceRig Avatars ドキュメント 和訳 共有ログインお使いのブラウザのバージョンはサポートが終了しました。 サポートされているブラウザにアップグレードしてください。閉じる ファイル編集表示ツールヘルプユーザー補助機能デバッグ
簡易Live2DViewer作ってみた - Qiita
Live2D SDK WebGL版で簡易Live2DViewer作ってみました。 Live2Dモデルのファイルをサーバーにアップロードさせたくなかったので、全てHTML5の機能で実装してます。 ファイル選択とファイルのドラッグ＆ドロップに対応しています （テクスチャは複数選択してドラッグ＆ドロップして下さい） ・簡易Live2DViewer フォルダ構成 Live2D SDKのSimpleプロジェクトを元にカスタムしています。 Live2D_DragDrop │ │ index.html │ ├─framework │ Live2DFramework.js・・・SDK付属のフレームワーク │ ├─lib │ live2d.min.js・・・Live2Dのコアライブラリ │ └─src Simple.js <!DOCTYPE html> <html> <head> <meta charset
WebGLとCanvas2Dを併用してみる - Qiita
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で胸揺れ物理演算してみる - Qiita
Live2Dには、モデリングソフトとモーション付けソフトの他にLive2D ViewerというFlash製の動作確認ツールがあります。 Viewerを使うと髪揺れなどの物理演算の値を簡単に編集できます。 Live2Dのワークフロー Unityに組み込む時のワークフローとしてはこんな感じです モーション付けソフトでも作れますが、Unityなどでインタラクティブな胸揺れする場合は物理演算を使うと便利かと思います。 ぶっちゃけ言うとモーションファイルや物理演算ファイルは、サンプルモデルから流用してもＯＫです。 サンプルの物理演算ファイルに、胸揺れがなかったのでさせてみました。 準備するもの Modelerソフトのメニューからmocを書き出して、mocファイルをViewerにドラッグ＆ドロップします （moc出力したフォルダでもjsonファイルをドラッグ＆ドロップしてもＯＫです） ※ 書き出しはM
Live2Dでパーツ表示・非表示させる2つの方法 - Qiita
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%にしてます。 あくまで「こんな感じでできるんじゃね？」と思い設定したものなので、参考程度にして下さい。 ちなみに閉
Live2DのWebGL版は今週公開 - Qiita
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事始め！ - Qiita
Live2D Advent Calendar 2015の1日目の記事です！ 1日目なのでLive2D入門について軽く書こうと思います。 自分が初めてLive2Dに触った時は、Live2Dのミク本で勉強しました。 2年前はまだ便利機能がなく大変でしたが、今はソフトがバージョンアップして使いやすくなっています。 テンプレート機能で簡単モデリングしてみる 今なら5ステップぐらいで簡単にモデリングできます １）PSDインポート PSDをインポートするだけでポリゴン割りが完了！ ２）テンプレートを適用 テンプレートを適用するだけでモデリング工程が大幅に短縮できます ３）パーツを関連付ける パーツ関連付きがずれてるものを合わます（この場合は髪と腕が関連付いてしまってる） ４）動かしてみておかしい部分の修正 白い点を動かしてまぶたが閉じるように修正 ５）Viewerで表示する Live2D Viewer
Live2Dで複数Canvasにモデル表示 - Qiita
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()"> <
Live2DのWebGL版をコードリーディング - Qiita
自分が作ったものが2本腕が表示されるバグがあったので、WebGLのSampleApp1プロジェクトもコードリーディングしてみました。 ちなみにWebGL部分のソース解説はないですが、もう少し情報整理できたらそのうち書こうと思います。 SampleApp1のクラス関連図 基本はUnityと同じクラス名ですが、Frameworkのクラスが1つにまとめられてます 解析した結果、pose.jsonというポーズを決めるファイルが読めてなかった...。 読み込ませて無事に解決しました。 ついでにmodel.jsonとフォルダパスを指定するだけでLive2Dモデルを表示し、モーションチェンジするものを作りました（SDK付属のSimpleプロジェクトから作りました） フォルダ構成 フォルダ構成はこんな感じでPlatformManager.jsとLAppLive2DManager.jsは、SampleApp
中の人(二次元)になる方法【FaceRig × Live2D × Unity × OBS × AVVoiceChanger × 気合】 - Qiita
こんにちはGOROmanです。 皆さんは「中の人になってみたい！」と思ったことはありますか？私はあります。この記事では私が実際にFaceRigとLive2Dを使って二次元の中の人になるまでの手順を自分の経験を元に記載しておきます。今後皆さんが「中の人(キャラクター)になりたい！」と思った時にお役に立てば幸いです。 くわしくはこちら Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
FaceRigでLive2Dアバターを動かしてみる - Qiita
はじめに 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アバタ
Unite2014公演してきました : Live2Dスタッフブログ♪
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ページを開く
Google Drive: Sign-in
Sign in - Google Accounts
Unite2014 Live2D x Unity x Kinect 1