Rust + WebAssembly + WebGL에서 팔포체 (4 차원 초 입방체) 그리기

이 기사는 웹 그래픽 Advent Calendar 2020의 25일째 기사입니다.

소개

올해가 된 후 Rust 언어를 공부하기 시작했고, 다다미 위의 수련으로 끝나지 않도록
Wasm과 WebGL을 이용하여 4차원 도형을 표시시켜 보기로 했습니다만,
Rust 코드와 JavaScript 코드로 데이터를 교환하기 위해 7 번 8 번, 마침내
드디어 어떻게든 동작하게 되었으므로, 처음 투고해 보기로 했습니다.

참고로 한 기사입니다 :

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차원 객체를 그리는 방법에 대해

3차원에서의 삼각 폴리곤 묘화로부터의 유추로, 4차원에서는 삼각뿔로 오브젝트 표면(표체?표포?)을 구성했습니다.
팔포체이므로 8개의 입방체로 이루어져 있습니다.
팔포체의 3차원으로의 전개도
각 입방체를 5개의 삼각뿔로 분할하면 총 40개의 삼각뿔로 팔포체를 구성할 수 있습니다. 큐브의 삼각뿔에 대한 분해도 이 삼각뿔군을 4차원의 아핀 변환을 행한 후, 4차원 방향으로의 좌표가 0인 3차원 공간에서 절단하여 목적의 도형(삼각 다각형군)을 얻을 수 있습니다. 4차원 공간에서 삼각뿔을 3차원 공간에서 절단한 경우, 다음 패턴으로 삼각형을 생성합니다. 삼각뿔이 모두 3차원 공간에 포함되는 경우. 4개의 삼각형을 유용합니다. 일면(삼각형)이 3차원 공간에 포함되는 경우. 하나의 삼각형을 유용합니다. 삼각뿔이 절단되고 한 꼭지점만 다른 쪽에 있는 경우. 하나의 삼각형을 새로 생성합니다. 가장 많은 패턴입니다. 삼각뿔이 절단되어 2 정점씩이 다른 쪽에 있는 경우. 두 개의 삼각형을 새로 생성합니다. 삼각뿔이 3차원 공간과 교차하지 않는 경우(1점·1변만 포함되는 경우를 포함한다). 삼각형을 생성하지 않습니다. 생성 삼각형 Rust의 패턴 매칭이 매우 유용했습니다. 큐브에서 가능한 평면 회전이 없으면, 입방체 하나로부터 대체로 이러한 평면을 6개 할 수 있습니다.

기사 내에 한 조각의 코드도 없어서 죄송합니다.
소스 코드와 작동하는 것은 아래에 있습니다.

이것을 다시 시점 좌표계의 변환을 실시하면 화면에 표시할 수 있는 것입니다.

로컬 변환은 4차원에서 행한다. 변환한 것을 3차원으로 절단. 시점 변환은 3차원으로 실시한다.
또, 홈페이지에는 JavaScript의 코드입니다만 4차원을 걷는 오브젝트등이나 3D텍스처를 붙인 팔포체등도 두고 있습니다. 각각 약간이지만 조작 가능합니다.
단, 최신의 동작 확인은 Chrome에서만 실시하고 있습니다. 나쁘지 않아.