问题标签 [webgl2]

更新

@gman 已经回答了这个问题。启动时需要调用 gl.getExtension('EXT_color_buffer_float') 。

问题是在 WebGL2 下调用gl.checkFramebufferStatus(gl.FRAMEBUFFER)不会返回。gl.FRAMEBUFFER_COMPLETE我在打电话之前打了这个电话gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)。

以下是任一版本的常见顺序。区别在于createTexture()和readTexture()。这些特定于 WebGL 的版本。

一般流程：

attachFramebuffer：普通

创建纹理：WebGL 1.0：

读取纹理：WebGL 1.0：

WebGL 2.0 覆盖：

上述调用有限制吗？WebGL 1.0 与 WebGL 2.0 的限制是否不同？如果没有限制，是否有理由将其与纹理用于输入数据？

谢谢

我需要转换从不允许 crossOrigin 的 s3 服务器获得的图像中的颜色。

这是我需要的功能：

但被 crossOrigin 错误污染：

我知道我不能getImageData在这种情况下使用。我不想读取图像数据。

但也许通过其他一些 webGL / 画布操作来完成我的任务？

无法在服务器上渲染或代理。

更新：

对于 WebGL2 调用声明，请参见这篇文章的结尾

问题描述

调用我的函数以将数据加载到纹理中时出现此错误。我正在使用 Chrome 68 浏览器。该代码适用于WebGL1但不适用于WebGL2. 我的 WebGL 参数（internalFormat、format、channelType）如下：

WebGL 1：

WebGL 2：

在 WebGL 1 和 2 中，我启用了这个扩展：

在 WebGL 2 中，我另外启用了此功能：

以及函数定义：

在此调用之前使用以下命令创建纹理：

API 声明 (WebGL2)：

我刚刚对从 1 到 50 的数字进行了循环，并打印出 WebGL 对 exp(float) 的计算。我正在使用高精度，这些来自 WebGL2。

我在 javascript 中运行了同样的东西并比较了结果。聪明的东西非常小，但很快就会增加非常大的数字。

所以我还比较了 javascript 和 python (numpy) 的结果，它们非常具有可比性。

以下是 Math.abs(diff) 中的纬度数：

Diffs', '8.25484005595456e-8, 3.700182968913168e-7, 0.0000037810978241736848, 0.0000055018942362039525, 0.000003128868712565236, ... 12720537652, 21883728284, 30738633104, 20683268800, 324543434496, 2989835245824, 6539001840640, 12329169293312, 110431739568128, 262788127178752, 615023709454336, 1369528883085312, 3028196912005120

这些是 javascript 和 pyton 之间的最后几个差异：

3.0517578125e-05 6.103515625e-05 0.0 0.0 ... 0.0 0.0 0.0 0.0 0.0 32.0 0.0 0.0 ... 0.0 0.0 0.0 262144.0

这些是 WebGL 程序的前几个数字：

'来自 WebGL 的结果', '2.7182817459106445,7.3890557289123535,20.085533142089844,

并来自javascript：

'来自 javascript 的结果', '2.718281828459045,7.38905609893065,20.085536923187668,

I'm trying to make a simple WebGL2 scene with low-poly terrain. Everything is working as expected when I let the shader interpolate between the three vertex colors. But as soon as I add the flat type the whole thing breaks and every triangle starts "flashing".

Vertex Shader

Fragment Shader

Vertices, indices and colors:

I've tried different ways using indices and other types of vertices but nothing seems to work. Using VBOs for better structure.

I do notice that when all the three vertices in the triangle has the same color the flashing obviously stops. What I've read is that the flat type makes all three vertices in a triangle use the color of the provoking vertex (last vertex in triangle by default). Unfortunately that makes the triangles "flash" and I do not understand why.

Using my NVIDIA GTX 1060 graphics card.

GIF showing the "flashing": https://gyazo.com/7d3ba42afe1ba1458cd2820729490e47

我想知道是否有任何可以利用的 WebGL 异步调用？

我研究了 Spec v1 和 Spec v2，他们没有提及任何内容。在 V2 中，有一个 WebGL 查询机制，我认为这不是我想要的。

在网络上搜索并没有得出任何确定的结果。有这个例子，并不清楚同步和异步版本有何不同。http://toji.github.io/shader-perf/

最终，我希望能够异步完成所有这些：

• 读取像素
• texSubImage2D 和 texImage2D
• 着色器编译
• 程序链接
• 画？？？

有一个 glFinish 操作，它的文档说：“在所有以前调用的 GL 命令的效果完成之前不会返回。”。对我来说，这意味着可以通过调用 Finish() 来等待异步操作？

并且网络上的一些帖子表明调用 getError() 也会强制实现一些同步性，并且在每次调用后都不是非常希望做的事情。

我正在尝试学习如何在 WebGL2 中利用gl.drawBuffer()功能从同一个程序中进行多个输出。

我查看了《OpenGL ES 3.0 Programming Guide》一书的第 11 章，其中列出了发生多输出所需的内容。然而，着色器源示例非常简单，仅输出常量值。

我想知道是否有人有更好的例子？或者是否可以解释 TextureCoordinates 变化发生了什么？在普通的着色器代码中，我会使用它从我的输入中查找数据值并将它们写出来。现在面对多种布局，TextureCoordinates怎么变化对应每个布局呢？我的视口尺寸会发生什么变化？这与哪个输出纹理对应？

以下是我理解它们的一些步骤：

1. 创建一个颜色附件数组 GL_COLOR_ATTACHMENT0, ...
2. 为每个输出创建一个帧缓冲区对象
3. 创建输出纹理

4. 对于每个FB：

   • 绑定帧缓冲区
   • 绑定纹理
   • 将纹理与 FBO 关联：frameBufferTexture2D (..., color_attchment_from_step1)

5. 调用 drawBuffers 传递颜色附件数组

在着色器内部访问输出值，如下所示：

在我的应用程序中，我创建纹理，渲染它们并延迟读取它们，直到 CPU 绝对需要。

我想知道（我仍然不知道如何），因为我猜测并监控消耗的 GPU 内存是否会调用以readPixels()通过将数据传输到 CPU 来减轻 GPU 的内存消耗？或者在我破坏纹理之前，该内存是否仍会被占用？

与其创建新WebGlProgram的使用gl.createProgram()，不如继续重用一个好主意？

如果我要重用一个，我列出了我应该执行的步骤：

1. AttachShader(s)：在我的情况下，我只需要附加一个新的 Fragment 着色器。（问题：我可以继续使用已编译的着色器吗？）
2. 链接程序
3. 使用程序
4. 获取属性位置
5. 获取统一位置