AllBluefm的专栏

【代码】常见三维引擎坐标轴 webgl threejs cesium blender unity ue 左手坐标系、右手坐标系、坐标轴方向。

在将Canvas坐标系转换为WebGL坐标系时，需要注意三点：首先，坐标原点不同，需将Canvas的中心作为WebGL的原点；其次，Canvas的Y轴向下，而WebGL的Y轴向上，需对Y值取反；最后，需计算鼠标点击位置相对于Canvas中心的偏移量，并将其转换为WebGL坐标。通过事件监听获取鼠标在Canvas中的位置，再通过计算将其转换为WebGL坐标系中的坐标。代码示例展示了如何实现这一转换过程。

cesium中有虚线材质PolylineDashMaterialProperty，在虚线材质的基础上，去掉计算虚线的部分，增加计算alpha的部分，就能实现透明度渐变的polyline。

四、如果像素过大，比如超过1024*1024，建议将glb进行ktx2纹理压缩。二、如果顶点过多，可采用draco压缩，在blender中导出glb可设置。查看glb详情，大致了解顶点、纹理等情况。三、如果图片过大，可压缩图片。

一、主要使用 KTX Software 提供的 toktx.exe。三、批量压缩图片，使用python脚本。

疑问：按道理来说，设置 texture.flipY = true;就能翻转过来，达到和TextureLoader一样的效果，但设置了并没有生效，如果有大佬知道原因，请指教。默认不会翻转 Y 轴，采用的是图像原点在左上角的坐标系，因此它加载的图像会上下翻转。为了与传统的纹理坐标系统保持一致，KTX2 文件的解析通常会需要额外的转换。threejs中使用TextureLoader和KTX2Loader加载相同纹理，出现了上下翻转的情况。默认翻转 Y 轴，按正常的方式加载纹理图像，原点位于左下角，Y 轴朝上。

二、webgl原点在正中间，x轴正方向向右，y轴正方向向上，数据范围在[-1,1]之间。一、canvas原点在左上角，x轴正方向向右，y轴正方向向下，一个点对应一个像素。三、uv原点在左下角，x轴正方向向右，y轴正方向向上，数据范围在[-1,1]之间。