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

Question

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

我担心的是我看到了 2 种写入 RGBA 颜色数据的格式或约定（或者向量，如果那是所谓的？-关于着色器）

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

Here is an example

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

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

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

Answer 1

WebGL API 是 based on OpenGL，它使用规范化的浮点颜色值。它与 JavaScript 或 2D canvas API 本身没有太大关系。

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

Answer 2

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 倍的商店 space。

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

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

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

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

Answer 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);

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

WebGL color conventions - which do I use and why?

javascript

canvas

colors

webgl