feat(web): finish RE 5000PBR lesson video and fix non-ASCII GLB import

- Add 11:07 Chinese-narrated lesson video, VTT, poster and 13 chapter screenshots.
- Regenerate 20-render WebGL2 matrix and 15 operation captures on RTX 4060.
- Fix WASM staging for non-ASCII import filenames (猴头.glb); rebuild web_engine.
- Harden lesson video recording pipeline; fix stale lesson-link E2E selector.
- Add RE PBR derived libraries, lesson page, evidence and status report.

Co-Authored-By: Claude Code <noreply@anthropic.com>

web/app/src/tutorial/course.ts

@@ -1,8 +1,9 @@
 import { PARTS_TUTORIAL_REQUIRED_STEPS, PARTS_TUTORIAL_STEPS, PARTS_TUTORIAL_STORAGE_KEY } from "./parts/curriculum";
 import { REDUCER_TUTORIAL_REQUIRED_STEPS, REDUCER_TUTORIAL_STEPS, REDUCER_TUTORIAL_STORAGE_KEY } from "./reducer/curriculum";
+import { PBR_TUTORIAL_REQUIRED_STEPS, PBR_TUTORIAL_STEPS, PBR_TUTORIAL_STORAGE_KEY } from "./pbr/curriculum";
 import type { TutorialStep } from "./parts/types";
 
-export type CourseId = "parts" | "reducer";
+export type CourseId = "parts" | "reducer" | "pbr";
 
 export interface TutorialCourseCard {
   name: string;
@@ -14,6 +15,8 @@ export interface TutorialGalleryItem {
   step: string;
   title: string;
   note: string;
+  /** Path relative to assetDir; default is steps/<step>.jpg. */
+  image?: string;
 }
 
 /** Everything a course needs that was previously hardcoded in the parts UI. */
@@ -26,6 +29,7 @@ export interface TutorialCourse {
   storageKey: string;
   opfsFile: string;
   assetDir: string;
+  lessonUrl?: string;
   startUrl: string;
   saveStepId: string;
   summaryStepId: string;
@@ -47,6 +51,7 @@ export interface TutorialCourse {
   bottomCtaContinue: string;
   parts: readonly TutorialCourseCard[];
   summaryParts: readonly string[];
+  summaryPartsTitle?: string;
   gallery: readonly TutorialGalleryItem[];
   skills: readonly string[];
 }
@@ -162,6 +167,72 @@ export const COURSES = {
       "装配与交付：集合、Empty 父子层级、实时装配树、材质、链接复制、保存与 GLB 导出",
     ],
   },
+  pbr: {
+    id: "pbr",
+    title: "PBR 渲染入门",
+    heading: "从零开始 PBR 渲染",
+    steps: PBR_TUTORIAL_STEPS,
+    requiredSteps: PBR_TUTORIAL_REQUIRED_STEPS,
+    storageKey: PBR_TUTORIAL_STORAGE_KEY,
+    opfsFile: "pbr-progress.json",
+    assetDir: "/tutorial/pbr",
+    lessonUrl: "/tutorial/pbr/render-lesson.html",
+    startUrl: "/?ui=web&tutorial=pbr&start=1",
+    saveStepId: "download-save",
+    summaryStepId: "summary",
+    checkpointEvery: 1,
+    defaultProjectName: "PBR渲染入门.blend",
+    pythonFileName: "PbrTutorial.py",
+    overlayTitle: "PBR 渲染互动教程",
+    reopenAria: "展开 PBR 渲染教程",
+    heroTitle: "从零开始",
+    heroAccent: "PBR 渲染",
+    eyebrow: "互动教学 · 初学者 · 约 30–45 分钟",
+    lead: "在真实 Web Blender 里完成 3 个模型 × 4 种材质的 12 张渲染图：追加 Suzanne、Cube、Torus，分配金属、玻璃、木纹与自发光材质，最后用场景相机渲染并下载 PNG。",
+    partsLead: "从资产库、材质球到 Web PBR 渲染，覆盖初学者最常用的渲染流程。",
+    galleryLead: "以下画面由有头 Chromium 实际操作并渲染生成，不是示意图。",
+    bottomCta: "进入渲染教程",
+    bottomCtaContinue: "继续上次进度",
+    parts: [
+      { name: "模型", note: "Suzanne / Cube / Torus", icon: "shaft" },
+      { name: "材质", note: "金属 / 玻璃 / 木色 / 自发光", icon: "ring" },
+      { name: "灯光", note: "三点面光 + 世界环境", icon: "washer" },
+      { name: "渲染", note: "1024 场景相机 → PNG", icon: "bolt" },
+    ],
+    summaryParts: ["PBR Suzanne · 拉丝金属", "PBR Cube · 玻璃", "PBR Torus · 暖色木质", "PBR Studio Ground · 青色自发光"],
+    summaryPartsTitle: "本课完成的组合",
+    skills: [
+      "Shading 工作区与 PBR 资产库：搜索、预览、双击追加模型与分配材质",
+      "PBR 材质参数：Metallic、Roughness、Transmission、IOR、Emission 与颜色",
+      "摄影棚场景：相机、三点面光、世界环境与地面",
+      "渲染交付：分辨率、场景相机、PNG 下载、OPFS 保存与 .blend 保存",
+    ],
+    gallery: [
+      { step: "workspace-shading", title: "资产库 · Shading 与 PBR 卡片", note: "打开 Shading 工作区，浏览 6 个模型与 14 个材质。" },
+      { step: "load-studio", title: "摄影棚 · 相机与三点光", note: "载入带相机、面光与世界环境的固定场景。" },
+      { step: "add-suzanne", title: "模型 · 追加 PBR Suzanne", note: "双击资产卡片，模型自动出现在原点并选中。" },
+      { step: "add-cube", title: "模型 · 追加 PBR Cube", note: "用同一入口添加第二个模型。" },
+      { step: "add-torus", title: "模型 · 追加 PBR Torus", note: "三个模型准备完成。" },
+      { step: "assign-metal", title: "材质 · 拉丝金属", note: "Metallic 1.0、Roughness 0.30。" },
+      { step: "assign-glass", title: "材质 · 透射玻璃", note: "Transmission 1.0、IOR 1.45。" },
+      { step: "assign-wood", title: "材质 · 暖色木质", note: "暖色 Base Color、Roughness 0.52。" },
+      { step: "assign-emission", title: "材质 · 青色自发光", note: "Emission Color 青色、Strength 5.0。" },
+      { step: "render-setup", title: "渲染 · 1024 场景相机", note: "Rendering 工作区选择分辨率与场景相机。" },
+      { step: "download-save", title: "交付 · PNG 与 .blend", note: "下载渲染图并保存工程。" },
+      { step: "render-suzanne-metal", image: "renders/suzanne-metal-brushed.jpg", title: "Suzanne · 拉丝金属", note: "金属高光与拉丝粗糙度。" },
+      { step: "render-suzanne-glass", image: "renders/suzanne-glass.jpg", title: "Suzanne · 玻璃", note: "透射与折射对比。" },
+      { step: "render-suzanne-wood", image: "renders/suzanne-wood.jpg", title: "Suzanne · 暖色木质", note: "暖色哑光材质在曲面上的表现。" },
+      { step: "render-suzanne-emission", image: "renders/suzanne-emission-cyan.jpg", title: "Suzanne · 自发光", note: "青色自发光强度 5.0。" },
+      { step: "render-cube-metal", image: "renders/cube-metal-brushed.jpg", title: "Cube · 拉丝金属", note: "平面上的金属反射。" },
+      { step: "render-cube-glass", image: "renders/cube-glass.jpg", title: "Cube · 玻璃", note: "厚立方体的透射效果。" },
+      { step: "render-cube-wood", image: "renders/cube-wood.jpg", title: "Cube · 暖色木质", note: "平面上的暖色哑光表面。" },
+      { step: "render-cube-emission", image: "renders/cube-emission-cyan.jpg", title: "Cube · 自发光", note: "自发光立方体轮廓。" },
+      { step: "render-torus-metal", image: "renders/torus-metal-brushed.jpg", title: "Torus · 拉丝金属", note: "环面高光。" },
+      { step: "render-torus-glass", image: "renders/torus-glass.jpg", title: "Torus · 玻璃", note: "曲面透射与焦散近似。" },
+      { step: "render-torus-wood", image: "renders/torus-wood.jpg", title: "Torus · 暖色木质", note: "环面上的暖色哑光材质。" },
+      { step: "render-torus-emission", image: "renders/torus-emission-cyan.jpg", title: "Torus · 自发光", note: "环面自发光。" },
+    ],
+  },
 } satisfies Record<CourseId, TutorialCourse>;
 
 export type AvailableCourseId = keyof typeof COURSES;