拓冰网站定制 
Three.js着色器手册threejs-game-skills中10个从菲涅尔边缘光到溶解特效的视觉魔法【免费下载链接】threejs-game-skillsAgent skills for building playable, polished Three.js browser games with gameplay, AAA-style graphics, UI, QA, and optional AI-generated 3D, image, and audio assets.项目地址: https://gitcode.com/gh_mirrors/th/threejs-game-skillsthreejs-game-skills 是一套开源的 Agent 技能包用于构建可玩、精致的 Three.js 浏览器游戏。其中的 threejs-aaa-graphics-builder 技能内置了一份完整的Three.js 着色器手册——shader-cookbook.md收录了从菲涅尔边缘光到溶解特效的 10 个视觉配方每一条都标注了什么时候用和开销多大新手无需踩坑即可直接上手。如何获取这份着色器手册先克隆仓库再安装技能git clone https://gitcode.com/gh_mirrors/th/threejs-game-skills npx skills add majidmanzarpour/threejs-game-skills --skill * -a codex -g -y装好后直接对 AI Agent 说用 threejs-game-director 给我的游戏加菲涅尔边缘光即可Agent 会自动加载这份手册并写出正确代码。手册的核心原则只有一句特效负责让玩法更清晰而不是掩盖缺失的模型详见 technical-art.md 中的预算规则。10个从菲涅尔边缘光到溶解特效的着色器配方1. 环境贴图让金属像金属的前置一步没有环境贴图金属和釉面只会读成灰块。手册给出 5 行即用方案用RoomEnvironmentPMREMGenerator生成中性影棚 IBL启动时烘焙一次之后每帧几乎零开销。任何 PBR 材质金属、玻璃、清漆都依赖它。2. 菲涅尔边缘光一眼可辨的轮廓光 ✨标准着色器里现成有vNormal和vViewPosition只需注入一行 GLSL 就能让物体边缘发亮——护盾、隐身、无敌状态都靠它float fres pow(1.0 - saturate(dot(normalize(vNormal), normalize(vViewPosition))), uRimPower); totalEmissiveRadiance uRimColor * fres * uRimStrength;代价只有几个 ALU 运算无额外渲染通道。手册提醒边缘光熄灭后基础色必须依然可读。3. 溶解特效一条进度条控制出生与死亡用哈希噪声做阈值丢弃配合发光边缘uProgress从 0→1 溶解消失、1→0 重生出现敌人死亡、传送、拾取物生成全靠它float n hash13(floor(vDisPos * 12.0)); if (n uProgress) discard;注意discard会关闭 early-Z只用于正在生灭的物体别给整个场景开。出生与死亡应使用不同边缘颜色玩家才读得懂事件。4. 滚动自发光面板无贴图的流动能量在片元着色器里用fract(UV.y * 6.0 - uTime * 0.5)制造一条平滑光带沿面板滚动——能量管道、充能条、加速道瞬间活了。关键是滚动方向与速度应编码状态充能向上、泄能向下特效同时成为游戏信息。5. 风摇摆让背景多一分生命在顶点着色器里按高度加权位移transformed.x sin(uTime * 1.5 phase) * 0.08 * h草叶、旗帜、水母随时间轻摆。根植于模型原点尖端动得最多对InstancedMesh来说每个顶点只有两次三角函数几乎免费。手册警告绝不要用风摆移动任何可碰撞几何体。6. 真玻璃 vs 廉价玻璃性能差一个渲染通道真折射玻璃MeshPhysicalMaterial设transmission: 1.0效果惊艳但每帧多一次场景渲染仅限 1-2 个近距离主角面座舱罩、药剂瓶。廉价假玻璃透明 高环境反射强度 菲涅尔边缘仅一次透明绘制适合重复出现的窗户、面罩、护盾。7. 渐变天空穹顶一个球体替代天空盒比立方体贴图更便宜的风格化天空一个BackSide球体片元里按高度做顶部/地平线插值再加pow(d, 800.0)太阳圆盘和pow(d, 8.0)光晕——一次绘制无纹理无 mipmap。坑点原生ShaderMaterial会绕过色调映射场景跑 ACES 时颜色要手动调亮。8. UnrealBloom 泛光只让你想亮的东西亮手册的泛光铁律阈值 0.85 起步只卖刻意设置的自发光绝不让泛光成为细节的唯一来源——如果一个形状只能靠发亮才被看见说明几何体缺失new UnrealBloomPass(resolution, 0.45, 0.3, 0.85); // strength 0.35-0.6 / radius / threshold移动端 composer 开销随 DPR² 增长低端机直接renderer.render()跳过通道。9. 暗角Vignette把玩家视线收回来一个全屏ShaderPass用距离衰减压暗画面四角uStrength保持克制永远不要压暗玩法路径。OutputPass必须放在链条最后色调映射 sRGB 转换。10. 廉价技巧合集接触阴影、Matcap、顶点色 AO假接触阴影径向渐变的PlaneGeometry垫在悬浮物下随高度缩放淡出无需阴影贴图就能锚住物体Matcap 道具一张贴图烘焙进光照最便宜的有光照感材质但会忽略场景灯光别用在需要状态发光的表面顶点色 AO把遮蔽烘进网格顶点色一次属性、零绘制调用静态道具立刻有体积感。效果调好了吗用视觉评分卡验收threejs-game-skills 不只给配方还给验收标准visual-scorecard.md逐项给截图打分配套 assets/scorecard-anchors/ 校准锚点图material-lighting-quality.md材质与灯光质量清单render-recipes.md渲染管线、光照堆栈与后处理完整规则。记住手册的核心法则不要用辉光把原语方块救成 AAA。先做造型再上材质然后打光最后才是这 10 个着色器魔法——顺序对了你的浏览器游戏自然就有了精品感。【免费下载链接】threejs-game-skillsAgent skills for building playable, polished Three.js browser games with gameplay, AAA-style graphics, UI, QA, and optional AI-generated 3D, image, and audio assets.项目地址: https://gitcode.com/gh_mirrors/th/threejs-game-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Three.js着色器手册：threejs-game-skills中10个从菲涅尔边缘光到溶解特效的视觉魔法
Three.js着色器手册threejs-game-skills中10个从菲涅尔边缘光到溶解特效的视觉魔法【免费下载链接】threejs-game-skillsAgent skills for building playable, polished Three.js browser games with gameplay, AAA-style graphics, UI, QA, and optional AI-generated 3D, image, and audio assets.项目地址: https://gitcode.com/gh_mirrors/th/threejs-game-skillsthreejs-game-skills 是一套开源的 Agent 技能包用于构建可玩、精致的 Three.js 浏览器游戏。其中的 threejs-aaa-graphics-builder 技能内置了一份完整的Three.js 着色器手册——shader-cookbook.md收录了从菲涅尔边缘光到溶解特效的 10 个视觉配方每一条都标注了什么时候用和开销多大新手无需踩坑即可直接上手。如何获取这份着色器手册先克隆仓库再安装技能git clone https://gitcode.com/gh_mirrors/th/threejs-game-skills npx skills add majidmanzarpour/threejs-game-skills --skill * -a codex -g -y装好后直接对 AI Agent 说用 threejs-game-director 给我的游戏加菲涅尔边缘光即可Agent 会自动加载这份手册并写出正确代码。手册的核心原则只有一句特效负责让玩法更清晰而不是掩盖缺失的模型详见 technical-art.md 中的预算规则。10个从菲涅尔边缘光到溶解特效的着色器配方1. 环境贴图让金属像金属的前置一步没有环境贴图金属和釉面只会读成灰块。手册给出 5 行即用方案用RoomEnvironmentPMREMGenerator生成中性影棚 IBL启动时烘焙一次之后每帧几乎零开销。任何 PBR 材质金属、玻璃、清漆都依赖它。2. 菲涅尔边缘光一眼可辨的轮廓光 ✨标准着色器里现成有vNormal和vViewPosition只需注入一行 GLSL 就能让物体边缘发亮——护盾、隐身、无敌状态都靠它float fres pow(1.0 - saturate(dot(normalize(vNormal), normalize(vViewPosition))), uRimPower); totalEmissiveRadiance uRimColor * fres * uRimStrength;代价只有几个 ALU 运算无额外渲染通道。手册提醒边缘光熄灭后基础色必须依然可读。3. 溶解特效一条进度条控制出生与死亡用哈希噪声做阈值丢弃配合发光边缘uProgress从 0→1 溶解消失、1→0 重生出现敌人死亡、传送、拾取物生成全靠它float n hash13(floor(vDisPos * 12.0)); if (n uProgress) discard;注意discard会关闭 early-Z只用于正在生灭的物体别给整个场景开。出生与死亡应使用不同边缘颜色玩家才读得懂事件。4. 滚动自发光面板无贴图的流动能量在片元着色器里用fract(UV.y * 6.0 - uTime * 0.5)制造一条平滑光带沿面板滚动——能量管道、充能条、加速道瞬间活了。关键是滚动方向与速度应编码状态充能向上、泄能向下特效同时成为游戏信息。5. 风摇摆让背景多一分生命在顶点着色器里按高度加权位移transformed.x sin(uTime * 1.5 phase) * 0.08 * h草叶、旗帜、水母随时间轻摆。根植于模型原点尖端动得最多对InstancedMesh来说每个顶点只有两次三角函数几乎免费。手册警告绝不要用风摆移动任何可碰撞几何体。6. 真玻璃 vs 廉价玻璃性能差一个渲染通道真折射玻璃MeshPhysicalMaterial设transmission: 1.0效果惊艳但每帧多一次场景渲染仅限 1-2 个近距离主角面座舱罩、药剂瓶。廉价假玻璃透明 高环境反射强度 菲涅尔边缘仅一次透明绘制适合重复出现的窗户、面罩、护盾。7. 渐变天空穹顶一个球体替代天空盒比立方体贴图更便宜的风格化天空一个BackSide球体片元里按高度做顶部/地平线插值再加pow(d, 800.0)太阳圆盘和pow(d, 8.0)光晕——一次绘制无纹理无 mipmap。坑点原生ShaderMaterial会绕过色调映射场景跑 ACES 时颜色要手动调亮。8. UnrealBloom 泛光只让你想亮的东西亮手册的泛光铁律阈值 0.85 起步只卖刻意设置的自发光绝不让泛光成为细节的唯一来源——如果一个形状只能靠发亮才被看见说明几何体缺失new UnrealBloomPass(resolution, 0.45, 0.3, 0.85); // strength 0.35-0.6 / radius / threshold移动端 composer 开销随 DPR² 增长低端机直接renderer.render()跳过通道。9. 暗角Vignette把玩家视线收回来一个全屏ShaderPass用距离衰减压暗画面四角uStrength保持克制永远不要压暗玩法路径。OutputPass必须放在链条最后色调映射 sRGB 转换。10. 廉价技巧合集接触阴影、Matcap、顶点色 AO假接触阴影径向渐变的PlaneGeometry垫在悬浮物下随高度缩放淡出无需阴影贴图就能锚住物体Matcap 道具一张贴图烘焙进光照最便宜的有光照感材质但会忽略场景灯光别用在需要状态发光的表面顶点色 AO把遮蔽烘进网格顶点色一次属性、零绘制调用静态道具立刻有体积感。效果调好了吗用视觉评分卡验收threejs-game-skills 不只给配方还给验收标准visual-scorecard.md逐项给截图打分配套 assets/scorecard-anchors/ 校准锚点图material-lighting-quality.md材质与灯光质量清单render-recipes.md渲染管线、光照堆栈与后处理完整规则。记住手册的核心法则不要用辉光把原语方块救成 AAA。先做造型再上材质然后打光最后才是这 10 个着色器魔法——顺序对了你的浏览器游戏自然就有了精品感。【免费下载链接】threejs-game-skillsAgent skills for building playable, polished Three.js browser games with gameplay, AAA-style graphics, UI, QA, and optional AI-generated 3D, image, and audio assets.项目地址: https://gitcode.com/gh_mirrors/th/threejs-game-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考