Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

佐藤さん

April 07, 2017
Tweet

More Decks by 佐藤さん

Other Decks in Programming

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