Slide 1
Slide 1 text
1
SUZURIの画像合成
ハンズオン
お冷グラス編
川合悠太 @ SUZURI事業部
2021-06-17 Pepabo Tech Conference #15
Slide 2
Slide 2 text
2
2
#pepabotech
Slide 3
Slide 3 text
3
自己紹介
● 会社ではbudo(ぶどう)、SNS等ではyuta25というHN
でいます
○ https://twitter.com/yuta25
○ https://scrapbox.io/yuta25
● 2015年にSUZURIの開発に参加して以来、ずっと
SUZURIを作り続けています
○ 必要なことならなんでもやります！
3
Slide 4
Slide 4 text
4
4
自己紹介
最近の技術的興味→
永遠のワナビー
Slide 5
Slide 5 text
5
アジェンダ
1. SUZURIにおける画像合成とは
2. ハンズオン
3. 今後の展望
5
Slide 6
Slide 6 text
6
6
先にやっておいてほしいこと
● brew install imagemagick@6 curl
● apt insttall imagemagick curl
ハンズオンで使います！それなりに時間かかるので先
にインストール始めといてください！！
Slide 7
Slide 7 text
7
SUZURIにおける画像合成
とは
Section 1
7
SUZURIでやってる画像合成ってこういうものですよ〜という紹介
Slide 8
Slide 8 text
8
8
例. Tシャツ
Slide 9
Slide 9 text
9
9
SUZURIにおける画像合成(Tシャツ)
Slide 10
Slide 10 text
10
SUZURIにおける画像合成(Tシャツ)
10
Slide 11
Slide 11 text
11
● シワの感じ
● 影
11
SUZURIにおける画像合成(Tシャツ)
Slide 12
Slide 12 text
12
12
例. ステッカー
Slide 13
Slide 13 text
13
13
SUZURIにおける画像合成(ステッカー)
Slide 14
Slide 14 text
14
14
SUZURIにおける画像合成(ステッカー)
Slide 15
Slide 15 text
15
15
SUZURIにおける画像合成(ステッカー)
● 昔住んでた部屋(江戸川橋)
○ 自部屋の郵便受けを撮影
● 自動で白フチ
● 貼ってる面に合わせてパースをつける
● 背景に合わせて明度を調整
Slide 16
Slide 16 text
16
16
例. GIF
Slide 17
Slide 17 text
17
17
SUZURIにおける画像合成(100TEE)
Slide 18
Slide 18 text
18
18
SUZURIにおける画像合成(100TEE)
+
Slide 19
Slide 19 text
19
19
SUZURIにおける画像合成(100TEE)
● 回転に合わせて画像にパースをつける
● 表と裏で別の画像を合成
● 丁寧に一枚ずつ作る
○ 繋げるとGIFになる
Slide 20
Slide 20 text
20
ハンズオン
Section 2
20
実際につくってみましょう
Slide 21
Slide 21 text
21
21
ハンズオン
手順URLはこちら！！
https://scrapbox.io/suzuri/SUZURIの画像合成ハ
ンズオンお冷グラス編
発表もそっちでやります！！
Slide 22
Slide 22 text
22
今後の展望
Section 3
22
Nodejs、Rust、そしてWASMへ
Slide 23
Slide 23 text
23
● Nodejs(express)の画像合成サーバー
● ハンズオンでやったことをまったくそのままできる
● https://github.com/aheckmann/gm
○ Imagemagickのコマンドをラップして呼び出す
今後の展望
23
Nodejs
Slide 24
Slide 24 text
24
● ハンズオンでおわかりの通り、コマンド引数の多さやその副作用、パイプ多様に
よるデバッグの難易度が高い
● 画像合成自体はサーバーの外で行われるため、コントロール(リソース管理)が難
しい。
○ 重い処理と軽い処理でスレッド分けて、重い処理はリクエストなるべくブロッ
クして直列処理、軽い処理はある程度並行処理みたいなのができると理想
○ (がんばればできるのかもしれないけど...)
今後の展望
24
Nodejs(課題)
Slide 25
Slide 25 text
25
25
Rust
今後の展望
● Rustで新しい画像合成サーバーを作成中
○ 一部プロダクション環境で運用してます
Slide 26
Slide 26 text
26
26
Rust
今後の展望
Slide 27
Slide 27 text
27
27
Rust
今後の展望
Slide 28
Slide 28 text
28
28
Rust
今後の展望
● RustのFFIとMagicWand
○ コマンド呼んで返りを待つのではなく、サーバー内でメモ
リやスレッドをコントロールしていくことでメモリ効率やス
レッド効率の改善(展望)
● サーバーはhyper
● Rustが良い
Slide 29
Slide 29 text
29
29
Rust
今後の展望
Slide 30
Slide 30 text
30
30
そしてWASMへ
今後の展望
● サーバーサイドで画像合成ロジックができたらそ
のままブラウザに持ってこれないかな?
○ 圧倒的リソース削減&レスポンス速度の改善が可能
○ サーバーではMagickWandを動的リンクしているが静的リ
ンクした上でそのままWASMに持ってこれるのか?
■ 勉強中... https://doc.rust-lang.org/nomicon/ffi.html
Slide 31
Slide 31 text
31
31
まとめ
Slide 32
Slide 32 text
32
32
まとめ
● SUZURでは画像合成で面白いことをしてきたし
これからもしていきたい
● 画像はネットにたくさんある。画像合成は手元で
すぐにできる。楽しい。
● Rustやってます
Slide 33
Slide 33 text
33
33
We are hiring!!!!!!
https://recruit.pepabo.com/