docs(course): add the 15-module web course and narrated editor video

Generate a static beginner course from course data with real Chromium
screenshots for every module, and record a narrated walkthrough of UV,
Texture Paint, Compositor, Geometry Nodes, Spreadsheet and OPFS reopen.
The render lesson video covers M08/M09; the course page is linked from
the tutorial landing.

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
mes123456
2026-11-13 06:02:34 +08:00
parent ef50fdd988
commit 693f6b774b
52 changed files with 2489 additions and 7 deletions

View File

@@ -0,0 +1,38 @@
:root{color-scheme:dark;--bg:#181818;--panel:#232323;--panel-2:#2b2b2b;--line:#3c3c3c;--text:#e6e6e6;--muted:#a9a9a9;--accent:#6aa1d8;--accent-2:#d8a45a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 "Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
.course-hero{padding:52px clamp(20px,5vw,72px) 34px;background:linear-gradient(135deg,#1d2833,#242424 60%,#2a2318);border-bottom:1px solid var(--line)}
.course-kicker{margin:0 0 10px;color:var(--accent-2);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.course-hero h1{margin:0 0 12px;font-size:clamp(30px,4vw,52px);line-height:1.15}
.course-subtitle{margin:0 0 10px;max-width:900px;color:#c8d8e6;font-size:clamp(16px,2vw,21px)}
.course-audience{margin:0 0 16px;color:var(--muted)}
.course-first-load{margin:0;max-width:900px;padding:10px 14px;border-left:3px solid var(--accent-2);background:#2b2620;color:#e8d4b6}
.course-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;align-items:start}
.course-nav{position:sticky;top:0;max-height:100vh;overflow:auto;padding:18px 14px;border-right:1px solid var(--line);background:#1d1d1d}
.course-nav strong{display:block;margin:0 0 10px;color:var(--muted);font-size:12px;letter-spacing:.08em}
.course-nav a{display:flex;gap:9px;padding:7px 8px;border-radius:5px;color:#d4d4d4;text-decoration:none;font-size:13px;line-height:1.35}
.course-nav a:hover{background:#2c2c2c}
.course-nav a span{flex:none;color:var(--accent-2);font-family:monospace}
.course-main{min-width:0;padding:26px clamp(18px,4vw,56px) 60px}
.course-rules,.course-video,.course-module{max-width:1180px;margin:0 auto 34px;padding:22px clamp(16px,2.5vw,30px);background:var(--panel);border:1px solid var(--line);border-radius:8px}
.course-rules h2,.course-video h2,.course-module h2{margin-top:0;line-height:1.25}
.course-video video{width:100%;height:auto;background:#000;border-radius:6px}
.course-video p{margin:10px 0 0;color:var(--muted)}
.course-module-id{margin:0 0 4px;color:var(--accent-2);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.course-summary{margin:0;color:#cfcfcf}
.course-objectives{margin:18px 0}
.course-objectives h3,.course-callout h3{margin:0 0 6px;font-size:15px;color:#cfe0ef}
.course-objectives ul{margin:0;padding-left:22px}
.course-steps{margin:20px 0 0;padding:0;list-style:none;counter-reset:step}
.course-steps>li{counter-increment:step;position:relative;margin:0 0 22px;padding:0 0 0 40px}
.course-steps>li::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#36506a;color:#e8f2fb;font-size:13px;font-weight:700}
.course-steps p{margin:2px 0 10px}
.course-steps figure{margin:0}
.course-steps img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#111}
.course-steps figcaption{margin-top:5px;color:#8f9aa4;font-size:12px}
.course-callout{margin-top:18px;padding:12px 16px;border-radius:6px;background:var(--panel-2);border-left:3px solid #57708a}
.course-callout ul{margin:0;padding-left:20px}
.course-warnings{border-left-color:#c98e5a;background:#2d2720}
.course-footer{max-width:1180px;margin:0 auto;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(max-width:900px){.course-layout{grid-template-columns:1fr}.course-nav{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.course-nav strong{grid-column:1/-1}.course-main{padding-top:18px}}

View File

@@ -0,0 +1,593 @@
{
"schemaVersion": 1,
"title": "Web Blender 全站入门课程",
"subtitle": "从界面到渲染、UV、纹理绘制、合成、Geometry Nodes 与数据检查",
"version": "2026-11-13",
"audience": "第一次使用 Blender 的初学者;在浏览器中完成全部练习。",
"firstLoadNote": "首次从远端打开需要下载约 79 MB 的 wasm,实测 154–193 秒;页面会显示加载进度。之后的加载走浏览器缓存。",
"rules": [
"平台保存、重开和恢复都使用浏览器 OPFS。点击顶栏“保存项目”只会写入 OPFS,不会自动下载文件。",
"需要本地 .blend 时,必须手动点击顶栏“下载 .blend”或“文件 → 下载 .blend 到本地”。",
"课程截图与练习使用 RE 5000PBR 资产和 re/猴头.glb;所有路径均为仓库内相对路径。",
"本课程只验证 Chromium;建议使用有独立显卡的机器并启用硬件 WebGL。"
],
"videos": [
{
"id": "editors-lesson",
"title": "编辑器专课:UV、纹理绘制、Compositor、Geometry Nodes 与 Spreadsheet(约 3 分钟)",
"src": "/tutorial/full/video/full-course-editors-720p.mp4",
"poster": "/tutorial/full/video/full-course-editors-poster.jpg",
"vtt": "/tutorial/full/video/full-course-editors.zh-Hans.vtt",
"note": "M06、M07、M11、M12、M13 的操作录像,带中文配音与章节字幕;结尾演示 OPFS 保存重开。"
},
{
"id": "render-lesson",
"title": "渲染专课:5000PBR 猴头全流程(约 11 分钟)",
"src": "/tutorial/pbr/lesson/video/re-pbr-lesson-720p.mp4",
"poster": "/tutorial/pbr/lesson/video/poster.jpg",
"vtt": "/tutorial/pbr/lesson/video/re-pbr-lesson.zh-Hans.vtt",
"note": "M08、M09 的完整操作录像,带中文配音与章节字幕。"
}
],
"modules": [
{
"id": "M01",
"title": "界面、工作区、文件打开与保存",
"level": "入门",
"minutes": 6,
"summary": "认识顶栏、工作区标签、三维视口、大纲视图和属性面板;打开练习工程并理解 OPFS 保存。",
"objectives": [
"找到并切换工作区",
"用“打开 .blend”载入练习工程",
"区分保存到 OPFS 与手动下载 .blend"
],
"steps": [
{
"text": "在浏览器打开 /?ui=web 。如果是远端地址,先等待底部 wasm 加载完成,状态栏出现 SceneIR。",
"image": "steps/M01-interface.jpg"
},
{
"text": "顶部蓝色标签是工作区:Layout、Modeling、Sculpting、UV Editing、Texture Paint、Shading、Animation、Rendering、Compositing、Geometry Nodes、Scripting。课程会逐个使用。",
"image": "steps/M01-interface.jpg"
},
{
"text": "点击顶栏“打开 .blend”(或按 F3 搜索“打开”),选择课程工程 studio.blend。等待状态栏对象数变为 6。",
"image": "steps/M01-file-menu.jpg"
},
{
"text": "再打开 re/猴头.glb。GLB 会追加到当前场景,对象数从 6 变为 7,活动对象是 Suzanne。",
"image": "steps/M01-interface.jpg"
},
{
"text": "点击“保存项目”。它写入浏览器 OPFS,并显示保存状态 SUCCEEDED;不会下载文件。需要本地副本时,单独点击“下载 .blend”。",
"image": "steps/M01-file-menu.jpg"
}
],
"tips": [
"工作区切换只改变布局,不改变场景数据。",
"状态栏右侧的引擎状态是判断操作是否真正提交的第一现场。"
],
"warnings": [
"不要在保存流程中寻找自动下载;下载是独立的手动动作。"
]
},
{
"id": "M02",
"title": "导航、选择与变换",
"level": "入门",
"minutes": 7,
"summary": "在三维视口旋转、平移、缩放;从大纲视图选择对象;用操作搜索找到桌面版同名命令。",
"objectives": [
"使用鼠标中键旋转、Shift+中键平移、滚轮缩放",
"在大纲视图选择活动对象",
"用 F3 搜索并执行操作"
],
"steps": [
{
"text": "在 Layout 工作区,按住鼠标中键拖动旋转视角;Shift+中键平移;滚轮缩放。视口右上角的导航球可以恢复轴向视图。",
"image": "steps/M02-layout.jpg"
},
{
"text": "右侧大纲视图列出场景对象。单击一个对象即可设为活动对象;视口与属性面板会同步更新。",
"image": "steps/M02-selection.jpg"
},
{
"text": "按 F3 打开操作搜索,输入“移动”,可以看到与桌面 Blender 对齐的命令。选中命令后按提示在视口或属性中完成操作。",
"image": "steps/M02-operator-search.jpg"
},
{
"text": "练习:选中猴头,在属性面板把位置 Z 改为 0.5,再改回 0;观察视口和状态栏。",
"image": "steps/M02-selection.jpg"
}
],
"tips": [
"属性面板的数值修改会进入原生 Main,并支持撤销。",
"不确定命令在哪时,优先用 F3 搜索,而不是猜菜单位置。"
],
"warnings": [
"删除、布尔等破坏性操作先在练习工程上做,并记住撤销按钮。"
]
},
{
"id": "M03",
"title": "网格编辑建模",
"level": "基础",
"minutes": 9,
"summary": "进入编辑模式,认识顶点/边/面选择,执行挤出、倒角、细分等常用网格操作。",
"objectives": [
"在物体模式与编辑模式之间切换",
"切换 1/2/3 选择模式",
"执行一次挤出或倒角并撤销"
],
"steps": [
{
"text": "切换到 Modeling 工作区。左侧快捷栏提供 Add Cube、Add Monkey、Duplicate、Delete 等对象操作。",
"image": "steps/M03-workspace.jpg"
},
{
"text": "点击左上角模式按钮(Object Mode),选择“编辑模式”。视口进入 Edit Mode,并显示网格元素。",
"image": "steps/M03-edit-mode.jpg"
},
{
"text": "在视口上方选择 1 Vertex / 2 Edge / 3 Face,或使用工具栏按钮切换选择模式。点击 Select All 选中全部元素。",
"image": "steps/M03-mesh-selection.jpg"
},
{
"text": "点击 EXTRUDE 或 BEVEL 执行一次操作;按撤销按钮恢复。注意状态栏是否显示命令已提交。",
"image": "steps/M03-mesh-selection.jpg"
}
],
"tips": [
"编辑模式的选择集保存在原生 Main,可以撤销。",
"面模式下才能执行 TRIANGULATE 和 RECALCULATE NORMALS。"
],
"warnings": [
"对高面数网格做全选挤出会明显变慢;课程使用 1225 顶点的猴头。"
]
},
{
"id": "M04",
"title": "修改器 Bevel/Boolean/Mirror/Array",
"level": "基础",
"minutes": 8,
"summary": "在属性面板查看并编辑修改器栈;理解修改器是非破坏性的,渲染和导出时才求值。",
"objectives": [
"找到修改器面板",
"添加/启用/应用一个修改器",
"理解修改器与网格编辑的区别"
],
"steps": [
{
"text": "选中猴头,在 Layout 工作区查看右侧属性面板。向下滚动到 Modifiers 区域。",
"image": "steps/M04-properties.jpg"
},
{
"text": "修改器会按顺序求值。点击添加修改器,选择 Bevel、Boolean、Mirror 或 Array;调整参数后视口立即更新。",
"image": "steps/M04-modifier-stack.jpg"
},
{
"text": "练习:给猴头添加 Bevel,宽度设为 0.01;观察面数变化后撤销。",
"image": "steps/M04-modifier-stack.jpg"
}
],
"tips": [
"修改器栈顺序会影响结果,Boolean 通常放在最后。",
"应用修改器会改变网格数据;课程建议先保留修改器版本。"
],
"warnings": [
"Boolean 需要封闭网格;非流形网格可能出现破面。"
]
},
{
"id": "M05",
"title": "材质与 Shader/PBR 资产库",
"level": "基础",
"minutes": 10,
"summary": "在 Shading 工作区认识材质槽、节点编辑器和 RE 5000PBR 资产库;双击资产分配材质。",
"objectives": [
"切换 Shading 工作区",
"从资产库分配一个 PBR 材质",
"在材质属性中确认 Base Color 贴图"
],
"steps": [
{
"text": "切换到 Shading 工作区。上方是 Shader Editor,右侧是材质属性,左下是 PBR 资产库。",
"image": "steps/M05-shader-workspace.jpg"
},
{
"text": "在“资产来源”下拉框选择 library:re-pbr-v1,只显示六张 RE 材质卡片。单击只选中,双击才分配。",
"image": "steps/M05-asset-library.jpg"
},
{
"text": "双击 black_tiles_wall。等待材质槽显示 material:black_tiles_wall,并确认材质球状态为 COMPILED。",
"image": "steps/M05-asset-library.jpg"
},
{
"text": "在材质属性中检查 Base Color 图片;M07 会在这张图上手绘。",
"image": "steps/M05-shader-workspace.jpg"
}
],
"tips": [
"资产库缩略图加载需要时间,先等卡片出现再双击。",
"同一材质可以分配给多个对象;修改会影响所有使用者。"
],
"warnings": [
"库链接贴图不能直接被纹理绘制修改;M07 会导入本地派生的 PNG。"
]
},
{
"id": "M06",
"title": "UV 展开与贴图准备",
"level": "进阶",
"minutes": 8,
"summary": "在 UV Editing 工作区进入编辑模式,全选 UV、执行展开并提交;保存重开后 UV 仍然存在。",
"objectives": [
"在 ?ui=web 下找到可写 UV 区域",
"全选并展开 UV",
"保存到 OPFS 后重开确认 UV 未丢失"
],
"steps": [
{
"text": "切换到 UV Editing 工作区。左侧是原生 UV 编辑器,右侧是三维视口。桌面 Blender 要求网格处于编辑模式,本课程也显式进入编辑模式。",
"image": "steps/M06-uv-workspace.jpg"
},
{
"text": "点击“全选 UV”,等待 UV 编辑器显示“UV 选择已提交”。橙色点是选中的 UV。",
"image": "steps/M06-uv-workspace.jpg"
},
{
"text": "点击“展开所选 UV”,等待显示“展开 UV已提交”。视口和 UV 布局会更新。",
"image": "steps/M06-unwrap.jpg"
},
{
"text": "点击顶栏“保存项目”写入 OPFS,然后从最近项目重新打开;UV 控件和选择仍然存在。",
"image": "steps/M06-unwrap.jpg"
}
],
"tips": [
"展开前先标记缝合线,能得到更整齐的 UV 岛。",
"课程只使用角度展开;其他方法在 UV 控件中也有入口。"
],
"warnings": [
"UV 操作需要可写原生 UV 区域;如果提示未提交,先确认已进入编辑模式。"
]
},
{
"id": "M07",
"title": "Texture Paint 手绘贴图",
"level": "进阶",
"minutes": 10,
"summary": "导入本地 Base Color 贴图,在 Texture Paint 工作区用画笔绘制一条笔画,一次提交并撤销。",
"objectives": [
"给猴头分配带贴图的材质",
"选择图像并调整画笔颜色/大小/强度",
"绘制、撤销、保存重开"
],
"steps": [
{
"text": "按 M05 分配 black_tiles_wall,并在材质属性中导入课程图片 re-texture-base.png,设为 Base Color 的“材质图片”。",
"image": "steps/M07-texture-paint.jpg"
},
{
"text": "切换到 Texture Paint 工作区。顶部选择纹理图像,左侧是图像画布,下面是绘制/擦除、颜色、大小、强度。",
"image": "steps/M07-texture-paint.jpg"
},
{
"text": "在画布上按住左键拖动,画出一条白色笔画。松开后显示“笔画已提交”,并增加一个 Main revision。",
"image": "steps/M07-painted-stroke.jpg"
},
{
"text": "点击“撤销笔画”恢复原图;再点“重做笔画”。保存到 OPFS 后重开,笔画仍在。",
"image": "steps/M07-painted-stroke.jpg"
}
],
"tips": [
"一次指针笔画只提交一次,避免每个采样点都写 Main。",
"图像越大,单次提交的 PNG 编码越慢;课程使用 1024×1024。"
],
"warnings": [
"库链接图像会被原生拒绝(cannot modify linked library images);请先导入本地图片。"
]
},
{
"id": "M08",
"title": "灯光、相机与 PBR 渲染",
"level": "进阶",
"minutes": 12,
"summary": "在 Rendering 工作区设置相机、分辨率、曝光与位移,执行显卡 PBR 渲染。",
"objectives": [
"设置 1024×1024 场景相机渲染",
"理解最终材质视图与教学曝光",
"执行渲染并拿到结果"
],
"steps": [
{
"text": "切换到 Rendering 工作区。左侧是渲染结果视口,下方是 PBR 渲染练习面板,右侧是场景属性。",
"image": "steps/M08-render-workspace.jpg"
},
{
"text": "视角预设选择“场景相机对齐”,分辨率 1024×1024,视图“最终材质”,教学曝光 0 EV,位移强度 1×。",
"image": "steps/M08-pbr-panel.jpg"
},
{
"text": "点击“渲染 PBR”。面板会等待纹理与环境贴图就绪,然后用 GPU 输出成片。",
"image": "steps/M08-pbr-panel.jpg"
},
{
"text": "结果出现后,可在诊断视图切换 Base Color、Normal、Roughness 检查材质。",
"image": "steps/M09-render-result.jpg"
}
],
"tips": [
"深色材质只看整体亮度容易误判,切到 Base Color 更可靠。",
"完整操作录像见本页顶部“渲染专课”。"
],
"warnings": [
"渲染依赖硬件 WebGL;SwiftShader 回退会失败并明确报错。"
]
},
{
"id": "M09",
"title": "渲染结果、诊断与 GLB 导出",
"level": "进阶",
"minutes": 8,
"summary": "检查渲染结果尺寸与耗时,下载 PNG,导出 GLB,并核对保存状态。",
"objectives": [
"确认渲染结果 1024×1024",
"下载 PNG",
"导出 GLB 并保存 OPFS"
],
"steps": [
{
"text": "渲染完成后,结果视口底部显示分辨率、字节数和 OPFS 引用。确认是 1024×1024。",
"image": "steps/M09-render-result.jpg"
},
{
"text": "点击“下载 PNG”保存本地成片;这是显式手动下载。",
"image": "steps/M09-render-result.jpg"
},
{
"text": "点击顶栏“导出 GLB”导出当前场景;导出前确认对象数和活动对象。",
"image": "steps/M09-render-result.jpg"
},
{
"text": "点击“保存项目”写入 OPFS;重新打开最近项目,确认材质和相机仍在。",
"image": "steps/M09-render-result.jpg"
}
],
"tips": [
"渲染耗时受分辨率、贴图大小和显卡影响。",
"诊断报告按钮会记录失败阶段,便于定位。"
],
"warnings": [
"导出 GLB 不会包含未打包的外部资源;课程资产已打包。"
]
},
{
"id": "M10",
"title": "时间线与关键帧动画",
"level": "基础",
"minutes": 8,
"summary": "在 Animation 工作区跳帧、插入位置关键帧、播放并保存动作。",
"objectives": [
"切换 Animation 工作区",
"在指定帧插入位置关键帧",
"播放并确认关键帧出现在 Dope Sheet"
],
"steps": [
{
"text": "切换到 Animation 工作区。底部是时间线、Dope Sheet 和 NLA 编辑区。",
"image": "steps/M10-animation-workspace.jpg"
},
{
"text": "把当前帧改为 12,选中猴头,点击“插入位置关键帧”(按钮 Loc)。",
"image": "steps/M10-keyframe.jpg"
},
{
"text": "再跳到第 48 帧,移动对象后插入第二个位置关键帧;点击播放观察插值。",
"image": "steps/M10-keyframe.jpg"
},
{
"text": "保存到 OPFS 后重开,Dope Sheet 中仍能看到关键帧。",
"image": "steps/M10-keyframe.jpg"
}
],
"tips": [
"Loc/Rot/Scale 分别插入位置、旋转和缩放关键帧。",
"删除关键帧只删除当前帧的对应通道。"
],
"warnings": [
"动画工作区右上角的 Camera Perspective 是布局示意;完整相机视图在 Layout 工作区。"
]
},
{
"id": "M11",
"title": "Compositor 合成节点",
"level": "进阶",
"minutes": 12,
"summary": "在 Compositing 工作区创建 RGB 与 Exposure 节点,连线到 Composite,执行并查看合成结果。",
"objectives": [
"添加节点并拖拽连线",
"编辑节点属性",
"执行合成并提交到原生 Main"
],
"steps": [
{
"text": "切换到 Compositing 工作区。画布默认有一个 Composite 输出节点,右侧是属性检查器和结果预览。",
"image": "steps/M11-compositor.jpg"
},
{
"text": "在“添加节点类型”中选择 RGB 颜色,点击“添加节点”;再添加曝光 Exposure。",
"image": "steps/M11-nodes-added.jpg"
},
{
"text": "从 RGB 的输出端口拖到 Exposure 的输入端口;再从 Exposure 拖到 Composite 的 Image 输入。",
"image": "steps/M11-nodes-added.jpg"
},
{
"text": "选中 Exposure,把曝光改为 1.5;点击“执行合成”,右侧预览会显示提亮后的颜色。",
"image": "steps/M11-executed.jpg"
},
{
"text": "点击“提交图”写入原生 CompositorNodeTree;保存 OPFS 后重开,节点、连线、位置和属性都保留。",
"image": "steps/M11-executed.jpg"
}
],
"tips": [
"Blur、Mix、Alpha Over、Transform 也在同一画布中;Mix 需要 A/B 两路输入。",
"Viewer 节点会显示在当前阶段的结果。"
],
"warnings": [
"IMAGE/RENDER_LAYER 节点可以本地求值,但暂不写入 Main;保存前请移除或替换为 RGB。"
]
},
{
"id": "M12",
"title": "Geometry Nodes 程序化建模",
"level": "进阶",
"minutes": 12,
"summary": "在 Geometry Nodes 工作区添加 Transform 节点,与 Group Input 连线并提交,观察几何更新。",
"objectives": [
"读取当前网格的 Geometry Nodes 图",
"添加节点并连线",
"提交图并保存重开"
],
"steps": [
{
"text": "选中猴头,切换到 Geometry Nodes 工作区。上方是节点画布,右侧是节点检查器,下方是 Spreadsheet。",
"image": "steps/M12-geometry-nodes.jpg"
},
{
"text": "在“添加节点类型”中选择 GeometryNodeTransform,点击“添加节点”。画布出现新节点。",
"image": "steps/M12-node-added.jpg"
},
{
"text": "从 Group Input 的 Geometry 端口拖到 Transform 的 Geometry 输入;再把 Transform 输出连到 Group Output。",
"image": "steps/M12-node-added.jpg"
},
{
"text": "在检查器修改平移/缩放默认值,点击“提交图”。网格随修改器更新,版本号增加。",
"image": "steps/M12-node-added.jpg"
}
],
"tips": [
"课程只使用 allowlist 中的 16 类节点,避免构造无法执行的图。",
"提交失败时,检查器会显示具体节点或 socket 错误。"
],
"warnings": [
"节点位置目前只在当前会话保存;保存重开保留节点和连线,但可能重置布局。"
]
},
{
"id": "M13",
"title": "Spreadsheet 数据检查",
"level": "进阶",
"minutes": 8,
"summary": "用 Spreadsheet 只读表查看对象、顶点、边、面、UV 与几何属性;过滤、列显示/重排并导出 CSV。",
"objectives": [
"切换数据源",
"过滤顶点并隐藏列",
"导出 CSV 且不修改场景"
],
"steps": [
{
"text": "在 Geometry Nodes 工作区下方打开 Spreadsheet。默认显示对象表:名称、类型、数据、可见性、位置。",
"image": "steps/M13-objects.jpg"
},
{
"text": "把数据源切到“顶点 Vertices”,可以看到 Position X/Y/Z 和 Normal 列。",
"image": "steps/M13-vertices.jpg"
},
{
"text": "在过滤框输入 0.5,只剩包含该值的行;在“列”面板隐藏 index 或调整列顺序。",
"image": "steps/M13-filtered.jpg"
},
{
"text": "点击“导出 CSV”手动下载当前可见列。Spreadsheet 是只读的,不会产生 Main revision。",
"image": "steps/M13-filtered.jpg"
}
],
"tips": [
"顶点/边/面/UV 读取当前网格缓冲;属性表列出 position、normal、UVMap 等。",
"单表最多 50,000 行,超出会在脚注提示。"
],
"warnings": [
"Spreadsheet 不读取 GN 修改器求值后的属性域;它显示当前网格缓冲。"
]
},
{
"id": "M14",
"title": "保存、重开与异常恢复",
"level": "基础",
"minutes": 8,
"summary": "使用 OPFS 保存与最近项目恢复;理解恢复检查点、错误提示和手动下载的边界。",
"objectives": [
"保存到 OPFS 并确认 SUCCEEDED",
"从最近项目重开",
"需要本地副本时手动下载"
],
"steps": [
{
"text": "点击顶栏“保存项目”。状态栏显示 data-user-action-save-status=SUCCEEDED,表示已写入 OPFS。",
"image": "steps/M14-opfs-save.jpg"
},
{
"text": "刷新页面。最近项目下拉框出现刚才的工程;选择它并确认“不保存,继续”。",
"image": "steps/M14-reopen.jpg"
},
{
"text": "重开后检查对象数、活动对象、材质槽、UV 选择和渲染结果是否仍在。",
"image": "steps/M14-reopen.jpg"
},
{
"text": "如需本地文件,单独点击“下载 .blend”;不要把自动下载当作保存流程的一部分。",
"image": "steps/M14-opfs-save.jpg"
}
],
"tips": [
"恢复失败时,页面会显示错误阶段;先导出诊断报告再重试。",
"OPFS 数据与浏览器配置绑定,清理站点数据会删除工程。"
],
"warnings": [
"关闭浏览器前确认保存状态;未保存的编辑只在当前会话和恢复检查点中。"
]
},
{
"id": "M15",
"title": "脚本、支持矩阵与能力边界",
"level": "进阶",
"minutes": 7,
"summary": "在 Scripting 工作区查看文本编辑器、Python 控制台、Info 与操作历史;了解已支持与延期的能力。",
"objectives": [
"打开 Scripting 工作区",
"找到 Python 控制台和 Info",
"识别课程未覆盖的限制"
],
"steps": [
{
"text": "切换到 Scripting 工作区。上方是文本编辑器,下方左侧是 Python 控制台,右侧是 Info 操作日志。",
"image": "steps/M15-scripting.jpg"
},
{
"text": "Python 控制台在本机原生会话中执行;Web 会话是否可用取决于当前运行模式。",
"image": "steps/M15-console.jpg"
},
{
"text": "Info 区域显示最近命令;失败命令会给出错误码和阶段,便于定位。",
"image": "steps/M15-console.jpg"
},
{
"text": "已知限制:多区域 split/join、完整 Driver 编辑器、完整节点/画笔目录、生产级 UDIM/4K 纹理绘制尚未完成。",
"image": "steps/M15-scripting.jpg"
}
],
"tips": [
"支持矩阵与最新进度见 docs/status/WEB_BLENDER_FULL_COURSE_20261113.md。",
"课程不宣称完整 Blender parity。"
],
"warnings": [
"脚本可修改 Main;执行前先保存到 OPFS 并保留撤销点。"
]
}
]
}

View File

@@ -0,0 +1,299 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Web Blender 全站入门课程</title>
<link rel="stylesheet" href="./course.css" />
</head>
<body>
<header class="course-hero">
<p class="course-kicker">Web Blender · 2026-11-13</p>
<h1>Web Blender 全站入门课程</h1>
<p class="course-subtitle">从界面到渲染、UV、纹理绘制、合成、Geometry Nodes 与数据检查</p>
<p class="course-audience">第一次使用 Blender 的初学者;在浏览器中完成全部练习。</p>
<p class="course-first-load">首次从远端打开需要下载约 79 MB 的 wasm,实测 154–193 秒;页面会显示加载进度。之后的加载走浏览器缓存。</p>
</header>
<div class="course-layout">
<nav class="course-nav" aria-label="课程目录">
<strong>15 个模块</strong>
<a href="#M01"><span>M01</span>界面、工作区、文件打开与保存</a>
<a href="#M02"><span>M02</span>导航、选择与变换</a>
<a href="#M03"><span>M03</span>网格编辑建模</a>
<a href="#M04"><span>M04</span>修改器 Bevel/Boolean/Mirror/Array</a>
<a href="#M05"><span>M05</span>材质与 Shader/PBR 资产库</a>
<a href="#M06"><span>M06</span>UV 展开与贴图准备</a>
<a href="#M07"><span>M07</span>Texture Paint 手绘贴图</a>
<a href="#M08"><span>M08</span>灯光、相机与 PBR 渲染</a>
<a href="#M09"><span>M09</span>渲染结果、诊断与 GLB 导出</a>
<a href="#M10"><span>M10</span>时间线与关键帧动画</a>
<a href="#M11"><span>M11</span>Compositor 合成节点</a>
<a href="#M12"><span>M12</span>Geometry Nodes 程序化建模</a>
<a href="#M13"><span>M13</span>Spreadsheet 数据检查</a>
<a href="#M14"><span>M14</span>保存、重开与异常恢复</a>
<a href="#M15"><span>M15</span>脚本、支持矩阵与能力边界</a>
</nav>
<main class="course-main">
<section class="course-rules">
<h2>开始之前</h2>
<ul><li>平台保存、重开和恢复都使用浏览器 OPFS。点击顶栏“保存项目”只会写入 OPFS,不会自动下载文件。</li><li>需要本地 .blend 时,必须手动点击顶栏“下载 .blend”或“文件 → 下载 .blend 到本地”。</li><li>课程截图与练习使用 RE 5000PBR 资产和 re/猴头.glb;所有路径均为仓库内相对路径。</li><li>本课程只验证 Chromium;建议使用有独立显卡的机器并启用硬件 WebGL。</li></ul>
</section>
<section class="course-video" id="video-editors-lesson">
<h2>编辑器专课:UV、纹理绘制、Compositor、Geometry Nodes 与 Spreadsheet(约 3 分钟)</h2>
<video controls preload="metadata" src="/tutorial/full/video/full-course-editors-720p.mp4" poster="/tutorial/full/video/full-course-editors-poster.jpg" width="1280" height="720"><track kind="subtitles" srclang="zh-Hans" label="中文" src="/tutorial/full/video/full-course-editors.zh-Hans.vtt" default /></video>
<p>M06、M07、M11、M12、M13 的操作录像,带中文配音与章节字幕;结尾演示 OPFS 保存重开。</p>
</section>
<section class="course-video" id="video-render-lesson">
<h2>渲染专课:5000PBR 猴头全流程(约 11 分钟)</h2>
<video controls preload="metadata" src="/tutorial/pbr/lesson/video/re-pbr-lesson-720p.mp4" poster="/tutorial/pbr/lesson/video/poster.jpg" width="1280" height="720"><track kind="subtitles" srclang="zh-Hans" label="中文" src="/tutorial/pbr/lesson/video/re-pbr-lesson.zh-Hans.vtt" default /></video>
<p>M08、M09 的完整操作录像,带中文配音与章节字幕。</p>
</section>
<article class="course-module" id="M01">
<header>
<p class="course-module-id">M01 · 入门 · 约 6 分钟</p>
<h2>界面、工作区、文件打开与保存</h2>
<p class="course-summary">认识顶栏、工作区标签、三维视口、大纲视图和属性面板;打开练习工程并理解 OPFS 保存。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>找到并切换工作区</li><li>用“打开 .blend”载入练习工程</li><li>区分保存到 OPFS 与手动下载 .blend</li></ul></div>
<ol class="course-steps">
<li><p>在浏览器打开 /?ui=web 。如果是远端地址,先等待底部 wasm 加载完成,状态栏出现 SceneIR。</p><figure><img src="steps/M01-interface.jpg" alt="界面、工作区、文件打开与保存 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M01 · 步骤 1</figcaption></figure></li>
<li><p>顶部蓝色标签是工作区:Layout、Modeling、Sculpting、UV Editing、Texture Paint、Shading、Animation、Rendering、Compositing、Geometry Nodes、Scripting。课程会逐个使用。</p><figure><img src="steps/M01-interface.jpg" alt="界面、工作区、文件打开与保存 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M01 · 步骤 2</figcaption></figure></li>
<li><p>点击顶栏“打开 .blend”(或按 F3 搜索“打开”),选择课程工程 studio.blend。等待状态栏对象数变为 6。</p><figure><img src="steps/M01-file-menu.jpg" alt="界面、工作区、文件打开与保存 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M01 · 步骤 3</figcaption></figure></li>
<li><p>再打开 re/猴头.glb。GLB 会追加到当前场景,对象数从 6 变为 7,活动对象是 Suzanne。</p><figure><img src="steps/M01-interface.jpg" alt="界面、工作区、文件打开与保存 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M01 · 步骤 4</figcaption></figure></li>
<li><p>点击“保存项目”。它写入浏览器 OPFS,并显示保存状态 SUCCEEDED;不会下载文件。需要本地副本时,单独点击“下载 .blend”。</p><figure><img src="steps/M01-file-menu.jpg" alt="界面、工作区、文件打开与保存 第 5 步截图" loading="lazy" width="1600" height="900" /><figcaption>M01 · 步骤 5</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>工作区切换只改变布局,不改变场景数据。</li><li>状态栏右侧的引擎状态是判断操作是否真正提交的第一现场。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>不要在保存流程中寻找自动下载;下载是独立的手动动作。</li></ul></div>
</article>
<article class="course-module" id="M02">
<header>
<p class="course-module-id">M02 · 入门 · 约 7 分钟</p>
<h2>导航、选择与变换</h2>
<p class="course-summary">在三维视口旋转、平移、缩放;从大纲视图选择对象;用操作搜索找到桌面版同名命令。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>使用鼠标中键旋转、Shift+中键平移、滚轮缩放</li><li>在大纲视图选择活动对象</li><li>用 F3 搜索并执行操作</li></ul></div>
<ol class="course-steps">
<li><p>在 Layout 工作区,按住鼠标中键拖动旋转视角;Shift+中键平移;滚轮缩放。视口右上角的导航球可以恢复轴向视图。</p><figure><img src="steps/M02-layout.jpg" alt="导航、选择与变换 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M02 · 步骤 1</figcaption></figure></li>
<li><p>右侧大纲视图列出场景对象。单击一个对象即可设为活动对象;视口与属性面板会同步更新。</p><figure><img src="steps/M02-selection.jpg" alt="导航、选择与变换 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M02 · 步骤 2</figcaption></figure></li>
<li><p>按 F3 打开操作搜索,输入“移动”,可以看到与桌面 Blender 对齐的命令。选中命令后按提示在视口或属性中完成操作。</p><figure><img src="steps/M02-operator-search.jpg" alt="导航、选择与变换 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M02 · 步骤 3</figcaption></figure></li>
<li><p>练习:选中猴头,在属性面板把位置 Z 改为 0.5,再改回 0;观察视口和状态栏。</p><figure><img src="steps/M02-selection.jpg" alt="导航、选择与变换 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M02 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>属性面板的数值修改会进入原生 Main,并支持撤销。</li><li>不确定命令在哪时,优先用 F3 搜索,而不是猜菜单位置。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>删除、布尔等破坏性操作先在练习工程上做,并记住撤销按钮。</li></ul></div>
</article>
<article class="course-module" id="M03">
<header>
<p class="course-module-id">M03 · 基础 · 约 9 分钟</p>
<h2>网格编辑建模</h2>
<p class="course-summary">进入编辑模式,认识顶点/边/面选择,执行挤出、倒角、细分等常用网格操作。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>在物体模式与编辑模式之间切换</li><li>切换 1/2/3 选择模式</li><li>执行一次挤出或倒角并撤销</li></ul></div>
<ol class="course-steps">
<li><p>切换到 Modeling 工作区。左侧快捷栏提供 Add Cube、Add Monkey、Duplicate、Delete 等对象操作。</p><figure><img src="steps/M03-workspace.jpg" alt="网格编辑建模 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M03 · 步骤 1</figcaption></figure></li>
<li><p>点击左上角模式按钮(Object Mode),选择“编辑模式”。视口进入 Edit Mode,并显示网格元素。</p><figure><img src="steps/M03-edit-mode.jpg" alt="网格编辑建模 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M03 · 步骤 2</figcaption></figure></li>
<li><p>在视口上方选择 1 Vertex / 2 Edge / 3 Face,或使用工具栏按钮切换选择模式。点击 Select All 选中全部元素。</p><figure><img src="steps/M03-mesh-selection.jpg" alt="网格编辑建模 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M03 · 步骤 3</figcaption></figure></li>
<li><p>点击 EXTRUDE 或 BEVEL 执行一次操作;按撤销按钮恢复。注意状态栏是否显示命令已提交。</p><figure><img src="steps/M03-mesh-selection.jpg" alt="网格编辑建模 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M03 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>编辑模式的选择集保存在原生 Main,可以撤销。</li><li>面模式下才能执行 TRIANGULATE 和 RECALCULATE NORMALS。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>对高面数网格做全选挤出会明显变慢;课程使用 1225 顶点的猴头。</li></ul></div>
</article>
<article class="course-module" id="M04">
<header>
<p class="course-module-id">M04 · 基础 · 约 8 分钟</p>
<h2>修改器 Bevel/Boolean/Mirror/Array</h2>
<p class="course-summary">在属性面板查看并编辑修改器栈;理解修改器是非破坏性的,渲染和导出时才求值。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>找到修改器面板</li><li>添加/启用/应用一个修改器</li><li>理解修改器与网格编辑的区别</li></ul></div>
<ol class="course-steps">
<li><p>选中猴头,在 Layout 工作区查看右侧属性面板。向下滚动到 Modifiers 区域。</p><figure><img src="steps/M04-properties.jpg" alt="修改器 Bevel/Boolean/Mirror/Array 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M04 · 步骤 1</figcaption></figure></li>
<li><p>修改器会按顺序求值。点击添加修改器,选择 Bevel、Boolean、Mirror 或 Array;调整参数后视口立即更新。</p><figure><img src="steps/M04-modifier-stack.jpg" alt="修改器 Bevel/Boolean/Mirror/Array 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M04 · 步骤 2</figcaption></figure></li>
<li><p>练习:给猴头添加 Bevel,宽度设为 0.01;观察面数变化后撤销。</p><figure><img src="steps/M04-modifier-stack.jpg" alt="修改器 Bevel/Boolean/Mirror/Array 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M04 · 步骤 3</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>修改器栈顺序会影响结果,Boolean 通常放在最后。</li><li>应用修改器会改变网格数据;课程建议先保留修改器版本。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>Boolean 需要封闭网格;非流形网格可能出现破面。</li></ul></div>
</article>
<article class="course-module" id="M05">
<header>
<p class="course-module-id">M05 · 基础 · 约 10 分钟</p>
<h2>材质与 Shader/PBR 资产库</h2>
<p class="course-summary">在 Shading 工作区认识材质槽、节点编辑器和 RE 5000PBR 资产库;双击资产分配材质。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>切换 Shading 工作区</li><li>从资产库分配一个 PBR 材质</li><li>在材质属性中确认 Base Color 贴图</li></ul></div>
<ol class="course-steps">
<li><p>切换到 Shading 工作区。上方是 Shader Editor,右侧是材质属性,左下是 PBR 资产库。</p><figure><img src="steps/M05-shader-workspace.jpg" alt="材质与 Shader/PBR 资产库 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M05 · 步骤 1</figcaption></figure></li>
<li><p>在“资产来源”下拉框选择 library:re-pbr-v1,只显示六张 RE 材质卡片。单击只选中,双击才分配。</p><figure><img src="steps/M05-asset-library.jpg" alt="材质与 Shader/PBR 资产库 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M05 · 步骤 2</figcaption></figure></li>
<li><p>双击 black_tiles_wall。等待材质槽显示 material:black_tiles_wall,并确认材质球状态为 COMPILED。</p><figure><img src="steps/M05-asset-library.jpg" alt="材质与 Shader/PBR 资产库 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M05 · 步骤 3</figcaption></figure></li>
<li><p>在材质属性中检查 Base Color 图片;M07 会在这张图上手绘。</p><figure><img src="steps/M05-shader-workspace.jpg" alt="材质与 Shader/PBR 资产库 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M05 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>资产库缩略图加载需要时间,先等卡片出现再双击。</li><li>同一材质可以分配给多个对象;修改会影响所有使用者。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>库链接贴图不能直接被纹理绘制修改;M07 会导入本地派生的 PNG。</li></ul></div>
</article>
<article class="course-module" id="M06">
<header>
<p class="course-module-id">M06 · 进阶 · 约 8 分钟</p>
<h2>UV 展开与贴图准备</h2>
<p class="course-summary">在 UV Editing 工作区进入编辑模式,全选 UV、执行展开并提交;保存重开后 UV 仍然存在。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>在 ?ui=web 下找到可写 UV 区域</li><li>全选并展开 UV</li><li>保存到 OPFS 后重开确认 UV 未丢失</li></ul></div>
<ol class="course-steps">
<li><p>切换到 UV Editing 工作区。左侧是原生 UV 编辑器,右侧是三维视口。桌面 Blender 要求网格处于编辑模式,本课程也显式进入编辑模式。</p><figure><img src="steps/M06-uv-workspace.jpg" alt="UV 展开与贴图准备 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M06 · 步骤 1</figcaption></figure></li>
<li><p>点击“全选 UV”,等待 UV 编辑器显示“UV 选择已提交”。橙色点是选中的 UV。</p><figure><img src="steps/M06-uv-workspace.jpg" alt="UV 展开与贴图准备 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M06 · 步骤 2</figcaption></figure></li>
<li><p>点击“展开所选 UV”,等待显示“展开 UV已提交”。视口和 UV 布局会更新。</p><figure><img src="steps/M06-unwrap.jpg" alt="UV 展开与贴图准备 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M06 · 步骤 3</figcaption></figure></li>
<li><p>点击顶栏“保存项目”写入 OPFS,然后从最近项目重新打开;UV 控件和选择仍然存在。</p><figure><img src="steps/M06-unwrap.jpg" alt="UV 展开与贴图准备 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M06 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>展开前先标记缝合线,能得到更整齐的 UV 岛。</li><li>课程只使用角度展开;其他方法在 UV 控件中也有入口。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>UV 操作需要可写原生 UV 区域;如果提示未提交,先确认已进入编辑模式。</li></ul></div>
</article>
<article class="course-module" id="M07">
<header>
<p class="course-module-id">M07 · 进阶 · 约 10 分钟</p>
<h2>Texture Paint 手绘贴图</h2>
<p class="course-summary">导入本地 Base Color 贴图,在 Texture Paint 工作区用画笔绘制一条笔画,一次提交并撤销。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>给猴头分配带贴图的材质</li><li>选择图像并调整画笔颜色/大小/强度</li><li>绘制、撤销、保存重开</li></ul></div>
<ol class="course-steps">
<li><p>按 M05 分配 black_tiles_wall,并在材质属性中导入课程图片 re-texture-base.png,设为 Base Color 的“材质图片”。</p><figure><img src="steps/M07-texture-paint.jpg" alt="Texture Paint 手绘贴图 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M07 · 步骤 1</figcaption></figure></li>
<li><p>切换到 Texture Paint 工作区。顶部选择纹理图像,左侧是图像画布,下面是绘制/擦除、颜色、大小、强度。</p><figure><img src="steps/M07-texture-paint.jpg" alt="Texture Paint 手绘贴图 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M07 · 步骤 2</figcaption></figure></li>
<li><p>在画布上按住左键拖动,画出一条白色笔画。松开后显示“笔画已提交”,并增加一个 Main revision。</p><figure><img src="steps/M07-painted-stroke.jpg" alt="Texture Paint 手绘贴图 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M07 · 步骤 3</figcaption></figure></li>
<li><p>点击“撤销笔画”恢复原图;再点“重做笔画”。保存到 OPFS 后重开,笔画仍在。</p><figure><img src="steps/M07-painted-stroke.jpg" alt="Texture Paint 手绘贴图 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M07 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>一次指针笔画只提交一次,避免每个采样点都写 Main。</li><li>图像越大,单次提交的 PNG 编码越慢;课程使用 1024×1024。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>库链接图像会被原生拒绝(cannot modify linked library images);请先导入本地图片。</li></ul></div>
</article>
<article class="course-module" id="M08">
<header>
<p class="course-module-id">M08 · 进阶 · 约 12 分钟</p>
<h2>灯光、相机与 PBR 渲染</h2>
<p class="course-summary">在 Rendering 工作区设置相机、分辨率、曝光与位移,执行显卡 PBR 渲染。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>设置 1024×1024 场景相机渲染</li><li>理解最终材质视图与教学曝光</li><li>执行渲染并拿到结果</li></ul></div>
<ol class="course-steps">
<li><p>切换到 Rendering 工作区。左侧是渲染结果视口,下方是 PBR 渲染练习面板,右侧是场景属性。</p><figure><img src="steps/M08-render-workspace.jpg" alt="灯光、相机与 PBR 渲染 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M08 · 步骤 1</figcaption></figure></li>
<li><p>视角预设选择“场景相机对齐”,分辨率 1024×1024,视图“最终材质”,教学曝光 0 EV,位移强度 1×。</p><figure><img src="steps/M08-pbr-panel.jpg" alt="灯光、相机与 PBR 渲染 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M08 · 步骤 2</figcaption></figure></li>
<li><p>点击“渲染 PBR”。面板会等待纹理与环境贴图就绪,然后用 GPU 输出成片。</p><figure><img src="steps/M08-pbr-panel.jpg" alt="灯光、相机与 PBR 渲染 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M08 · 步骤 3</figcaption></figure></li>
<li><p>结果出现后,可在诊断视图切换 Base Color、Normal、Roughness 检查材质。</p><figure><img src="steps/M09-render-result.jpg" alt="灯光、相机与 PBR 渲染 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M08 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>深色材质只看整体亮度容易误判,切到 Base Color 更可靠。</li><li>完整操作录像见本页顶部“渲染专课”。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>渲染依赖硬件 WebGL;SwiftShader 回退会失败并明确报错。</li></ul></div>
</article>
<article class="course-module" id="M09">
<header>
<p class="course-module-id">M09 · 进阶 · 约 8 分钟</p>
<h2>渲染结果、诊断与 GLB 导出</h2>
<p class="course-summary">检查渲染结果尺寸与耗时,下载 PNG,导出 GLB,并核对保存状态。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>确认渲染结果 1024×1024</li><li>下载 PNG</li><li>导出 GLB 并保存 OPFS</li></ul></div>
<ol class="course-steps">
<li><p>渲染完成后,结果视口底部显示分辨率、字节数和 OPFS 引用。确认是 1024×1024。</p><figure><img src="steps/M09-render-result.jpg" alt="渲染结果、诊断与 GLB 导出 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M09 · 步骤 1</figcaption></figure></li>
<li><p>点击“下载 PNG”保存本地成片;这是显式手动下载。</p><figure><img src="steps/M09-render-result.jpg" alt="渲染结果、诊断与 GLB 导出 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M09 · 步骤 2</figcaption></figure></li>
<li><p>点击顶栏“导出 GLB”导出当前场景;导出前确认对象数和活动对象。</p><figure><img src="steps/M09-render-result.jpg" alt="渲染结果、诊断与 GLB 导出 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M09 · 步骤 3</figcaption></figure></li>
<li><p>点击“保存项目”写入 OPFS;重新打开最近项目,确认材质和相机仍在。</p><figure><img src="steps/M09-render-result.jpg" alt="渲染结果、诊断与 GLB 导出 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M09 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>渲染耗时受分辨率、贴图大小和显卡影响。</li><li>诊断报告按钮会记录失败阶段,便于定位。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>导出 GLB 不会包含未打包的外部资源;课程资产已打包。</li></ul></div>
</article>
<article class="course-module" id="M10">
<header>
<p class="course-module-id">M10 · 基础 · 约 8 分钟</p>
<h2>时间线与关键帧动画</h2>
<p class="course-summary">在 Animation 工作区跳帧、插入位置关键帧、播放并保存动作。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>切换 Animation 工作区</li><li>在指定帧插入位置关键帧</li><li>播放并确认关键帧出现在 Dope Sheet</li></ul></div>
<ol class="course-steps">
<li><p>切换到 Animation 工作区。底部是时间线、Dope Sheet 和 NLA 编辑区。</p><figure><img src="steps/M10-animation-workspace.jpg" alt="时间线与关键帧动画 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M10 · 步骤 1</figcaption></figure></li>
<li><p>把当前帧改为 12,选中猴头,点击“插入位置关键帧”(按钮 Loc)。</p><figure><img src="steps/M10-keyframe.jpg" alt="时间线与关键帧动画 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M10 · 步骤 2</figcaption></figure></li>
<li><p>再跳到第 48 帧,移动对象后插入第二个位置关键帧;点击播放观察插值。</p><figure><img src="steps/M10-keyframe.jpg" alt="时间线与关键帧动画 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M10 · 步骤 3</figcaption></figure></li>
<li><p>保存到 OPFS 后重开,Dope Sheet 中仍能看到关键帧。</p><figure><img src="steps/M10-keyframe.jpg" alt="时间线与关键帧动画 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M10 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>Loc/Rot/Scale 分别插入位置、旋转和缩放关键帧。</li><li>删除关键帧只删除当前帧的对应通道。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>动画工作区右上角的 Camera Perspective 是布局示意;完整相机视图在 Layout 工作区。</li></ul></div>
</article>
<article class="course-module" id="M11">
<header>
<p class="course-module-id">M11 · 进阶 · 约 12 分钟</p>
<h2>Compositor 合成节点</h2>
<p class="course-summary">在 Compositing 工作区创建 RGB 与 Exposure 节点,连线到 Composite,执行并查看合成结果。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>添加节点并拖拽连线</li><li>编辑节点属性</li><li>执行合成并提交到原生 Main</li></ul></div>
<ol class="course-steps">
<li><p>切换到 Compositing 工作区。画布默认有一个 Composite 输出节点,右侧是属性检查器和结果预览。</p><figure><img src="steps/M11-compositor.jpg" alt="Compositor 合成节点 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M11 · 步骤 1</figcaption></figure></li>
<li><p>在“添加节点类型”中选择 RGB 颜色,点击“添加节点”;再添加曝光 Exposure。</p><figure><img src="steps/M11-nodes-added.jpg" alt="Compositor 合成节点 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M11 · 步骤 2</figcaption></figure></li>
<li><p>从 RGB 的输出端口拖到 Exposure 的输入端口;再从 Exposure 拖到 Composite 的 Image 输入。</p><figure><img src="steps/M11-nodes-added.jpg" alt="Compositor 合成节点 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M11 · 步骤 3</figcaption></figure></li>
<li><p>选中 Exposure,把曝光改为 1.5;点击“执行合成”,右侧预览会显示提亮后的颜色。</p><figure><img src="steps/M11-executed.jpg" alt="Compositor 合成节点 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M11 · 步骤 4</figcaption></figure></li>
<li><p>点击“提交图”写入原生 CompositorNodeTree;保存 OPFS 后重开,节点、连线、位置和属性都保留。</p><figure><img src="steps/M11-executed.jpg" alt="Compositor 合成节点 第 5 步截图" loading="lazy" width="1600" height="900" /><figcaption>M11 · 步骤 5</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>Blur、Mix、Alpha Over、Transform 也在同一画布中;Mix 需要 A/B 两路输入。</li><li>Viewer 节点会显示在当前阶段的结果。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>IMAGE/RENDER_LAYER 节点可以本地求值,但暂不写入 Main;保存前请移除或替换为 RGB。</li></ul></div>
</article>
<article class="course-module" id="M12">
<header>
<p class="course-module-id">M12 · 进阶 · 约 12 分钟</p>
<h2>Geometry Nodes 程序化建模</h2>
<p class="course-summary">在 Geometry Nodes 工作区添加 Transform 节点,与 Group Input 连线并提交,观察几何更新。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>读取当前网格的 Geometry Nodes 图</li><li>添加节点并连线</li><li>提交图并保存重开</li></ul></div>
<ol class="course-steps">
<li><p>选中猴头,切换到 Geometry Nodes 工作区。上方是节点画布,右侧是节点检查器,下方是 Spreadsheet。</p><figure><img src="steps/M12-geometry-nodes.jpg" alt="Geometry Nodes 程序化建模 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M12 · 步骤 1</figcaption></figure></li>
<li><p>在“添加节点类型”中选择 GeometryNodeTransform,点击“添加节点”。画布出现新节点。</p><figure><img src="steps/M12-node-added.jpg" alt="Geometry Nodes 程序化建模 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M12 · 步骤 2</figcaption></figure></li>
<li><p>从 Group Input 的 Geometry 端口拖到 Transform 的 Geometry 输入;再把 Transform 输出连到 Group Output。</p><figure><img src="steps/M12-node-added.jpg" alt="Geometry Nodes 程序化建模 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M12 · 步骤 3</figcaption></figure></li>
<li><p>在检查器修改平移/缩放默认值,点击“提交图”。网格随修改器更新,版本号增加。</p><figure><img src="steps/M12-node-added.jpg" alt="Geometry Nodes 程序化建模 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M12 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>课程只使用 allowlist 中的 16 类节点,避免构造无法执行的图。</li><li>提交失败时,检查器会显示具体节点或 socket 错误。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>节点位置目前只在当前会话保存;保存重开保留节点和连线,但可能重置布局。</li></ul></div>
</article>
<article class="course-module" id="M13">
<header>
<p class="course-module-id">M13 · 进阶 · 约 8 分钟</p>
<h2>Spreadsheet 数据检查</h2>
<p class="course-summary">用 Spreadsheet 只读表查看对象、顶点、边、面、UV 与几何属性;过滤、列显示/重排并导出 CSV。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>切换数据源</li><li>过滤顶点并隐藏列</li><li>导出 CSV 且不修改场景</li></ul></div>
<ol class="course-steps">
<li><p>在 Geometry Nodes 工作区下方打开 Spreadsheet。默认显示对象表:名称、类型、数据、可见性、位置。</p><figure><img src="steps/M13-objects.jpg" alt="Spreadsheet 数据检查 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M13 · 步骤 1</figcaption></figure></li>
<li><p>把数据源切到“顶点 Vertices”,可以看到 Position X/Y/Z 和 Normal 列。</p><figure><img src="steps/M13-vertices.jpg" alt="Spreadsheet 数据检查 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M13 · 步骤 2</figcaption></figure></li>
<li><p>在过滤框输入 0.5,只剩包含该值的行;在“列”面板隐藏 index 或调整列顺序。</p><figure><img src="steps/M13-filtered.jpg" alt="Spreadsheet 数据检查 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M13 · 步骤 3</figcaption></figure></li>
<li><p>点击“导出 CSV”手动下载当前可见列。Spreadsheet 是只读的,不会产生 Main revision。</p><figure><img src="steps/M13-filtered.jpg" alt="Spreadsheet 数据检查 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M13 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>顶点/边/面/UV 读取当前网格缓冲;属性表列出 position、normal、UVMap 等。</li><li>单表最多 50,000 行,超出会在脚注提示。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>Spreadsheet 不读取 GN 修改器求值后的属性域;它显示当前网格缓冲。</li></ul></div>
</article>
<article class="course-module" id="M14">
<header>
<p class="course-module-id">M14 · 基础 · 约 8 分钟</p>
<h2>保存、重开与异常恢复</h2>
<p class="course-summary">使用 OPFS 保存与最近项目恢复;理解恢复检查点、错误提示和手动下载的边界。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>保存到 OPFS 并确认 SUCCEEDED</li><li>从最近项目重开</li><li>需要本地副本时手动下载</li></ul></div>
<ol class="course-steps">
<li><p>点击顶栏“保存项目”。状态栏显示 data-user-action-save-status=SUCCEEDED,表示已写入 OPFS。</p><figure><img src="steps/M14-opfs-save.jpg" alt="保存、重开与异常恢复 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M14 · 步骤 1</figcaption></figure></li>
<li><p>刷新页面。最近项目下拉框出现刚才的工程;选择它并确认“不保存,继续”。</p><figure><img src="steps/M14-reopen.jpg" alt="保存、重开与异常恢复 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M14 · 步骤 2</figcaption></figure></li>
<li><p>重开后检查对象数、活动对象、材质槽、UV 选择和渲染结果是否仍在。</p><figure><img src="steps/M14-reopen.jpg" alt="保存、重开与异常恢复 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M14 · 步骤 3</figcaption></figure></li>
<li><p>如需本地文件,单独点击“下载 .blend”;不要把自动下载当作保存流程的一部分。</p><figure><img src="steps/M14-opfs-save.jpg" alt="保存、重开与异常恢复 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M14 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>恢复失败时,页面会显示错误阶段;先导出诊断报告再重试。</li><li>OPFS 数据与浏览器配置绑定,清理站点数据会删除工程。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>关闭浏览器前确认保存状态;未保存的编辑只在当前会话和恢复检查点中。</li></ul></div>
</article>
<article class="course-module" id="M15">
<header>
<p class="course-module-id">M15 · 进阶 · 约 7 分钟</p>
<h2>脚本、支持矩阵与能力边界</h2>
<p class="course-summary">在 Scripting 工作区查看文本编辑器、Python 控制台、Info 与操作历史;了解已支持与延期的能力。</p>
</header>
<div class="course-objectives"><h3>本模块目标</h3><ul><li>打开 Scripting 工作区</li><li>找到 Python 控制台和 Info</li><li>识别课程未覆盖的限制</li></ul></div>
<ol class="course-steps">
<li><p>切换到 Scripting 工作区。上方是文本编辑器,下方左侧是 Python 控制台,右侧是 Info 操作日志。</p><figure><img src="steps/M15-scripting.jpg" alt="脚本、支持矩阵与能力边界 第 1 步截图" loading="lazy" width="1600" height="900" /><figcaption>M15 · 步骤 1</figcaption></figure></li>
<li><p>Python 控制台在本机原生会话中执行;Web 会话是否可用取决于当前运行模式。</p><figure><img src="steps/M15-console.jpg" alt="脚本、支持矩阵与能力边界 第 2 步截图" loading="lazy" width="1600" height="900" /><figcaption>M15 · 步骤 2</figcaption></figure></li>
<li><p>Info 区域显示最近命令;失败命令会给出错误码和阶段,便于定位。</p><figure><img src="steps/M15-console.jpg" alt="脚本、支持矩阵与能力边界 第 3 步截图" loading="lazy" width="1600" height="900" /><figcaption>M15 · 步骤 3</figcaption></figure></li>
<li><p>已知限制:多区域 split/join、完整 Driver 编辑器、完整节点/画笔目录、生产级 UDIM/4K 纹理绘制尚未完成。</p><figure><img src="steps/M15-scripting.jpg" alt="脚本、支持矩阵与能力边界 第 4 步截图" loading="lazy" width="1600" height="900" /><figcaption>M15 · 步骤 4</figcaption></figure></li>
</ol>
<div class="course-callout course-tips"><h3>提示</h3><ul><li>支持矩阵与最新进度见 docs/status/WEB_BLENDER_FULL_COURSE_20261113.md。</li><li>课程不宣称完整 Blender parity。</li></ul></div>
<div class="course-callout course-warnings"><h3>注意</h3><ul><li>脚本可修改 Main;执行前先保存到 OPFS 并保留撤销点。</li></ul></div>
</article>
<footer class="course-footer">
<p>课程截图来自本机有头 Chromium + RTX 4060 的实际操作。功能边界与最新进度见 docs/status/WEB_BLENDER_FULL_COURSE_20261113.md。</p>
<p><a href="/">返回 Web Blender</a></p>
</footer>
</main>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 141 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 169 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@@ -0,0 +1,28 @@
WEBVTT
00:00:01.998 --> 00:00:19.398
开场:这几块编辑器现在能做什么:这一课把四块新增的编辑器连起来用一遍:UV 展开、纹理绘制、Compositor 合成、Geometry Nodes 与 Spreadsheet 数据检查。所有保存都用浏览器 OPFS,需要本地文件时再手动下载。
00:00:23.407 --> 00:00:32.983
打开练习工程:先打开课程摄影棚,再追加猴头 GLB。状态栏从六个对象变成七个,活动对象是 Suzanne。
00:00:36.989 --> 00:00:56.333
UV 展开:切到 UV Editing 工作区。桌面 Blender 的 UV 编辑器要求网格处于编辑模式,所以我们显式进入编辑模式。点击全选 UV,等待选择提交,再点击展开所选 UV。橙色点变成展开后的 UV 岛。
00:01:00.334 --> 00:01:19.654
纹理绘制:回到 Shading 工作区,从 RE 资产库双击砖墙材质,再导入本地贴图作为材质图片。切到 Texture Paint,选择这张图,在画布上画一条白色笔画。松开鼠标后笔画提交,一次笔画只增加一个版本。
00:01:23.658 --> 00:01:45.138
Compositor 合成:切到 Compositing。画布默认有一个 Composite 输出。添加 RGB 颜色和曝光节点,把 RGB 连到曝光,再把曝光连到 Composite。把曝光改成一点五,点击执行合成,右侧预览变亮。点击提交图,节点图写入原生 Main。
00:01:49.142 --> 00:02:03.566
Geometry Nodes:选中猴头,切到 Geometry Nodes。添加 Transform 节点,从 Group Input 连到 Transform,再从 Transform 连到 Group Output。点击提交图,网格随修改器更新。
00:02:07.573 --> 00:02:24.805
Spreadsheet 数据检查:在同一个工作区下方的 Spreadsheet 里,把数据源切到顶点,可以看到位置和法线列。输入过滤值,只留下匹配的行;列面板可以隐藏或重排列。Spreadsheet 是只读的,不会修改场景。
00:02:28.807 --> 00:02:48.799
保存到 OPFS 并重开:点击顶栏保存项目,工程写入浏览器 OPFS。刷新页面,从最近项目重新打开。UV、纹理笔画、合成节点和 Geometry Nodes 图都还在。需要本地 .blend 时,再单独点击下载 .blend。
00:02:52.802 --> 00:03:11.882
总结与边界:这四块编辑器已经可以完成入门工作流。明确边界:纹理绘制目前是最小二维画笔,合成器只覆盖常用节点,Geometry Nodes 只使用允许列表,Spreadsheet 只读。完整清单和限制写在课程第十五模块。