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

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

Transcript

1. pixiv Night #03 お絵かきツールの作り方・基本
2. 自己紹介 • ゆでまんじゅう / 岡田 康治 • Androidエンジニア / ドローツールエンジニア • 他にもiOS・フロント・バックエンドも必要に応じて
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 • 途中からネイティブ化
4. ドロー機能の紹介 • 様々な種類のブラシと消しゴムでドローイング • ブラシの太さ・透明度の変更・プレビュー • 入り・払い • 塗りつぶし • 拡大・縮小 • カラーパレット • レイヤー機能 • 追加、削除 • 合成モード(加算・乗算etc...) • 画像取り込み • 結合 • 複製 • アルファロック • リドゥ・アンドゥ機能 ※2017年4月4日時点のAndroid版の機能
5. 今日の内容を2行で • pixiv Sketchのドロー機能の原則 • どうやってレンダリングしているのか
6. pixiv Sketchのドロー機能の原則
7. pixiv Sketchのドロー機能の原則 • デジタルお絵描きを始めるユーザーが初めて触るアプリ • Web・iOS・Androidで出来ることを変えない • コードを完全に共通化することは目指さない
8. デジタルお絵描きを始めるユーザーが初めて触るアプリ • PCでお絵描きするユーザーの当たり前が通用しない • デジタルお絵描きの言葉で迷わせない • ちょっとずつデジタルお絵描きに馴染める
9. Web・iOS・Androidで出来ることを変えない • Androidでの開発経験がWebでも役に立つ • 技術選択は3つのプラットフォームの差に注意が必要 • 使えるOpenGLの拡張機能等 • 極稀にちょっとだけ機能をリッチにすることはある • Apple Pencil対応
10. コードを完全に共通化することは目指さない • 全部共通化するのは不可能 • OpenGL / WebGLの使い方も各プラットフォームで違うし…… • 各プラットフォームの流儀に従う • ドローツールエンジニア以外も取っ掛かりがあることが価値
11. どうやってレンダリングしているのか
12. この間に一体何が……
13. 画面の構成 • 赤い枠: OpenGLでレンダリング • 緑の枠: 各プラットフォームの UIフレームワークで構成
14. • 各レイヤーはテクスチャとしてGPU側で保持 • 加えてレンダリング時に使う一時テクスチャが複数 • 画像は必要になったタイミングでGPUから取り出す • 画面には最終的なレンダリング結果のテクスチャを そのまま描画するだけ 基本はオフスクリーンレンダリング
15. • イベントが発生した点を時系列データ化 • 一箇所に点が集まりすぎないようにフィルタリングしてる ストロークのサンプリング 実際のストローク軌跡 サンプリングした点の集合
16. • より滑らかな点集合へとサンプリング点を補間 • ベジェ曲線、ストロークの予測 ストロークの補間 サンプリングした点の集合 補間したサンプリング点集合 体感レイテンシを抑 える
17. • ブラシテクスチャをPointSpriteとしてレンダリング • 頂点データはサンプリング点そのもの 補間したサンプリング点集合 ストロークのレンダリング ストロークテクスチャ
18. • ストロークイベントのたびにレンダリングするので レイヤーに直接レンダリング出来ない 現在のレイヤーとストロークの合成 ストロークテクスチャ + 現在のレイヤーのテクスチャ ストローク合成テクスチャ
19. レイヤーの統合 • 下のレイヤーから順に合成テクスチャにレンダリング • シェーダーはレイヤーの合成モード等に合わせて適宜変更 • このレンダリング結果テクスチャが画面に表示される レンダリング結果テクスチャ
20. 現在のレイヤーへストロークを書き出す • ストロークが終了するとレイヤーに書き込む内容が確定する ストロークテクスチャ + 現在のレイヤーのテクスチャ 現在のレイヤーのテクスチャ
21. ちなみにブラシのプレビューは? • Sine波っぽいストロークデータを コード上で生成して渡す • 他はすべて実際のレンダリングと同じ
22. まとめ • pixiv Sketchのドロー機能の原則 • デジタルお絵描きを始めるユーザーが初めて触るアプリ • 現実世界にレイヤーや透明度は存在しない • Web・iOS・Androidで出来ることを変えない • コードを完全に共通化することは目指さない • 第4のプラットフォーム化は避ける
23. まとめ • レンダリングのしかた • 基本すべてオフスクリーンレンダリング • レンダリングフロー自体はわりと直感的 • もちろん個々の処理で色々最適化はしている • 気になったことは質問やこのあとの懇親会でお願いします
24. おしまい