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

Transcript

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

   Conference #15

2. 2 2 #pepabotech

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

   2015年にSUZURIの開発に参加して以来、ずっと SUZURIを作り続けています ◦ 必要なことならなんでもやります！ 3

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

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

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

   insttall imagemagick curl ハンズオンで使います！それなりに時間かかるので先 にインストール始めといてください！！

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

8. 8 8 例. Tシャツ

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

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

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

12. 12 12 例. ステッカー

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

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

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

    貼ってる面に合わせてパースをつける • 背景に合わせて明度を調整

16. 16 16 例. GIF

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

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

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

    繋げるとGIFになる

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

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

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

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

    23 Nodejs

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

    ◦ (がんばればできるのかもしれないけど...) 今後の展望 24 Nodejs(課題)

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

26. 26 26 Rust 今後の展望

27. 27 27 Rust 今後の展望

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

    • サーバーはhyper • Rustが良い

29. 29 29 Rust 今後の展望

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

    サーバーではMagickWandを動的リンクしているが静的リ ンクした上でそのままWASMに持ってこれるのか? ▪ 勉強中... https://doc.rust-lang.org/nomicon/ffi.html

31. 31 31 まとめ

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

    Rustやってます

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