お絵描きツールの作り方・基本

pixiv Night #03で話したやつです

Transcript

1. pixiv Night #03
   お絵かきツールの作り方・基本
   

   View Slide

2. 自己紹介
   • ゆでまんじゅう / 岡田 康治
   • Androidエンジニア / ドローツールエンジニア
   • 他にもiOS・フロント・バックエンドも必要に応じて
   

   View Slide

3. pixiv Sketchのドローの歴史
   2015/06 ~ 2016/04 2016/04 ~
   時代はOpenGLだよ
   2016/01/xx
   旧世代 OpenGL / WebGL 世代
   ● 2016 / 04 : iOS
   ● 2016 / 07 : Android
   ● 2017 / 03 : Web
   ● Webはcanvas
   ● iOSはWebView
   ● 途中からネイティブ化
   

   View Slide

4. ドロー機能の紹介
   • 様々な種類のブラシと消しゴムでドローイング
   • ブラシの太さ・透明度の変更・プレビュー
   • 入り・払い
   • 塗りつぶし
   • 拡大・縮小
   • カラーパレット
   • レイヤー機能
   • 追加、削除
   • 合成モード(加算・乗算etc...)
   • 画像取り込み
   • 結合
   • 複製
   • アルファロック
   • リドゥ・アンドゥ機能
   ※2017年4月4日時点のAndroid版の機能
   

   View Slide

5. 今日の内容を2行で
   • pixiv Sketchのドロー機能の原則
   • どうやってレンダリングしているのか
   

   View Slide

6. pixiv Sketchのドロー機能の原則
   

   View Slide

7. pixiv Sketchのドロー機能の原則
   • デジタルお絵描きを始めるユーザーが初めて触るアプリ
   • Web・iOS・Androidで出来ることを変えない
   • コードを完全に共通化することは目指さない
   

   View Slide

8. デジタルお絵描きを始めるユーザーが初めて触るアプリ
   • PCでお絵描きするユーザーの当たり前が通用しない
   • デジタルお絵描きの言葉で迷わせない
   • ちょっとずつデジタルお絵描きに馴染める
   

   View Slide

9. Web・iOS・Androidで出来ることを変えない
   • Androidでの開発経験がWebでも役に立つ
   • 技術選択は3つのプラットフォームの差に注意が必要
   • 使えるOpenGLの拡張機能等
   • 極稀にちょっとだけ機能をリッチにすることはある
   • Apple Pencil対応
   

   View Slide

10. コードを完全に共通化することは目指さない
    • 全部共通化するのは不可能
    • OpenGL / WebGLの使い方も各プラットフォームで違うし……
    • 各プラットフォームの流儀に従う
    • ドローツールエンジニア以外も取っ掛かりがあることが価値
    

    View Slide

11. どうやってレンダリングしているのか
    

    View Slide

12. この間に一体何が……
    

    View Slide

13. 画面の構成
    • 赤い枠: OpenGLでレンダリング
    • 緑の枠: 各プラットフォームの
    UIフレームワークで構成
    

    View Slide

14. • 各レイヤーはテクスチャとしてGPU側で保持
    • 加えてレンダリング時に使う一時テクスチャが複数
    • 画像は必要になったタイミングでGPUから取り出す
    • 画面には最終的なレンダリング結果のテクスチャを
    そのまま描画するだけ
    基本はオフスクリーンレンダリング
    

    View Slide

15. • イベントが発生した点を時系列データ化
    • 一箇所に点が集まりすぎないようにフィルタリングしてる
    ストロークのサンプリング
    実際のストローク軌跡 サンプリングした点の集合
    

    View Slide

16. • より滑らかな点集合へとサンプリング点を補間
    • ベジェ曲線、ストロークの予測
    ストロークの補間
    サンプリングした点の集合 補間したサンプリング点集合
    体感レイテンシを抑
    える
    

    View Slide

17. • ブラシテクスチャをPointSpriteとしてレンダリング
    • 頂点データはサンプリング点そのもの
    補間したサンプリング点集合
    ストロークのレンダリング
    ストロークテクスチャ
    

    View Slide

18. • ストロークイベントのたびにレンダリングするので
    レイヤーに直接レンダリング出来ない
    現在のレイヤーとストロークの合成
    ストロークテクスチャ
    +
    現在のレイヤーのテクスチャ
    ストローク合成テクスチャ
    

    View Slide

19. レイヤーの統合
    • 下のレイヤーから順に合成テクスチャにレンダリング
    • シェーダーはレイヤーの合成モード等に合わせて適宜変更
    • このレンダリング結果テクスチャが画面に表示される
    レンダリング結果テクスチャ
    

    View Slide

20. 現在のレイヤーへストロークを書き出す
    • ストロークが終了するとレイヤーに書き込む内容が確定する
    ストロークテクスチャ
    +
    現在のレイヤーのテクスチャ
    現在のレイヤーのテクスチャ
    

    View Slide

21. ちなみにブラシのプレビューは?
    • Sine波っぽいストロークデータを
    コード上で生成して渡す
    • 他はすべて実際のレンダリングと同じ
    

    View Slide

22. まとめ
    • pixiv Sketchのドロー機能の原則
    • デジタルお絵描きを始めるユーザーが初めて触るアプリ
    • 現実世界にレイヤーや透明度は存在しない
    • Web・iOS・Androidで出来ることを変えない
    • コードを完全に共通化することは目指さない
    • 第4のプラットフォーム化は避ける
    

    View Slide

23. まとめ
    • レンダリングのしかた
    • 基本すべてオフスクリーンレンダリング
    • レンダリングフロー自体はわりと直感的
    • もちろん個々の処理で色々最適化はしている
    • 気になったことは質問やこのあとの懇親会でお願いします
    

    View Slide

24. おしまい
    

    View Slide