当前位置：首页 > news >正文

看Threejs好玩示例，学习创新与技术(GridDistortionEffect)

news 2024/9/27 5:51:23

示例来自Grid Displacement Texture | Codrops (tympanus.net)。原以为比较容易，一上手发现技术要求挺深。可参考使用 Three.js GPGPU 和着色器的 RGB Shift 网格置换纹理 (tympanus.net)进行内容解析。

本文未完结...（2024年9月25日第二次更新，还有一次）

1、怎么看本文？

本文会简单的点到一些技术，这些了解基本概念，在日后工作中想到就有帮助。内容包括“第三章什么是GPUComputationRenderer”。

有些内容需要沉入时间去理解，需要动脑子。这部分内容我也是经过仔细观察、调试才理解。适合时间多的同学。对本文涉及的技术，如果不经过调试，其实是比较难分析问题的。对glsl的调试，最佳策略就是修改gl_FragColor的输出，因为它可以反推哪些参数在影响效果。

最后，也希望大家注意到，随着ChatGPT的发展及应用，了解每一行代码已经不那么重要。核心是培养观察力和逻辑组织能力。

2、恐怖的效果

GridDistortionEffect的意思是网格失真效果。鼠标在场景移动的时候，图片会展示出网格状，并且给网格赋予一种眩晕颜色。这个效果非常适合放在悬疑片的开头。

20240924_224651

3、什么是GPUComputationRenderer

承接第二节，我们分析如下glsl。先尝试对A讨论点的代码进行注释。

void main()
{//B讨论点vec2 uv = gl_FragCoord.xy/resolution.xy;vec4 color = texture(uGrid,uv);float dist = distance(uv,uMouse);dist = 1.-(smoothstep(0.,uDistance/uGridSize,dist));vec2 delta = uDeltaMouse;//A讨论点color.rg+=delta*dist;//调试的时候对这里注释color.rg*=min(uRelaxation,uMouseMove);gl_FragColor = color;
}

图1 基于 GPUComputationRenderer的叠加渲染代码

结果发现渲染得到的效果如下——每个网格色块它回不去了！而根据纹理采样的一般逻辑，如果外部不加影响参数，纹理效果应该是可以回去的。为什么呢？

原因就在该着色器采用的纹理不是一般的纹理，而是由 GPUComputationRenderer 创建的内存纹理。GPUComputationRenderer 会继续使用上一次的纹理作为新的输入，因此不重置的情况系，就等于在一块画板永远的画下去。其中min(uRelaxation,uMouseMove)的作用就是把color.rg慢慢的置为0。

在这里我放一个问题：为啥图像有方块的效果，即本文标题的Grid，欢迎大家去猜，文末给答案。

GPUComputationRenderer它通过 WebGL 或 OpenGL 的 framebuffer 对象，可以将计算结果存储为纹理，并作为输入传递给后续的渲染步骤。

关于GPUComputationRenderer的使用可以直接询问ChatGPT。

GPUComputationRenderer一个典型案例是ThreeJS中鸟类飞行模拟(webgl_gpgpu_birds)。

4、彗星贪吃蛇

还是上面图1的代码，稍微改造下就可以变成下面的效果。这是怎么做到的呢？

彗星贪吃蛇的特点是蛇头跟随鼠标，有长长的尾巴，并且会逐步的消失。根据这个特点，代码应该实现如下三个特征：

获得鼠标的位置，鼠标范围内的点设置为比较亮的颜色。
与鼠标点距离远的位置的颜色逐步降低亮度。
如果要表现不同的颜色，那么就更鼠标的前进方向，向下向上（Y值变化多则绿色），向左向右（X值变化多则红色）。

改造后的代码如下，我把方法的作用写了出来。（有了我这个思路，后面自己做好看的贪吃蛇应该不成问题了吧。）

void main()
{vec2 uv = gl_FragCoord.xy/resolution.xy;vec4 color = texture(uGrid,uv);//根据距离进行衰减，不要一下子就衰减了。float dist = distance(uv,uMouse);dist = 1.-(smoothstep(0.,uDistance/uGridSize,dist));//不考虑鼠标移动的绝对量vec2 delta = abs(uDeltaMouse);//贪吃蛇头部if(dist>0.02){color.b=255.0;}else{color.b=0.0;}//贪吃蛇身体，头部因距离鼠标近，颜色越鲜艳color.rg+=delta*dist;//随着时间消退color.rg*=min(uRelaxation,uMouseMove);gl_FragColor = color;
}

5、一起摇摆

写到这里，我差不多明白本示例的逻辑了，哈哈。简单的说，就是原贴图的UV减去第四章得到颜色转换的UV，就能实现原贴图的失真混乱。技术示意图如下：

//原贴图UV
vec2 newUvs = coverUvs(uImageResolution,uContainerResolution);//获得彗星贪吃蛇的颜色
vec2 squareUvs = coverUvs(vec2(1.),uContainerResolution);
vec4 displacement = texture2D(uGrid,squareUvs);//彗星贪吃蛇的颜色转换为UV，并对原贴图UV进入扰动
vec2 finalUvs = newUvs - displacement.rg*0.01;//得到扰动后的效果
vec4 finalImage = texture2D(uTexture,finalUvs);
gl_FragColor = finalImage;