Rust+WebAssembly+WebGL で八胞体(4次元超立方体)の描画

この記事はWebグラフィックスAdvent Calendar 2020 の25日目の記事です。

はじめに

今年になってからRust言語の勉強を始めまして、畳の上の水練で終わらないように
WasmとWebGLを利用して4次元図形を表示させてみることにしました、が、
RustコードとJavaScriptコードでのデータのやり取りに七転八倒、やっとのことで
とうとうなんとか動作するようになりましたので、初投稿してみることにしました。

参考にさせていただいた記事です：

RustでWebAssembly: Rust内から requestAnimationLoop() でループさせたり、on_click()を登録する

Rust(wasm)とJavaScript(WebGL)のデータ受け渡し　Rust+WebGLでポリゴン描画 (1/2)

Wasm-Bindgen公式

wasm-bingenのページでは”1.4 Without a Bundler”を参照し、node.js等がいらない形で(必要な部分はコードに埋め込まれている)構築しました。

四次元オブジェクトの描画法について

この三角錐群を4次元のアフィン変換を行った後、4次元方向への座標が0である３次元空間で切断して目的の図形（三角ポリゴン群）が得られます。
４次元空間において三角錐を3次元空間で切断した場合、以下のパターンで三角形を生成します。

• 三角錐がすべて3次元空間に含まれる場合。

• ４つの三角形を流用します。

• 一面(三角形)が3次元空間に含まれる場合。

• １つの三角形を流用します。

• 三角錐が切断され、1頂点のみが異なる側にある場合。

• １つの三角形を新たに生成します。最も多いパターンです。

• 三角錐が切断され、2頂点づつが異なる側にある場合。

• ２つの三角形を新たに生成します。

• 三角錐が3次元空間と交わらない場合（1点・１辺のみ含まれる場合を含む）。

三角形を生成しません。

• ローカル変換は4次元で行う。

• 変換したものを3次元で切断。

視点変換は3次元で行う。

記事内に一片のコードも無くて申し訳ありません。
ソースコードと、動作しているものは以下にあります。

ソースコード

デモ(ホームページ)
また、ホームページにはJavaScriptのコードですが4次元を歩くオブジェクトなどや３Dテクスチャを貼った八胞体なども置いてあります。それぞれ多少ですが操作可能です。
ただし、最新のものの動作確認はChromeでしか行っておりません。悪しからず。