GLSL随时间平滑地改变网格的温度（颜色）

Question

我正在使用three.js编写一个小程序。

我已经从PLY对象渲染了网格。我想加热靠近鼠标位置的多边形。当我移动鼠标时，附近的所有多边形必须将颜色平滑地更改为红色，而其他多边形必须随时间平滑地恢复为其正常颜色。

我已经成功获得了鼠标的位置并更改了最近的多边形的颜色，但是我不知道如何解决其他多边形随时间的平滑褪色。

应该在着色器中执行此操作还是应该将任何其他数据传递给着色器？

Answer 1

我会做一个简单的事情（在计时器中）：

dtemp = Vertex_temp - background_temp;
Vertex_temp -= temp_transfer*dtemp*T/dt;

其中temp_transfer=<0,1>为无单位系数将调整热传递的速度。 dt [sec]是经过的时间（您的计时器或更新例程的时间间隔），T [sec]是temp_transfer系数的时间标度。

因此，如果您的鼠标距离background_temp=0.0 [C]较远，并且如果未将其设置为background_temp=255.0 [C]，则现在可以直接使用Vertex_temp来计算颜色...将它用作红色通道{ {1}}

但是正如您所看到的，这更适合在CPU端而不是在GLSL中执行，因为您需要使用其先前值更新每个帧的颜色VBO ...在GLSL中，您需要将其编码为纹理或其他形式并将新值重新渲染为另一个值，然后将其转换回过于复杂的VBO ...也许计算着色器可以单次通过它，但我不熟悉这些。