NailCanvas開発日記 -2ページ目

NailCanvas開発日記

ネイルアートシミュレータNailCanvas(ネイルキャンバス)の開発日記です。


ほぼ2年ぶりのアップデートとなってしまいました。

いろいろ環境が変化していてドキドキでしたが、無事Appleの審査に通りました。

今回の大きな変更点としては、
無料版でもデコレーションのエディットが出来るようになりました。
立体的にデコレーションを作れるというのはNailCanvasの売りなので、より多くの人に使ってみて欲しいなと。

ただ、これだと先に有料版を買ってくれた人(極少数ですが・・)に何となく申し訳ないので、有料版のみの新機能として「マットトップコート」の表現が出来るようにしてみました。

画像が小さいとあまり違いが分からないのですが、
一応「つや消し」っぽい表面になっています。多分。

今回は全ての指を一括で切り替えしか出来ないのですが、この表現が好評なら各指別々に、もしくはポリッシュごとにコントロール出来るようにしたいところです。

というわけで、有料版と無料版の違いは、
・セーブ機能の有無
・広告表示の有無
・マットトップコートの有無
となりました。
普通に使う分には無料版で十分な機能が備わっていると思います。

あ、それから今回アプリのアイコンも変えました。


先日ブログに載せたアイコンに、ストーンをひとつ加えてみたのですがどうでしょうね。
前のアイコンも作った当時はいろいろ思い悩んで作ったのですが、ごちゃごちゃしていて覚えにくいデザインだったので今回はシンプルにしました。



放置状態のホームページについても、
「ランサーズ」で応募してきてくれたフランス在住のwebエンジニアさんに協力してもらって全面的に作り直しているところです。
これでフランス語翻訳も安心。
別にフランス語にこだわってるわけじゃないのですが。
多言語化はしたいと思っていたので。


Facebookページもトップ画像を変えてちょっとリニューアル。


https://www.facebook.com/NailCanvasWeb

つたない英語で海外の人とやりとりできるのが楽しい。


さて、先日のビューティーワールドへ行った時の日記に少し書きましたが、
イケメンネイリスト河地さんのサロン「bishana」さんへお邪魔してきました。
いろいろお話出来て、非常に有意義な時間を過ごしましたが、詳細はまた次のブログで。





次のバージョン(2.4.0)を作っています。

新たにマットトップコートのような表現ができるようにしようと思っているのですが、


どうでしょう。マットトップみたいに見えるでしょうか・・・?

あまり違いが分からないかな~。



アイコンも新しくしようかなと思ったり。


シンプル路線で。


今のキラキラした感じのアイコンのままでいくかどうか、悩ましいです。




また東京ビッグサイトへ行ってきました。

今回は「教育ITソリューションEXPO」

数日前のビューティーワールドジャパンと同じ会場ですが、道行く人がまったく違います。

全然華やかじゃない!!

まあ僕としてはこのほうが落ち着きますけども。


さて今回のメインの目的は、Unity Japanのブースを見ること!



Unityというのはゲーム開発用のツールで、今のiOS版のNailCanvasはこのUnityを利用して作っています。

最初に作ったWindows版のNailCanvasはQuest3Dというまた別のツールで開発していました。

で、このUnityのブースに、


NailCanvasのフライヤーが!!

Unityの非ゲームへの応用の一例としてご紹介頂いています。

去年かな、Unity Japanさんからご連絡頂いて、フライヤーを作ってくれました。

なので、NailCanvasのフライヤーじゃなくて、Unityのフライヤーに載せてもらった、ということなのですが、こうして印刷物になるのは嬉しいものです。

写真で隣に並んでいる「チームラボ」さんとか、非常にレベルの高くて面白いことを色々されている会社なので、隣に並べて頂くのは大変恐縮であります。


ついでに展示されていたOculus Rift(オキュラスリフト)も体験。

没入型のVR体験を提供してくれる装置なのですが、視野角の広さ、追従性、そして軽さが素晴らしい。

解像度と筐体の大きさ、それからケーブルが何とかなれば更に化ける気がします。

ソニーもこれに対抗した製品をもうすぐ出すとのことなので気になるところ。

是非これを使って何か作ってみたいな。






2年ぶりにビューティーワールドジャパンへ行ってきました。
前回行った時からもう2年も経ってしまったんだな~。



相変わらずの熱気に圧倒されるわけであります。



さて今回行くことにしたのは、ネイルサロンbishanaのイケメンネイリスト、河地さんにお会いするのがメインの目的でした。
河地さんはNailCanvasに興味を持ってくれて昨年末にメールを送ってきてくれた方で、エアブラシを使ったその作風は非常に綺麗でクオリティが高く、僕としても興味があったのでこの機会にお会いすることにしたわけです。

色々お話したり一緒に会場を回って頂いたりと、充実した時間を過ごせました。

河地さんが会場のデモ施術を体験するということで、
「一緒にやりましょう!」と背中を押されて僕も体験してみることに。
一人で来てたら絶対体験しないだろうし!(笑)


爪の根元をザクザクされるのは慣れてないとちょっと怖い。。。


お、おれの爪が~~!のびたっ!!

フォームを付けずに長さ出しが出来るというジェルだったのですが、自分の爪が伸びたような未体験の感覚。
なるほど、こういう感じなのね~。思いのほか自然な感触でした。

最後にマットトップジェルを塗ってもらったので、キラキラせず、かつ自爪そのままの表面よりも均一な質感になってなかなか綺麗。

爪自体が樹脂で強化されるので何というか安心感があります。
スポーツ選手が保護のためにジェルをする場合があるというのも納得。

長さを出さずにマット仕上げにするのは男性でもアリなんじゃないかと感じました。


手前がbishanaの河地さん。

この後、エアブラシでジェルが吹けるという「エアジェル」も体験しました。



エアブラシは面白そう。自分でもやってみたいな。

エアブラシといえば、小学生プラモデラーだった僕には憧れであった機器!
一緒にしたら怒られるか(笑


下の段にあるようなマットな質感はNailCanvasにも取り入れたいと思っていました。


さて、貴重な体験をさせてもらった河地さんですが、そのクリエイティブでポジティブな姿勢は非常に好感で、今後面白いコラボレーションが出来るのではないかなと思います。


ネイルサロンbishanaさんのブログはこちら
今回のことについても書いてくれています。


長らく進展が止まってしまっているNailCanvasですが、そろそろ動き出します。

facebookページも宜しくお願いします!
https://www.facebook.com/pages/NailCanvas/334673706546840




3月30日まで日本橋の三井ホールで開催されている「江戸桜ルネッサンス」という展示会で使われている映像を制作しました。

久しぶりに一般公開されるものを制作したので、せっかくなのでCG的なメイキングなど書いておこうかなと。

展示物はこちら。

僕が制作したのはメインの映像と左右の障子に写る映像。それから天井部から投影している映像。
全部でプロジェクタ5チャンネル分です。


3dsMAXでの桜吹雪素材と樹木の制作、AfterEffectsでの仕上げなど紹介していきます。
技術的に何も大した事はやっていませんが、これからCGをやりたい人などの参考になれば。
CG好きな人向けに書くので、専門用語などはご容赦ください。


では順を追って制作していきます。
制作に使用したツールは、
3dsMAX(+V-Ray)、AfterEffects(+trapcodeプラグイン)、PhotoShop
です。

まずは3dsMAXで桜吹雪の素材を制作します。
花びら単体の3Dオブジェクトがこちら。

AfterEffectsだけでも花吹雪の映像を作れるとは思いますが、MAXを使用したのはこのような「反った」形状を動かせるから。
僕が単にMAXのほうが使い慣れているからというのもありますが、MAXのほうが花びらの動きをよりレスポンスよく確認できるかと思います。

この花びらオブジェクトをパーティクルで散らします。

パーティクルの種類は「パーティクルクラウド」で、インスタンス化ジオメトリに先ほどの花びらオブジェクトを設定。

パーティクルのパラメータはこんな感じ。

下方向に初速を与え、エミッタ自体はカメラの視野外に。
システム単位は「1.0センチメートル」です。

そして、スペースワープの「Wind」をバインドして舞い散っている動きを付けます。

強度とタービュランスをいい感じになるよう調整。

パーティクルに球状ダイナフレクタをバインドしているのは、「はぐれ花びら」がカメラの直近を通過するのを避けるためで、カメラ位置とダイナフレクタをリンクしています。今回はカメラが移動しないのであまり必要性はなかったかも。

以上をレンダリングしたのがこちら。


ループに関しては、この時点では映像全体の長さの指定が確定していなかったので、MAXのパーティクルをループさせる手法はやめて、素材だけ作ってあとでAfterEffectsで調整できるようにしました。
具体的には、60秒ほどの素材(パーティクルの発生終了時間+パーティクルの寿命時間)を作って、パーティクルの発生開始や終了前後でパーティクル密度が均一になるようにオーバーラップさせます。こうすることで延々と途切れない花吹雪映像が出来るので、あとは映像全体の尺が決まった時点で、「時間的にシームレス」になるよう加工します。
が、後で分かった事ですが今回は映像全体がループしてなくてもよいということになったので、時間的にシームレスにする処理はしていません。

制作を進めていく途中で仕様が決まるもしくは追加されるというのは、制作する側からするとほんとに避けたいものですが、実際はよくある話。
自分の首を絞めない為にも出来る限り予測して柔軟に対応できるようにするしかありませんね。


次に、桜の樹木の制作です。
まずは元になった3次元モデルがこちら。手持ちの樹木モデルを使用しました。

一旦このモデルで制作を進めたのですが、
・もっと満開な感じが欲しい
とのことで、少しモディファイします。

まず、幹以外の細かい枝と花びらを丸ごとコピー。

そして回転させて再度合体!

これで花びら密度は2倍!
このままだと枝の根元が幹に接してないなど不自然な部分が出てくるので、そのへんは個別にミリミリ調整。
これがけっこう手間ですが、カメラが至近距離まで寄る事はないので大体で。
ポリゴン数としては約370万ポリゴン。無駄に多すぎかも。

ライティングは、V-RayのAmbientLightと、標準のスポットライトを一灯だけ。

GI(グローバルイルミネーション)なしでシンプルにレンダリング。

以上をレンダリングしたのがこちら。

60秒でゆっくり一回転するようになっています。


これで桜吹雪と樹木の素材が揃ったので、ここからAfterEffectsでキラキラ感などを味付けしていきます。

まずは桜吹雪から。
trapcodeのStarglowでキラキラさせます。ベタなエフェクトすぎて本職AfterEffects使いの人はあまり使わないという噂は聞きますが。
常に光った状態よりもたまにキラリンと光る方が効果的だと思うので、スレッショルドのパラメータを調整してハイライトが入ったときだけエフェクトがかかるようにします。


また、少し花びらの量が少ない気がしたので、MAXで花びらの大きさを小さくした別素材を作って重ねています。

調整レイヤーで彩度も上げています。
イベント会場のプロジェクタでは細かい花びらはほとんど見えてませんけどね。。。


次に樹木も少し味付けします。

同じくtrapcodeのStarglowでハイライト部分のみグロー効果を。


最後にグラデーションを付けた背景を用意して、桜吹雪と樹木を加算モードで合成。

「加算」で重ねることで樹木にも背景のグラデーションが活きていい感じの色合いになります。
逆に言うと、全体的にいい感じになるようにグラデーションも調整します。


「とりあえず2分のループ」ということだったので、あとは樹木のシルエットが浮き出てくる部分や暗くなって消える部分を追加して、ひとまず完成です。



展示会オープン後にご要望があったので「樹木のシルエットが光の粒になって消える」シーケンスを追加したバージョンにアップデートしましたが、それはまたの機会に。。。

以上、特に本職のAfterEffects使いの人に見られると何じゃこりゃという部分もあるかもしれませんが、自分の覚え書きも兼ねて書いてみました。
こういうCGとかやってみたいと思っている人の参考になれば幸いであります。