问题标签 [webgl-extensions]

我编写了一个使用 JavaScript 和 WebGL 绘制交互式场景的 Web 应用程序，包括阴影映射。我想确保该网站可以在尽可能多的 Android 设备上运行。阴影映射在台式计算机上工作得很好——通过使用深度纹理和滥用颜色纹理来存储深度。但是我还没有设法让该站点在没有重大伪影的情况下在 Android 设备上使用阴影映射渲染场景。

问题是

1. 根据 webglstats.com 的说法，大多数 Android 设备不支持该WEBGL_depth_texture扩展，因此直接使用光源深度缓冲区作为阴影贴图是行不通的。
2. 解决方法是将每个片段的深度编码为 RGBA 值。虽然这在台式计算机上运行良好，但相同的代码会在 Android 上导致主要工件。我的猜测是这是一个精度问题：WebGL 计算的深度值的精度太低，和/或floatsWebGL 片段着色器具有mediump精度（根据我的 Nexus 7 2012 Chrome 上的着色器编译器错误消息，highp是不支持片段着色器）实际上只有半个浮点数，因此将深度值拆分为 RGBA 值的精度太低。

是否有在大多数 Android 设备上运行良好的 WebGL 阴影映射的工作示例？或者这是不可能的？（通过浮点扩展之类的东西来模拟更高的浮点精度在片段着色器中似乎过于昂贵）。

我无法WEBGL_draw_buffers在 chrome 上获取 webgl 扩展。我的 GPU 肯定应该支持多个绘制缓冲区，Firefox 支持扩展，但 Chrome 没有列出它。缺少支持有什么原因吗？

基本信息

• 浏览器：Chrome 37.0.2062.102 m（与版本 36 和 38 的结果相同）
• 浏览器命令行：Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --js-flags=--harmony --enable-webgl-draft-extensions --flag-switches-end
• 操作系统：Windows 8.1 Pro
• GPU：NVS 3100M（驱动版本 327.02）
• 笔记本：ThinkPad T410
• 其他人似乎WEBGL_draw_buffers在 Chrome 上获得了支持
• 我没有找到有关禁用多个绘图缓冲区的 Chrome 错误的任何信息。

可用的 webgl 扩展

chrome://gpu 问题报告

我正在尝试将纹理帧缓冲区复制到 WebGL 中的另一个帧缓冲区，到目前为止它只是给出了一个黑屏。我能够毫无问题地在纹理帧缓冲区中渲染。

这是我认为可以工作的代码（它目前在 iOS 上工作）：

WebGL 不支持 glReadBuffer 所以我不能指定它，但是使用 WEBGL_draw_buffers 扩展它支持多个渲染目标，所以我们可以设置附件没有问题（因此渲染到纹理帧缓冲区的工作完美无缺）。

我意识到，由于我无法指定读取缓冲区，也许这种技术行不通？有什么想法或解决方法吗？

我正在尝试在 WebGL 中加载图像，然后将它们上传到 GPU。我想使用压缩纹理格式，即使原始图像是未压缩/无损的。

要上传，这就是我正在做的事情：

在上面的代码中，textureSource是一个加载的（比如“texture.png”）。

这一切都很好，但我想加载WEBGL_compressed_texture_s3tc格式（COMPRESSED_RGB_S3TC_DXT1_EXT）以压缩方式存储图像。

我确保扩展程序可用并已启用...

但是我不能将它用作一种格式。使用texImage2D()不起作用：

预期的方法是compressedTexImage2D()，但这也不是很有帮助：

这显然是因为compressedTexImage2D()期望Uint8Array使用实际的 DDS/DXT 数据，而不是像我传递的那样的 JavaScript 图像。

显而易见的解决方案是以原始 DDS 格式上传文件 - 已在其他地方压缩的文件。但这就是我要避免的：在我当前的工作流程中，将图像保留为原始格式而不是预压缩它们（或重复）是有意义的。

我的问题是这样的：我是否仍然可以使用原始 PNG 图像，加载它们，并让它们以压缩格式上传到 GPU？换句话说，我可以即时将纹理压缩为它们的 DXT1/5 格式吗？

我正在做的事情有点受视频内存的限制，所以任何节省都会很棒。我设法通过使用UNSIGNED_SHORT_4_4_4_4和其他数据类型来最小化纹理使用的空间，这是一个好的开始，但我也想尝试使用本机压缩。

我没有找到关于该主题的太多文档，也没有在其他流行的库（Three.js、Pixi 等）上找到相关代码，这让我相信我的请求非常愚蠢，但我想了解原因。这个页面暗示了许可问题，这可能是 WebGL 没有正确压缩文件的方法，也不允许浏览器支持图像对象的原因。

我正在将后期处理效果集成到我的 3D 引擎中。我在使用带有WebGL的FrameBuffer对象捕获深度数据时遇到了障碍。将颜色数据捕获到 FrameBuffer 中没有问题。但是，即使为 Chrome/Firefox 启用了深度扩展，我也无法获得任何深度数据。

我尝试了许多不同的设置来查看是否是配置问题，但无论我尝试什么，我都只看到白色纹理。帖子末尾的屏幕截图显示了渲染为纹理的颜色附件和渲染为纹理的深度附件。我的 FrameBuffer 初始化是否有问题，或者我应该寻找其他地方来解决这个问题？

下面是我初始化 FrameBuffer 对象的代码：

这是我将当前场景渲染到 FrameBuffer 的代码。

下面的模型在几款低端机器上都有不错的表现：

http://examples.x3dom.org/example/x3dom_sofaGirl.html

然而，在配备 Nvidia GT 650m 的 MacBook Pro 上，帧速率非常低。我以为是因为 MacBook 没有OES_element_index_uint扩展，但如果我这样做了，就会显示扩展：

重构低于 65K 的网格解决了这个问题。有没有什么办法不用重组就能有好的表现？

我安装了一个应用程序 (gfxCardStatus)，它禁用了 GT 650m 并强制只使用集成显卡。现在，一切正常。这是驱动程序错误吗？

我发现另一个 3d 场景在专用 GPU 上比在集成 GPU 上运行得更快：

http://examples.x3dom.org/binaryGeo/oilrig_demo/index.html

我认为这是因为它由许多小网格组成。此外，当我运行这个场景时，我可以听到 GPU 风扇转动的声音。它没有与 sofaGirl 场景。

我正在尝试使用 WebGL 中的 ANGLE_instanced_arrays 扩展来渲染具有不同 mat3 转换矩阵的对象的多个实例。这是与我的矩阵的缓冲区相关的代码：

在我的顶点着色器中，我只有'attribute mat3 transform;' 而不是“统一 mat3 变换”。

当我执行上面的代码时，我在 vertexAttribPointer 上收到一个错误：“vertexAttribPointer: bad size or stride”。

如果我将步幅设置为 36（9 * 4 字节浮点数）或 0（自动？），此错误仍然存​​在。

（顺便说一句，为什么要指定计数、类型和步幅？在什么情况下步幅不只是计数和类型大小的乘积？）

朋友们，我需要你们的帮助，三个.js中的以下代码，在这一行都返回null：

_上下文 || _canvas.getContext('webgl', 属性) || _canvas.getContext('experimental-webgl', 属性);

属性值：

这是画布：

非常感谢！

〜罗松

使用threejs创建一个有纹理的球体。在三星 Tab 4 (Android 4.4.2) 上的 Chrome (41.0.) 中，我得到以下控制台：

THREE.WebGLRenderer: OES_texture_float_linear extension not supported.

导致我的控件停止工作。球体和纹理已加载。

有任何想法吗？

- - - 更新

Threejs 的 DeviceControls 示例无法在三星 Tab4 上运行。看起来更像是特定于设备的问题。

我最近遇到了一个图形密集型页面，并想使用我的 Nvidia 卡（而不是内置的 Intel）来渲染它。在寻找如何做到这一点时，我需要做的一件事是将“webgl.enable-privileged-extensions”的值更改为“true”

有人可以告诉我为什么它在 Firefox 中默认设置为“false”，以及特权扩展到底是什么？