偶然间看到国外一个大神做了一个歌曲播放的3D场景，通过点击3D场景中的物体，开始播放音乐，然后场景中的音频符号根据声音的高低起伏而变化，觉得挺有趣的，于是通过AI技术把它的的模型和着色器代码拿过来玩一玩，就当做我的数字人舞台，顺便完善自己的着色器代码。
音乐全部由AI生成。
在这个科技日新月异的时代，音乐的表现方式也在不断演化。想象一下，一个炫酷的3D数字人造舞台，结合虚拟现实与音频技术，为我们带来前所未有的音乐体验。通过点击场景中的物体，用户不仅可以启动音乐的播放，还能看到音频符号随着旋律的起伏而变化，营造出一场视听盛宴。
3D数字人舞台的构建
这个舞台的设计灵感源于未来主义风格，流线型的结构与炫目的色彩交相辉映。舞台中央是一位栩栩如生的3D数字人，其动态肢体动作与周围环境完美融合。观众通过虚拟现实设备，进入这个奇幻的音乐世界，仿佛置身于一个充满能量与创意的宇宙。
互动体验
在这个舞台上，用户可以通过简单的点击与场景中的物体互动。每当点击一个音符、乐器或是舞台元素，都会触发不同的音乐片段。随着音乐的播放，场景中的音频符号会实时反应音调的变化，波动的图形和闪烁的光点让整个舞台充满生命力。这不仅提升了观众的参与感，也让音乐的每一个细节都被形象化，形成独特的视听体验。
音频符号的视觉化
在音乐播放的同时，音频符号根据声音的高低起伏而变化。高音时，符号如同跳动的火焰，闪烁着明亮的光芒；低音时，符号则变得稳重而深邃，仿佛波浪在静静涌动。这种动态的视觉效果使得音乐不仅是听觉的享受，更是一次视觉的探险。
科技与艺术的融合
这种3D数字人舞台的构建，正是科技与艺术完美融合的体现。先进的音频处理技术与虚拟现实技术相结合，创造出一个无缝连接的音乐空间。无论是音乐爱好者还是艺术创作者，都可以在这个舞台上找到灵感，探索无限可能。
未来展望
随着技术的不断进步，这种互动式的音乐体验将会更加普及。未来的音乐会，或许不再是单一的听觉享受，而是一个多维度的感官盛宴。在这个充满创意的3D数字人舞台上，音乐将不再是孤立的存在，而是与视觉、触觉紧密相连的整体体验。
在这个科技感十足的舞台上，我们不仅是音乐的听众，更是参与者与创造者。让我们期待，在不久的将来，能够亲身体验这场震撼的音乐之旅。
分享一下顶点着色器代码：
const vertex =`uniform float u_time;vec3 mod289(vec3 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}vec4 permute(vec4 x){return mod289(((x*34.0)+10.0)*x);}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);}Classic Perlin noise, periodic variantfloat pnoise(vec3 P, vec3 rep){vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo periodvec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod periodPi0 = mod289(Pi0);Pi1 = mod289(Pi1);vec3 Pf0 = fract(P); // Fractional part for interpolationvec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0vec4 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 * (1.0 / 7.0);vec4 gy0 = fract(floor(gx0) * (1.0 / 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 * (1.0 / 7.0);vec4 gy1 = fract(floor(gx1) * (1.0 / 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;}uniform float u_frequency;void main() {float noise = 3.0 * pnoise(position + u_time, vec3(10.0));float displacement = (u_frequency / 30.) * (noise / 10.);vec3 newPosition = position + normal * displacement;gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);}`export { vertex }
