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

Question

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

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

---进度---

vert为顶点的修改位置

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

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

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

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

Answer 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 );

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

Custom Phong Shader for THREE.JS Object

shader

webgl

three.js