Shadeによる背景出力

題名の通りにShadeによる背景出力を試してみました。

 

ボリュームレンダリングによる雲の生成。狙った場所に狙った量の雲を生成するのはかなりの難易度です。上のレンダリングは太陽光源のみを設定しているのですが、それだけだと、やや重たい色合いの雲になってしまうみたい。

背景領域に上と下に雲と海を配置。明るさを調整して霧を薄くかけないと水平線がぱっきりと見える背景になってしまうため、霧を薄くかけています。

作画にShadeを実験導入

今まで難しい立体は、パースガイドやCheeta3Dを利用していたのですが、もうすこし作画用の線画を得られる物はないかと探していたところ、Shade3Dを試してみることにしました。

丁度描くのが難しい場所があったので、早速作図してみたり。

 線画出力

 線画出力(陰線あり)

 トゥーン出力

 こんな感じの画面

Shade3Dは大昔に触ったことがあったのですが、当時はベジエ?自由曲線?といった感じで、マニュアルを読んでも理解出来ませんでした。

それからだいぶ経ちましたが、改めて触った感じは(ソフトウェア自体がバージョンアップしているというのもありそうですが)思った以上に使いやすい印象を受けました。

これなら小物や背景を描くのに使えそう。

Magica Voxelで3Dドット絵

実験がてら使用していたのですが、ATOKのインストール作業中にちょっと作成してみました。

仕組み上任意のところにドットが打てないので、盛り付けてから削り出すというのを繰り返しながらの作業となります。

 なんだかずんぐりむっくり…

一応アインハルトさん…のつもり。

Kerasで画像分類

Kerasを使用した画像判定プログラムを作成してみました。元ネタはkill_me_learningです。

.

使用方法

Kerasが動作可能な環境を用意して、以下の様なフォルダ構造を用意します。

train_data-illustフォルダ内に、分類したい画像をフォルダ毎にわけて保存しておきます。

例えば、リリカルなのはシリーズの「なのは」「はやて」「フェイト」を分類しようと思ったら、

といった感じのフォルダを構成して、それぞれのフォルダ内に画像を格納していきます。

学習方法

実行すると学習を開始し、120エポックした後に学習結果をtrain_distに保存します。

判定方法

実行すると学習結果からモデルを読み込み、対象画像がどのクラスに該当するかを表示します。

.

Kerasのプログラム

学習用

 

判定用

.

学習させてみたもの

Twitterにも掲載しましたが、イラストを描いている方の絵を学習させて、同じモチーフの絵を与えた時に誰の絵として判定されるかを試して見ました。

本人の絵(一番上)が本人の絵だと認識されないのが、ちょっと悲しいw

CUDAの導入

自宅のiMac環境にCUDAを導入してみることにしました。

CUDA導入の目的はKerasを使用するためなのですが、結論を先に書くとiMacではメモリが少なすぎてまともに動作しませんでした。

導入手順

CUDA

まずはNVidiaからダウンロードしてインストール

https://developer.nvidia.com/cuda-downloads

 インストール中…

CUDAのインストールが完了したら、cudnnの方もダウンロードしてインストールを行います。

(cudnnにはユーザー登録が必要です)

cuDNN

cudnnにはインストーラがありませんので、展開したフォルダ内のファイルを適切な場所に配置します。

デフォルト設定でインストールした場合は、それぞれ以下の場所にコピーを行います。

  • lib -> コピー先は/Developer/NVIDIA/CUDA-8.0/lib
  • include -> コピー先は/Developer/NVIDIA/CUDA-8.0/include

アプリケーションが利用するCUDAとcuDNNは特定の組み合わせが前提となっている事があります。

この記事を書いている時点では、tensorflow-gpu(1.1.0)が要求するライブラリはCUDA 8.0 + cuDNN v5でした。

ライブラリパスの指定

アプリケーションはライブラリパスを頼りにライブラリを探します。アプリケーション実行前に、以下の設定が必要です。

.

カテゴリー Mac

大人気ない塗り絵アプリの実装

Twitterで投稿していたPythonスクリプトを実行形式にしてみました。

(ひとまず実行形式にしてみただけですので、正常に起動しないかもしれません。うまく起動できなかったりしたらTwitter等で教えていただけると嬉しいかも)

 こんな画面です。

圧縮ファイル内にあるwatershed_layer.exe(macの場合はwatershed_layer)を起動すると、ウィンドウが立ち上がります。

絵を描く機能はありませんので、画像を読み込まないと何もしてくれません。

 線画を読込。

ウィンドウ上部にあるツールバーのImport Pictureをクリックすると画像読み込みダイアログが表示されますので、適当な画像を読み込ませてください。

環境にもよりますがあまり巨大な画像だと動作が重くなります。

 塗りたい色を配置すると領域を塗りつぶします。

ピンによる塗りつぶし

左側にあるパレットを選んでから塗ってほしい場所をクリックすると、色のついたピン(ボックス)が描画され、その色で塗りつぶしてくれます。

初めて色を置いた場合は、全てがその色で塗られてしまいますが、これは正常な動作でして、他に塗る色が無い場合は全てその色で塗られます。塗りつぶしにWatershedを使用している為なのですが、何色かを適当に置いていくと動作が理解できるかと思います。

ピンの移動と削除

ピンは塗った後も、ドラッグによる移動やDELキーによる削除が行えます。

カラー変更

塗りつぶした後からでもカラー変更が可能です。

変更方法はいかの三種類があります。

  • パレットをダブルクリック
  • ツールバーにあるカラーアイコンをクリック
  • パレット下部にあるスライダーをドラッグ

スライダーのドラッグはリアルタイムに色の変更が確認出来るのですが、描画負荷はかなり高くなります。

保存方法

ツールバーからExport Pictureを選択すると保存ダイアログが表示されます。

現在、保存形式はPNGとJPEGのみに対応しており、拡張子を指定しなかった場合は、PNGとして処理されます。

 上の説明と色が違ってますけど…

塗り分けされた画像はアンチエイリアスのない単色塗りつぶしとなりますので、後は任意のツールで処理出来るかと思います。

2017年4月8日追記

ウィンドウにファイルをドロップする事でも開ける様になりました。

Download

watershed_layer-1.1.0-win.zip

watershed_layer-1.1.0-mac.zip

Source

プログラムはGitHubで公開しています。

https://github.com/MizunagiKB/watershed_layer

.

watershedによる色の塗り分け

OpenCV2が快適に動作するようになっていたので、PyQt5を使用して塗りわけツールを作成してみました。内容は付属のサンプル(watershed)と全く同じです。

塗りたい場所をプロットするだけで、線が繋がっていなくてもそれっぽく分割してくれます。

プロットは後から移動する事も出来る為、間違ってクリックしてしまっても大丈夫です。

これを全く同じ事をするプログラムがOpenCVのexampleに付属しているのですけど、自分用にUIを作成してみました。

出力は色分けが行われた画像をPNG形式で出力するか、レイヤー毎に分割してPSD形式で出力するとかでしょうか。(まだそこまで出来てない…)

OepnCVのwatershed

久しぶりにビルドしたら、普通に動く様になってました。

  マーカーでなぞると…

 領域分割してくれます。

カテゴリー Mac

自宅ネットワークのMTUサイズ

自宅のストレージにはDrobo5Nを使用しているのですが、なんとなく設定を見返していて「今時MTUの上限は1500は低いかな」と思い、自宅環境のMTUサイズを調べてみることに。

Drobo5NはMTUを9000まで設定する事が可能であり、接続元のPC側も任意に設定が可能なので、おそらく問題になるのはルーター兼スイッチングハブとして接続されている機器(自宅環境ではAterm WR8370N)を経由する際に問題となりそう。

ひとまず、Drobo5NとMacOSX側のMTUを9000まで引き上げてpingコマンドで確認。

Aterm WR8370NはLAN側ジャンボフレーム透過機能を有効にする事で使用可能になりますが、Aterm側で通過可能なサイズ上限があるようです。

パケットサイズ8164で通過しました。

というわけで、うちの環境は8136(= 8164 – 28)が上限だった模様。

まぁ、そんだけです。

カテゴリー Mac

PureRefを導入してみました

絵を描くとき、大抵なんらかの資料を見ながら描く事が多いです。

自分はArtRageを使用しているので、参照用画像を任意の場所にピン留めする機能があるのですけど、少し前に複数モニターの環境にしたので、専用のアプリケーションを導入してみる事にしました。

PureRef

http://www.pureref.com

参照画像表示専用のビューアです。

起動すると以下の様なWindowが表示されますので、あとは好きな画像を放り込むだけです。

 起動した状態

上図では全画面になっていますが、普通にWindow表示も可能です。

背景は濃度の異なるグレーが用意されていますが、カスタマイズ可能です。背景を透明にすることも出来ます。

 

 回転・拡大縮小・矩形で切り取り・上下左右の判定が可能です。

ショートカットキーを覚えないとちょっとつらい部分がありますが、慣れてしまえば好きな様に配置出来ます。

自分用にカスタマイズしたショートカットキー(覚書)

左マウスボタン + Z … 拡大縮小(Scale)

左マウスボタン + F … 反転(Flip)

左マウスボタン + R … 回転(Rotate)

 

カテゴリー Mac

LIFELESS Planet

Mac版が出ていたので買ってみました。

PlayStation4やXBOXOneで遊んだ方が画面が綺麗だと思うのですが、うちの場合はMacが一番身近な環境なもので。

心細い心境が伝わって来る映像が良い感じ。

ジェットパックを使ったジャンプアクションには慣れが必要かも。

日本語にはならないのですが、読めなくても映像の雰囲気で伝わってくるため、(世界観の理解は足りてないかもしれませんけど)今の所問題なく遊べてます。

SSDを導入してみました

El Capitanリリースからずっと、今も悩まされてきているArtRageが正常に動作しない問題ですが、こちらの環境が特殊なのか対応予定がないのか、どちらにしてもこのままでは作業が出来ずに困っています。

解決方法としては、

  1. Windows版のArtRageを使用する。
  2. El CapitanからYosemiteに戻す。

VMWare Fusionに「Windows10 + ArtRageをインストール」してみたところ正常に動作した(少なくともTabletのハードウェア不具合ではない)ため、作業環境をWindowsにしてしまう方法もあるのですが、出来れば使い慣れた道具を使用したいので、再度Yosemiteの環境を用意する事にしました。

と、前置きが長くなりましたが、現在の環境を維持(いつかは不具合修正がされる事を期待)しつつ、Yosemiteの環境を作る為に、Thunderboltドライブを増設しました。

増設したドライブはBuffalo SSD-WA256T、約30,000円でした。

ArtRageの環境が構築できればなんでも良かったのですが、SSD x2で構成されているハードウェアだったので試しにアクセス速度を調べてみました。

raid_setting こんな構成

ソフトウェアRAID0の構成でもThunderboltからboot出来るとか、知らなかった…

アクセス速度のチェックにはBlackmagic Disk Speed Testを使用しました。

このソフトウェアの本来の目的は、Blackmagic製品を使用する際に適切な環境かどうかをチェックする為のものなので、利用用途とは異なる(動画編集を想定したディスク速度なのでシーケンシャルなアクセスのみ)ような気がしますけど。

DiskSpeedTest こんな感じでした。

Buffaloのウェブサイトには、読み込み763MB/s、書き込み616MB/sと記載されているので、ほぼ宣伝通りの性能が発揮されているようです。

というわけで結局Yosemiteに戻ってきました。

 

Web MIDI APIを使ってみました

現在ドラフトになっているWeb MIDI APIを使用してみました。

ドラフトではありますがChromeで使用可能になっているようなので試しにjavascriptからMIDI演奏出来るようなアプリを作成してみました。

https://mizunagikb.github.io/miz_music/

mizmusic こんな感じです。

作成したのはSMFを読み込んで再生するだけの単純なプレイヤーです。デバッグ機能を兼ねてD3.jsで演奏情報の描画を行っています。

Web MIDIを使用するには、はじめにrequestMIDIAccessを実行する必要があるのですが、システムエクスクルーシブを利用したい場合、以下の条件を満たす必要があります。

  1. 対象のウェブアプリケーションにhttpsでアクセスしている。
  2. requestMIDIAccess呼び出し時に、sysexをtrueにしている。
  3. 利用者がMIDIデバイスのフルコントロールを許可している。

1)

1に関してはhttpsが利用できる場所にアプリを配置するだけなのですが、環境によっては手間かもしれません。

自分のアプリはgithub上のweb page機能(githubで作成したリポジトリ毎にブランチをウェブページに見せることが出来ます。)を使用することで解決しています。

SysExは本体初期化やダンプデータを抜き出したり出来るため、利用条件を厳しくしているようです。

2)

2に関しては単に引数を渡すだけです。

3)

これは利用者側で有効にしてもらう必要があります。自分で使用する分には許可をすれば良いだけです。

chrome_mididevice ちなみにこんな画面です。

あとは普通にMIDIデータを送り込めば良いのですが、今回はRoland SoundCanvas for iOSを制御してみました。また、送信元がMacですので、以下の接続を試しました。

  • Thunderbolt + iRig MIDI 2 + UX16
  • Air Play

Air Playを使用するには、SoundCanvas for iOS側のMENUからAir Play / Bluetoothを有効にして、Mac側のAudio MIDI設定からMIDIスタジオを開き、ネットワークでiPhoneと接続をする事で利用可能です。Thunderboltを使用しない為、給電させながら演奏が出来て便利…かと思ったのですが、電波状況によって演奏が安定しない場合がありました。

プログラム作成にはTypeScriptを使用しています。今回は以下の様に分離してみました。

  • データ構造
  • データ読込処理
  • データ再生処理
  • データ表示処理(これはデバッグ用)

GitHubにソースコードを置いておきました。

https://github.com/MizunagiKB/miz_music

SoundCanvas for iOSを制御していて気になったこと

ノートオンメッセージ(0x90〜0x9F)を同じノート番号に送る(キーオンを二回送信する)と、次回以降のメッセージを正常に受け付けないようです。

普通に処理していれば、キーオンとキーオフはセットで処理されるのですが、キーオンだけの楽器(ドラムとか)や演奏途中で停止させた場合にキーオンだけの状態が発生する事があります。

そもそもキーオンを二回送るというのが良くないのですが、今回作成したプログラムでは、チャンネル毎のキーオン状態を保存しておき、再生停止時にキーオンしたままのノートにキーオフを送るようにしてみました。

なんとなく、自分の作成したプログラム側に問題がありそうですけど。

 

Live2Dを使ってみました

Live2Dというのがどういうものなのか知りたかったので、無料版をダウンロードして実際に使ってみました。

 試しに描いてみたカリムさん。

レイヤー分けされた画像であれば、PSDファイルをインポートしてやるだけでパーツの切り出しをしてくれます。

 Live2D Modelerがパーツ分けして再配置してくれたテクスチャ。

 こんな感じの画面で編集。

あとはこの画面でリギングをしていくのですが、テンプレートの適用機能を使用することである程度までの自動設定が可能です。(今回は自動設定しました。)

というわけで、動くようになったカリムさん

わりと良いかも?(ヘアバンド忘れた…)

ただ、ちゃんと設定を行おうとすると、デフォーマとの格闘が辛そうな気がします。

…というよりも、デフォーマの設定が辛いと感じたら、やろうとしていることがLive2Dの範疇を超えかかっている…と考えた方がよさそう。

あと3D空間を意識した変形をする場合は、曲面デフォーマを駆使した変形をさせる事になりそうですけど、単純な曲面移動の場合、グレイスケールを読み込ませて、その高さ情報から曲面デフォーマの配置を割り当てるとかって機能があると嬉し…というよりもグレイスケ−ルならノーマルマップかディスプレイスメントマップにしてしまえば…って本末転倒ですね。

使い始めるとたいして問題とならないのですけど、ややGUIがわかり辛いところも。

仕組み上可動範囲は限られるけど、絵の持ち味をそのままで動かしたい、という要望に対してのアプローチとしてはありかも。

Tableauを使ってみました(1)

データビジュアライズ用のソフトウェア「Tableau」を使用してみました。

同列に比較することは出来ませんが、ExcelのChart作成と共有に特化したソフトウェアといった感じです。

tb_03 データは自分のTweet Analyticsから。

ワークシート単位でチャートやテーブルを生成し、ダッシュボードやストーリーという形式で共有するといった使い方を想定しているようで、使い方自体に迷うことはあまりなさそうです。とは言っても、こういったソフトはある程度利用者が分析したいものを想定していないと、有効活用は難しそう。(なんとなくいじっていて、偶然発見というのも無いわけではないですけど)

ひとまず、無料のTableau Publicで遊んでみようとおもいます。その前に遊ぶデータを入手しないと遊びようがないですけど。

GodotEngineを使ってみる(3)

チュートリアルそのままですけど。

アニメーション自体はTutorialのCutout Animationを参考にすれば殆ど問題はないのですけど、どうやってアニメーションを呼び出せば良いのかが最初わかりませんでした。

godot_test

こんな感じで指定するだけでした。

歩いたり走ったりするようなアニメーションを実現するには、AnimationTreePlayerを使用するようなのですが、とりあえず動画を観て確認。

YouTubeのリンクを貼り付けると勝手に動画再生用のタグになるのね…今更気がついたりして。

GodotEngineを使ってみる(2)

昨年のリリース以降遊ぶ時間が無かったのですが、少し遊んでみました。

まず手始めに知りたかったのは、シーンの切替方法。

一番簡単な方法としては、Autoloadチュートリアル(wikiだとtutorial=singletons)に記載されている方法。

  • プロジェクト設定にある、Autoloadを使用して、事前にスクリプトを読み込んでおく。
  • スクリプト内に関数を用意しておく。
  • シーンを切り替える際は、スクリプトを呼び出すことで

任意のスクリプトから切り替えたいシーンファイルを呼び出し。

この方法だと、リソースの読込が完了するまで固まってしまいます。

「読み込み中」といった表示を行う場合には

https://github.com/okamstudio/godot/wiki/Background%20loading

を参考にすると良さそう。

 

VisualStudio Codeをおためし

Microsoft Build 2015(Day 1)で発表されたVisualStudio Codeを早速インストールしてみました。

現在プレビュー版として公開されているものとなります。

vsc_01 atom_01

上の図は適当に間違えてエラー表示をさせています。

自分はMac上ではAtomを使用しているのでAtomのスクリーンショットを貼り付けてみました。(Atom側はTheme変更 + minimap + atom-typescriptを導入しています。)

VisualStudio Codeは”VisualStudio”という名前が付いているのですが、ポジション的にはテキストエディタとなります。Node.jsがベースな部分はAtomに似ている感じです。

現在はプレビュー版ではありますが、恐らくパッケージマネージャで機能追加が出来るようになるのではないかと思われます。

Microsoft製なら日本語も大丈夫…と思っていたのですが、残念ながら現時点では全角文字を人文字分と認識しているようです。これはAtomも同じですが、japanese-wrapを導入する事で解決しています。

vsc_02 Git管理下にあるファイルだとDiffを表示出来たり、コミットも行えるようです。

vsc_03 現時点では気の利いたUIがない設定。

デフォルト設定を参照しながら、自分の設定項目を記述していきます。

さすがに現時点ではプレビュー版ではありますが、Windows, Mac, Linux環境下で使用するテキストエディタが増えることは良いことだと思います。(自分はAtomに慣れてしまいましたけど…)

Pixelmatorが3.3.2にアップデート

幾つかの機能がアップデートされて、バグ修正も行われました。

http://support.pixelmator.com/updates

個人的には修復ツールに非破壊編集モードが追加されたのが大きいかも。

img_1 修復ツールを呼び出して修復(この例ではお肉を消しています)

img_2 お肉が消えました。

img_3 差分画像が透明レイヤーに。

事前に透明レイヤーを手前に作成し、「全てのレイヤーをサンプリング」にチェックを入れておく事で動作します。

これは楽しいかも。