从three.js r.58 中的置换贴图计算法线? [英] Compute normals from displacement map in three.js r.58?

问题描述

我在three.js r.58中使用普通着色器，我理解

解决方案

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

你可以为所欲为，但它非常复杂，你当然必须修改three.js普通"着色器.

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

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

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

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

这会将法线设置为面部法线.在硬边处会不连续.

three.js r.58

I'm using the normal shader in three.js r.58, which I understand requires a normal map. However, I'm using a dynamic displacement map, so a pre-computed normal map won't work in this situation.

All the examples I've found of lit displacement maps either use flat shading or pre-computed normal maps. Is it possible to calculate the normals dynamically based on the displaced vertices instead?

Edit: I've posted a demo of a sphere with a displacement map showing flat normals:

Here's a link to the github repo with all of my examples illustrating this problem, and the solutions I eventually found: https://github.com/meetar/three.js-normal-map-0

解决方案

This answer is based on your comments above.

You can do what you want, but it is quite sophisticated, and you will of course have to modify the three.js 'normal' shader.

Have a look at http://alteredqualia.com/three/examples/webgl_cubes_indexed.html. Look at the fragment shader, and you will see

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

Alteredqualia is using a derivative normal in the fragment shader ( instead of an attribute normal ) because the vertex positions are changing in the vertex shader, and the normal is not known.

What he is doing is calculating the normal using the cross product of the x and y screen-space derivatives of the fragment position.

This will set the normal as the face normal. It will be discontinuous at hard edges.

three.js r.58

这篇关于从three.js r.58 中的置换贴图计算法线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！