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.1k
お絵描きツールの作り方・基本
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.2k
Other Decks in Programming
See All in Programming
GPU Hash Table | レイトレ合宿10
yknishidate
0
350
Memory API: Patterns, Use Cases, and Performance
josepaumard
2
210
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
4
430
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
950
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.2k
CSC305 Lecture 13
javiergs
PRO
0
110
フロントエンドの現在地とこれから
koba04
10
4.7k
Integrating AI in Your Enterprise Java Applications
ivargrimstad
0
950
知られざるNaNの世界
hole
3
1.1k
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
420
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
110
Featured
See All Featured
Writing Fast Ruby
sferik
626
60k
BBQ
matthewcrist
85
9.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
260
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The Pragmatic Product Professional
lauravandoore
31
6.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
What's new in Ruby 2.0
geeforr
342
31k
The Language of Interfaces
destraynor
154
24k
4 Signs Your Business is Dying
shpigford
180
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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のプラットフォーム化は避ける
まとめ • レンダリングのしかた • 基本すべてオフスクリーンレンダリング • レンダリングフロー自体はわりと直感的 • もちろん個々の処理で色々最適化はしている •
気になったことは質問やこのあとの懇親会でお願いします
おしまい