Live2D WebGLの活用事例 Live2D SDKのワークフロー Live2D WebGL SDKの解説(ハンズオン) Live2Dモデル差し替え パラメーター操作 プログラム処理の流れ Live2Dモデルの位置・サイズ指定 モーション再生 Live2D APIについて マウスドラッグ操作
Live2D WebGL SDKではファイルパスが見えてしまい、モデルデータがDLできてしまう問題点がありました。 せっかくモデル作ったのに、WebGLで公開するとモデルデータが盗られるのはとても残念ですっ! (※ ちなみにUnityのWebGL書き出しでは、バイナリ化されており問題ないです) 解決策ですが、サーバーサイド(PHP)でモデルデータをロードすれば防げました。 処理の流れとしては、以下の感じでいけます。 1. mocファイルをphpでロード(Base64形式) 2. ロードしたデータをphpからjsに渡す 3. jsでBase64形式からArrayBufferへ変換 4. ArrayBufferをモデルデータとしてロード 開発環境 Live2D WebGL SDK2.1 MAMP(PHP用) テスト検証 SDKサンプルのSimpleプロジェクトを元にテストをしてみました。 手順
Live2D WebGLの活用事例 Live2D SDKのワークフロー Live2D WebGL SDKの解説(ハンズオン) Live2Dモデル差し替え パラメーター操作 プログラム処理の流れ Live2Dモデルの位置・サイズ指定 モーション再生 Live2D APIについて マウスドラッグ操作
「Three.js」はWebGLを使ったリッチな3D表現が使用できる人気のライブラリ。ところが、Three.js公式サイトで紹介しているWebGL有効判定はAndroid 4系のWebView向けのWebGL有効判定が不十分なので、WebGLコンテンツを表示させようとすると真っ黒になるという最悪の事態が発生します(2016/3/2現在 ver74)。Android 4.03からアップデートした4.4の一部でも同様の現象を確認しました。2016/3/2現在、Android 4系のユーザーは62%(参考:「Android Developers」)もいますので、スマートフォン向けWebGLコンテンツを作るならば決して無視できないバグです。 このエントリーではこの現象の原因と解決策を紹介します。 #何が起こっているのか 下記はAndroid 4.1.2の標準ブラウザ、iOS 9.2.1のMobil
Live2D WebGLの活用事例 Live2D SDKのワークフロー Live2D WebGL SDKの解説(ハンズオン) Live2Dモデル差し替え パラメーター操作 プログラム処理の流れ Live2Dモデルの位置・サイズ指定 モーション再生 Live2D APIについて マウスドラッグ操作
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く