2016年8月27日土曜日

Live2D を使ってみました 2016

Live2D makes it possible to animate pictures

昨年のLive2D alive2015 に続き、Live2D alive2016 を見学してきました。
blog.fujiu.jp Live2D を使ってみました 2016
Live2Dは昨年の7月から1年の間に使いやすくバージョンアップしていたのでおさらいしてみました。


Live2Dとは

2次元の画像を擬似的に立体化して3次元CGのように動かすことが出来るCG作成ソフトです。
Live2Dのエディターは次の2種類があります。
  • Live2D Cubism Modeler
    2次元の画像からテクスチャマッピングやポリゴンを自動生成してデフォーマパラメータを定義するエディター。
    3次元CGで例えると、Live2Dのデフォーマはアーマチュアでパラメータはモーフのような機能です。
  • Live2D Cubism Animator
    モデルとパラメータを使ってモーションをつけ、動画に書き出したりアプリ用のデータなどを出力するエディター。
Live2Dで開発したコンテンツはUnity3Dなどにインポートしてアプリケーションに利用できます。
Unreal Engineへの対応も予定とのことでした。
この他に、首から下を3次元CG(FBXフォーマット)で表現するVR向けソリューションのLive2D Euclidも開発中とのことです。


環境

  • Windows 10
  • Live2D Modeler Cubism 2.1.12


PSDファイルの取り込みが容易になった

PSDファイルを取り込んだあとの手直しがほとんど不要になりました。
数値指定によりポリゴンを自動で高精度に分割できます。


反転機能が追加された

昨年の時点では目やまゆ毛のデフォーマは左右それぞれ指定する必要がありました。
最新版では左右対称や上下対称のコピー・ペーストができるので工数を減らすことができます。
下の画像は右目をデフォーマごと左目に反転コピーした結果です。変形パスは右目しかありませんが、左目も同じように動かせます。


元の形状に戻す機能が追加された

変形したオブジェクトを元の形状に戻すための機能が追加されました。


以上、特に便利だった三点を挙げました。
この他ポリゴンの分割を細分化して画像変形を滑らかに強化、After Effectesのサポート、オブジェクトの表示範囲を制限するクリッピング機能の追加など多数の点が強化されて今後も進化するとのことです。


ハードルの高さは相変わらず

パーツごとにレイヤーが分かれたモデルの画像が必要な点は変わりません。
目や口は閉じたときは下の絵にかぶせるマスキング用のパーツも必要です。
Live2Dモデル用画像が用意できない開発者にはハードルの高さは相変わらずです。

今回はMMDモデルからLive2D用画像を用意して練習しました。


こちらはポケットクエリーズ( http://pocket-queries.co.jp/) のクエリちゃん。
分割できるパーツが少なかったですが、思った以上に動かせました。


東北ずん子のように長い髪は扱いが難しいです。


Live2Dで開発するメリット

動きのあるキャラクターを表現するなら3次元CGの方が有利に思えますが、alive2016の事例では同じキャラクターに複数の衣装を用意するようなコンテンツはLive2Dでの開発に向いているようでした。


GIMPのPSDファイルをインポートすると文字化けする

今回用意した画像はGIMPでPSDに書き出したのですが、Live2D Cubism Modelerにインポートしたらレイヤーの名称が文字化けしました。
Live2DがサポートするPSDファイルはAdobe Pohotoshopで書き出したもので、GIMPのPSDファイルはサポート外です。
次に挙げる方法で解決できるようです。
  • GIMPのレイヤー名に半角英数(ASCII文字)にする
  • gimp-for-painters を使う
  • CLILP STUDIO PAINT を使う
  • Adobe Pohotoshop を使う


関連ブログ

[GIMP] GIFアニメーションの作り方
CLIP STUDIO PAINT を使ってみました
VOCALOID SDK for Unityでユニティちゃんにvsqxを歌わせる方法
VOCALOID SDK for Unity でユニティちゃんをリアルタイムに歌わせる方法
[Unity3D] ユニティちゃんたちのアニメーションを分離するスクリプト
Blenderで作ったアニメーションがUnity3Dで違う動きをする原因と直し方

以上、参考になれば幸いです。

2016年8月20日土曜日

Blender 起動時の EXCEPTION_ACCESS_VIOLATION の解決方法

How to fix Blender crashes on startup

OSをWindows 10にアップグレードしてから3次元CG編集ソフト・Blenderが起動したりしなかったりするようになりました。
Blenderを起動するとコマンドプロンプトに

と表示され起動しません。
コマンドプロンプトはすぐに消えます。
何度も起動を繰り返すと正常に動作することがあります。


環境

  • Intel統合型グラフィックスとNVIDIAプロセッサーを搭載したパソコン
  • Windows 10
  • Blender 2.77


グラフィックス・ドライバーの最新版をインストールする

NVIDIAプロセッサーの最新のデバイスドライバーをインストールしたら解決しました。
blog.fujiu.jp Blender 起動時の EXCEPTION_ACCESS_VIOLATION の解決方法


Blenderが常にNVIDIAプロセッサーを使う設定にする

今回はドライバーのバージョンアップで解決しましたが、このエラーは様々な原因で起こるようです。
Intel統合型グラフィックスの他にグラフィックスを搭載しているPCで起きた場合、BlenderがIntel統合型グラフィックスを使わない設定にすると動作するようになったという海外の投稿がありました。
実際にその設定をしたときの手順をまとめました。

スタートメニューのBlenderを右クリックして
ファイルの場所を開く
をクリック。

Blenderのショートカットアイコンを右クリックして
グラフィックプロセッサと共に実行 - 規定のグラフィックプロセッサを変更する
をクリック。

NVIDIA コントロール パネル が表示されるので
3D 設定の管理
の追加をクリック。

プログラムの選択で Blender を選択して 選択したプログラムを追加する
一覧にBlenderがない場合は参照ボタンをクリックしてblender.exeを選択する。

Blenderの設定を高パフォーマンス NVIDIA プロセッサ
に変更し右下の適用をクリック。


関連ブログ

[Blender] Pythonで複数の設定を一瞬で編集する方法
BlenderのモデルデータをMMDに変換する方法
[Blender] ボーンを曲げてもメッシュが曲がらない原因と修正方法
Blenderで作ったアニメーションがUnity3Dで違う動きをする原因と直し方
[Unity3D] ユニティちゃんたちのアニメーションを分離するスクリプト
[Unity3D] Blender could not be found.を解決するには

以上、参考になれば幸いです。

2016年8月13日土曜日

「Firefoxは現在Twitterに接続できません」の対処方法

How to fix to be unable to connect with SNS

2016年のはじめ頃からFirefoxの共有ボタン(髪飛行機のアイコン)からSNSの投稿ができなくなってしまう不具合が発生しました。
ツイッターへ投稿しようとすると次のようなメッセージが表示されます。
Firefox は現在 Twitter に接続できません。
英語版のメッセージは "Firefox is unable to connect with Twitter right now"
blog.fujiu.jp 「Firefox は現在 Twitter に接続できません」の直し方

このブログを書いている時点で最新版のFirefoxでもこの不具合は直ってません。
この不具合が起きたときの対処方法をまとめてみました。


環境

  • Windows 10
  • Firefox 47


対処方法1・Service Workerのオリジンを解除する

正しい直し方は今のところ不明ですが、同じ不具合のあった複数のFirefoxで直った方法が次の通りです。
FirefoxのURL欄に次の通り入力します。


登録されたService Workerの一覧が表示されます。

「オリジン: https://twitter.com」の直後にある 登録解除 (Unregister) ボタンをクリックします。

これでシェアボタンからSNSに投稿できるようになりました。

ただしFirefoxでTwitterのWebサイトを開くたびにService Workerが登録されてしまいうため、完全な解決手段ではありません。


対処方法2・Service Workerを無効にする

次の設定でService Workerを無効にすることができます。
about:config の画面で dom.serviceWorkers.enabled を false に設定してFirefoxを再起動します。
これでTwitterのWebサイトを開いてもService Workerが登録されなくなり、シェアボタンからいつでもSNSに投稿できるようになりました。


Service Workerを無効にしてよいのか

MDNによるとService Workerは2016年1月の時点で「ほとんどの機能は正しく動作しません」としています。
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API
不具合で困るようなら無効にした方がよいと思われます。


関連ブログ

[Fiferox] Firefox のURLの左に隙間が出来たときの直し方
JavaScriptをWebコンテンツを見ながらデバッグする
HTMLソースのミスやエラーを素早くチェックする
FirefoxでJavaSriptが応答しなくなるサイトの対策と高速化
[セキュリティ] Twitterの「このリンクは安全ではない」「このリクエストを保留しています」の対策2015年版

以上、参考になれば幸いです。

2016年8月6日土曜日

Windows 10 Anniversary Update をクリーンインストールする方法

How to do a clean install of Windows 10 Anniversary Update

2016年8月、Windows10にAnniversary Updateと呼ばれる大型アップデートが施されました。
今回はアップグレードではなく、PCを初期化してWindows10 Anniversary Update をクリーンインストールをしてみました。
blog.fujiu.jp Windows 10 Anniversary Update をクリーンインストールする方法


環境

  • セキュアブート非対応、8GBのRAMを搭載したPC
  • Windows10にアップグレード済みのプロダクトキー


Windows10のインストール用メディアを作成する

公式サイトからWindows10のインストール用メディア作成ツールをダウンロードしUSBフラッシュメモリーかDVD-Rに書き込みます。
Windows 10 のダウンロード: http://www.microsoft.com/ja-jp/software-download/windows10

USBフラッシュメモリーでのインストールは過去に失敗したことがある のでDVD-Rでインストールすることにしました。
ちなみに2016年8月3日にダウンロードしたら Anniversary Update 適用済みのバージョン 1607、ビルド番号 14393.0 のWindows10でした。


プロダクトキーを確認する

フォーマットしてからプロダクトキーが分からないトラブルを避けるため、フォーマット前にプロダクトキーを表示するソフトで記録しておくことをお勧めします。
Recover lost Windows product key: http://www.nirsoft.net/utils/product_cd_key_viewer.html


バックアップをとりアプリケーションのアクティベーションの解除をしておく

フォーマットする前に大事なファイルは外付けハードディスクなどにバックアップします。
ドキュメントフォルダー、ブラウザーのお気に入りなどの設定ファイル、メール、アドレス帳、IME(ATOK)の辞書など

また、アクティベーションの解除が必要なソフトも可能な限り解除します。
ボーカロイドのアクティベーション解除はこちら
VOCALOID Deactivation Tool を使ってみました


Windows10インストール用メディアから起動する

UEFI搭載のPCならShiftキーを押しながらWindowsを再起動して
トラブルシューティング
詳細オプション
UEFIファームウェアの設定
を選択します。

設定画面が表示されたら起動ドライブをDVDドライブに設定します。

レガシーBIOS搭載のPCなら起動時のPOST画面表示中にF10キーを押してBIOS設定画面で起動ドライブをDVDドライブに設定します。


インストール

インストール用メディアが起動するとWindows10のインストールがウィザード形式で進みます。
プロダクトキーを入力したあと、インストールの種類はクリーンインストールしたいので「カスタム」を選択します。

Windowsのインストール場所を選びます。インストールしたいパーティションを削除・初期化して「次へ」
その後はほぼ自動です。


インストール完了

インストール完了後、いくつかの初期設定をして利用できるようになります。
コマンドプロンプトに winver.exe と入力してバージョン 1607 になっていればWindows 10 Anniversary Updateのクリーンインストール完了です。

目玉機能の一つ・Microsoft Edge用Adblock Plusがストアアプリからインストールができました。

クリーンインストールはバックアップしたりアプリケーションをインストールし直したり手間がかかりますが、知らずに溜まった不要なファイルがない状態から使い始めることができます。
何年も使い続けて動作が遅くなったPCならレスポンス向上の効果が期待できます。

なお、初期化をしなくてもインストールメディアの setup.exe を実行すればアップグレードインストールもできるようです できました。(2016年8月7日追記)


関連ブログ

[Windows10] バックアップボリュームにアクセスできない原因と対処方法
Windows10のバックアップと復元を使ってみました
[Windows10] ファイルの共有と解除を自動化する方法
[Windows10] 外国語を簡単に入力する方法
bashスクリプトの変数のスコープにはまったところと対処方法

以上、参考になれば幸いです。