投稿
  1. 首页
  2. html-js-css

three.js学习笔记(十六)——汹涌的海洋

运行时错误1004 • 2022-6-11 • html-js-css • 阅读 20

three.js学习笔记(十六)——汹涌的海洋,第1张

介绍

现在我们知道了如何使用着色器并绘制一些图案，那么这次就要用它来创建一个汹涌的海洋。
我们将使用调试面板来设置波浪的动画并保持对各项参数的控制。

初始场景

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

基础

现在将材质替换为着色器材质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, 1.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

// Classic Perlin 3D Noise 
// by Stefan Gustavson
//
vec4 permute(vec4 x)
{
    return mod(((x*34.0)+1.0)*x, 289.0);
}
vec4 taylorInvSqrt(vec4 r)
{
    return 1.79284291400159 - 0.85373472095314 * r;
}
vec3 fade(vec3 t)
{
    return t*t*t*(t*(t*6.0-15.0)+10.0);
}

float cnoise(vec3 P)
{
    vec3 Pi0 = floor(P); // Integer part for indexing
    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
    Pi0 = mod(Pi0, 289.0);
    Pi1 = mod(Pi1, 289.0);
    vec3 Pf0 = fract(P); // Fractional part for interpolation
    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

    vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

    vec4 gx0 = ixy0 / 7.0;
    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
    gx0 = fract(gx0);
    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
    vec4 sz0 = step(gz0, vec4(0.0));
    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
    gy0 -= sz0 * (step(0.0, gy0) - 0.5);

    vec4 gx1 = ixy1 / 7.0;
    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
    gx1 = fract(gx1);
    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
    vec4 sz1 = step(gz1, vec4(0.0));
    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
    gy1 -= sz1 * (step(0.0, gy1) - 0.5);

    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
    g000 *= norm0.x;
    g010 *= norm0.y;
    g100 *= norm0.z;
    g110 *= norm0.w;
    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
    g001 *= norm1.x;
    g011 *= norm1.y;
    g101 *= norm1.z;
    g111 *= norm1.w;

    float n000 = dot(g000, Pf0);
    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
    float n111 = dot(g111, Pf1);

    vec3 fade_xyz = fade(Pf0);
    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
    return 2.2 * n_xyz;
}

然后回到main函数中，使用cnoise()函数并传入一个vec3作为参数，然后给波浪高度添加该函数返回值：

elevation += cnoise(vec3(modelPosition.xz, uTime));

其中vec3的三个值分别为：

x：modelPosition的xy：modelPosition的zz：uTime，该值将使噪波以自然和现实的方式进行变化。


结果并非预期所想，速度过快了，因此给uTime乘以0.2：

elevation += cnoise(vec3(modelPosition.xz, uTime * 0.2));


其次，波浪频率过低，看起来就像前面的大波浪一样，因而要增加波浪起伏频率，将modelPosition.xz乘以3

elevation += cnoise(vec3(modelPosition.xz * 3.0, uTime * 0.2));


再者，波浪过高，将整个噪声乘以0.15：

elevation += cnoise(vec3(modelPosition.xz * 3.0, uTime * 0.2)) * 0.15;


现实的波纹没有这么平稳，应该有许多圆形波谷与高波峰，为此我们可以用abs()：

elevation += abs(cnoise(vec3(modelPosition.xz * 3.0, uTime * 0.2)) * 0.15);


可以观察到上图与实际效果相反，因此把+改为-，获得相反效果：

elevation -= abs(cnoise(vec3(modelPosition.xz * 3.0, uTime * 0.2)) * 0.15);


观察上图可以看到更好的效果，但是但我们观察大海中更汹涌的洋流时，它们更加混乱，频率各不同并且毫无规律可循。
我们需要在更高的频率上应用更多噪声，用for循环最好不过了：

for(float i = 1.0; i <= 3.0; i++)
{
    elevation -= abs(cnoise(vec3(modelPosition.xz * 3.0, uTime * 0.2)) * 0.15);
}

现在，我们正在应用3次相同的公式，这应该会产生相同的波，但它们的振幅要显著得多：

下面我们根据i变量增加频率并减小振幅：

for(float i = 1.0; i <= 3.0; i++)
{
    elevation -= abs(cnoise(vec3(modelPosition.xz * 3.0 * i, uTime * 0.2)) * 0.15 / i);
}


很好，前面我们的几何体细分曲面是128x128，现在增加到512x512后观察下图，海浪微小细节更加明显：

const waterGeometry = new THREE.PlaneBufferGeometry(2, 2, 512, 512)


设置完后意味着现在有许多三角形，但平面依旧是场景中唯一的几何体，我们正在为着色器中的几乎所有内容设置动画，这意味着GPU正在进行艰难工作。

下面为着色器增加更多统一变量，来控制小波纹：

const waterMaterial = new THREE.ShaderMaterial({
    vertexShader: waterVertexShader,
    fragmentShader: waterFragmentShader,
    uniforms:
    {
        // ...

        uSmallWavesElevation: { value: 0.15 },
        uSmallWavesFrequency: { value: 3 },
        uSmallWavesSpeed: { value: 0.2 },
        uSmallIterations: { value: 4 },

        // ...
    }
})

// ...

gui.add(waterMaterial.uniforms.uSmallWavesElevation, 'value').min(0).max(1).step(0.001).name('uSmallWavesElevation')
gui.add(waterMaterial.uniforms.uSmallWavesFrequency, 'value').min(0).max(30).step(0.001).name('uSmallWavesFrequency')
gui.add(waterMaterial.uniforms.uSmallWavesSpeed, 'value').min(0).max(4).step(0.001).name('uSmallWavesSpeed')
gui.add(waterMaterial.uniforms.uSmallIterations, 'value').min(0).max(5).step(1).name('uSmallIterations')

顶点着色器中：

uniform float uSmallWavesElevation;
uniform float uSmallWavesFrequency;
uniform float uSmallWavesSpeed;
uniform float uSmallIterations;

// ...

void main()
{
    // ...

    for(float i = 1.0; i <= uSmallIterations; i++)
    {
        elevation -= abs(cnoise(vec3(modelPosition.xz * uSmallWavesFrequency * i, uTime * uSmallWavesSpeed)) * uSmallWavesElevation / i);
    }

    // ...
}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1319784.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
运行时错误1004 运行时错误1004 一级用户组
0 0
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表（0条）

保存