【发布时间】：2020-06-09 15:15:41
【问题描述】：
我们的项目使用位深高于 8 位（通常为 10 位）的图像。这些以 16 位 PNG 格式存储，具有 P3 颜色空间（因此每个通道有 1024 种颜色）。
我正在尝试在使用 WebGL2 的浏览器中显示这些图像。到目前为止没有运气。我知道 Chrome 可以做到这一点，因为我有一些测试图像在我的 Macbook 的视网膜屏幕上显示了扩展的颜色范围（但不是在 8 位外接显示器上）。
这是测试图片：https://webkit.org/blog-files/color-gamut/Webkit-logo-P3.png（来源：https://webkit.org/blog/6682/improving-color-on-the-web/）
如果您使用的是 8 位屏幕和硬件，测试图像将看起来完全是红色的。如果您有一个高位深度监视器，您会看到一个微弱的 webkit 徽标。尽管我的高位深度监视器在 Chrome 中显示了徽标细节，但应用此纹理的 WebGL 四边形看起来是纯红色的。
我的研究表明，WebGL/OpenGL 确实提供了对浮点纹理和高位深度的支持，至少在绘制到渲染目标时是如此。
我想要实现的很简单，在 WebGL 中使用高位深度纹理，应用于屏幕四边形。这是我加载纹理的方式：
var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0 + 0);
gl.bindTexture(gl.TEXTURE_2D, texture);
// Store as a 16 bit float
var texInternalFormat = gl.RGBA16F;
var texFormat = gl.RGBA16F;
var texType = gl.FLOAT;
var image = new Image();
image.src = "10bitTest.png";
image.addEventListener('load', function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(
gl.TEXTURE_2D,
0,
texInternalFormat,
texFormat,
texType,
image
);
gl.generateMipmap(gl.TEXTURE_2D);
});
这失败了
WebGL: INVALID_ENUM: texImage2D: invalid format
如果我将 texFormat 更改为 gl.RBGA，它会渲染四边形，但是是纯红色，没有扩展颜色。
我想知道它是否可能，虽然 Chrome 可以做到，所以我仍然抱有希望。
【问题讨论】：
-
RGBA16F不是有效格式。RGBA16F的内部格式的正确格式是RGBA（正如您已经注意到的）。格式仅指定传入数据（image），与纹理的存储或渲染方式无关。 -
@Ivella 不是用于渲染纹理的 RENDERBUFFER_INTERNAL_FORMAT 吗？我只是想渲染到屏幕上
-
注意：“扩展颜色”（如您所写）与更高位无关（更高位我们倾向于扩展颜色，但我们使用了多年 DCI-P3 或 AdobeRGB“8位数据”屏幕（硬件校准，因此面板可以做更多，就像现代好的 10 位屏幕具有 14 或 16 位功能）；所以这些是正交的东西）。所以我不确定你是否正在寻找问题的正确部分。
-
@sipi 您找到解决方法了吗？顺便说一下，这里是纹理内部格式、格式和类型的可能组合的官方列表：khronos.org/registry/webgl/specs/latest/2.0/…
标签： colors webgl color-space webgl2