メインコンテンツまでスキップ

Shading 現行機能ドキュメント

ShadingはScratch VMを実行基盤に、Movieのタイムライン、Objectsの描画、PenFXの合成、Three.jsによる3D描画、メディア資産管理、タイムライン書き出しを追加した制作環境です。

このドキュメントは、2026年8月27日時点の現行実装を基準にしています。エディターに表示されるブロックと、旧プロジェクトの読み込み・実行のためだけに残る互換ブロックは分けて記述します。

描画の基本モデル​

Shadingの1フレームは、次の経路で構築されます。

Scratch Blocks / UI
        │
        ▼
Scratch VM primitive
        │  同一 VM tick 内で状態または frame graph に記録
        ▼
MovieAssetManager ── PenFX compositor ── Pen framebuffer
        │
        └──────────── Three.js model scene / camera / lights
                                │
                                ▼
                       preview / rendered frames
                                │
                                ▼
                         MP4 / WebM / PNG / WAV

タイムラインが時刻を決め、render frame がその時刻の描画処理を開始します。Objectsは素材やモデルを描画し、PenFXはPenレイヤーに対してエフェクトや合成を行います。完成したフレームはプレビューに表示するか、ファイルへ書き出します。

主要な概念​

概念役割
MovieAssetManagerタイムライン、資産、カメラ、ライト、フレーム生成、音声、キャッシュを管理するVMごとの状態
render frameプレビューまたは書き出し対象の各フレームを構築するイベント
Objectsコスチューム、コスチュームグループ、動画、テキスト、モデルを描画する機能
sceneObjectsを同じThree.jsシーンと深度バッファで評価する構造
PenFXPenレイヤーを処理する動的なLooksカテゴリ
frame graphScene、Draw、Group、Composite、Transformを順序付きで保持する描画計画
Pen frame transactionフレーム途中の未完成状態を表示せず、完成時にだけPenフレームをcommitする仕組み

現在のツールボックス​

表示名実装上のID内容
Objectsobjectsオブジェクト描画、合成、時間レポーター、ライト
Lookspenfx標準LooksではなくPenFXの動的カテゴリ
Cameramotionカメラ操作とカメラレポーター
Soundsound時間範囲付きの音声ブロック
Eventseventsinitialize、render frame、通常のブロードキャスト
ControlcontrolScratchの制御ブロック
SensingsensingScratchのセンシングブロック
OperatorsoperatorsScratchの演算子とeasing
Variablesdata変数とリスト
My Blocksprocedures通常のカスタムブロック

標準のlooksカテゴリとpenカテゴリは、現在のMovie用ツールボックスでは表示されません。過去のMovie Looksブロックやmyblocksshader_*がランタイムに登録されていても、現行機能の一覧には含めません。現行機能と互換性で詳しく説明します。

章の構成​

ブロック名、opcode、既定値、互換性の扱いは、制作上の呼びやすさより現行実装との一致を優先しています。

実装を確認する場合​

現行ツールボックスとランタイムの責務は、次のファイルが一次ソースです。

ファイル主な責務
src/lib/make-toolbox-xml.js現行ツールボックスのカテゴリと表示ブロック
src/lib/object-blocks.jsObjectsの登録、primitive、入力、互換opcode
src/lib/object-blocks-ui.jsObjectsの資産選択、モデル、ビデオUI
src/lib/movie-asset-manager*.jsMovieの状態、frame graph、タイムライン、メディア、資産、書き出し
src/lib/project-format.js.shade、mb3 marker、Movie feature検出
src/lib/pen-fx/PenFX runtime、shader packageの検証・登録・保存
src/lib/model-runtime.jsThree.jsのモデル、カメラ、ライト、深度描画
electron/デスクトップ起動、保存、GPU backend

ブロック一覧はgetInfo()や互換登録の一覧ではなく、make-toolbox-xml.jsが生成する現行ツールボックスを基準にします。