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スクリプトの変数のスコープにはまったところと対処方法

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

2016年7月30日土曜日

digiKam パソコン内の画像ファイルを簡単に探せるフリーソフト

digiKam makes it possible to find image files in PC quickly

パソコンに保存された画像ファイルが増えと探すのに手間取ります。
そこで digiKam という寄付歓迎のオープンソース・ソフトウェアをインストールしてみました。
digiKam はパソコンやネットワーク共有ドライブに保存された画像をサムネイル表示・検索・タグ付けなどの管理ができるほか、画像編集機能も備えたソフトです。
Adobe Bridgeに似ています。
Windows、Mac、Linux、FreeBSDに対応しています。
多機能なソフトですがインストールからタグ付けまでの方法をまとめてみました。
blog.fujiu.jp digiKam パソコン内の画像ファイルを簡単に探せるフリーソフト


環境

  • Windows 10
  • digiKam 4.12.0
最近digiKamは5.0にバージョンアップしましたが、4.12とだいたい同じです。
※ Windows版digiKamはKDE SCライブラリー由来のバグがあるので要注意とのことです。


ダウンロード

公式サイトからWindows用インストーラーをダウンロードします。
http://download.kde.org/stable/digikam/
このブログを書いている時点では digiKam-installer-4.12.0-win32.exe が最新版でした。


インストールと初期設定

ダウンロードしたインストーラーを実行します。
インストール後のインストール先フォルダーの容量は 1.33 GB ほどでした。

初回起動はウィザード形式で初期設定する必要があります。

どの項目も後から変更できるのですが、特に大事なのがこの画面。
上のテキストボックスはアルバムに設定するパスで、後から追加できます。
下のテキストボックスはデータベース(SQLite)の保存先のパスです。
このデータベースは設定情報やタグなど、使い勝手を左右する情報が保存されます。
保存先はNTFSフォーマットのドライブかSambaサーバーとされています。
初期値はなぜか ピクチャ フォルダーに設定されているので
C:\Users\ユーザー名\AppData\Roaming\digiKam
というフォルダーを作ってそこを指定しました。

この後もいくつか設定項目がありますが全て初期値のままにしました。


UIを日本語に設定する方法

日本語化の設定メニューは Settings ではなく Help にあります。
メニューの
Help - Switch Appplication Language
を開いて Primary language を Japanese に設定すると、次に digiKam を起動したときに日本語化されます。

※ 以下、英語UIで説明します。


アルバムにフォルダーを追加する方法

メニューの
Settings - Configure digiKam
の Collections (コレクション) からアルバムのフォルダーを追加・削除できます。


サブフォルダーのファイルもサムネイル表示する方法

メニューの
View - Include Album Sub-Tree (表示 - サブアルバムを含む)
をオンにすると
サブフォルダーのファイルもサムネイル表示されます。

これで画像ファイルが探しやすくなりました。

サムネイルに表示された画像ファイルはドラッグ&ドロップ操作でGIMP・Inkscape・CLIP STUDIO PAINTなどの画像編集ソフトにインポートできました。


ファイルにタグ付けする方法

画像ファイルに「誰が映っていか」や「どこで撮影したか」などの情報をタグとして紐付けておくと後で探しやすくなります。
いくつかの操作方法がありますが、個人的に使いやすかった方法を説明します。

ファイルにタグ付けする前に digiKam にタグを登録します。
画面右の Captions/Tags (キャプション/タグ・初期状態ではアイコンだけ表示されている) をクリックして Tagsタブを開きます。

青地の Tags ツリーを右クリックして New Tag をクリックすると Tags ツリーに新しいタグを登録できます。

サムネイルビューから画像を選択して Tagsツリーに追加したタグにチェックを入れて、Apply (適用) ボタンをクリックすればタグ付け完了です。


タグを指定してファイルを探す方法

画面下や画面右の Filters (フィルタ・初期状態ではアイコンだけ表示されている) をクリックして Tags Filter からタグを絞り込んでサムネイル表示できます。
絞込解除は画面下の赤い×ボタン。



関連ブログ

[GIMP] GIFアニメーションの作り方
Live2Dを使ってみました
[Blender] Pythonで複数の設定を一瞬で編集する方法
BlenderのモデルデータをMMDに変換する方法

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

2016年7月23日土曜日

CLIP STUDIO版 クエリちゃん 3Dモデルのファイルを公開しました

Query-chan model for CLIP STUDIO has been published

ポケットクエリーズがUnityアセットとして公開しているキャラクター「クエリちゃん」の3Dモデルを改変しCLIP STUDIOに移植したので ファイルを公開しました。
このファイルをCLIP STUDIOの素材に登録すると「クエリちゃん」をCLIP STUDIO PAINTでイラストやマンガの3Dモデルとして利用できます。
blog.fujiu.jp CLIP STUDIO版クエリちゃんのファイルを公開しました
関連ブログ CLIP STUDIO PAINT を使ってみました
未確認ですがCLIP STUDIO ACTIONでCG動画の作成にも利用できるようです。


なぜ「素材をさがす」に出品しないのか

CLIP STUDIOには素材の出品や購入ができる「素材をさがす」というエコシステムがあります。
このブログを書いている時点で「素材をさがす」はクリエイティブ・コモンズ・ライセンス作品の取扱いに対応していません。
「素材をさがす」は出品者への報酬制度があるため今後もクリエイティブ・コモンズ・ライセンスに対応しないと個人的に推測しています。

「クエリちゃん」は誰でもどのような目的でも無償で使えるクリエイティブ・コモンズ・ライセンス (CC-BY) に基づいて配布されるため、ファイルを独自に公開することにしました。


ダウンロード

OneDriveからダウンロードできます。



CLIP STUDIO版クエリちゃんを素材に登録する方法

  1. ファイルをダウンロードし Query-chan.c2fc を展開します。
  2. CLIP STUDIOを起動し、COORDINATEを起動します。
    COORDINATEは無料で利用できます。
  3. CLIP STUDIO COORDINATE の
    ファイル - 開く
    から展開した Query-chan.c2fc を開きます。
  4. CLIP STUDIO COORDINATE の
    ファイル - 素材として登録
    でCLIP STUDIOの素材に登録できます。
  5. CLIP STUDIO PAINT の3Dのキャラクターの中に登録されます。
  6. 素材から削除する場合はCLIP STUDIOの素材のクエリちゃんを選択して削除ボタンをクリックします。


制限

CLIP STUDIOの仕様により次の制限があります。
  1. 標準衣装の腕輪やスカートが透けないことがあります。
    ※ 透けて見えるのが正常です。
  2. 髪や衣装の一部が黒く表示されることがあります。
    ※ CLIP STUDIO COORDINATE では輪郭線を非表示に、カリング設定を「カリングしない」にすると正常に表示されます。


使い方

Windows 10のCLIP STUDIO PAINT PRO 1.5.6で動作確認しました。
CLIP STUDIO PAINTに配置してポーズをつけることができます。そのまま使うことも、デッサン人形として使うこともできます。

顔は2種類、表情は全部で20種類以上あります。

クエリちゃんのUnity3Dアプリを作ったらプロモーション画像をつくるのにもお勧めです。

※ 画像内の文章に意味はありません

衣装は標準のほか、ハロウィン用とクリスマス用があります。季節に合わせた創作に役立ちます。

※ 画像内の文章に意味はありません


開発裏話

CLIP STUDIO用3Dキャラクターの表情を変更できるようにするには、顔の部分のマテリアルを一つにする必要があります。
顔の頂点グループも一つにした方が動作が良好でした。
既存の3Dモデルを流用する場合この仕様はとても厳しいため、CLIP STUDIOのライセンス素材の3Dキャラクターは表情がほとんど変えられません。
「クエリちゃん」はこの仕様を満たすことができたためUnityアセットの全ての表情と衣装を妥協なく移植できました。
その他の部分もMMD化より簡単でした。


ライセンス

"Query-Chan model" は Creative Commons Attribution 4.0 International License(CC-BY) に基づいて配布されています。
詳しくは公式サイトをご覧下さい。
http://query-chan.com/


クエリちゃんのMMDモデルも公開中です

クエリちゃんのMMDモデルで動画を作ったらぜひ動画サイトに投稿してください。キャラミんでも使えます。
[MMD] クエリちゃん・クリスマス版(初版) & クエリちゃんver1.02を公開しました


関連ブログ

CLIP STUDIO PAINT を使ってみました
CLIP STUDIO COORDINATE でプロ生ちゃんを使ってみる
[MMD] クエリちゃん・クリスマス版(初版) & クエリちゃんver1.02を公開しました
[マスコットアプリ文化祭] クエリちゃん大賞受賞の報告

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