SuperAPI AI 工具集

tinyworld-shader-fx

设计与创作

查看项目

更新于 10-30 12:08

技能介绍

TinyWorld Shader FX 是 Tiny World Builder 项目中的一项技能,用于在项目中添加或更改 GLSL 特效。资料主要说明了着色器的存放位置、扩展方式以及构建保护机制。

用途与文件位置:地形着色器位于 engine/landscape/shaders.js(SAND_VS、SAND_FS、LOWPOLY_FS 及 sandMat / sandMatLowPoly ShaderMaterials);水面着色器位于 engine/landscape/water.js,是动态反射海洋平面。这两个文件通过 Object.assign(LandscapeEngine.prototype, {...}) 覆盖 LandscapeEngine.js 中的内联副本,因此应编辑拆分文件,内联副本已不再生效。海洋的 time 与 cameraPos uniform 在 LandscapeEngine.update() 中推进。体素世界的瀑布与水流位于 engine/world/05-tile-factory.js(getWaterfallCurtainMaterial、getWaterfallSurfaceMaterial、泡沫),由 updateWaterfallEffects(t) / tickWaterTextureFlow(dt) 驱动;check.js 会守卫这些名称。

主要能力:海洋水面着色器为风格化、低开销实现(约 9 次值噪声采样),提供 flowDir、foamColor/foamAmount、specPower、posterize、planetDistance 等 uniform,并采样共享平面反射目标,叠加折射弯曲。增强水面通过 Settings 中的 render-enhanced-water 开关启用,将体素水升级为带反射折射、波纹光泽、Blinn-Phong 高光和浪尖泡沫的效果;切换时调用 refreshWaterShaderMaterials() 并重建地形渲染,瀑布不受影响。

TinyShaderFX 库(engine/world/45-shader-fx.js)暴露 window.TinyShaderFX,提供程序化工厂:makeWaterFlowMaterial、makeWaterfallMaterial、makeFoamMaterial、makeSmokeMaterial、makeExplosionMaterial,以及 applyWear(为现有材质添加污垢/裂纹/磨损)。动画材质暴露 uTime 并通过 track() 自注册,动画循环调用 window.__tinyworldShaderFXTick(t, dt)。GLSL_NOISE 提供可复用的 fxHash/fxNoise/fxFbm/fxFresnel/fxPosterize 片段。

使用方式:通过 ?shaderfx=demo 或 TinyShaderFX.demo(scene) 可查看演示画廊,演示为可选启用。新增 engine/** 文件会被 check.js 自动收集并复制到 dist/,只需在 HTML 中添加 <script src> 标签。

限制与注意事项:ShaderMaterial 片段末尾需包含 #include <colorspace_fragment> 以匹配 r185 输出色彩空间;修补采样 material.map 的材质时,应将 map UV 写入 vMapUv(受 #ifdef USE_MAP 保护),而非旧式 vUv;片段着色器应使用 gl_FragColor、常量边界循环和 cameraPosition;增强体素水必须设置 customProgramCacheKey;不要将现有烟囱烟雾 MeshBasicMaterial 管线转为 ShaderMaterial。资料未提供收费、价格或平台信息。