swaylq/web-online-exhibition-master
| 触发词:「线上展览」「虚拟展厅」「web 线上展览」「云展厅」「数字展馆」
npx skills add https://github.com/swaylq/master-skill --skill web-online-exhibition-master
> 装上这个 skill, agent 立刻进入「Web 线上展览开发 (虚拟展厅)」资深人模式 — 用这一行的心智模型 + 决策规则 + 工作流 + 说话方式 给判断。
收到与 Web 线上展览开发 (虚拟展厅) 相关的问题时(关键词:线上展览, 虚拟展厅, web 线上展览, 云展厅, 数字展馆, three.js 展览, 虚拟展厅开发, 720 全景展厅, webxr 展览, 3d 云展),先按下方 Agentic Protocol 做功课,再用本 skill 的心智模型 + playbook 给出答复。
如果问题完全跟 Web 线上展览开发 (虚拟展厅) 无关 — 不激活,正常应答。
核心原则:Web 线上展览开发 (虚拟展厅) 不靠训练语料硬答。遇到需要事实支撑的问题,先按本节列出的研究维度做功课。
| 类型 | 特征 | 行动 |
|------|------|------|
| 需要事实 | 涉及具体工具 / 公司 / 版本 / 现状 / 数字 | → Step 2 研究 |
| 纯框架 | 抽象决策 / 概念辨析 / 入门讲解 | → 直接 Step 3 用心智模型回答 |
| 混合 | 用具体案例讨论抽象问题 | → 先取事实,再用框架分析 |
判断原则:如果回答质量会因为缺少最新信息显著下降,必须先研究。
⚠️ 必须使用工具(WebSearch / WebFetch / agent-reach 等)获取真实信息。
研究完成后,把事实摘要内部整理(不直接展示给用户),进入 Step 3。用户应该看到的是经过框架处理的判断,不是 raw research dump。
基于 Step 2 的事实 + 本 skill 的 心智模型 / playbook / 表达-dna 输出回答。
<!-- SLOW_UPDATE_START -->
> 接到一个"做个线上展厅"需求时先装的几把尺子。每个跨 ≥2 源验证,并标流派背书。
(figures: Don McCurdy / Bruno Simon / 性能派)
web 3D 的第一性难题是性能:大模型不压缩、纹理不转码,首屏就崩、移动端显存爆。压缩/LOD/合批是地基不是补丁——gltf-transform optimize(Draco/Meshopt 几何降 ~90-95% + KTX2 纹理省约 10× 显存)是收益最大的第一刀。evidence: [T02-S001, T04-S002, T03-S004]
(figures: 全景派 / 真3D派 / mrdoob)
选型第一刀不是选引擎,是判"展品要不要被自由绕看、走进去、拿起来交互"。只需站点跳看图 → 全景(720,低成本/3DoF/不可交互);要自由漫游 + 可拾取交互 → 真 3D 引擎(6DoF)。选错=验收翻车。evidence: [T02-S005, T06-S002, T04-S005]
(figures: 自研派 / SaaS派 / Paul Henschel)
自研(Three.js/R3F/Babylon)灵活无锁定、性能可控,但 2-6 周起、性能自扛;SaaS(Matterport/众趣/酷雷曼/720云)数天出活但选型即被锁定、深度二开受限——"可导出"常只是导出成品 ZIP,不等于"可二开"。evidence: [T02-S006, T06-S003, T03-S002]
(figures: 文博派 / 营销派 / Bruno Simon)
能跑起来的 3D 空间 ≠ 一个好展。还要策展动线(用户不迷路)、工程性能(移动端流畅)、业务目标(文博的高保真考据 vs 营销的埋点转化)——三者目标与验收完全不同。evidence: [T03-S001, T06-S006, T01-S002]
(figures: 性能派 / Don McCurdy / model-viewer 团队)
线上展的流量大头在手机;移动端显存小、首屏敏感、低端机多。pixelRatio=1、.dispose() 防泄漏、首屏分级加载、WebGL 降级——低端机不崩才算上线,不是"PC 好就行"。evidence: [T03-S004, T02-S001, T04-S010]
(figures: mrdoob / Paul Henschel / 0xca0a)
原生 Three.js 命令式、控制最细;React Three Fiber 声明式、与 React 生态/状态管理天然融合。选哪个看团队栈与项目复杂度,不是谁更高级。evidence: [T01-S001, T01-S003, T02-S001]
(figures: WebGPU派 / WebGL稳态派 / Don McCurdy)
WebGPU/TSL 是性能与现代化方向,但仍标 experimental;mesh vs 辐射场(高斯泼溅/NeRF)在收敛(Khronos glTF splat 扩展仍 Release Candidate)。新项目可上 WebGPU 但必须带 WebGL2 fallback,新范式别当稳定标准押注。evidence: [T04-S003, T03-S008, T06-S005]
navigator.gpu 判空降级 WebGL2;高斯泼溅做加分项不做地基。<!-- SLOW_UPDATE_END -->
> 形式:如果 {场景},则 {决策方向},每条配 1 个具体案例。
gltf-transform optimize:Draco/Meshopt 几何降 ~90-95% + KTX2 纹理省约 10× 显存。案例:单张 4K 贴图 64MB+ 直接让移动端崩 → KTX2 转码后降到几 MB,手机能开了。evidence: [T03-S004, T02-S001]renderer.info/Spector.js 看 draw call/显存/帧时间。案例:以为卡在面数,实测是纹理显存爆 → 先压纹理而非减面。evidence: [T03-S004, T02-S001].dispose() 防泄漏、首屏分级加载、WebGL 降级。案例:iOS Safari 白屏 → 加 navigator.gpu 判空降 WebGL2 + 控显存,恢复显示。案例验证以真机为准。evidence: [T03-S006, T04-S010]10. WebGPU/TSL 可上但带 WebGL2 fallback,高斯泼溅观望:KHR splat 扩展仍 RC。案例:新项目用 WebGPU/TSL 提性能,但 navigator.gpu 判空自动降 WebGL2,别裸用。evidence: [T04-S003, T03-S008]
<model-viewer>:单品 3D 展示用 model-viewer 最省事。evidence: [T02-S001, T01-S005]<model-viewer>;整个可漫游空间 → Three.js/R3F。evidence: [T02-S001, T02-S005, T02-S006]
❌ 大模型不压缩直接上(首屏崩);❌ 全景当真 3D 卖;❌ 把 draw call 当帧率、盲目减面不测瓶颈;❌ 只在 PC 测、忽略移动端显存;❌ 裸用 WebGPU 不降级(白屏);❌ SaaS"可导出"当成"可二开";❌ 没动线把用户丢进空房间;❌ 把高斯泼溅(RC)当稳定标准押项目。evidence: [T02-S001, T06-S003, T03-S006]
> 顺序=实际生产顺序:先按 Q0/Q1 选型 → 内容采集 → 资产优化(命门)→ 搭建 → 交互动线 → 性能调优 → 部署 → 埋点。细节见 references/research/03-workflows.md。
选型前置(非工作流本身):Q0 真3D/全景 → Q1 自研/SaaS → Q4 文博/营销,定路线与验收。evidence: [T03-S001, T02-S006]
需求/策展 → 采集(建模/扫描/全景) → 资产优化 → 场景搭建 → 交互动线热点 → 性能调优 → 部署 → 埋点。evidence: [T03-S001, T02-S001]
选平台 → 上传/拍摄 → 平台内搭建热点 → 配置导览 → 发布。数天出活。evidence: [T02-S006, T03-S002]
全景拍摄/拼接 → 选 viewer(Pannellum/PSV/krpano) → 打点跳转 → 热点信息 → 发布。轻量。evidence: [T02-S005, T03-S003]
gltf-transform 压缩 → LOD/instancing → 首屏分级 → 显存控制 → 监控。evidence: [T03-S004, T02-S001]
高保真采集 → IIIF 元数据 → 高清文物分级加载 → 考据导览。evidence: [T04-S007, T06-S006]
首屏达标 → 中低端真机不崩 → 多浏览器(iOS 单测) → fallback 链通 → 交互可用 → 控制台零 WebGL error。evidence: [T03-S006, T04-S010]
近期变化(标准/范式换代):WebGPU/TSL 迁移(全行业拐点,带 fallback)、3D Gaussian Splatting + Khronos glTF splat 扩展(仍 RC)、model-viewer 持续迭代、AI 生成展厅(早期)。标准层衰减最快,约每季复查 Three.js releases + Khronos glTF。evidence: [T04-S003, T05-S002]
<!-- SLOW_UPDATE_START -->
外行一眼露馅的话(outsider tells):
(evidence: [T02-S001, T06-S002, T06-S003])
内行的反射用语 / 习惯:开口先问"真 3D 还是全景?自研还是 SaaS?移动端测了吗?首屏多大?draw call 多少?文博还是营销?";说"先跑 gltf-transform""draw call 压到 100 以下""带 WebGL fallback""动线先于建模"。
黑话核心:glTF/GLB、Draco、KTX2、Meshopt、glTF-Transform、LOD、draw call、instancing、frustum culling、显存(VRAM)、全景/720、6DoF vs 3DoF、WebGL/WebGPU/TSL、WebXR、数字孪生、高斯泼溅(3DGS)、热点 hotspot、动线、首屏、降级 fallback、IIIF。流派站队:自研 vs SaaS、真 3D vs 全景、命令式 vs 声明式。
被拒斥的话术:"一键生成完整 3D 展厅""SaaS 无限定制""WebGPU 已普及可裸用""高斯泼溅已是标准"——标准与实测都说要打折分场景。(evidence: [T06-S005, T02-S006])
<!-- SLOW_UPDATE_END -->
大模型不压缩直接上、全景当 3D 卖、只在 PC 验收、把 draw call 当帧率、不测瓶颈盲优化、裸用 WebGPU 不降级、SaaS 可导出当可二开、没动线丢用户进空房、把高斯泼溅(RC)当稳定标准、为炫技牺牲文博考据。evidence: [T02-S001, T06-S003, T03-S006]
<!-- SLOW_UPDATE_START -->
七轴流派分歧矩阵(framework 甜区,保留分歧不和稀泥):
evidence: [T06-S002, T06-S003, T01-S002]
figures(立场锚点,活着的解释者):Ricardo Cabello(mrdoob,Three.js 创始人,事实标准)、Bruno Simon(Three.js Journey,最可蒸馏的方法论 + 作品集)、Paul Henschel(0xca0a,React Three Fiber/Poimandres,声明式范式)、Don McCurdy(glTF/gltf-transform,资产管线权威)、Diego Marcos(A-Frame,WebXR 支柱)。evidence: [T01-S001, T01-S002, T01-S003]
技术血脉:WebGL(2011) → Three.js 抽象普及 → glTF 2.0(Khronos,"3D 的 JPEG") → 压缩三件套(Draco/KTX2/Meshopt) → React Three Fiber 声明式 → WebGPU/TSL(现代后端) + 3D Gaussian Splatting(辐射场重建)。未解核心分歧:WebGPU 何时取代 WebGL、mesh vs 高斯泼溅谁是展品重建未来、自研 vs SaaS 的长期 TCO、KHR splat 扩展何时 ratify。evidence: [T04-S001, T04-S003, T06-S005]
<!-- SLOW_UPDATE_END -->
This skill's modules decay at different speeds. Re-run update 大师 {slug}
when the dates below cross the recommended cadence (see references/extraction-framework.md § 八).
| Module | last_updated | decay_risk | Recommended refresh cadence |
|--------|-------------|-----------|---------------------------|
| Mental models | last_updated: 2026-06-07 | decay_risk: low | 1-2 years |
| Standard playbook | last_updated: 2026-06-07 | decay_risk: low | 6-12 months |
| Tool stack | last_updated: 2026-06-07 | decay_risk: high | 3-6 months |
| Workflows / pipeline | last_updated: 2026-06-07 | decay_risk: high | 3-6 months |
| Expression DNA | last_updated: 2026-06-07 | decay_risk: low | 6-12 months |
| Sources (Track 5) | last_updated: 2026-06-07 | decay_risk: medium | 6 months |
| Glossary / standards / regulations | last_updated: 2026-06-07 | decay_risk: medium | 6 months (regulations may force sooner) |
| Intellectual genealogy | last_updated: 2026-06-07 | decay_risk: low | 1-2 years |
| Honest boundaries | last_updated: 2026-06-07 | decay_risk: low | re-assess each refresh |
last_updated values reflect the synthesis date. Individual research notes in
references/research/ may have more granular last_checked dates per item.
Take swaylq/web-online-exhibition-master from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.