SUZURIの画像合成ハンズオンお冷グラス編

1 SUZURIの画像合成  ハンズオン  お冷グラス編  川合悠太 @ SUZURI事業部 2021-06-17 Pepabo Tech
Conference #15

2 2 #pepabotech

3 自己紹介 • 会社ではbudo(ぶどう)、SNS等ではyuta25というHN でいます ◦ https://twitter.com/yuta25 ◦ https://scrapbox.io/yuta25 •
2015年にSUZURIの開発に参加して以来、ずっと SUZURIを作り続けています ◦ 必要なことならなんでもやります！ 3

4 4 自己紹介最近の技術的興味→ 永遠のワナビー

5 アジェンダ 1. SUZURIにおける画像合成とは 2. ハンズオン 3. 今後の展望 5

6 6 先にやっておいてほしいこと • brew install imagemagick@6 curl • apt
insttall imagemagick curl ハンズオンで使います！それなりに時間かかるので先にインストール始めといてください！！

7 SUZURIにおける画像合成とは Section 1 7 SUZURIでやってる画像合成ってこういうものですよ〜という紹介

8 8 例. Tシャツ

9 9 SUZURIにおける画像合成(Tシャツ)

10 SUZURIにおける画像合成(Tシャツ) 10

11 • シワの感じ • 影 11 SUZURIにおける画像合成(Tシャツ)

12 12 例. ステッカー

13 13 SUZURIにおける画像合成(ステッカー)

14 14 SUZURIにおける画像合成(ステッカー)

15 15 SUZURIにおける画像合成(ステッカー) • 昔住んでた部屋(江戸川橋) ◦ 自部屋の郵便受けを撮影 • 自動で白フチ •
貼ってる面に合わせてパースをつける • 背景に合わせて明度を調整

16 16 例. GIF

17 17 SUZURIにおける画像合成(100TEE)

18 18 SUZURIにおける画像合成(100TEE) +

19 19 SUZURIにおける画像合成(100TEE) • 回転に合わせて画像にパースをつける • 表と裏で別の画像を合成 • 丁寧に一枚ずつ作る ◦
繋げるとGIFになる

20 ハンズオン Section 2 20 実際につくってみましょう

21 21 ハンズオン手順URLはこちら！！ https://scrapbox.io/suzuri/SUZURIの画像合成ハンズオンお冷グラス編発表もそっちでやります！！

22 今後の展望 Section 3 22 Nodejs、Rust、そしてWASMへ

23 • Nodejs(express)の画像合成サーバー • ハンズオンでやったことをまったくそのままできる • https://github.com/aheckmann/gm ◦ Imagemagickのコマンドをラップして呼び出す今後の展望
23 Nodejs

24 • ハンズオンでおわかりの通り、コマンド引数の多さやその副作用、パイプ多様によるデバッグの難易度が高い • 画像合成自体はサーバーの外で行われるため、コントロール(リソース管理)が難しい。 ◦ 重い処理と軽い処理でスレッド分けて、重い処理はリクエストなるべくブロックして直列処理、軽い処理はある程度並行処理みたいなのができると理想
◦ (がんばればできるのかもしれないけど...) 今後の展望 24 Nodejs(課題)

25 25 Rust 今後の展望 • Rustで新しい画像合成サーバーを作成中 ◦ 一部プロダクション環境で運用してます

26 26 Rust 今後の展望

28 28 Rust 今後の展望 • RustのFFIとMagicWand ◦ コマンド呼んで返りを待つのではなく、サーバー内でメモリやスレッドをコントロールしていくことでメモリ効率やスレッド効率の改善(展望)
• サーバーはhyper • Rustが良い

30 30 そしてWASMへ今後の展望 • サーバーサイドで画像合成ロジックができたらそのままブラウザに持ってこれないかな? ◦ 圧倒的リソース削減&レスポンス速度の改善が可能 ◦
サーバーではMagickWandを動的リンクしているが静的リンクした上でそのままWASMに持ってこれるのか? ▪ 勉強中... https://doc.rust-lang.org/nomicon/ﬃ.html

31 31 まとめ

32 32 まとめ • SUZURでは画像合成で面白いことをしてきたしこれからもしていきたい • 画像はネットにたくさんある。画像合成は手元ですぐにできる。楽しい。 •
Rustやってます

33 33 We are hiring!!!!!! https://recruit.pepabo.com/

SUZURIの画像合成ハンズオンお冷グラス編

SUZURIの画像合成ハンズオンお冷グラス編

yuta25

Other Decks in Programming

Featured

Transcript

1 SUZURIの画像合成  ハンズオン  お冷グラス編  川合悠太 @ SUZURI事業部 2021-06-17 Pepabo Tech

2 2 #pepabotech

3 自己紹介 • 会社ではbudo(ぶどう)、SNS等ではyuta25というHN でいます ◦ https://twitter.com/yuta25 ◦ https://scrapbox.io/yuta25 •

4 4 自己紹介最近の技術的興味→ 永遠のワナビー

5 アジェンダ 1. SUZURIにおける画像合成とは 2. ハンズオン 3. 今後の展望 5

6 6 先にやっておいてほしいこと • brew install imagemagick@6 curl • apt

7 SUZURIにおける画像合成とは Section 1 7 SUZURIでやってる画像合成ってこういうものですよ〜という紹介

8 8 例. Tシャツ

9 9 SUZURIにおける画像合成(Tシャツ)

10 SUZURIにおける画像合成(Tシャツ) 10

11 • シワの感じ • 影 11 SUZURIにおける画像合成(Tシャツ)

12 12 例. ステッカー

13 13 SUZURIにおける画像合成(ステッカー)

14 14 SUZURIにおける画像合成(ステッカー)

15 15 SUZURIにおける画像合成(ステッカー) • 昔住んでた部屋(江戸川橋) ◦ 自部屋の郵便受けを撮影 • 自動で白フチ •

16 16 例. GIF

17 17 SUZURIにおける画像合成(100TEE)

18 18 SUZURIにおける画像合成(100TEE) +

19 19 SUZURIにおける画像合成(100TEE) • 回転に合わせて画像にパースをつける • 表と裏で別の画像を合成 • 丁寧に一枚ずつ作る ◦

20 ハンズオン Section 2 20 実際につくってみましょう

21 21 ハンズオン手順URLはこちら！！ https://scrapbox.io/suzuri/SUZURIの画像合成ハンズオンお冷グラス編発表もそっちでやります！！

22 今後の展望 Section 3 22 Nodejs、Rust、そしてWASMへ

23 • Nodejs(express)の画像合成サーバー • ハンズオンでやったことをまったくそのままできる • https://github.com/aheckmann/gm ◦ Imagemagickのコマンドをラップして呼び出す今後の展望

25 25 Rust 今後の展望 • Rustで新しい画像合成サーバーを作成中 ◦ 一部プロダクション環境で運用してます

26 26 Rust 今後の展望

27 27 Rust 今後の展望

28 28 Rust 今後の展望 • RustのFFIとMagicWand ◦ コマンド呼んで返りを待つのではなく、サーバー内でメモリやスレッドをコントロールしていくことでメモリ効率やスレッド効率の改善(展望)

29 29 Rust 今後の展望

30 30 そしてWASMへ今後の展望 • サーバーサイドで画像合成ロジックができたらそのままブラウザに持ってこれないかな? ◦ 圧倒的リソース削減&レスポンス速度の改善が可能 ◦

31 31 まとめ

32 32 まとめ • SUZURでは画像合成で面白いことをしてきたしこれからもしていきたい • 画像はネットにたくさんある。画像合成は手元ですぐにできる。楽しい。 •

33 33 We are hiring!!!!!! https://recruit.pepabo.com/