Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
pixivFACTORYのプレビューを支える技術
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Akira Midorikawa
September 04, 2015
Programming
0
15k
pixivFACTORYのプレビューを支える技術
Akira Midorikawa
September 04, 2015
Tweet
Share
More Decks by Akira Midorikawa
See All by Akira Midorikawa
noteの記事レコメンドについて
redcap97
1
700
Other Decks in Programming
See All in Programming
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
440
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
orgachem
PRO
1
220
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.6k
Gemini for developers
meteatamel
0
100
CSC307 Lecture 06
javiergs
PRO
0
690
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
5
790
Fluid Templating in TYPO3 14
s2b
0
130
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
CSC307 Lecture 10
javiergs
PRO
1
660
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
Featured
See All Featured
sira's awesome portfolio website redesign presentation
elsirapls
0
150
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
57
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
750
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
150
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
71
Thoughts on Productivity
jonyablonski
74
5k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
390
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Transcript
pixivFACTORYのプレ ビューを支える技術 みど
pixivFACTORYとは
pixivFACTORYではグッズの仕上がりの イメージを確認する機能を提供している
None
チーム内でプレビューと呼ばれている pixivFACTORYの売りのひとつ
今回はpixivFACTORYのプレビューに焦 点を絞ってお話ししたいと思います
1. ユーザがグッズに印刷したい画像をサーバに アップロードする 2. サーバでアップロードされた画像からプレビュー 画像を生成する 3. プレビュー画像をユーザに送る プレビューが出来るまで流れ
ユーザがアップロードした画像
プレビュー画像 (缶バッジ)
プレビュー画像は、基本的にマスクと画像 合成によって作られている
マスクによりグッズと形状をあわせる
画像合成によりグッズの質感や立体感を 表現する
缶バッジの場合
ユーザがアップロードした画像
正面から見える領域 (水色の線の内側)
マスクで形状をあわせる
影用の画像を乗算する
てかり用の画像を重ねる
マスクや合成用の画像はデザイナーが PhotoshopやIllustratorを駆使して作成し ている
マスクと画像合成の素材画像
マスク処理や画像合成をするために ImageMagickを利用している
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
平面に印刷されているグッズに関しては、 マスクと画像合成でかなりそれっぽくなる
しかし、複雑な形をしているグッズの場合 は、マスクだけでは画像の形状をあわせ られない場合がある
タンブラーの場合(中央が膨らんでる)
タンブラーの場合(外側が狭まっている)
複雑な形状をしたグッズの場合は、グッ ズにあわせて画像を歪める必要がある
• Displacement Mapping (ImageMagick) • UV Mapping (Blender) pixivFACTORYが採用している方式
Displacement Mapping
マップ画像を使って対応する画像のピクセルを移 動させて画像を変形させる手法 法線マップと発想が似ているが、Displacement Mappingは各点を実際に移動させる点が違う Displacement Mapping
ImageMagickの処理 ImageMagickが2DバージョンのDisplacement Mappingをサポートしているので、マップ画像さえ あれば簡単に利用できる。 composite map_h.png input.png map_v.png - displace
210x40 output.png
クッションの例
ユーザがアップロードした画像
Displacement Mapping
マスク&画像合成
変換処理自体はImageMagickがやってく れるので、Displacement Mapping用の マップ画像の作成がとても重要になる
試行錯誤の結果、グリッドとグリッドを歪 めた画像を用意して、線の移動量から マップ画像を生成するツールを内製する
基準となるグリッド画像
クッション用に歪めたグリッド画像
生成されたマップ画像
Displacement Mappingの問題 • 正確に画像を歪めるのが難しい • 精度の高いマップ画像が必要になる • マップ画像を作るツールを内製しないといけな いので大変
この問題を解決するためにサーバに Blenderを導入する
• オープンソースの3DCGを制作するソフトウェア ◦ 3Dモデリング ◦ 3Dモデルのレンダリング Blenderとは
None
pixivFACTORYでは、Blenderを使って サーバで3Dモデルのレンダリングを行 なっている
• ユーザがアップロードした画像をテクスチャにす る • 3Dモデルにテキスチャマッピング(UVマッピン グ)することでグッズの形状に画像を歪める サーバサイドレンダリングの流れ
マグカップの場合
Blenderのレンダリング結果
マスク&画像合成
Blenderの良い所
• マルチプラットフォームなソフトウェア ◦ チームメンバーの開発機(Mac OS X, Linux)で動かせる ◦ サーバ(Linux)でも動かせる Blenderの良い所
Blenderの良い所 • 3Dモデルリングツール ◦ レンダリング結果を簡単に確認できる ◦ Displacement Mappingに比べるとはるかに楽にプレ ビューの調整が出来る
Blenderの良い所 • ヘッドレスで動かせる ◦ サーバでXを立ち上げる必要がない ◦ アプリケーションサーバからblenderコマンドをexecする だけで動かせる blender --background
mug.blend --python rendering.py
Blenderの良い所 • Pythonスクリプトでレンダリングの制御ができる ◦ 導入の決め手になった機能 ◦ あらゆる操作がプログラムから制御可能
Pythonスクリプトでやっていること • ユーザがアップロードした画像をテクスチャとし て設定する(画像のパスは環境変数でわたす) • モデルを複数方向からレンダリングする
None
• 複雑な形状のグッズの場合は3Dモデルを作成 するのが非常に大変になる Blenderを使ったプレビューの問題
まとめ (1/2) • pixivFACTORYではユーザがアップロードした 画像からプレビュー画像を生成する • マスクすることでグッズと形状をあわせる • 画像合成でグッズの質感や立体感を表現する
まとめ (2/2) • 複雑な形状をしたグッズの場合は画像を歪める 必要がある ◦ Displacement Mapping ◦ UV
Mapping