Question

在Regl的帮助下，我有一堆动画点。这些是用于获得我传递给Regl对象的职位的制服：

view: ({ tick }) => {
  const t = this.stage.rotationSpeed * tick

  return mat4.lookAt(
    [],
    [
      view.end[1][0] * Math.cos(t),
      view.end[1][1],
      view.end[1][2] * Math.sin(t)
    ], // eye
    view.end[2], // center
    view.end[3] // up
 )
}

projection: ({ viewportWidth, viewportHeight }) =>
  mat4.perspective(
    [], // out
    50 * Math.PI / 180, // field of view in radians
    viewportWidth / viewportHeight, // aspect
    0.01, // zNear
    1000 // zFar
  )

这些制服用于获取每个点的位置。在我的顶点着色器中：

gl_Position = projection * view * position;

我想显示一个绝对位置的div，它跟随画布上动画的点之一。为此，我在框架函数上有以下代码，pixelX和pixelY应该是div的位置：

// Position the labels
// compute a clipspace position
const clipspace = this.transformVector(matrix, [points[0][4], points[0][5], points[0][6], 1])

// divide X and Y by W just like the GPU does.
clipspace[0] /= clipspace[3]
clipspace[1] /= clipspace[3]

// convert from clipspace to pixels
const pixelX = (clipspace[0] * 0.5 + 0.5) *  this.state.width
const pixelY = (clipspace[1] * -0.5 + 0.5) * this.state.height

我不明白先乘0.5再乘0.5意味着...

Webgl / Regl画布上的屏幕坐标

0 个答案: