顶点着色器中对复数的操作答案

【问题标题】：Operations on complex numbers in vertex shader顶点着色器中对复数的操作
【发布时间】：2015-01-08 14:18:09
【问题描述】：

我正在开发一个用于可视化具有大量节点的树的双曲线图。这就是我使用 WebGL 和 ThreeJS 库来提高性能的原因。你可以在这里查看我到目前为止开发的内容：http://hyperbrowser.herokuapp.com/。这个想法是能够与图形交互：单击一个节点使图形在该节点中居中，然后拖放鼠标移动图形。

我已经能够显示多达 100.000 个节点。但是，当您使用如此大量的节点进行拖放时，性能会下降。我认为那是因为现在我正在使用 JavaScript 本身进行所有操作，然后更新我的 THREE.PointCloud 的顶点位置。

在做了一些研究之后，我想出了在顶点着色器中直接对顶点本身执行操作的想法。并在制服或属性中传递特定转换的参数。我认为这似乎可行，因此我想问：

这是否是正确的方法
~~如果是这样，由于我正在应用的转换是具有复数的函数，有没有办法在着色器本身中执行此操作？~~ 方法就是进行数学转换：https://github.com/julesb/glsl-util

所有代码都在https://github.com/vabada/hyperBrowser/ 中，以防您想了解我是如何执行任何特定操作的。当然，我们非常欢迎任何提示、想法和建议。

【问题讨论】：

我没有查看您是如何构建图表的，但在我看来，您似乎只在屏幕上同时显示
heroku 中显示的随机图，正如你所说的，大约是 100 个节点。但要生成它，可能会修改一些变量（如深度和每个节点的子节点数），以便总节点数发生变化。我做了一些修改这些变量的试验，当性能下降到 60 fps 以下时，它在 100k 数量级。这个想法是在之后进行一些聚类，以便图形仍然可供人类阅读，但因此我必须在每次移动后计算每个节点的转换。这就是为什么我想在着色器中进行计算
我想我正在解决问题的路上。我已经在使用着色器材质，现在尝试通过制服传递转换。对于复杂的操作，我看到here是这样的，基本上是在笛卡尔坐标中执行操作： vec2 c_mult(vec2 a, vec2 b) { return vec2(ax * bx - ay * by, (a.x+ay) *(b.x+by) - axbx - ayby); }
@dabad 1. 首先，您有 226 个绘图调用。谷歌THREE.LinePieces 并画一条线。看看是否有帮助。 2. 每次鼠标移动都会实例化一个新的Raycaster。创建一个并重用它。 3. 确保您考虑过如果顶点着色器修改了位置，您将如何选择。
非常感谢@WestLangley 这真的很有帮助。我现在只定义一次 Raycaster，并使用 LinePieces。这让我提高了很多性能。但是我想尝试在着色器中执行操作是否会平滑过渡（如果您现在检查示例，大约有 100k 节点，它渲染得很好，但在拖动鼠标时会减少一点：hyperbrowser.herokuapp.com/…您也可以增加渲染更多节点的深度（&depth=12）。我不确定我是否理解您的第三个想法，您所说的选择是什么意思？

标签： three.js glsl webgl shader vertex-shader

【解决方案1】：

到目前为止，我已经设法开发出相同的解决方案来执行顶点着色器中的所有操作。性能率是相似的，所以我可能会回到使用 JavaScript 执行操作。但是，尝试着色器很有趣，所以这里是顶点着色器的代码，以防它对某人有所帮助。

所以，首先实现了处理复数的函数（感谢julesb）：

Define complex operations
#define product(a, b) vec2(a.x*b.x-a.y*b.y, a.x*b.y+a.y*b.x)
#define conjugate(a) vec2(a.x,-a.y)
#define divide(a, b) vec2(((a.x*b.x+a.y*b.y)/(b.x*b.x+b.y*b.y)),((a.y*b.x-a.x*b.y)/(b.x*b.x+b.y*b.y)))

然后在顶点着色器中执行变换：

uniform vec2 t;

void main(){

  vec2 z = vec2(position.x,position.y);
  vec2 newPos = divide((z+t),(vec2(1.0,0) + product((conjugate(t)),z)));
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 0, 1.0);

}

【讨论】：