[ShaderFXEditor Tutorials - 02] Normal Map Lighting in 2D

Preface / 前言

Normal Map / 法线贴图 主要是 3D游戏中的概念。最近在 Editor 移植 Unity3D 的一些特效组件时,碰到了一些 Normal Map 相关的技术。

本人虽然对 3D 游戏开发一窍不通,但是想起早些年看过在 2D 中用 Normal Map 来模拟一些光照效果的例子,于是就想在自己写的编辑器中尝试看看。

Generate Normal Map / 生成法线贴图

既然是要用到 Normal Map 那么肯定要先想办法生成一张来用一下。

首推的当然是 SpriteIlluminator - Normalmap Editor for 2d Dynamic Lighting 这个软件,很多年前 cocos2d-x 时代就看过 教程

用法什么的都很直观,工具也很强大,还可以实时的预览,当然这个是收费软件


除了上面这个,还有下面这个也很不错,免费的在线网站,可以简单的生成 Normal Map: NormalMap-Online

Normal Map in Shader / Shader 法线贴图

这里参考的是上面 sprite illuminator 教程中,提到的 PointLight / 点光源shader 的实现方法: pointlight.frag

这里重要的步骤,主要是:

  1. Normal Map 中提取法线信息:

    vec3 normal=texture2D(u_normals, v_texCoord).rgb;
    normal=normal*2.0-1.0;
    
  2. 再根据光源位置进一步计算:

    float normDotPosToLight=max(0.0,dot(normal,posToLight));
    
  3. 将光照反射的颜色混入最终结果:

    vec3 diffuse = normDotPosToLight * u_brightness * u_lightColor;
    gl_FragColor = vec4(texColor.rgb * diffuse, texColor.a);
    

注意上面的步骤去掉了很多细节计算,只是一个简化的,大概的过程。

Normal Map in Editor / 编辑器 法线贴图

知道了原理,也有了素材,那就可以在编辑器中尝试一下了:


这里只是大概的简单实现了一下使用 Normal Map 的光照效果。后面会考虑在编辑器中提供更方便的 Premade 的组件,让用户只需要简单的提供 Normap Map光源 相关的信息,就可以方便的使用这一效果。

另外,特效如果配合一些 LoS 的视线效果也会非常的不错,这个有兴趣的可以参考我以前发过的帖子:

LoS - 视野, 光照, 阴影 相关技术研究及分享


关于编辑器,可以看这里:

1赞

2021-03-07T16:00:00Z Mark

强烈建议大佬开搞3D

3d 一窍不通,是想学学搞,不过暂时先把 2d 的做好,然后试试怎么做 3d 的版本