现在我们知道如何使用着色器并绘制一些图案，所以这次我们必须用它来创造一个汹涌的海洋。 我们将使用调试面板来设置波动动画，并保持各种参数的控制。

现在我们只用一个MeshBasicMaterial几何体具有128的平面x细分128。为了获得波浪效果，我们将为顶点设置动画，所以我们需要很多顶点。x128可能不够，但如果需要，我们会增加值。

现在用着色器材料代替材料ShaderMaterial

const waterMaterial = new THREE.ShaderMaterial() 

虽然Webpack配置好支持glsl但是要创建文件。 在/src/shaders/water/vertex.glsl在路径下创建顶点着色器：

void main() { 
             vec4 modelPosition = modelMatrix * vec4(position, 1.0);     vec4 viewPosition = viewMatrix * modelPosition;     vec4 projectedPosition = projectionMatrix * viewPosition;     gl_Position = projectedPosition; } 

片元着色器也是如此/src/shaders/water/fragment.glsl：

void main() { 
             gl_FragColor = vec4(0.5, 0.8, 1.0, 1.0); } 

它们被引入并用于着色器材料：

// ...  import waterVertexShader from './shaders/water/vertex.glsl' import waterFragmentShader from './shaders/water/fragment.glsl'  // ...  const waterMaterial = new THREE.ShaderMaterial({ 
             vertexShader: waterVertexShader,     fragmentShader: waterFragmentShader }) 

然后你会得到一个蓝色的平面:

我们将从巨浪开始。有什么比正弦波更能产生波浪？

在顶点着色器中，我们应该通过它sin(...)处理后的modelPosition的x值来移动modelPosition的y值：

vec4 modelPosition = modelMatrix * vec4(position, .0);
modelPosition.y += sin(modelPosition.x);

可以看到位移和波频率太高了，我们将使用uniform统一变量来获得对该值更好的控制。

下面将从波浪的高度开始。

给着色器材质添加一个uBigWavesElevation的统一变量：

const waterMaterial = new THREE.ShaderMaterial({ 
        
    vertexShader: waterVertexShader,
    fragmentShader: waterFragmentShader,
    uniforms:
    { 
        
        uBigWavesElevation: { 
         value: 0.2 }
    }
})

在顶点着色器中使用：

uniform float uBigWavesElevation;

void main()
{ 
        
    // ...
    modelPosition.y += sin(modelPosition.x) * uBigWavesElevation;

    // ...
}

可以看到平面波浪高缓和许多： 我们应该使用一个elevation的变量而不是直接去更新y属性，在后面为波浪着色的时候将派上用场：

uniform float uBigWavesElevation;

void main()
{ 
        
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);

    // 波浪高度
    float elevation = sin(modelPosition.x) * uBigWavesElevation;
    modelPosition.y += elevation;

    // ...
}

因为现在的海拔是在JavaScript中处理的，所以可以将之添加到Dat.GUI中：

gui.add(waterMaterial.uniforms.uBigWavesElevation, 'value')
	.min(0)
	.max(1)
	.step(0.001)
	.name('uBigWavesElevation')

下面处理波浪发生频率，目前波浪高度只在x轴上进行改变，如果是一起控制z轴和x轴效果会更好。

给着色器材质添加一个值为Vector2的uBigWavesFrequency的统一变量：

// Material
const waterMaterial = new THREE.ShaderMaterial({ 
         
    vertexShader: waterVertexShader,
    fragmentShader: waterFragmentShader,
    uniforms: { 
        
        uBigWavesElevation:{ 
        value:0.2},
        uBigWavesFrequency: { 
         value: new THREE.Vector2(4, 1.5) } ,
    }
})

回到顶点着色器中，检索uBigWavesFrequency，注意这是个vec2类型，然后在sin(...)中使用并且只使用到它的x属性值：

// ...
uniform vec2 uBigWavesFrequency;

void main()
{ 
        
    // ...

    float elevation = sin(modelPosition.x * uBigWavesFrequency.x) * uBigWavesElevation;

    // ...
}

可以看到更像波浪，因为频率更高 接下来使用uBigWavesFrequency的y值在z轴上控制波浪。 我们可以乘以另一个sin(...)值：

float elevation = sin(modelPosition.x * uBigWavesFrequency.x) * sin(modelPosition.z * uBigWavesFrequency.y) * uBigWavesElevation;

可以看到波浪在z轴方向上也进行了移动 将波频的x和y值都添加到调试面板中：

gui.add(waterMaterial.uniforms.uBigWavesFrequency.value, 'x')
    .min(0)
    .max(10)
    .step(0.001)
    .name('uBigWavesFrequencyX')
gui.add(waterMaterial.uniforms.uBigWavesFrequency.value, 'y')
    .min(0)
    .max(10)
    .step(0.001)
    .name('uBigWavesFrequencyY')

给着色器材质添加一个uTime的统一变量：

const waterMaterial = new THREE.ShaderMaterial({ 
        
    // ...
    uniforms:
    { 
        
        uTime: { 
         value: 0 },
        // ...
    } 
})

在tick()函数中更新该值：

const clock = new THREE.Clock()

const tick = () =>
{ 
        
    const elapsedTime = clock.getElapsedTime()

    // Water
    waterMaterial.uniforms.uTime.value = elapsedTime

    // ...
}

回到顶点着色器中检索并在sin()中使用uTime，

uniform float uTime;
// ...

void main()
{ 
        
    // ...

    float elevation = sin(modelPosition.x * uBigWavesFrequency.x + uTime) * sin(modelPosition.z * uBigWavesFrequency.y + uTime) * uBigWavesElevation;

    // ...
}

波浪是有动画了，但是速度不够“汹涌”。 创建一个uBigWavesSpeed的统一变量并与uTime相乘：

const waterMaterial = new THREE.ShaderMaterial({ 
        
    // ...
    uniforms:
    { 
        
        // ...
        uBigWavesSpeed: { 
         value: 0.75 } 
    } 
})

// ...
gui.add(waterMaterial.uniforms.uBigWavesSpeed, 'value')
	.min(0)
	.max(4)
	.step(0.001)
	.name('uBigWavesSpeed')

// ...
uniform float uBigWavesSpeed;

void main()
{ 
        
    // ...

    float elevation = sin(modelPosition.x * uBigWavesFrequency.x + uTime * uBigWavesSpeed) *
                  	  sin(modelPosition.z * uBigWavesFrequency.y + uTime * uBigWavesSpeed) *
                  	  uBigWavesElevation;

    // ...
}

这里只是简单使用浮点型，如果要控制所有轴方向上的速度，可以使用vec2

虽然波浪效果已经有了，但是平面颜色需要做出改变。 我们要生成俩种颜色，一个用于深度，一个用于曲面。

要将颜色添加到调试面板有点复杂。

首先，我们要在调试面板实例化后立即创建一个debugObject对象：

const gui = new dat.GUI({ 
         width: 340 })
const debugObject = { 
        }

然后，在waterMaterial实例化前，我们可以创建这两种颜色作为debugObject的属性，并在俩个新的统一变量uDepthColor和uSurfaceColor中使用它们，这些颜色将使用color类：

// Colors
debugObject.depthColor = '#0000ff'
debugObject.surfaceColor = '#8888ff'

// Material
const waterMaterial = new THREE.ShaderMaterial({ 
        
    vertexShader: waterVertexShader,
    fragmentShader: waterFragmentShader,
    uniforms:
    { 
        
        // ...
        uDepthColor: { 
         value: new THREE.Color(debugObject.depthColor) },
        uSurfaceColor: { 
         value: new THREE.Color(debugObject.surfaceColor) }
    } 
})

通过addColor()将之添加到调试面板，并当颜色改变时通过onChange()来更新waterMaterial的uniform：

gui.addColor(debugObject, 'depthColor')
    .onChange(() => { 
         waterMaterial.uniforms.uDepthColor.value.set(debugObject.depthColor) })
gui.addColor(debugObject, 'surfaceColor')
    .onChange(() => { 
         waterMaterial.uniforms.uSurfaceColor.value.set(debugObject.surfaceColor) })

回到片元着色器检索这俩个颜色并使用验证：

uniform vec3 uDepthColor;
uniform vec3 uSurfaceColor;

void main()
{ 
        
    gl_FragColor = vec4(uDepthColor, 1.0);
}

现在要做的是，当波浪较低则使用更多uDepthColor，波浪较高则使用更多uSurfaceColor。 为此我们将使用前面学的mix()函数，前俩个参数即为这俩种颜色，第三个参数将为波浪高度值，根据波浪高度来百分比混合颜色。

因此我们要使用到elevation，但是它位于顶点着色器中，为此要使用varying将其传输给片元着色器。

在顶点着色器中创建vElevation，并在main函数中赋值：

// ...

varying float vElevation;

void main()
{ 
        
    // ...

    // Varyings
    vElevation = elevation;
}

回到片元着色器，接收varying，创建一个根据高度vElevation混合mix()深度颜色和表面颜色的vec3类型变量color：

uniform vec3 uDepthColor;
uniform vec3 uSurfaceColor;

varying float vElevation;

void main()
{ 
        
    vec3 color = mix(uDepthColor, uSurfaceColor, vElevation);
    gl_FragColor = vec4(color, 1.0);
}

这下你会看到颜色发生了细微的变化，但问题在于根据我们顶点着色器中的代码来看，vElevation的值范围只在-0.2到0.2之间。我们需要找到一个方法来控制并调整这个vElevation的值，只限于在片元着色器中。 为此，我们要再创建俩个uniform，分别是uColorOffset和uColorMultiplier，并将其添加到调试面板中：

const waterMaterial = new THREE.ShaderMaterial({ 
        
    vertexShader: waterVertexShader,
    fragmentShader: waterFragmentShader,
    uniforms:
    { 
        
        // ...
        uColorOffset: { 
         value: 0.25 },
        uColorMultiplier: { 
         value: 2 },
    } 
})

// ...
gui.add(waterMaterial.uniforms.uColorOffset, 'value')
	.min(0)
	.max(1)
	.step(0.001)
	.name('uColorOffset')
gui.add(waterMaterial.uniforms.uColorMultiplier, 'value')
	.min(0)
	.max(10)
	.step(0.001)
	.name('uColorMultiplier')

回到片元着色器中检索这俩个uniform，创建一个变量mixStrength用来存储vElevation与那俩个unifrom运算后的处理结果：

uniform vec3 uDepthColor;
uniform vec3 uSurfaceColor;
uniform float uColorOffset;
uniform float uColorMultiplier;

varying float vElevation;

void main()
{ 
        
    float mixStrength = (vElevation + uColorOffset) * uColorMultiplier;
    vec3 color = mix(uDepthColor, uSurfaceColor, mixStrength);

    gl_FragColor = vec4(color, 1.0);
}

之后可以慢慢调整直到获得你想要的颜色

对于小型波纹，我们将使用柏林噪声。 同上次课，去该网址复制柏林噪声Classic Perlin 3D Noise by Stefan Gustavson到顶点着色器中，位于main函数上方： https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83