标签: regl

我发现自己在 webGl 中使用的许多符号和域约定中有点迷失。看看这个 regl 示例（它显示了狒狒测试图像）。以下是我对它的理解：

• 没有指定原语；它可能推断GL_TRIANGLE。
• 因此，它创建具有顶点的三角形的单一表面(-2, 0)，(0, -2)，(2, 2)在世界空间。把它画在纸上，看起来这是专门选择的，因为它包含了该区域[0,1] x [0,1]。
• uv从世界空间获取它的值，包括这个[0,1] x [0,1]区域（它是 的域texture2d）。如果我理解正确，惯例是+u指向图像的右边缘，+v指向顶部。
• gl_Position设置为1 - 2*uv，以便图像占据[-1,1] x [-1,1], z=0“剪辑空间”，无论是什么。
• 更重要的是，这也意味着该+{u,v}方向对应-{x,y}！
• 显示的图像实际上是水平镜像！！（与此相比）但它没有垂直镜像。 在与屏幕像素坐标之间的最终转换过程中必须有其他东西可以抵消 y 中的负因子。
• 然而，谷歌搜索没有提供gl_Position任何与屏幕相关的镜像。我看到讨论它是左撇子，但这只是z相对于世界坐标的否定。（例如这里的这个问题）

简而言之，在我看来，这个图像也应该垂直镜像。

我错过了什么？

为了后代，代码复制如下：（MIT许可）

const …

我正在使用 regl 渲染圆圈，并且有三个目标：

1. 画布应该是透明的，在其后面显示 HTML 内容。
2. 圆应该平滑地抗锯齿。
3. 重叠的圆圈应该看起来合理（混合颜色，没有角落显示）

到目前为止，我有这个：故障代码和演示。

更新：演示链接现在反映了有效的、已接受的答案。下面的代码不变。

索引.js

const regl = require('regl');
const glsl = require('glslify');
const vertexShader = glsl.file('../shaders/vertex.glsl');
const fragmentShader = glsl.file('../shaders/fragment.glsl');

// Create webgl context and clear.
const canvasEl = document.querySelector('canvas');
const app = regl({
  canvas: canvasEl,
  extensions: ['OES_standard_derivatives']
});
app.clear({color: [0, 0, 0, 0], depth: 1});

// Generate random points and colors.
const attributes = {position: [], color: []};
for (let i = 0; i < 100; i++) { …

我正在尝试使用 WebGL （更具体地说，是 regl）创建 2D 图形可视化。通过我当前的实现，我已经可以看到力布局应用于每个节点，这很好。当我尝试相对于当前鼠标位置进行缩放时，问题就出现了。根据我的研究，要实现这种行为，需要按以下顺序应用矩阵变换：

translate(nodePosition, mousePosition)
scale(scaleFactor)
translate(nodePosition, -mousePosition)

因此，每次wheel触发事件时，都会重新计算鼠标位置，并使用新的鼠标位置信息更新变换矩阵。目前的行为很奇怪，我似乎不明白出了什么问题。这是一个活生生的例子。

显然，如果我将鼠标固定在初始位置进行放大和缩小，一切都会正常工作。但是，如果我移动鼠标并尝试将焦点集中在另一个节点上，则会失败。

检索鼠标位置的函数是：

const getMousePosition = (event) => {
    var canvas = event.currentTarget
    var rect = canvas.getBoundingClientRect()
    var x = event.clientX - rect.left
    var y = event.clientY - rect.top
    var projection = mat3.create()
    var pos = vec2.fromValues(x,y)
    // this converts the mouse coordinates from 
    // pixel space to WebGL clipspace
    mat3.projection(projection, canvas.clientWidth, canvas.clientHeight)
    vec2.transformMat3(pos, pos, projection)
    return(pos)
}

事件wheel监听回调：

var zoomFactor = 1.0 …