Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
お絵描きツールの作り方・基本
Search
佐藤さん
April 07, 2017
Programming
1
2.2k
お絵描きツールの作り方・基本
pixiv Night #03で話したやつです
佐藤さん
April 07, 2017
Tweet
Share
More Decks by 佐藤さん
See All by 佐藤さん
FCMを使った用途に合わせたPush通知設計 / Push notification architecture design according to the use case using FCM
supersatosan
2
3.3k
Other Decks in Programming
See All in Programming
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
Immutable ActiveRecord
megane42
0
130
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Honoとフロントエンドの 型安全性について
yodaka
4
250
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
『品質』という言葉が嫌いな理由
korimu
0
160
Domain-Driven Transformation
hschwentner
2
1.9k
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Agile that works and the tools we love
rasmusluckow
328
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
84
4.6k
Writing Fast Ruby
sferik
628
61k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Become a Pro
speakerdeck
PRO
26
5.1k
The Invisible Side of Design
smashingmag
299
50k
Speed Design
sergeychernyshev
25
780
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
pixiv Night #03 お絵かきツールの作り方・基本
自己紹介 • ゆでまんじゅう / 岡田 康治 • 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のプラットフォーム化は避ける
まとめ • レンダリングのしかた • 基本すべてオフスクリーンレンダリング • レンダリングフロー自体はわりと直感的 • もちろん個々の処理で色々最適化はしている •
気になったことは質問やこのあとの懇親会でお願いします
おしまい