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

    介绍

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

    初始场景

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

    基础

    现在将材质替换为着色器材质ShaderMaterial

    const waterMaterial = new THREE.ShaderMaterial()

    • 1

    在这里插入图片描述
    虽然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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    片元着色器同理/src/shaders/water/fragment.glsl：

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

    • 1
    • 2
    • 3
    • 4

    导入并在着色器材质中使用它们：

    // ...

import waterVertexShader from './shaders/water/vertex.glsl'
import waterFragmentShader from './shaders/water/fragment.glsl'

// ...

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    然后你会获得一个蓝色平面：
    在这里插入图片描述

    波浪

    我们将从一个巨浪开始，有什么能比正弦波更能产生波浪呢?

    在顶点着色器中，我们要基于经过sin(...)处理后的modelPosition的x值来移动modelPosition的y值：

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

    • 1
    • 2

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

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

    波高

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在顶点着色器中使用：

    uniform float uBigWavesElevation;

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    uniform float uBigWavesElevation;

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

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    波频

    下面处理波浪发生频率，目前波浪高度只在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) } ,
    }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    // ...
uniform vec2 uBigWavesFrequency;

void main()
{
    // ...

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

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

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

    • 1

    可以看到波浪在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')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    动画

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

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

    const clock = new THREE.Clock()

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

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

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

    uniform float uTime;
// ...

void main()
{
    // ...

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述
    波浪是有动画了，但是速度不够“汹涌”。
    创建一个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')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    // ...
uniform float uBigWavesSpeed;

void main()
{
    // ...

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

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

    颜色

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

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

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

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

    • 1
    • 2

    然后，在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) }
    } 
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    通过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) })

    • 1
    • 2
    • 3
    • 4

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

    uniform vec3 uDepthColor;
uniform vec3 uSurfaceColor;

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

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

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

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

    // ...

varying float vElevation;

void main()
{
    // ...

    // Varyings
    vElevation = elevation;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    回到片元着色器，接收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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    这下你会看到颜色发生了细微的变化，但问题在于根据我们顶点着色器中的代码来看，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')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    回到片元着色器中检索这俩个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);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述
    之后可以慢慢调整直到获得你想要的颜色
    在这里插入图片描述

    小波纹

    对于小型波纹，我们将使用柏林噪声。
    同上次课，去该网址复制柏林噪声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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84

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

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

    • 1

    其中vec3的三个值分别为：

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

    在这里插入图片描述
    结果并非预期所想，速度过快了，因此给uTime乘以0.2：

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

    • 1

    在这里插入图片描述
    其次，波浪频率过低，看起来就像前面的大波浪一样，因而要增加波浪起伏频率，将modelPosition.xz乘以3

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

    • 1

    在这里插入图片描述
    再者，波浪过高，将整个噪声乘以0.15：

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

    • 1

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

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

    • 1

    在这里插入图片描述
    可以观察到上图与实际效果相反，因此把+改为-，获得相反效果：

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

    • 1

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

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

    • 1
    • 2
    • 3
    • 4

    现在，我们正在应用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);
}

    • 1
    • 2
    • 3
    • 4

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

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

    • 1

    在这里插入图片描述
    设置完后意味着现在有许多三角形，但平面依旧是场景中唯一的几何体，我们正在为着色器中的几乎所有内容设置动画，这意味着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')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    顶点着色器中：

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

    // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

  • 相关阅读:
    SpringMVC如何转发及重定向（forward、redirect）
    Redis数据库安装、使用、数据类型、常用命令（详解）
    300美元就能“盗走”一辆车，这些车主要小心了
    【uniapp】本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签
    备战秋招，LeetCode算法大总结，啃下这块硬骨头
    Android导出aar插件供Unity使用以及通过android scheme启动unityApp
    一、Java语言概述
    在枚举类中“优雅地”使用枚举处理器
    LeetCode所有大于等于节点的值之和
    python-Matplotlib画图那些你不知道的事
  • 原文地址：https://blog.csdn.net/weixin_43990650/article/details/124959142