pixivFACTORYのプレビューを支える技術

Transcript

1. pixivFACTORYのプレ ビューを支える技術 みど
2. pixivFACTORYとは
3. pixivFACTORYではグッズの仕上がりの イメージを確認する機能を提供している
5. チーム内でプレビューと呼ばれている pixivFACTORYの売りのひとつ
6. 今回はpixivFACTORYのプレビューに焦 点を絞ってお話ししたいと思います
7. 1. ユーザがグッズに印刷したい画像をサーバに アップロードする 2. サーバでアップロードされた画像からプレビュー 画像を生成する 3. プレビュー画像をユーザに送る プレビューが出来るまで流れ
8. ユーザがアップロードした画像
9. プレビュー画像 (缶バッジ)
10. プレビュー画像は、基本的にマスクと画像 合成によって作られている
11. マスクによりグッズと形状をあわせる
12. 画像合成によりグッズの質感や立体感を 表現する
13. 缶バッジの場合
14. ユーザがアップロードした画像
15. 正面から見える領域 (水色の線の内側)
16. マスクで形状をあわせる
17. 影用の画像を乗算する
18. てかり用の画像を重ねる
19. マスクや合成用の画像はデザイナーが PhotoshopやIllustratorを駆使して作成し ている
20. マスクと画像合成の素材画像
21. マスク処理や画像合成をするために ImageMagickを利用している
22. ImageMagickによる処理 ImageMagickでは、マスクから画像合成までの全 ての処理を1回のコマンドで実行できる convert -compose In +swap input.png mask.png -composite -compose Multiply shadow.png +swap -composite -compose DstOver lighting. png +swap -composite output.png
23. 平面に印刷されているグッズに関しては、 マスクと画像合成でかなりそれっぽくなる
24. しかし、複雑な形をしているグッズの場合 は、マスクだけでは画像の形状をあわせ られない場合がある
25. タンブラーの場合(中央が膨らんでる)
26. タンブラーの場合(外側が狭まっている)
27. 複雑な形状をしたグッズの場合は、グッ ズにあわせて画像を歪める必要がある
28. • Displacement Mapping (ImageMagick) • UV Mapping (Blender) pixivFACTORYが採用している方式
29. Displacement Mapping
30. マップ画像を使って対応する画像のピクセルを移 動させて画像を変形させる手法 法線マップと発想が似ているが、Displacement Mappingは各点を実際に移動させる点が違う Displacement Mapping
31. ImageMagickの処理 ImageMagickが2DバージョンのDisplacement Mappingをサポートしているので、マップ画像さえ あれば簡単に利用できる。 composite map_h.png input.png map_v.png - displace 210x40 output.png
32. クッションの例
33. ユーザがアップロードした画像
34. Displacement Mapping
35. マスク&画像合成
36. 変換処理自体はImageMagickがやってく れるので、Displacement Mapping用の マップ画像の作成がとても重要になる
37. 試行錯誤の結果、グリッドとグリッドを歪 めた画像を用意して、線の移動量から マップ画像を生成するツールを内製する
38. 基準となるグリッド画像
39. クッション用に歪めたグリッド画像
40. 生成されたマップ画像
41. Displacement Mappingの問題 • 正確に画像を歪めるのが難しい • 精度の高いマップ画像が必要になる • マップ画像を作るツールを内製しないといけな いので大変
42. この問題を解決するためにサーバに Blenderを導入する
43. • オープンソースの3DCGを制作するソフトウェア ◦ 3Dモデリング ◦ 3Dモデルのレンダリング Blenderとは
45. pixivFACTORYでは、Blenderを使って サーバで3Dモデルのレンダリングを行 なっている
46. • ユーザがアップロードした画像をテクスチャにす る • 3Dモデルにテキスチャマッピング(UVマッピン グ)することでグッズの形状に画像を歪める サーバサイドレンダリングの流れ
47. マグカップの場合
48. Blenderのレンダリング結果
49. マスク&画像合成
50. Blenderの良い所
51. • マルチプラットフォームなソフトウェア ◦ チームメンバーの開発機(Mac OS X, Linux)で動かせる ◦ サーバ(Linux)でも動かせる Blenderの良い所
52. Blenderの良い所 • 3Dモデルリングツール ◦ レンダリング結果を簡単に確認できる ◦ Displacement Mappingに比べるとはるかに楽にプレ ビューの調整が出来る
53. Blenderの良い所 • ヘッドレスで動かせる ◦ サーバでXを立ち上げる必要がない ◦ アプリケーションサーバからblenderコマンドをexecする だけで動かせる blender --background mug.blend --python rendering.py
54. Blenderの良い所 • Pythonスクリプトでレンダリングの制御ができる ◦ 導入の決め手になった機能 ◦ あらゆる操作がプログラムから制御可能
55. Pythonスクリプトでやっていること • ユーザがアップロードした画像をテクスチャとし て設定する(画像のパスは環境変数でわたす) • モデルを複数方向からレンダリングする
57. • 複雑な形状のグッズの場合は3Dモデルを作成 するのが非常に大変になる Blenderを使ったプレビューの問題
58. まとめ (1/2) • pixivFACTORYではユーザがアップロードした 画像からプレビュー画像を生成する • マスクすることでグッズと形状をあわせる • 画像合成でグッズの質感や立体感を表現する
59. まとめ (2/2) • 複雑な形状をしたグッズの場合は画像を歪める 必要がある ◦ Displacement Mapping ◦ UV Mapping