【Three.js基础学习】25. Raging sea

最新推荐文章于 2025-03-17 15:26:53 发布

蚕食我的耐心

最新推荐文章于 2025-03-17 15:26:53 发布

阅读量490

点赞数 5

分类专栏： three.js基础学习文章标签：学习 three.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_41722662/article/details/143860486

版权

three.js基础学习专栏收录该内容

36 篇文章

订阅专栏

前言

课程回顾：

实现海洋波浪

使用着色器材质

如何实现海洋

1.创建着色器

2.实现x,y轴波动，控制波浪频率起伏

3.根据tick 实现动画

4.正面波浪没有区分，如何加入颜色

const debugObject = {}

5. 实现波浪的上下起伏颜色之后，实现小波浪更现实

需要和上节课一样不过不是柏林之声，是类似珍珠噪音可以查看下面链接 Classic Perlin 3D Noise

https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83

实现思路图

一、代码

1.项目结构

2.script.js

ShaderMaterial() 着色器

uniforms 自定义属性和装饰

uTime 实现动画的关键

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import GUI from 'lil-gui'
import waterVertexShader from './shaders/water/vertex.glsl'
import waterFragmentShader from './shaders/water/fragment.glsl'

/**
 * Base
 */
// Debug
const gui = new GUI({ width: 340 })
const debugObject = {}
 
// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Water
 */
// Geometry
const waterGeometry = new THREE.PlaneGeometry(2, 2, 512, 512)

// Color
debugObject.depthColor = '#186691'
debugObject.surfaceColor = '#9bd8ff'

// Material
const waterMaterial = new THREE.ShaderMaterial({
    vertexShader: waterVertexShader,
    fragmentShader: waterFragmentShader,
    uniforms:{
        uTime:{value:0},

        uBigWavesElevation:{value:0.2},
        uBigWavesFrequency:{value:new THREE.Vector2(4,1.5)},
        uBigWavesSpeed:{value:0.75},

        uSmallWavesElevation:{value: 0.15}, // 控制高度 海拔
        uSmallWavesFrequency:{value: 3}, // 控制频率，
        uSmallWavesSpeed:{value: 0.2}, // 小波浪的速度和时间相关
        uSmallWavesIterations:{value: 4.0}, // 指波浪的迭代，多少小波浪

        uDepthColor:{value:new THREE.Color(debugObject.depthColor)}, // 颜色 转成vec3
        uSurfaceColor:{value:new THREE.Color(debugObject.surfaceColor)},
        uColorOffset:{value:0.08}, // 在片段着色器中，深度和表面不同颜色，在起伏不同时更改，所以设置一个偏移值
        uColorMultiplier:{value:5}, // 颜色倍增
        
    }
})

// debug
// U大波浪
gui.add(waterMaterial.uniforms.uBigWavesElevation,'value').min(0).max(1).step(0.001).name('uBigWavesElevation(大浪的幅度)')
gui.add(waterMaterial.uniforms.uBigWavesFrequency.value,'x').min(0).max(10).step(0.001).name('uBigWavesFrequencyX(x轴的弯曲频率)')
gui.add(waterMaterial.uniforms.uBigWavesFrequency.value,'y').min(0).max(10).step(0.001).name('uBigWavesFrequencyY(y轴的弯曲频率)')
gui.add(waterMaterial.uniforms.uBigWavesSpeed,'value').min(0).max(4).step(0.001).name('uBigWavesSpeed(大波浪的速度)')

// u小波浪
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.uSmallWavesIterations,'value').min(0).max(5).step(1).name('uSmallWavesIterations(指波浪的迭代，多少小波浪)')

// gui无法理解颜色所以用addColor
gui
    .addColor(debugObject,'depthColor')
    .name('depthColor(深度的颜色)')
    .onChange(()=>{ // 修改了颜色要告诉three.js 更改数值
        waterMaterial.uniforms.uDepthColor.value.set(debugObject.depthColor)
    })

gui
    .addColor(debugObject,'surfaceColor')
    .name('surfaceColor(表面的颜色)')
    .onChange(()=>{ // 修改了颜色要告诉three.js 更改数值
        waterMaterial.uniforms.uSurfaceColor.value.set(debugObject.surfaceColor)
    })

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(起伏时，颜色强度)')

// Mesh
const water = new THREE.Mesh(waterGeometry, waterMaterial)
water.rotation.x = - Math.PI * 0.5
scene.add(water)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(1, 1, 1)
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const clock = new THREE.Clock()

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

    // Update water
    waterMaterial.uniforms.uTime.value = elapsedTime;

    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

2.顶点着色器

glsl代码

重点就是Elevation 控制频率的方式这部分


uniform float uTime; // 时间
uniform float uBigWavesElevation;
uniform vec2 uBigWavesFrequency;
uniform float uBigWavesSpeed;

uniform float uSmallWavesElevation;
uniform float uSmallWavesFrequency;
uniform float uSmallWavesSpeed;
uniform float uSmallWavesIterations;

varying float vElevation;

//	Classic Perlin 3D Noise 
//	by Stefan Gustavson (https://github.com/stegu/webgl-noise)
//
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;
}

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

    // Elevation 控制频率的方式
    float elevation  = sin(modelPosition.x * uBigWavesFrequency.x + uTime * uBigWavesSpeed) * 
                    sin(modelPosition.z * uBigWavesFrequency.y + uTime * uBigWavesSpeed) * 
                    uBigWavesElevation;

    for(float i = 1.0; i<= uSmallWavesIterations; i++){ // 控制迭代 获得更小的珍珠频率 ，让波浪显得更加无序
        elevation -= abs(cnoise(vec3(modelPosition.xz * uSmallWavesFrequency * i, uTime * uSmallWavesSpeed)) * uSmallWavesElevation / i); // 珍珠噪音 ，波浪感
    }
    
    modelPosition.y += elevation;



    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectionPosition = projectionMatrix * viewPosition;

    gl_Position = projectionPosition;

    // Varyings
    vElevation = elevation;

}

3.片段着色器

颜色如何混合的 mix

rgb

第三个值如果是0，则是第一种颜色；

第三个值如果是1，则是第二种颜色；

第三个值如果是0.5，则是0和1之间的颜色

uniform vec3 uDepthColor; // 深度颜色
uniform vec3 uSurfaceColor; //表面颜色
uniform float uColorOffset;
uniform float uColorMultiplier;

varying float vElevation;


/* 
    颜色如何混合的 mix
        rgb
        第三个值如果是0， 则是第一种颜色；
        第三个值如果是1， 则是第二种颜色；
        第三个值如果是0.5，则是0和1之间的颜色
 */
void main(){
    float mixStrength = (vElevation + uColorOffset) * uColorMultiplier;  // 混合强度
    vec3 color = mix(uDepthColor,uSurfaceColor,mixStrength);

    gl_FragColor = vec4(color,1.0);
}