免费在线生成法线贴图新手三分钟上手指南【免费下载链接】NormalMap-OnlineNormalMap Generator Online项目地址: https://gitcode.com/gh_mirrors/no/NormalMap-Online把一张灰扑扑的图片拖进浏览器窗口几秒钟后旁边的小球表面就多了一层砖墙的凹凸质感——代码一行没写软件一个没装。这种效果的学名叫法线贴图normal map而让这一切在浏览器里发生的工具叫 NormalMap-Online。它是一个开源的法线贴图在线生成器所有计算都在本地浏览器里完成你的素材不会上传到任何服务器。一句话概括NormalMap-Online 是一个完全免费、免安装的在线法线贴图生成工具拖入高度图或照片实时预览 3D 效果一键下载成品贴图。它最大的特点是纯本地运行——隐私安全、离线可用且由 GPU 加速调整参数时几乎感觉不到延迟。它适合谁3D 游戏与独立开发者给低模表面补细节不涨面数平面与 UI 设计师让 2D 设计产生立体质感刚接触 3D 的初学者不想为一次小实验装整套软件Blender、Unity、UE 用户快速出贴图再导入引擎如果你属于其中任何一类往下看三分钟就能跑通第一个流程。三分钟生成你的第一张法线贴图先拿到工具直接双击打开项目里的index.html即可也可以拉取仓库到本地运行git clone https://gitcode.com/gh_mirrors/no/NormalMap-Online。打开页面后你会看到左中右三栏左侧是拖放区中间是参数面板右侧是 3D 预览窗口。预期看到页面加载后预览区已经有一个带纹理的小球在缓慢旋转。把一张灰度高度图拖进左侧 HeightMap 画布。预期看到图片立即显示中间区域出现蓝紫色的法线贴图预览右侧小球的表面随高度变化浮现出凹凸。拖动 Strength强度滑杆再点 Download 下载。预期看到滑杆一动法线贴图和 3D 预览同步更新下载得到一张 PNG 文件默认 8 位蓝紫色贴图。上图就是工具的主界面。左边放图中间调参右边看立体效果所有反馈都是即时的。熟悉这三大块之后就可以逐个探索功能了。核心功能逐个拆解高度图转法线一张灰度图搞定高度图height map是一张灰度图白表示凸起、黑表示凹陷中间是渐变过渡。它解决什么问题很多模型表面是平的砖缝、划痕、布料褶皱这类细节如果全靠建模去加工作量巨大。怎么用拖入灰度图后调 Strength 控制凹凸强度调 Blur/Sharp 控制边缘是柔和还是锐利再选 Sobel 或 Scharr 算法。项目自带的images/standard_height.png就是用来做测试校准的。看这张对比图左侧是原始高度图右侧是它驱动的 3D 表面。最合适的场景给砖墙、地板、岩石这类重复性表面快速出贴图以及给低模补细节。从照片生成法线四张照片还原真实凹凸有时候你手里没有高度图只有实物——比如一块鹅卵石路面、一张皮革表面。NormalMap-Online 的 Pictures 模式解决这个问题只需要同一表面在四种不同光照方向上、下、左、右下的照片就能算出表面法线。怎么用切换到 Pictures 标签把四张照片拖到对应的四个格子保持相机位置和角度不变只移动光源方向。四张图分辨率必须一致。这类素材照片拍好之后分别放进四个方向格子工具会自动计算。最合适的场景实物扫描、照片建模、快速原型验证——不需要专业扫描设备一台相机加一个手电筒就够了。不只法线置换、环境光遮蔽、高光一起出法线贴图只是起点。同一张高度图工具还能同步生成另外三种贴图通过顶部的 Normal / Displacement / AmbientOcc / Specular 标签切换置换贴图Displacement真正改变模型顶点位置立体感最强但更吃性能环境光遮蔽Ambient Occlusion给缝隙和凹陷加深阴影提升真实感高光贴图Specular控制哪些区域反光、反光多强怎么用切换到对应标签调整各自的滑杆点 All 按钮可以一次性下载全部四种贴图。最合适的场景搭建完整 PBR 材质PBR基于物理的渲染管线时一次拿齐一套贴图。批量模式一次处理一堆高度图有几十张高度图要转Batch Mode 解决这个重复劳动。勾选需要的贴图类型选多个文件一次全部生成。最合适的场景贴图库整理、游戏素材批处理、需要统一参数的大量纹理。进阶玩法参数怎么调参数作用新手推荐进阶调整方向Strength 强度凹凸的明显程度2.5表现细微纹理用 1 左右强调大起伏用 4 以上Level 层级细节精细度7.0想突出微观颗粒感可调高想做柔和表面调低Blur/Sharp边缘平滑或锐利0有机材质皮肤、布料往负值模糊硬表面金属、砖墙往正值锐化Filter 滤镜梯度算法SobelScharr 算出的细节更细噪点多的图建议先模糊再换算法Invert翻转方向默认凹凸方向反了的时候勾选 Height 翻转即可小技巧先用项目自带的测试高度图把参数调顺再换成自己的素材能少走很多弯路。原理白话版像素是怎么长出凹凸的把高度图想象成一张地形等高线图。每个像素的亮度代表这个点海拔多高。法线贴图要做的就是算出每个点表面的朝向——就像给地形图上每个格子插一面小旗子旗子的指向就是法线法线是表面在该点的朝向方向。工具用 GPU 上运行的着色器shader一种跑在显卡上的小程序完成这件事。核心逻辑其实很短比如 Sobel 算法只做一件事比较当前像素和它周围 8 个邻居的亮度差差值大的地方就是凹凸的边界// 对比左右两侧的亮度差算出水平方向的坡度 dx tl l*2.0 bl - tr - r*2.0 - br; // 对比上下两侧的亮度差算出垂直方向的坡度 dy tl t*2.0 tr - bl - b*2.0 - br;这段代码在做什么一句话把邻居亮度的变化量翻译成表面的倾斜方向再转成蓝紫色的法线贴图像素。你看到的那种蓝紫色其实是三个通道在编码三维方向。原理图从左到右展示了完整链条高度图 → 高度曲线 → 每个点的法线方向 → 最终的法线贴图。想深挖细节核心实现都在 javascripts/shader/ 目录里。真实场景他们拿它做了什么独立游戏开发者小林给一个低模像素风游戏做场景。他不想给几百块砖头单独建模就用黑白笔刷在画布上随手涂出砖缝和磨损拖进工具生成法线贴图再贴到引擎里。原本一天的工作量压缩到了半小时。做 3D 打印模型还原的爱好者阿文手里只有实物的几张照片。他用固定机位、四个方向打光拍了四张放进 Pictures 模式生成法线再叠到基础模型上表面纹路还原得相当到位。UI 设计师小许更直接——她把工具的界面截图存下来当灵感在 Figma 里给按钮加了一层假凹凸用类似思路做出带深度的控件质感。工具本身成了她理解贴图如何骗过眼睛的免费教材。横向对比和桌面软件比一比对比项NormalMap-Online桌面插件如 Photoshop 滤镜付费专用软件安装成本零浏览器打开即用需安装并配置需购买授权价格免费视宿主软件而定通常较高素材安全本地处理不上传本地本地功能深度常规够用含批量与照片模式视插件而定最强参数最细适合谁新手、快速出图、轻量项目已有宿主软件的熟手专业工作室取舍很直接如果你追求零门槛、快速出图、不碰商业软件授权选它如果你需要生产级流程和深度集成再考虑付费方案。常见问题速查问生成的效果不明显怎么办先确认输入是真正的灰度图然后适当拉高强度再检查 Filter 是否选择了合适的算法。噪点多时先加一点模糊。问图片会不会被上传到服务器不会。所有脚本都在浏览器里运行素材和生成结果都只停留在你的电脑上这也是它最大的安全卖点。问用什么尺寸的图最合适优先用 2 的幂次方尺寸比如 512×512、1024×1024处理效率和结果都更稳定。问输出的法线贴图能直接用吗可以。PNG 是通用格式能直接导入 Blender、Unity、UE 等主流软件需要无损存档时选 TIFF要小体积选 JPG。问我能用生成的结果做商业项目吗可以。项目采用 MIT 开源协议你生成的所有贴图都归你自己想怎么用都行。现在就去试试打开项目拖一张图进来三分钟内你就能拿到第一张属于自己的法线贴图。整个过程不花钱、不装软件、不泄露素材——这正是这个开源小工具的诚意所在。如果它在某一步帮到了你或者你发现了可以改进的地方不妨看看 README.md给项目提个 pull request。开源工具的成长往往就来自使用者顺手的一笔。【免费下载链接】NormalMap-OnlineNormalMap Generator Online项目地址: https://gitcode.com/gh_mirrors/no/NormalMap-Online创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考