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