用語集
本書に登場した主要な用語を、部ごとにまとめた用語集です。
本書の第1部〜第6部で登場した用語を、初出の部ごとに整理しました。詳しい説明が必要な場合は、各項目末尾のリンクから該当章を参照してください。
第1部 Skiaを理解する
Skia
Google Chrome・Android・Flutterなどが採用している2Dグラフィックエンジン。React Native Skiaは、このSkiaをReact Nativeから直接使えるようにするライブラリです。React Native Skiaとは何か
Canvas
Skiaの描画コンポーネントツリーのルートとなるコンポーネント。<Canvas>の内側だけがSkia専用のレンダラーによって処理され、外側は通常のReact Nativeレンダラーが担当します。Canvasの基本要素
シーングラフ(Scene Graph)
Skia専用のレンダラーが、<Canvas>配下のReactコンポーネントツリーを変換した先にある、描画命令の並んだ内部表現。<Circle cx={128} cy={128} r={64} />のようなJSXは、最終的に「この座標にこの半径で円を描け」という命令に変換されます。しくみを知る
保持モード(Retained Mode)
シーンをReactコンポーネントのツリーとして宣言し、React Native Skiaがそれをディスプレイリストに変換して描画する方式。プロパティ値の変化だけをネイティブ側に伝えればよいため、アニメーション中のコストがほぼゼロで済みます。React Native Skiaの基本的な描画方式です。最初の描画とレンダリングモード
即時モード(Immediate Mode)
<Picture>のように、コンポーネントツリーの形が固定されず、1フレームごとに描画命令の数自体が変わりうる描画方式。beginRecordingからfinishRecordingAsPictureまでの間に発行した命令をまとめて1枚の絵として扱います。最初の描画とレンダリングモード
worklet
Reanimatedが提供する仕組みで、関数の先頭に"worklet"という文字列を書くだけで、その関数をUIスレッド上で実行できる形に変換してもらえます。JavaScriptスレッドを介さずに毎フレームの値更新ができるため、Skiaのアニメーションと相性がよい仕組みです。しくみを知る
共有値(Shared Value)
Reanimatedが提供する、UIスレッドとJavaScriptスレッドの両方から参照・更新できる値。Skiaの描画プロパティにそのまま渡すと、Reactの再レンダリングを介さずにUIスレッド上でアニメーションできます。Reanimatedとの連携
第2部 Canvasと図形の基本
塗り(Paint)
色・線の太さ・背景との合成方法といった「どう描くか」を決める描画属性をまとめたもの。propsとして渡す方法と、<Paint>コンポーネントとして子要素に渡す方法の2通りが使えます。Paintを理解する
Path
任意の形状を表現できる、点と線分・曲線の集合。星形やアイコンのような複雑な図形を描くのに使います。可変(mutable)なPath APIと、PathBuilderによる不変(immutable)なPath APIの2系統があります。多角形とパス
Picture
即時モードで描いた描画命令を1枚の絵として保持するデータ。useDerivedValueのworklet内でbeginRecordingからfinishRecordingAsPictureまでを実行して作り、要素数がフレームごとに変わるような表現に使います。Pictureと再利用可能な描画命令
Atlas
同じテクスチャや画像を大量にインスタンス化して描くための、GPUに近い低レベルコンポーネント。タイルマップやスプライトアニメーションのように、似た見た目のオブジェクトを多数・異なる変形で描きたい場面に向いています。useRSXformBufferなどのバッファ系フックと組み合わせ、worklet内から変形を更新できます。特殊な図形
頂点(Vertices)
<Vertices>が描く、三角形メッシュを構成する点の集合。頂点ごとに色やテクスチャ座標を指定できるため、グラデーションメッシュや画像の歪み(ワーピング)表現に使えます。特殊な図形
Patch
4辺すべてを3次ベジェ曲線で定義した、曲面を持つ矩形(Coonsパッチ)を描くコンポーネント。頂点ごとに色を指定すると、曲がった境界を持つ滑らかなグラデーションが作れます。特殊な図形
第3部 画像とテキスト
Paragraph
複数行・複数スタイルのテキストレイアウトを扱うAPI。Skia.ParagraphBuilderでスタイル付きテキストを組み立て、<Paragraph>で描画します。単純な1行テキストには<Text>とuseFontで十分です。テキストの基本
グリフ(Glyph)
フォント内の個々の字形。<Glyphs>はグリフIDと位置の配列を直接受け取って描画する低レベルAPIで、<Text>のような自動レイアウトを行わない代わりに、1文字ずつの位置を完全にコントロールできます。テキストの応用
テキストブロブ(TextBlob)
グリフ・位置・フォント情報をひとまとめにした不変(immutable)のデータ。Skia.TextBlob.MakeFromTextで作成し、レイアウト計算を1回だけ行ってから何度も描画できるため、同じテキストを毎フレーム描画するホットパスでわずかに有利です。テキストの応用
第4部 色・フィルター・シェーダー
カラーフィルター(Color Filter)
描画される各ピクセルの色を変換するエフェクト。Paintの子要素として渡すことで、CircleやImageなど任意の描画コンポーネントに適用できます。ぼかしのように周囲のピクセルを参照する処理はカラーフィルターではなく、次のイメージフィルターの領分です。カラーフィルター
ブレンドモード(Blend Mode)
描画する色(source)と、すでにキャンバスに描かれている色(destination)をどう合成するかを指定する設定。デフォルトは上から重ねて描くsrcOverです。マスクとブレンドモード
マスク(Mask)
「どこを見せるか」を制御する仕組み。luminanceモードではマスク画像の輝度を使い、白いピクセルが見え、黒いピクセルは見えなくなります。輪郭をガウスぼかしする「マスクフィルター(mask filter)」とは別の仕組みです。マスクとブレンドモード
イメージフィルター(Image Filter)
周囲のピクセルも参照して計算する、カラーフィルターより汎用的なエフェクト。ぼかし(Blur)やドロップシャドウ(Shadow)、変位マップ(DisplacementMap)などが該当します。イメージフィルター入門
パスエフェクト(Path Effect)
ストロークを描く前段階で、パスの形そのものを加工するエフェクト。ストローク線を破線にしたり、角を丸めたり、別のパスを繰り返し配置したりできます。パスエフェクト
シェーダー(Shader)
ピクセル単位で色を計算する仕組み。グラデーションやパーリンノイズなど、これまでの章で登場したエフェクトの多くも、内部的にはシェーダーとして実装されています。シェーダー入門とSkSL
SkSL(Skia Shading Language)
Skiaが提供する、自分でシェーダーを書ける専用の言語。構文はGLSLとよく似ていますが、texture()ではなく.eval()を使うなど細かな違いがあります。文字列として書いたコードをSkia.RuntimeEffect.Makeでコンパイルして使います。シェーダー入門とSkSL
uniform
JavaScript側からSkSLシェーダーにパラメーターを渡すための変数。Reactのpropsのように、毎フレーム異なる値を渡してシェーダーの見た目を動的に変えられます。シェーダー入門とSkSL
RuntimeShader
コンパイル済みのSkSLシェーダー(RuntimeEffect)を、図形の塗りやイメージフィルターとして適用するコンポーネント。自作の画素処理を既存のコンテンツに自由にかけられます。高度なイメージフィルター
第5部 アニメーションと操作
useClock
Skiaが提供する、時間経過そのものを共有値として扱えるフック。requestAnimationFrameを自分で書かなくても、clockの値がUIスレッド上で更新され続けます。Skiaのアニメーションモデル
GestureDetector
react-native-gesture-handlerが提供する、ジェスチャーを検知する対象のビューを包むコンポーネント。Gesture.Pan()などで作ったジェスチャーと組み合わせ、共有値を更新することでSkiaの図形を指の動きに連動させられます。ジェスチャーと組み合わせる
useTexture
UIスレッド上で直接テクスチャ(画像)を作るフック。useRectBuffer・useRSXformBufferのようなバッファ系フックと組み合わせると、JSスレッドをまたがずに<Atlas>の大量のスプライトを毎フレーム動かせます。テクスチャアニメーション
第6部 実践トピック
Skottie
Skiaに組み込まれたLottieアニメーションのレンダラー。After Effectsで作りBodymovin/Lottieプラグインで書き出したJSONを、<Canvas>上でそのまま再生できます。色やテキストをJavaScript側から動的に書き換えるダイナミックプロパティにも対応しています。Skottie(Lottieアニメーション)
useVideo
動画のフレームをSkiaの画像として取得するフック。取得したフレームはImage・ImageShader・Atlasなど、通常のSkia画像が使える場所ならどこにでも渡せます。動画の描画
Headless
React Native SkiaをNode上で動かし、画面に出さずに画像を生成する仕組み。makeOffscreenSurfaceで画面に紐づかない描画先(サーフェス)を作り、drawOffscreenでJSXの図形ツリーを描画してスナップショットを取得します。Headlessレンダリングとオフスクリーン活用
CanvasKit
SkiaのWebAssembly(WASM)ビルド。React Native SkiaがWebやNode上で動く根本的な理由で、ネイティブ版がC++のSkiaをJSIバインディング経由で直接呼び出すのに対し、Web版はこのWASMバイナリをロードして各APIを橋渡ししています。Web対応のしくみ