问题标签 [regl]

在使用 Regl 在 WebGL 中渲染网格时，我注意到随着网格在其坐标方面的大小增加，视觉伪影开始出现。

请参阅https://jsfiddle.net/yxzuo2aq/2/上的实时示例或下面的屏幕截图。

随着 x 的增加，视觉上没有任何变化，因为相机和透视会相应地更新，但是随着 x 超出1000，伪影开始出现。

我认为这与 WebGL 有关吗？

通过在渲染之前缩小网格的坐标来避免这些伪影的最佳方法是什么？

使用 regl，我试图用 WebGL 绘制一个三角形，我可以在三角形内部的某个参考点定义一种颜色，并使其他像素的颜色成为它们到该点的距离的函数。

到目前为止，它仅在此参考点是角点之一时才有效：

从角落渐变

这是使用以下 Vert 和 Frag 着色器完成的：

这里的参考点是[1,0]、[0,1]和[-1,-1]。使用相同的三角形，我如何在 [0,0] 处放置另一个参考点，例如颜色为白色？（这将在三角形内产生一个白色的“岛”）

上下文：我将一个统一的浮点数组传递给我的片段着色器，然后用这个数组中的一个值初始化一个浮点数，最后尝试在 for 循环中增加这个浮点数，使用以下代码：

我有一个奇怪的错误：

我不明白为什么这个特定循环中的这个增量会造成这么多麻烦。你有什么想法 ？

我正在尝试更新 REGL 中帧缓冲区内的纹理。但由于某种原因，它不会更新帧缓冲区。

这是完整的代码：

• 我设置initialTexture为绿色。
• 在updateColor命令中，我指定了帧缓冲区，使 regl 渲染到帧缓冲区
• 中的片段着色器updateColor呈现红色
• 命令运行后updateColor，我希望initialTexture它是红色的，但它保持绿色。

我究竟做错了什么？

我对网页设计/javascript等非常陌生，所以请原谅菜鸟级别的知识。

我正在使用 Regl 开发一些数据可视化，以使用 Jim Vallandingham 和 Peter Beshai 的出色工作作为起点，在屏幕上显示大量点。我已经使用了一点 D3.js，所以希望以类似的方式使用它。

我已经能够毫无问题地将 Regl/webGL 可视化生成为全屏画布，但接下来我想做的是将画布放入 html 容器中（与可以插入 D3.js SVG 的方式相同）到容器中），以便我可以用 html 文本等包围。最终，我想尝试构建一个包含这个可视化的滚动条。

因此，在下面的示例中，我希望将 Regl/webGL 画布附加到“div”html 容器并调整大小以适应 400x300px 尺寸。我不知道该怎么做，因为没有根据 D3 将画布附加到 html 元素的命令。

任何人都可以帮忙吗？提前致谢

HTML：

JS：

我的小提琴：https ://jsfiddle.net/joe_wretham/26xrw3pL/2/

我最近遇到了一个非常奇怪的问题，我很好奇是否有其他人遇到过这个问题，或者是否有人可能会发现我的 WebGL alpha 混合功能存在问题。

当启用 alpha 混合并结合帧缓冲区渲染时，Safari 14 似乎没有渲染任何内容。它曾经在 Safari 13 中按预期工作，它也适用于所有其他主要浏览器（经过测试的 Chrome、Edge、Firefox）

演示： https ://jsfiddle.net/flek/rc6zbk0d/58/

您应该会看到三个红点和一个三角形，它们会在 2.5 秒后变为紫色。这适用于 Chrome、Firefox、Safari 13，但不适用于 Safari 14！

似乎让 Safari 14 关闭的关键部分如下（第 89 行和第 146 行）。

这可能是 Safari 本身、Regl 或我的代码中的错误。我很好奇是否有人看到混合功能 + 帧缓冲区渲染的问题。

我在着色器中对颜色中的值进行编码，并得到了一些意想不到的结果。我已经将其提炼为这个小提琴中概述的情况，其中从纹理（sampler2D）中获取颜色会产生不同的结果，而不是明确指定完全相同的颜色作为 vec4。

如果我们直接使用 c ，我们会得到与使用 px 不同的结果——即使我们刚刚确认它们是完全相同的值。

代码中的以下行是没有意义的，因为这些值是相等的（刚刚在上面检查过）。但是评论/取消评论这一行会产生不同的结果。

在下面的小提琴中自己尝试一下：

https://jsfiddle.net/9zo5fpd0/31/

我尝试了不同的精度级别以及从图像构造颜色的不同方法 - 但唯一的区别似乎是源是否是图像本身。我对运行着色器代码的 GPU 的内部工作原理的了解有限，所以我不知道这两种方法的本质区别是什么。任何帮助，将不胜感激。

我是 JavaScript 和 WebGL 编程的新手。我正在使用 REGL 编写一个 observablehq 笔记本。我的网址是https://observablehq.com/@listenzcc/simple-regl。

这是我的问题。

的代码vert和frag渲染就像

它似乎是.cpp格式，但它显示为纯文本。

问题是，当它出错时，没有任何关于哪条线不正确的信息。它只显示错误消息，如下所示：

编译顶点着色器时出错

总之，我完全不知道如何调试它。

那么，是否有一些解决方案来调试代码？

感谢您的时间^_^。

我正在尝试使用名为regl. 我设法使用两个渲染目标来渲染效果，并且我在一个中看到了结果。

在我完成对目标的渲染后捕获帧看起来像这样，它代表一个屏幕 blit（具有此纹理的全屏四边形）。这就是我希望它工作的方式。

一旦我将它传递给其他一些 regl 命令，在未来的某个框架中，这个纹理附件似乎会被破坏。这是我试图用相同的资源渲染的同一个对象，但是数据已经消失了。我尝试将纹理从 FBO 中分离出来，但似乎没有帮助。我可以寻找什么会使这种纹理表现得像这样？

我对 WEBGL 的工作方式不熟悉，所以我不明白为什么热方程不能像预期的那样工作。在我的片段着色器中，我使用了 2D 采样器 prevState 和纹理坐标 uv。使用具有公式的热方程，U(i,j) += dT*(U(i,j+1)+U(i,j-1)+U(i+1,j)+U(i- 1,j)-4*U(i,j))/(dX*dX)，我把这个公式放在我的片段着色器中：

但是，当我运行下面提到的 HTML + JavaScript 代码时，随着时间的推移，我没有得到一个扩散解决方案，热方程应该如何工作。相反，该函数会爆炸并扩散，形成菱形。

我究竟做错了什么？