谷歌Chrome浏览器终于在113版本(至少我在windows下现在已经能自动更新到该版本了，但我发现113版有时会有物体过一会就消失不渲染的bug，后面的版本已修复)正式开始支持WebGPU了！这就意味着我的Tesserxel四维引擎项目可以直接在最新版的Chrome浏览器上直接运行了。我将开启一个Tesserxel玩耍教程系列，解释Tesserxel示例的场景。
玩Tesserxel首先得知道基本的四维空间概念，然后请阅读《四维世界（四）：二维生物视觉》《四维世界（五）：体验四维人的视觉与方向感》这两篇介绍四维生物视觉的文章，明白立体照片，截面与四维深度等概念。文章中的交互四维场景除了用的是上一代WebGl写的引擎，本质与Tesserxel的交互方式区别不大，只是快捷键略有调整，所以如果之前有玩过一些四维场景，上手Tesserxel是零难度的。注意，要想直观领略抽象的四维空间，除了要一块稍微好点的显卡，还需要尽可能多调动感官交互，因此Tesserxel没有考虑适配手机操作。由于很多操作与原来老引擎相同，这里就不再赘述摄像机移动旋转与简单的方向辨识了，这篇文章重点介绍三维体素照片渲染设置相关的操作，并罗列出常见相机控制方法。
我直接先画一张快捷键图供大家查阅，具体含义将在本文后面逐步讲解，注意不同场景中不是快捷键图中所有功能都可用哦，要视相机的控制方法而定。（23年9月更新：目前Tesserxel已更新加入了设置按钮来调节渲染设置，无需记忆蓝字渲染相关快捷键，但控制相机的基本平移键盘操作还是要学哦）
点击链接进入示例库，如果你看到这几行字那么你应该去下载最新版的谷歌浏览器或下载Canary版谷歌浏览器，详见这里）。
下面我们点击侧栏来看第一个”超立方体”四维场景: 8个胞心处均画了球形的超立方体。该场景早已介绍过: 滚动鼠标滚轮推拉能够从超立方体里面钻出来看到外表面，调整好角度的话最多可以同时看到四个面哦！再次提醒：这个场景的相机控制只需要鼠标左中右键，不需要键盘。
注意：第一次进入由于要下载Tesserxel库和编译着色器，可能会有约一两秒的白屏。
侧栏最前面的示例都是一些几何体，如果你不对四维几何有深入研究的兴趣，可以直接从更丰富的四维场景示例开始看。如果你对这些场景还是觉得无法理解，没关系，我将在下一篇文章中逐个场景解析它们是什么。注意不同场景的相机控制方式不一样，一般有这三种：
- 写了“控制：轨迹球模式”的就跟第一个“超立方体”四维场景一样使用鼠标左中右键拖动旋转、滚轮缩放。
- 写了“控制：保持竖直模式”能够保持相机看到的水平胞（水平面的类比）永远平行于竖直方向。使用键盘Q/E/W/S/A/D/空格/左Shift平移相机，U/O/I/K/J/L旋转相机（转向），且移动鼠标/滚轮也能在同样三个方向上旋转相机。最后，键盘Z/X可以实现保持竖直方向与前进方向均不变的“自转”。
- 写了“控制：自由飞行模式”的除了跟保持竖直模式的相机控制相同外，还增加了三组三维旋转（仅旋转三维画面）操作：R/Y/T/G/F/H；注意其中F/H与Z/X其实是一样的。
四维分形场景采用的是这种控制方式。
以上的三组键盘对应的平移旋转方向已在本文第一张键盘图中用红色字体写出，具体方向坐标可以参考下图：
如果你看不懂这些方向，特别是这么多旋转方向的话，自己操作试试就明白了！总的来说快捷键盘图上ABC每个3x2的区域中都对应着有三个自由度的操作（A组为水平方向的平移，B组为三维旋转，C组为四维转向），如果还是不明白，那就送你一句话：Don’t try to understand it. Feel it.
其它场景中涉及到特殊操作的会在侧栏底栏的说明里写出，这里举一些例子：
- 物理场景中很多场景支持使用鼠标左键发射超球通过轰击的方式与物体进行交互。
- 两个火车场景可以使用键盘T/G等操作火车运行与转向。
三维体素照片渲染设置
真正的四维人其实看到的是一张能够同时看到所有像素而不重叠的、没有半透明像素的三维的体素照片。作为三维生物，我们的二维眼睛想要捕获这些细节，就要在三维体素照片渲染上下工夫。所有关于三维体素照片的渲染设置快捷键都需要按住Alt键，这些快捷键在本文第一张键盘图中以蓝色标出。你也可以点击屏幕右边缘的齿轮按钮展开设置菜单，里面的功能跟快捷键能实现的功能是相同的。
注意：之前的操作都是针对四维摄影机控制的，即三维体素照片中的内容会改变，而这一节按住Alt键的这些操作只改变立体照片的渲染设置，它不影响“四维生物”看来的“实质”的三维画面。
裸眼3D设置
默认裸眼3D开启。如果你一直不会看希望关掉它，请按Alt+Z进行切换。
裸眼3D具体的深度含义请务必看这里！因为截面深度与3D照片的深度方向不一样。
注意：默认为交叉眼，若想改为平行眼，请使用快捷键Alt+X在两者间切换。
3D视图里的双眼偏移量调整：Alt+V与Alt+B，这里是在调整左右3D照片的旋转角度。
截面的4D双眼偏移量调整：Alt+N与Alt+M，这里是在调整四维场景中左右眼对应的两个相机的间距。
视图配置:
- Alt+1: 默认为三维体素照片+三个方向的过画面中央的截面
- Alt+2: 与上面一样，区别在截面显示更大
- Alt+3: 仅显示三维体素照片，关闭截面显示
- Alt+4: 仅显示三个方向过画面中央的截面，关闭三维体素照片
- Alt+5: 仅全屏显示一个XY方向过画面中央的截面
- Alt+6: 仅全屏显示一个XZ方向过画面中央的截面
- Alt+7: 显示三维体素照片和一系列平行于XY平面的截面
- Alt+8: 显示三维体素照片和一系列平行于XZ平面的截面
( 我发现一个神奇的bug，打开Photoshop会导致按住Alt键时浏览器无法捕获同时按下的数字键！)
三维体素照片朝向控制
按住Alt键拖动鼠标可以旋转三维体素照片。(Alt+方向键也可以旋转三维体素照片哦，这个快捷键上没标)按住Alt键滚动鼠标滚轮还可以放大缩小。但注意，三维体素照片本质上相当于四维人的显示器，把显示器旋转后会颠倒对四维世界中方向的辨识，因此我们需要按Alt+R将三维体素照片旋转复原（将显示器重新摆正）。如果确实想旋转视图，可以旋转四维场景中的相机，比如按键盘Z/X（或自由飞行模式下的RTYFGH键盘），这些同样能够改变三维体素照片的角度而不是旋转三维显示器本身。
旋转照片和旋转摄影机有什么不同？参考下图的2D类比：它将影响你后面控制摄像机的方向，比如你将三维体素照片绕y轴（竖直方向轴）旋转90度后，本来按键盘A/D控制相机左右移动现在看起来却是侧前侧后移动。建议一般如果想临时从其它角度观察就旋转显示器并及时复原，要操作四维空间中相机位置时3D显示器的旋转角度不要超过45度，免得搞不清真实的控制方向。
三维体素照片透视视场角：Alt+G与Alt+T，我们可以通过这组快捷键选择使用正交投影还是透视投影来观察三维体素照片，并调整透视视场角。
截面形状设置
为什么四维人的视野要是个立方体而不是球呢？还有，三维体素照片里这么多体素，我想把它剖开只看里面的体素，剔除外面颜色的遮挡该如何是好呢？三维体素照片的截面形状设置就是干这个的。连按Alt+F可以在以下几种模式下切换：
- 默认立方体：所有体素全显示；
- 球形：Alt+鼠标右键拖动可以改变一些属性：左右拖动改变羽化大小，上下拖动改变球的大小；
- 小立方体：Alt+鼠标右键拖动可以改变一些属性：左右拖动改变小立方体外的要忽略的体素的透明度，上下拖动改变小立方体的大小；
- 平面（实则为半空间）：Alt+鼠标右键拖动可以旋转截平面位置。
渲染图像设置
- 三维体素照片透明度: 通过Alt+Q/Alt+A控制体素透明度。(透明度较低时有时能看到一圈圈的圆圈，好像是浮点数精度bug产生的)建议透明度调适中，太小会导致所有东西都很模糊看不清，太大则只能看到表面的一些体素，又看不到三维体素照片内部中心的体素了。
- 十字准星: 通过Alt+C开启或关闭，开启裸眼3D后它将位于立方体显示器的最中心，这在正对目标前进时大有用处，不然很难知道三维画面内容在z轴上的中央的位置。
渲染品质设置
注意，下面两相设置将会很大程度上影响帧率，对配置较低的电脑来说，调整请慎重！
- 三维体素照片渲染层数: Alt+W与Alt+S调整。体素采用的是分片渲染改变渲染层数即改变z轴分辨率。注意：层数越多帧率越慢。
- 三维体素照片渲染分辨率: Alt+E与Alt+D调整。体素的每一片的二维分辨率，即xy方向上的分辨率。注意：分辨率越高帧率越慢，特别是对于点像素计算量大的分形等场景尤为明显。
好了，Tesserxel示例库的操作方式就是这些了，后面我们将具体介绍每一个四维场景，我将逐个场景分享我习惯的四维物体的交互方式与玩Tesserxel的技巧。