three.js - 从three.js r.58 中的置换贴图计算法线?

标签 three.js webgl shader fragment-shader

我在three.js r.58中使用普通着色器,我理解requires a normal map .但是,我使用的是动态置换贴图,因此在这种情况下,预先计算的法线贴图不起作用。

我发现的所有光照置换贴图示例都使用平面着色或预先计算的法线贴图。是否可以根据置换的顶点动态计算法线?

编辑:我已发帖 a demo of a sphere with a displacement map showing flat normals :

Sphere with displacement but incorrect normals

这是 github 存储库的链接,其中包含说明此问题的所有示例以及我最终找到的解决方案:
https://github.com/meetar/three.js-normal-map-0

最佳答案

这个答案是基于你上面的评论。

您可以随心所欲,但它非常复杂,您当然必须修改three.js“普通”着色器。

看看http://alteredqualia.com/three/examples/webgl_cubes_indexed.html .看一下片段着色器,你会看到

vec3 normal = normalize( cross( dFdx( vViewPosition ), dFdy( vViewPosition ) ) );

Alteredqualia 在片段着色器中使用衍生法线(而不是属性法线),因为顶点位置在顶点着色器中发生变化,而法线是未知的。

他正在做的是使用片段位置的 x 和 y 屏幕空间导数的叉积计算法线。

这会将法线设置为面法线。在硬边上它将是不连续的。

三.js r.58

关于three.js - 从three.js r.58 中的置换贴图计算法线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17528878/

相关文章:

c++ - Cel-Shading 对 BMP 模型纹理的影响?

unity-game-engine - 简单地获取 Cg 着色器内对象的缩放

javascript - 将旋转和平移与 three.js 结合起来

javascript - 将 javascript 库添加/导入到 JSF+Maven 项目中

javascript - Three.js - 一个顶点着色器,根据屏幕上像素的位置进行着色

canvas - WebGL 使用不同的混合模式绘制 2d 对象

math - Three.js 精准地形碰撞

3d - Dart WebGL 中的广告牌

javascript - Three.js 具有多个纹理的点

compiler-construction - 着色器编译器如何工作?