Show HN：在 Three.js 中实现弯曲空间着色器（通过 4D 球体投影）
该项目在 Three.js 中实现了弯曲空间着色器，通过4D球体投影实现。核心技术是将3D模型变换到4D空间，进行旋转后，再投影回3D。项目基于 HLSL 编写，现已重写为 GLSL。提供了在线演示和演示视频，并详细介绍了实现弯曲空间效果的数学原理和交互控制方式，包括鼠标、键盘操作。动画模型和音乐来自其他资源。
bntre/CurvedSpaceShader
一个使用 4D 球体投影在 Three.js 中实现弯曲空间着色器的示例。
License
CC0-1.0 license 1 star 0 forks
弯曲空间着色器
这个顶点着色器最初是用 HLSL 为 Unity 游戏 Sfera 编写的: https://bntr.itch.io/sfera。现在，它被重写为 GLSL，用于 three.js。
在线体验： https://bntre.github.io/CurvedSpaceShader/
演示视频： https://www.youtube.com/watch?v=yhRXQAb-uh0
效果背后的数学原理
为了展示弯曲空间 (参见 Spherical Geometry), 每个 3D 模型都要经过一个特殊的变换，使用 4D 旋转和投影。
对于每个对象：
- 模型被缩放并放置在世界空间中心附近。
- 在顶点着色器中:
- 3D 点被投影到 4D 单位球体 (x²+y²+z²+w²=1) 上。
- 应用 4D 旋转 (每个对象都有自己的旋转)。
- 使用球面投影将该点投影回 3D。
交互控制
鼠标滚轮 : 缩放
Ctrl: 在 ZW 中旋转 ("evert")Shift: 在 XY 中旋转 (旋转)
鼠标拖动 :
左键: 在 XZ/YZ 中旋转Ctrl: 在 XW/YW 中旋转 ("evert")Shift: 在世界空间中缩放对象
右键: 在 XY 中旋转 (旋转)中键: 在世界空间中移动女孩
键盘 :
空格键: 暂停女孩动画方向键: 飞行相机End: 停止飞行Home: 重置场景
致谢
- 动画模型来自 three.js 示例 (这些模型不包含在此仓库中; 它们在运行时从 three.js 仓库加载):
- 音乐: Backbeat by Kevin MacLeod (CC0)
关于
Three.js 中的弯曲空间着色器 (通过 4D 球体投影)