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
Amazon Nova Reelの可能性
hideg
0
280
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
210
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
200
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
5k
テストをしないQAエンジニアは何をしているか?
nealle
0
110
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
310
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
140
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
150
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
3.7k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
230
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
200
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
170
Featured
See All Featured
How GitHub (no longer) Works
holman
313
140k
No one is an island. Learnings from fostering a developers community.
thoeni
20
3.1k
Designing for humans not robots
tammielis
250
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Embracing the Ebb and Flow
colly
84
4.6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Code Review Best Practice
trishagee
66
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
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のプラットフォーム化は避ける
まとめ • レンダリングのしかた • 基本すべてオフスクリーンレンダリング • レンダリングフロー自体はわりと直感的 • もちろん個々の処理で色々最適化はしている •
気になったことは質問やこのあとの懇親会でお願いします
おしまい