https://github.com/SkyeShark/threejs-silhouette-pom
https://skyeshark.github.io/threejs-silhouette-pom/它不是普通的 POM（只在模型内部制造浮雕深度），而是能真正影响模型轮廓（silhouette）的进阶版本：通过ray marching + alpha test裁剪，让高度图的凸出部分“悬空”超出基础几何体的边缘，效果类似 AAA 游戏里的 shell mapping / prism mapping，但无需真实位移或细分几何体。
相关代码
import { parallaxOcclusionUV }from'./ParallaxOcclusion.js';// 或从你的路径引入// 假设你已有 NodeMaterialconstmaterial =newNodeMaterial();// 创建 POMconstpom = parallaxOcclusionUV(heightMap, { uvNode: uv(), // 你的基础 UV（可 .mul(scale).add(offset) 平铺） scale:0.05, // 浮雕深度（UV 单位，根据模型 UV 密度调整，人物通常 0.02~0.1） minLayers:16, // 正面步数 maxLayers:64, // 掠射角步数（越高越准，但性能越差） silhouette:true, // 关键！开启轮廓裁剪 silhouetteBounds: [0,1], // 根据 UV 平铺调整（例如平铺 2x2 就改成 [0.5, 2.5]） curvedSilhouette:true, // 人物曲面强烈建议开启（让浮雕跟随曲率裁剪轮廓） curvature:null, // 可优化，见下文 // horizonStrength: 0.5, // 可选：掠射角侵蚀，隐藏拉伸 texel});material.colorNode = pom.sample(colorMap); // 安全的采样（带正确梯度）// Normal（必须单独调用，不能复用 pom！）constpomNormal = parallaxOcclusionUV(heightMap, {/* 同上参数 */});material.normalNode =/* 用 pomNormal 构建 perturbed normal */;// 轮廓裁剪（核心）material.opacityNode = pom.coverage;material.alphaTestNode =float(0.5);material.alphaToCoverage =true; // MSAA 下抗锯齿更好// 可选：位置偏移（shell 效果，让浮雕真正突出）constreliefHeight =0.1;// 世界单位，根据 scale 换算material.positionNode = positionLocal.add( normalLocal.mul(reliefHeight) // 向外膨胀);
效果
-
平面上的浮雕能让边缘跟随高度起伏（比如墙上的装饰线）。 -
圆柱/曲面上的凸起（如法兰、螺栓）能真正 overhang（突出）基础几何的轮廓。 -
支持自阴影、阴影投射跟随浮雕等。
- 墙面（bulkhead）
THREE.PlaneGeometry（平面） - 柱子和管道
THREE.CylinderGeometry（圆柱，带 inner core + outer shell） - 地板
THREE.PlaneGeometry（旋转后的平面） 所有高度图（Height Map）、颜色、法线等贴图全部用 Canvas 动态绘制生成（procedural texture），没有外部图片文件。“Everything in this scene is flat geometry.”（场景中所有东西都是扁平几何体），目的是纯粹展示 SPOM 技术的效果—— 用最简单的几何体 + 高度图，就能做出有丰富轮廓和悬空细节的视觉。
普通 Parallax Occlusion Mapping (POM) 只能在模型内部制造凹凸感（从正面看有深度，但侧面/边缘还是平的）。 而 Silhouette POM 额外解决了轮廓问题：通过 ray marching + alpha test 裁剪，让高度图的凸起部分真正悬空超出基础网格的边缘，看起来像真实位移（displacement）或 shell mapping，但性能好得多。应用在3D人物上：具体用处（尤其是对 3D 人物模型）
- 大幅提升细节表现力（低面数高细节）
-
人物衣服的褶皱、盔甲雕刻、皮革纹理、肌肉线条、链甲等，能在边缘也显示出起伏，而不是“贴图糊在平面上”。 -
效果接近细分 + 真实位移，但不需要高面数模型（适合移动端、Web、实时渲染）。 - 制作更真实的“浮雕 / 贴花”效果
-
衣服上的绣花、徽章、护甲上的浮雕、武器刻痕等，能真正“凸出来”并遮挡后面的部分。 -
圆柱形部位（如手臂、腿、武器柄）上的环形装饰、螺丝、法兰等，能自然 overhang（突出）。 - 优化性能与美术流程
-
美术人员可以用低模 + 高质量高度图/法线图快速做出高细节效果，而不用手动细分或烘焙高模。 -
比真实几何位移（Tessellation / Displacement）轻量很多，尤其适合 WebGL/WebGPU 环境。 - 在人物渲染中的典型场景
- 幻想/科幻角色
厚重盔甲、龙鳞、机械义体。 - 写实角色
皮革纹理、布料堆叠、伤疤、饰品。 - 卡通/半写实
强化轮廓风格感，同时保持性能。 -
结合骨骼动画后，动态人物的细节依然保持立体感。
局限性
- 性能开销
ray marching 有成本，尤其在高分辨率或多角色时。掠射角（侧面看）需要更多步数。 - 需要高质量高度图
贴图质量直接决定效果。 - 主要适用于 WebGPU
-
对极度复杂、UV 接缝多的模型需要额外调参。
一句话总结：这个技术让你用贴图就能实现接近真实几何细节的视觉效果，尤其擅长让人物模型“活起来”，在保持高帧率的同时大幅提升视觉保真度，是现代实时渲染中非常实用的“假位移”方案。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
