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

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

article 2024/11/14 9:29:18

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

本文未完结...

1、恐怖的效果

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

20240924_224651

2、学习策略

对本文涉及的技术，如果不经过调试，其实是比较难分析问题的。对glsl的调试，最佳策略就是修改gl_FragColor的输出，因为它可以反推哪些参数在影响效果。还有大家还需要注意一点，随着ChatGPT的发展及应用，了解每一行代码已经不那么重要。核心是培养观察力和逻辑组织能力。

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

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

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

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

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

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

未完待续..

查看全文

http://www.kler.cn/a/319339.html