You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
先週あたり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プロジェクトを元にカスタムしています。 Live2D_DragDrop │ │ index.html │ ├─framework │ Live2DFramework.js・・・SDK付属のフレームワーク │ ├─lib │ live2d.min.js・・・Live2Dのコアライブラリ │ └─src Simple.js <!DOCTYPE html> <html> <head> <meta charset
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などでインタラクティブな胸揺れする場合は物理演算を使うと便利かと思います。 ぶっちゃけ言うとモーションファイルや物理演算ファイルは、サンプルモデルから流用してもOKです。 サンプルの物理演算ファイルに、胸揺れがなかったのでさせてみました。 準備するもの Modelerソフトのメニューからmocを書き出して、mocファイルをViewerにドラッグ&ドロップします (moc出力したフォルダでもjsonファイルをドラッグ&ドロップしてもOKです) ※ 書き出しはM
Live2D Advent Calendar 2015の17日目の記事です。 意外と知られてなさそうなので、パーツの表示・非表示させる小ネタを紹介します。 やり方としては、以下の2つあると思います。 1)Modelerでパラメーター制御する方法 2)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モデルを表示 1)まずはLive2DのSDKをダウンロード Live2Dのサイトにいき、CubismSDK(WebGL)をダウンロードしてきます。 2)Webサーバを準備する 今回は簡単にWebサーバが起動できる無料エディタ Br
Live2D Advent Calendar 2015の1日目の記事です! 1日目なのでLive2D入門について軽く書こうと思います。 自分が初めてLive2Dに触った時は、Live2Dのミク本で勉強しました。 2年前はまだ便利機能がなく大変でしたが、今はソフトがバージョンアップして使いやすくなっています。 テンプレート機能で簡単モデリングしてみる 今なら5ステップぐらいで簡単にモデリングできます 1)PSDインポート PSDをインポートするだけでポリゴン割りが完了! 2)テンプレートを適用 テンプレートを適用するだけでモデリング工程が大幅に短縮できます 3)パーツを関連付ける パーツ関連付きがずれてるものを合わます(この場合は髪と腕が関連付いてしまってる) 4)動かしてみておかしい部分の修正 白い点を動かしてまぶたが閉じるように修正 5)Viewerで表示する Live2D Viewer
Live2DのWebGL版で複数のCanvas表示が可能になっています。 SDKサンプルコードのSimpleプロジェクトをクラス拡張すると、複数表示可能です。 複数CanvasにLive2Dモデルを表示する 1)まずはLive2Dモデルファイルをassets配下に置きます 2)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()"> <
自分が作ったものが2本腕が表示されるバグがあったので、WebGLのSampleApp1プロジェクトもコードリーディングしてみました。 ちなみにWebGL部分のソース解説はないですが、もう少し情報整理できたらそのうち書こうと思います。 SampleApp1のクラス関連図 基本はUnityと同じクラス名ですが、Frameworkのクラスが1つにまとめられてます 解析した結果、pose.jsonというポーズを決めるファイルが読めてなかった...。 読み込ませて無事に解決しました。 ついでにmodel.jsonとフォルダパスを指定するだけでLive2Dモデルを表示し、モーションチェンジするものを作りました(SDK付属のSimpleプロジェクトから作りました) フォルダ構成 フォルダ構成はこんな感じでPlatformManager.jsとLAppLive2DManager.jsは、SampleApp
誰が得するかは分からないが 2D でモーフィング(またはスプライト形式のアニメーション)が出来るソフトをここにまとめてみる。一部を除いて基本的には商用製品として提供されている。 Live2D 国内では有名な商用の 2D モーフィングソフト。商用実績も多い。Cubism 系が製品名であり、エディタと SDK でわかれている。現在は 2.1 がリリースされている。 回転または曲面ベースのデフォーム ドキュメントは豊富 なのだが Cubism Documents をたどるには公式サイトから数ステップ必要なのでわかりにくい インディーズなら条件付きで商用も無料 SDK のベースは C++ だが Pro じゃない方の Unity で使える C# 版もある ドキュメントは Cubism SDK にある Cubism Editor は Java (JavaFX?) で、ビューアは AIR の上で作られて
腰を抜かしました。 なにに抜かしたってもう、本日更新された「ほぼ日刊イトイ新聞」の新連載、「バルミューダのパンが焼けるまで。」です。ある意味これは、公共財のようなお手本として記録しておいたほうがいいんじゃないか。そんな(ほんとに勝手な)使命感から、いまこれを書いています。読んでおもしろい投稿かどうかはわかりません。ちょうど書評のような、ネットコンテンツ評と思って読んでいただけるとありがたいです。 まず、なにはともあれ第一回の記事を読んでみてください。どんな立場の誰が読んでもおもしろいに決まっていますので。 ……ねえ。なんだかもう、見事な時代劇を見ているような感じでしょう。もちろん今回最大の見どころは、日本屈指の聞き手である糸井重里さんの「聞き」です。もちろんそこにもびっくり仰天だったのですが、とにかくこの記事は、構成がすばらしいんですよ。インターネット時代、縦スクロール時代の、構成のお手本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く