WebGL 颜色约定 - 我使用哪个以及为什么？答案

【问题标题】：WebGL color conventions - which do I use and why?WebGL 颜色约定 - 我使用哪个以及为什么？
【发布时间】：2023-03-16 09:14:01
【问题描述】：

所以我是第一次学习 WebGL，但我很难理解 WebGL 颜色。

我担心的是我已经看到了 2 种格式或约定来编写 RGBA 颜色数据（或向量，如果它们被称为？-关于着色器）

Mozilla 使用 0 到 255 范围内的颜色：

Here is an example

但是，我也看到过其他情况，开发人员（例如 YouTuber）在 0 到 1.0 的范围内使用颜色，

这是一种偏好吗？您在每种情况下使用什么约定是强制性的吗？如果是偏好而不是强制，我可以将两者混合搭配吗？浏览器有偏好吗？

例如关于混合，[1.0, 255, 1.0, 255] 是完全不透明的白色吗？

【问题讨论】：

您的第一个示例显示了一个 ImageData 对象，该对象的数据是 Uint8array，因此值是从 0 到 255（顺便说一句，它似乎是 context2d API 文档）。在视频中，他使用了webglContext.clearColor，它接受GLclampf 值（32 位浮点数介于 0 和 1 之间）。您使用 API 接受的内容。
@Kaiido JavaScript 有多奇怪？我想他们会建立一种标准的方式来解决他们所有 API 中的颜色等简单问题
@DaMaxContent “像颜色一样简单”。你刚刚让一大群图形程序员转入坟墓。
@Paul-Jan 我想这就是标准合规性和图形编程冲突的地方。作为一个javascripter，这对我来说是新的，坦率地说，它不适合这种语言。毕竟，“Vanilla”JavaScript 的实际名称 是 ECMAscript。 *讽刺*我反驳说“'你使用 API 接受的东西'刚刚让 ECMA 的前辈在他们的坟墓中转身”

标签： javascript canvas colors webgl

【解决方案1】：

WebGL 通常处理 0 到 1 范围内的颜色。

如何存储它们取决于您和给定的情况

这在某些方面与 CSS 没有什么不同。 CSS 你可以指定颜色像这样#123456 像这样red 像这样rgb(18,52,86) 和像这样hsl(30,100%,50%)

通常 WebGL 使用 0 到 1 表示颜色。复杂之处在于创建缓冲区和纹理时。您决定缓冲区或纹理的二进制格式，然后必须将数据放入该缓冲区并告诉 WebGL 如何将其转换回供 WebGL 使用的值。

例如，使用gl.UNSIGNED_BYTE 作为存储格式来制作纹理是最常见的。在这种情况下，纹理中的值从 0 变为 255，当在 WebGL 中使用时，它们会转换回 0 到 1。

还有其他格式，例如 gl.FLOAT，使用正常的 0 到 1 数字，但它们需要 4 倍的存储空间。

同样，将顶点颜色数据存储为 gl.UNSIGNED_BYTE 并告诉 WebGL 在读取数据时将其转换回 0 到 1 值也是很常见的。

至于混合，它不像 [1.0, 255, 1.0, 255] 完全不透明那样样本。

在 WebGL 中，由您决定绘制每个像素，决定如何使用这些值，决定如何混合它们。您可以制作每像素 1 个值的纹理（而不是 4 个 rgba，就像画布一样）。你会用那个值作为红色吗？为绿色？蓝色？对于他们中的 2 个，所有 3 个？他们都没有？这 100% 取决于你。您将如何将颜色与画布中已有的颜色混合？这也取决于你。如果您指定[10, 20, 30, 40]，这并不意味着 R = 10、G = 20、B = 30、A = 40。它实际上只是意味着您有 4 个值。传统上将第一个值用作红色，但 WebGL 不会强制您将其用作红色。更重要的是，WebGL 并不真正关心颜色。它只是一个光栅化引擎，它是一种将值绘制到二维数组中的奇特方式。这些数组可以用于颜色和图像，但它们也可以用于计算物理或挖掘比特币。

听起来您是 WebGL 的新手。我可以建议some tutorials

【讨论】：

【解决方案2】：

WebGL API 是 based on OpenGL，它使用标准化的浮点颜色值。它与 JavaScript 或 2D 画布 API 本身并没有太大关系。

在 WebGL 中，实际生成的颜色将是许多因素的结果，例如光线、阴影、距离、角度、材质（漫反射、反射、镜面反射、透明度等），并且需要比 2D 更细微的方法画布由于发生的计算量，因此归一化的浮点值。

【讨论】：

【解决方案3】：

您可以将 rgba 值转换为除以 255 的 GLclampf 值。

https://community.khronos.org/t/how-to-convert-from-rgb-255-to-opengl-float-color/29288

示例假设你要使用 rgba(162,41,86,1)

你可以这样做：

const toGlclampf = (r, g, b, a) => [r/255, g/255, b/255, a];
let rgba = toGlclampf(162, 41, 86, 1.0);
gl.clearColor(rgba[0], rgba[1], rgba[2], rgba[3]);

或者简单地说：

gl.clearColor(162/255, 41/255, 86/255, 1.0);

【讨论】：