webサイトでよく見るネットワークみたいなアニメーションをwgpuで実装する

概要

2点間の距離が一定以下の場合、線を表示するやつです。
以下が実際のアニメーション。
https://github.com/Soyukke/wgpu-bondings/blob/master/demo.gif

以下ソースコード
https://github.com/Soyukke/wgpu-bondings

考え方

• 点の座標を一定速度で更新していく。
• 点の座標の部分にテクスチャをdrawする。
• 2点間の距離を計算して、閾値以下の場合は線をdrawする。

距離の計算

境界条件は周期境界としています。
2点間の距離の計算として，点$p = (x, y, z)$として，周期境界にコピーとして存在する点の座標

$$p_{nlm} = nx + ly + mz$$

を考えます。n, l, mはそれぞれ -1~1のコピーとその他の点$q$との距離を計算し，その最小値を$p$と$q$との距離とします。
この距離が閾値以下の場合に$p$と$q$の間にlineを引きます。

点の部分

点の部分にはテクスチャを表示している。テクスチャを点を中心に表示するのは以下のexampleコードを参考にしました。
点の数だけテクスチャをdrawします。

https://github.com/gfx-rs/wgpu/tree/trunk/wgpu/examples/bunnymark

線の部分

PrimitiveTopologyをLineListにしたrender_pipelineを使用してdrawしています。

primitive: wgpu::PrimitiveState {
    topology: wgpu::PrimitiveTopology::LineList,
    ..wgpu::PrimitiveState::default()
},