WebGL雾明暗器光标交互

很难给出一般性的建议。对于99%的应用程序,鼠标交互发生在GLSL之外。用三个JS术语来说,鼠标输入只会操纵各种场景节点的位置和旋转,可能还有材质设置。这相当于所有3D应用程序中99%的原生或网络。为了好玩,人们有时会直接将一些鼠标输入到材质球中。那就由你决定了。对于雾,计算从鼠标位置到顶点明暗器中顶点的距离。它越靠近鼠标,将位置向后、向前或远离鼠标。或者在片段明暗器中使用距离来变暗。

问题是你要求雾只有一两秒钟后才会回来。这是更多的工作,而且在大多数应用程序中,更可能在明暗器之外做一些事情。

如果你真的想在明暗器中做这件事,你可能会使用一种纹理,把圆圈画成与鼠标位置相对应的形状。每一帧都会模糊纹理,使其慢慢变黑。顶点明暗器会查看纹理,每个顶点都会找到对应的位移。

换句话说,您现在至少需要3个着色器。一个画一个圆。它不必是圆形明暗器,它可以只是一个普通明暗器,用于绘制恰好传递圆形数据的三角形。您需要淡入/模糊绘制历史的明暗器。你需要雾遮影器。

可能还有20种方法可以实现这一点。

相关问答

Creating a smudge/liquify effect on mouse move that continuously animates back to the original state using webgl

就我个人而言,我觉得那些在材质球中尽可能多的尝试更多的是用极限挑战自己,而不是务实。这对学习很有好处,但很少是“最佳实践”