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
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
5.1k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
3
470
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
110
昭和の職場からアジャイルの世界へ
kumagoro95
1
320
Amazon Nova Reelの可能性
hideg
0
280
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
4.7k
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.4k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
530
WebDriver BiDiとは何なのか
yotahada3
1
130
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.2k
動作確認やテストで漏れがちな観点3選
starfish719
6
990
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
BBQ
matthewcrist
86
9.4k
Thoughts on Productivity
jonyablonski
69
4.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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のプラットフォーム化は避ける
まとめ • レンダリングのしかた • 基本すべてオフスクリーンレンダリング • レンダリングフロー自体はわりと直感的 • もちろん個々の処理で色々最適化はしている •
気になったことは質問やこのあとの懇親会でお願いします
おしまい