从0开始的Oasis Engine学习笔记（五） —— 坐标系转换

这是我参与更文挑战的第5天，活动详情查看： 更文挑战

本章将主要介绍Oasis Engine里的坐标系的转换，是自己学习后的理解，如有错误，望指正!!!

空间与坐标系

空间与坐标系的存在，主要解决一个问题，及： 如何表示我在哪里？

在现实中，如果别人问你在哪里？

我们可以很方便的回答：我在去二仙桥的成华大道上

这个回答就很清晰的表达了自己位置。

在Oasis中，表示位置就需要使用笛卡尔右手坐标系（x, y, z）这样的三维坐标就可以很清晰表达所处的位置

图形学中的各种空间

模型空间

1. 模型空间又被称为本地空间
2. 模型按照本地空间的原点进行建立
3. Oasis里的模型坐标系原点在模型的中心点

世界空间

1. 世界空间是全局的3D空间
2. 物体通过各种变换会改变在世界空间中的位置
3. Oasis里的空间坐标系原点在屏幕中心。空间坐标系下所有物体的坐标都是相对于空间坐标原点位置的坐标。

视图空间

1. 视图空间又被称为相机空间
2. 相机空间将世界空间坐标系转化为用户视野前方的坐标。
3. Oasis中相机位置即原点位置。相机坐标系下所有物体的坐标都是相对于相机位置的坐标。

投影空间

1. 投影空间又被称为裁剪空间，标准设备坐标系。
2. 投影空间是一个x, y, z都为 [-1, 1] 的立方体空间。
3. 投影空间之外的片段不会进入后面的渲染流程。

空间变换

3D空间变换

1. 一般可以用3D笛卡尔坐标系来描述一个3D空间。
2. 每个坐标系都有自身的原点、刻度、轴向。
3. 将一个坐标系中的对象转换到另一个坐标系中的过程，就是空间变换。

Oasis里的坐标变换

Oasis里封装了坐标转换的方法
在Camera 接口中提供了坐标转换

在使用Oasis里使用坐标转化时需要使用isOrthographic将相机切换成 正交投影

正交投影就是可视区近处和远处看到的物体是等大小的。由正交投影模型产生的可视区称为盒状可视区，盒状可视区模型如下：

cameramash.isOrthographic = true

这里介绍几种常见的方法

screenToWorldPoint

screenToWorldPoint(point: Vector3, out: Vector3): Vector3
将点从屏幕空间转换为世界空间.

参数
    point
    屏幕空间点坐标

    out
    世界坐标

返回
    out
    世界坐标
复制代码

示例：将图片素材加载到屏幕左上角

  // 加载纹理资源
  const texture = {
    url: require('../assets/z.png')
  }
  const textureList: Texture2D = await engine.resourceManager.load(texture)
  
  // 创建精灵实体
  const spriteEntity = rootEntity.createChild('sprite1')
  
  // 确定屏幕坐标
  // 因为屏幕坐标的原点在canvas的左上角，而精灵实体的原点在中心点
  // 用精灵实体的宽高除以2的坐标就可以使实体的左上角和canvas的左上角重合
  const screenpoint = new Vector3(textureList.height / 2, textureList.width / 2)
  
  // 创建世界坐标
  const out = new Vector3()
  
  // 使用screenToWorldPoint将屏幕坐标转换成世界坐标
  // screenToWorldPoint方法会返回重新返回修改后的out值
  cameramash.screenToWorldPoint(screenpoint, out)
  
  // 使用transform.position设置实体坐标
  spriteEntity.transform.position = out
复制代码

完成效果

使用同样的方法可以确定屏幕4个角的位置

worldToScreenPoint

worldToScreenPoint(point: Vector3, out: Vector4): Vector4
将点从世界空间转换为屏幕空间.

参数
    point
    世界坐标

    out
    屏幕空间点坐标

返回
    out
    屏幕空间点坐标
复制代码

示例： 将世界坐标系原点转化为屏幕坐标系

  const worldPoint = new Vector3(0, 0, 0)
  const screenOut = new Vector4()
  cameramash.worldToScreenPoint(worldPoint, screenOut)
  console.log(`screenOut.x：${screenOut.x}; screenOut.y: ${screenOut.y}`)
  // screenOut.x：960; screenOut.y: 503.5
复制代码

end

确定了坐标，离完成游戏的小目标又进一步

respect by myself