ピクシブで働く人の姿や、どんな技術を使ってプロダクトを生み出しているのかがみえる。そんなイベント「pixiv Night #02」が、2017年3月14日に代々木のピクシブオフィスにて開催されました。
テーマは「画像処理」ということで、イラスト1枚からグッズを作成できるサービス「pixivFACTORY」の開発チームに所属するhayaが、同サービスの画像処理システムについて、具体的な実装方法を語りました。その内容をお届けします。
買う前に実物を目にしたような体験をさせたい
物を買う時、実物をみたいと思いませんか？
たとえば、オリジナルマグカップを作りたいと考えた場合、イラストを描いて画像ファイルを入稿すれば、イラスト入りマグカップは製造できます。しかし、お金を払って手に入れるものなのですから、どういう見た目になるのかを事前に確認できないと不安になりますよね。
では、イラストが入った状態のグッズの写真を、事前に確認できるようにしてみてはどうでしょう。私たちはこれを「商品プレビュー」と呼んでいます。その商品プレビューが、こんな風に表示されるとどう感じますか？
マグカップがどんな風になるのか、多少はイメージできるようになりました。ただ、この商品プレビューからオシャレにラテを飲む姿は想像しにくいですね（笑）。
では、次の写真をみてください。
すごく立体的になりました。それに、素材の質感とか重厚感みたいなものも感じられます。ここまで再現度が高いと、自分が使っている姿もかなりリアルに想像できますよね。
ピクシブには、pixivFACTORYと連携している「BOOTH」というクリエイター向けの通販サービスがあるのですが、そこで人気があるグッズは、どれもサムネイルの魅力が重要になっています。
実物の写真を使っていたり、pixivFACTORYの商品プレビューの画像をサムネイルとして使っていたり。使用感が想像できるようなリアルなものほど人気を得ています。
では、どのようにしてリアルさを作り出すのでしょうか？
リアルさを作り出す3DCGの考え方
イラスト画像をグッズの輪郭で切り取って貼り付けるような、2D感がそのまま残ったような商品プレビューでは、リアルさは表現できません。リアルさを追い求めるなら、立体感を大切にする必要があります。その立体感を作り出す有名な手法として「斜投影」という処理方法があります。
いかがでしょう？立体感こそありますが、あまりリアルとはいえませんよね。
では、他のアプローチについて考えてみましょう。「軸測投影」という処理方法がありまして、それを使うとまた違った見え方になります。
どうでしょう？こちらは、けっこうリアルですよね。
現実世界の物体は、遠くのものは小さく、近くのものは大きくみえるものです。物体に遠近感を与えることが求められています。それを解決する方法として、絵を描く人の間で「パース」と呼ばれている技法があります。そして同様のことが、「透視投影」という処理方法で実現できます。
次に、物体へ光を当ててみましょう。これは「陰影」という処理方法で実現できます。陰影処理では、どんな性質をもった光が、どこから当たったのか、という情報を与えることで、物体の色を変化させます。
現実世界の物体は、どんな素材が使われているのかによって、光に対して複雑な反射をするものです。質感とか、表面の材質にあわせて反射している感じとか、そういうのを加えてみましょう。
いかがでしょう？
ここで取り上げた手法以外にも色んな考え方がありますが、pixivFACTORYでは、いま紹介した透視投影、陰影、質感の処理に加え、写真との合成処理を組み合わせることでリアル感のある商品プレビューを作り出しています。
その裏側には、「ImageMagick」と「Blender」という2つのOSSと、プログラミング言語の「Go」が使われています。
Goは内製でツールを作る必要がある時にだけ使っていまして、画像処理用途として主に使っているのはImageMagickとBlenderです。BlenderはGUIのツールという印象を持たれていますが、Pythonのスクリプトを使えば、ヘッドレスで動作させることができます。
今回、この2つのツールを使った画像処理の仕組みについてご紹介します。
画像処理技術を駆使してシンプルな形状の商品プレビューをつくる
pixivFACTORYで作れるグッズの中には、平面的なみためでも十分にリアル感をだせるものがありまして。とはいえ、立体感をつくりだすことを全く求められていないかというと、そうでもありません。
オリジナルTシャツの商品プレビューについて考えてみましょう。Tシャツは布で出来ているので、布のしわの状態に応じて、イラスト画像にも微妙なしわを入れないとリアルさが欠けます。
この商品プレビューがまさにそれです。
がっつり立体的にする必要がないけど、完全に平面的だと違和感がある。そういうグッズは、「ディスプレイスメントマッピング」という技術を使って商品プレビューを作っています。
実際にみてみましょう。
違和感が消えましたね。
ディスプレイスメントマッピングでは、「変位マップ」というデータを与えることで、イラストに歪みを与えることができます。シンプルな画像合成処理なので、Blenderを使わずに、ImageMagickだけで実現できます。
画像処理技術を駆使して複雑な形状の商品プレビューをつくる
ディスプレイスメントマッピングでは解決できないような、複雑な形状の商品プレビューを作る場合は、Blenderの力が求められます。
それには、あらかじめ作っておいた3Dモデルの面に対して、イラスト画像を貼り付ける「テクスチャマッピング」という手法を使います。商品プレビューは、この手法で作成した画像を、何も印刷されていないグッズの写真と合成することで作成しています。
Blenderだからこそできたことを、2つほど紹介します。
最初にあげるのは、さきほどから例にもでてきたマグカップの商品プレビューです。イラスト画像が歪んでいるだけでなく、裏側にまで回り込んでいます。
次にあげるのが、アクリルスタンドの商品プレビューです。アクリル板独特の透明感やハイライトまで再現されています。また、アクリル板のカット面には、イラストの色がやや屈折して色がついています。
このような高い表現力を持たせられるBlenderですが、高度な陰影処理や質感再現を行うと、画像処理にかかる時間が大幅に伸びてしまうという欠点があります。それを補うために、ここでもImageMagickを活用しています。
一部特殊なものもありますが、陰影処理や質感再現に関わる処理は、実物の写真を活用しています。具体的には、何も印刷されていないグッズの写真から、あらかじめ陰影や質感に相当する画像を抽出しておき、Blenderが吐き出した画像に対して、ImageMagickを使って合成します。
ペンケースを例として取り上げます。こちらの画像で、ペンケースの商品プレビューを作成してみましょう。
画像を元に、Blenderのテクスチャマッピング処理を施します。
次に、何も印刷されていないグッズの写真と合成します。ここからはImageMagickです。
乗算などの合成処理を活用し、質感などを与えていきます。
素材の質感や、ハイライト、影を与えると、かなり実物の写真に近づきます。
一気に、CGっぽさが消えました。
リアル感をだしていく上で重要なこと
リアル感を出す上で、大事なのは「質感」の再現です。その上で、「パース」を揃えていくことが重要になります。
画像処理技術の観点でいえば、だいたいのことはImageMagickでやれます。また、それでは表現できない、パースや複雑な形状を作り込む処理を、Blenderに任せていくのがベストだと私は考えています。
ご清聴、ありがとうございました。
第1回. ググってもみつからないから発明が必要
第2回. 特化した技術がサービスの未来の可能性を育む
第3回. ImageMagick・Blenderを使った画像合成技術
