WebGL颜色约定-我使用哪种以及为什么?

WebGL概述 颜色在0到1范围内。

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

这在某些方面与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倍的存储空间。

类似地,通常将顶点颜色数据存储为

至于混合,它不像样品那样简单 [1.0, 255, 1.0, 255]

[10, 20, 30, 40] 这并不意味着R=10,G=20,B=30,A=40。这实际上只是意味着你有4个值。传统上,将第一个值用作红色,但WebGL不会强制您将其用作红色。更重要的是,WebGL并不真正关心颜色。它只是一个光栅化引擎,这是一种奇特的方式,它将值绘制到2D数组中。这些阵列可以用于彩色和图像,但也可以用于计算物理或挖掘比特币。

听起来你对WebGL还是新手。我可以建议吗 some tutorials

WebGL API是 based on OpenGL

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

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

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