问题标签 [webgl2]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
1087 浏览

opengl-es - 将 WebGL 2 中的像素读取为浮点值

我需要将帧缓冲区的像素读取为浮点值。我的目标是在 CPU 和 GPU 之间快速传输大量粒子并实时处理它们。为此,我将粒子属性存储在浮点纹理中。

每当添加新粒子时,我想从纹理中取回当前粒子数组,添加新粒子属性,然后将其重新放入纹理中(这是我能想到的动态添加粒子并处理它们的唯一方法GPU 方面)。

我正在使用 WebGL 2,因为它支持将像素读回PIXEL_PACK_BUFFER目标。我在 Firefox Nightly 中测试我的代码。有问题的代码如下所示:

我在控制台中收到此错误:

但是查看当前的 WebGL 2 规范,这个函数调用应该是可能的。使用该类型gl.UNSIGNED_BYTE也会返回此错误。当我尝试读取 ArrayBufferView 中的像素时(我想避免这种情况,因为它似乎要慢得多),它适用于 and 的格式/类型组合,gl.RGBAgl.UNSIGNED_BYTE不适Uint8Array()用于and gl.RGBA——这是预期的,因为它已记录在案在 WebGL 规范中。gl.FLOATFloat32Array()

我很感谢有关如何从我的帧缓冲区中获取我的浮点像素值或如何让这个粒子管道运行的任何建议。

0 投票
1 回答
2314 浏览

opengl-es - webGL2统一缓冲区对象和布局的使用(std140)

我正在做一个 webgl 布料模拟项目,尝试使用变换反馈。模拟将在顶点着色器中完成。我需要访问顶点的相邻顶点来计算力。我正在考虑使用统一缓冲区对象来存储所有顶点的位置。

我定义了一个统一的块,如下所示:

但是,我遇到了“布局:语法错误”。这是在 webGL2 中使用 UBO 的正确方法吗?webGL2规范说统一块只支持std140布局,为什么会有这样的语法错误?

非常感谢!

0 投票
1 回答
238 浏览

3d-texture - 哪种内部格式适用于compressedTexImage3D?

我正在尝试使用 Firefox 47(每晚)在 WebGL2 中将纹理压缩与 TexImage3D 一起使用,但我找不到有效的格式。错误是:

我可以使用哪种格式?

0 投票
1 回答
78 浏览

webgl - webgl重新定位显卡内存中的缓冲数据?

所以我创建了一个库来管理使用 webgl 缓冲的数据,它知道如何通过使用单个缓冲区来避免图形卡上的内存分段,它知道如何找到空闲内存中最紧密的部分以在新对象出现时重新填充添加并知道如何,让我告诉它预期需要多大的缓冲区,必要时,如何将一部分内存复制到另一个有更多空间的地方,因为新值被添加到向量中。所以从外面我可以完全忘记垃圾收集,我可以调用一个像 append( 只是将新值添加到数组中的函数),以及另一个函数来释放内存。但是 webgl 目前不支持 copyBufferSubData。webgl2 可以让你做到这一点。

如果没有,我将在使用旧 webgl 时将向量存储在主内存中,并对每种类型执行不同的操作。

0 投票
2 回答
751 浏览

graphics - 如何在 WebGL2 中读取附加到 FBO 的深度纹理

我现在正在使用 WebGL2.0 进行延迟着色。我现在面临的一个主要问题是我无法从 DEPTH_ATTACHMENT 中读取深度值。实际上,我使用 DEPTH24_STENCIL8 纹理创建自己的 GBuffer 作为 DEPTH_ATTACHMENT,然后将此纹理绑定到采样器并尝试在延迟着色部分中读取片段着色器中的值,如下所示:

然后我将 depthValue 设置为我的着色片段着色器中的输出:

在Firefox上执行此操作时,它没有报告任何错误,但输出颜色只是纯红色。(我认为这意味着 vec3(1.0, 0.0, 0.0) )。这真的让我很困惑。任何人都可以提供一些指导吗?我的 glsl 代码有问题吗?谢啦~

0 投票
2 回答
1503 浏览

opengl-es - 在 WebGL2 中使用 drawBuffers 时遇到一些麻烦

我想将我的延迟渲染器和前向渲染器组合在一起。为了共享相同的深度缓冲区,我使用带有 4 个颜色附件的单个帧缓冲区对象,COLOR_ATTACHMENT0-2 用于 G 缓冲区渲染,COLOR_ATTACHMENT3 用于延迟着色和前向渲染,这是伪代码:

使用它时,我在 Firefox 中遇到了一个错误:

错误:WebGL:drawBuffers:buffers[i]必须为 NONE 或 COLOR_ATTACHMENTi。

在 Chrome 中启动时,我得到了这个:

FrameBufferObject.ts:151 WebGL:INVALID_OPERATION:drawBuffers:COLOR_ATTACHMENTi_EXT 或 NONE

我的代码有什么问题?这真的让我很困惑...... THX。

0 投票
1 回答
5132 浏览

javascript - 使用 sampler3D 时在 WebGL 2.0 GLSL 中遇到语法错误

我正在尝试使用 WebGL 2.0 在浏览器中呈现 3D 医疗数据。

WebGL 2.0 现在支持 AFAIK 3D 纹理。

texImage3D() 是一个公认的函数调用。

我正在编写一个片段着色器并声明一个统一的采样器:

当我在 Firefox 上运行它时,我得到一个错误:

未捕获的异常:着色器编译错误:错误:0:19:'sampler3D':非法使用保留字错误:0:19:'sampler3D':语法错误

当我使用 sampler2D 时工作得很好(虽然不能解决我的目的)。

谁能指出我在这里做错了什么?

sampler3D 还不支持吗?但在这种情况下,应该如何访问使用 texImage3D() 加载的任何纹理?

0 投票
1 回答
1288 浏览

javascript - 在 WebGL 2.0 中支持短 3D 纹理

我正在尝试在 Firefox 的 WebGL 2.0 中加载一个简短的 3D 纹理。

虽然无符号 1 字节 3D 纹理加载没有任何问题,但我正在努力为任何其他像素类型做同样的事情。我的js代码:

我没有在这个纹理上生成 mip 贴图。

当尝试在片段着色器中对纹理进行采样时,每个像素都得到 0。

FS 代码:

任何帮助,将不胜感激。

0 投票
3 回答
3052 浏览

javascript - ND-Buffer 和 G-Buffer 有什么区别?

我是 WebGL 的菜鸟。我读了几篇关于 ND-Buffers 和 G-Buffers 的文章,好像它是 WebGL 开发的战略选择。

ND-Buffers 和 G-Buffers 与渲染管线有何关系?ND-Buffers 仅用于前向渲染,G-Buffers 仅用于延迟渲染吗?

如何实现两者的 JavaScript 代码示例对我理解差异很有用。

0 投票
1 回答
2140 浏览

webgl2 - 在 WebGL 2 中更新统一缓冲区数据?

与 OpenGL ES 3 不同,没有gl.mapBufferRange gl.bufferSubData(它存在),在 WebGL 2 中更新统一缓冲区数据的有效方法是什么?例如,PerDraw Uniform 块