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

查看:111
本文介绍了从three.js r.58中的位移贴图计算法线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在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?

:我发布了

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

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.

您可以做您想做的事,但是它相当复杂,您当然必须修改three.js普通"着色器.

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

看看 http://alteredqualia.com/three/examples/webgl_cubes_indexed.html .查看片段着色器,您将看到

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在片段着色器中使用了一个导数法线(而不是属性法线),因为顶点位置在顶点着色器中发生了变化,而该法线是未知的.

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.

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

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆