问题标签 [webgl2]

I want to render a big scene(a modeled city) using WebGL, and I think occlusion culling is a good way to optimize the performance.

And I know WebGL 2.0 has a new feature called 'Query Objects' to get the occlusion information. But every time I use gl.getQueryParameter(query, gl.QUERY_RESULT), I got the same result 1.

And I wrote a demo here to explain the problem:

and here are my vertex information that the sceond triangle is obscured by the first triangle.

and the result is always 1.

What's the result '1' stands for?

In addition, how could I do occlusion culling using WebGL 2.0? Is there any helpful samples?

我正在研究three.js 中PBR 着色器的基于图像的照明部分。我正在使用通过 DDSLoader 引入的 .dds 立方体贴图纹理。

我在 chrome 和 safari 上的低位接缝处出现了可怕的接缝。疯狂的部分是材料在 ios 上看起来很棒。

我尝试使用所有 mag 和 min 过滤器，但没有成功。我也尝试过降低精度，但这也没有效果。我认为 ios 可能有一种处理与桌面不同的纹理的方式。较低的 lod 看起来好像它们没有被正确过滤，并且接缝变得越来越戏剧化，细节越低。

下面是一个 codepen 的链接，它说明了接缝从左侧的 LOD 0.0 到右侧的 LOD 7.0 变得更加明显。

带有 .dds 的 textureCubeLod

请在桌面 chrome 或 safari 上试用，然后与 ios 进行比较。（firefox 和 android 不支持 textureCubeLodEXT）。

我想知道如何在桌面版 chrome 和 safari 上进行这项工作。ios有不同的默认过滤器吗？ios 在做什么或不做什么来给我他们正在寻找的结果？

注意：.dds 纹理每个通道和四个通道保存 8 位。

为了实现延迟着色，我使用了一个 fbo 来做多个渲染目标。

现在这种方法有效，但我想为背景添加一个天空球体。

显然这个天空球不属于延迟渲染周期，所以我必须在第二遍渲染。

但是，为了正确渲染天空球体，我必须检索深度值，因此延迟渲染纹理不会阻挡球体。

为此，我将深度纹理从 G 缓冲区复制到默认帧缓冲区：

这种方法不起作用。WebGL 给我这个错误信息：

GL 错误：GL_INVALID_OPERATION：glBlitFramebufferCHROMIUM：目标帧缓冲区是多重采样的

我真的不知道我是怎么做错的。据我所知，互联网上没有明确的例子。那么有人可以启发我吗？

WebGL2 支持UNSIGNED_INT_10F_11F_11F_REV纹理类型，其中浮点值表示为无符号 10 位和 11 位浮点数。如何创建打包的值以及如何将它们解包回浮点数？

这个问题可能很奇怪，但假设我们有一个画布，例如绘制一些像这个实验这样的 3D 内容。

不考虑使用 ThreeJS、Babylon 或任何其他库来实现相同的效果，是否可以设置一些间隔来复制每个体素的诞生并在以后重复（重绘）它。

只是我想记录画布绘制过程并重播它，而不使用 RTC 、视频或图像序列。

做了什么？

我一直在尝试使用WebGl Context 和Stream Capture，但不幸的是无法达到预期的结果。

有人能帮忙吗？

我目前正在研究一个 GLSL 着色器，该着色器使用大量纹理文件将多个材质叠加在一起，这些材质由每个图层的 alpha 混合图像单独屏蔽。该效果应该模仿具有背衬、中间网格和顶部第三个网格的织物。在处理这个问题时，我很快就遇到了着色器中纹理单元的限制。作为一种解决方案，我将开始将纹理组合到 RGB 通道中，以获得更多可供着色器使用的纹理，并研究将多个漫反射图像或其他图像组合成一个图像。但与此同时，我的问题是：

WebGL 2.0 会提供更多的纹理单元，还是受显卡本身的限制？就像一个常识性问题一样，最大组合纹理单元数是我在 WebGL 上下文中可以拥有的纹理单元总数吗？这与 Max Texture Units 有何不同？我只是想了解这里的限制。下面是我的 Macbook Pro 上针对 WebGL 的 Browserleaks 的结果。

我在 gl.TEXTURE0 .... 31 的调试器编号中发现。0 + 31 = 32 32 个纹理对象，但我只有一个纹理。

我在 mozilla 开发网站上找到：“GL 提供 32 个纹理寄存器；其中第一个是 gl.TEXTURE0”。

当我绑定下一个（第二个tex）时，我使用了：

或者 ：

我在 webgl2 的规范中找不到任何 copyTexImage2D 的痕迹：https ://www.khronos.org/registry/webgl/specs/latest/2.0/

几个月前，我问过如何制作浮动纹理副本的问题。在 webgl 版本 1.0 中，使用 copyTexImage2D 是不可能的（不支持浮点类型）所以我通过构建一个简单的着色器来制作纹理副本。

我想象使用 webgl2 解除了对 float32 类型的限制。但是我在 webgl 2 的规范中没有找到任何“copyTexImage2D”这个词。

它是如何工作的？webgl2 的规范只给出了自 webgl1 以来的新颖性或新的多态函数？

简而言之，使用 webgl2，是一种更有效的复制纹理的方法吗？

（在我对 webgl2 的缓慢、非常缓慢的理解中，我还没有解决反馈的有趣新颖性）

Has anyone used xtk with webgl2 to do the pick() call? specifically renderer3d's.

Error: WebGL: drawArrays: Feedback loop detected...renderer3D.js:1977:7

Error: WebGL: readPixels: Out-of-bounds reads with readPixels are deprecated, and may be slow. renderer3D.js:1445:5

我创建了一个 1x1 纹理，参数为 gl.R8、gl.RED、gl.UNSIGNED_BYTE 到 gl.texImage2D。

我想这实际上只会创建一个 1 字节的缓冲区。

现在我想使用 texelFetch 在我的片段着色器中访问这个 1 字节缓冲区，但是我没有得到我上传的 1 字节。

我创建了一个简单的示例来说明我的问题：https ://jsfiddle.net/w5hp18e0/7/

本质上，当我 texelFetch 将值“1”上传到的纹理时，它会返回一些非 1 的非零数字。我可以推断出这个返回值的唯一属性是 val&0x01000000 返回 true。但是，甚至 val==0x01000000 都不会返回 true，这有点令人困惑。

我究竟做错了什么？