THREE.JS 对象的自定义 Phong 着色器答案

【问题标题】：Custom Phong Shader for THREE.JS ObjectTHREE.JS 对象的自定义 Phong 着色器
【发布时间】：2016-04-12 06:19:01
【问题描述】：

目标：在顶点着色器中计算置换顶点的法线。

当前状态：一些我认为不是 100% 正确的 hacky 代码。

--- 进展---

vert是顶点的修改位置

vertNormal 是应用于法线的顶点的修改位置（基本上是一个克隆）

vec3 objectNormal = normalize(cross(vert-position,vertNormal-position)); 
vec3 transformedNormal = normalMatrix * objectNormal;
vNormal = normalize( transformedNormal );

http://fallingcode.com/servedFiles/normals.jpg

此时我只需要一些关于顶点着色器代码部分的反馈。

【问题讨论】：

(1) “不起作用”是什么意思？ (2) 你正在置换顶点。你也必须以某种方式处理法线。 (3) 您首先需要置换顶点/法线，因此使用修改后的顶点和法线计算光照计算。
(1) 不起作用，因为 envmap 在挥动平面上不可见。 (2) 我想到了，但这会阻止 envmap 在飞机上显示吗？ (3) 我可以像置换顶点一样置换法线吗？
(re: 2) 你的法线都指向同一个方向，所以光照会不正确。不过，大概你还是会看到一些东西。（re：3）由于您有位移顶点的解析公式，因此法线也有一个隐含的解析公式。您要创建什么 - 平面（多面）阴影或平滑阴影？
是的，我看到了一些东西，但我可以看出它不正确。我想要平滑的阴影。我猜我可以在着色器中放入一个方程式来处理这个问题。我一直在谷歌搜索..
West，我添加了一张图片来显示我在方程式方面取得的进展。这不是那么好，大声笑..

标签： three.js webgl shader

【解决方案1】：

在@WestLangley 的帮助下，我达到了我的目标。图像中的波浪只是为了显示结果。我得研究方程式，让它们看起来更自然。

因此，法线计算正确，环境反射（THREE.JS 立方体贴图）也正常工作。

http://www.fallingcode.com/servedFiles/calculatedNormals.jpg

顶点着色器中的以下代码用于计算顶点沿法线（本例中为 z 轴）移动后的法线。

// the displacement function
float displace( vec3 pos ) {
    float amplitude;
    amplitude = sin( pos.y + time ) * 0.1;
    return amplitude;
}

float df = displace( position );
vec3 displacedPosition = position + normalize( normal ) * df;

float delta = 0.01;
vec3 newNormal = vec3( df - displace( position + vec3( delta, 0, 0 ) ), df - displace( position + vec3( 0, delta, 0  ) ), delta );
newNormal = normalize( newNormal );

vNormal = normalize( normalMatrix * newNormal );

【讨论】：