三色片段着色器

Question

我正在使用Three.js开发动画，该动画只涉及将二十面体缓冲区几何和着色器材质一起应用到网格中。目的是使对象类似于此：

Vision for final product

我是GLSL和C语言的新手，所以到这一点并非易事。我从this codepen.中使用的着色器中借用了一些代码。此着色器的问题在于，所渲染的颜色仅仅是Red，Green和Blue的不同输出，而我想要三种特定的颜色，每种颜色都具有各自唯一的十六进制值。

这是我尝试过的片段着色器代码的片段：

uniform int u_color1;
uniform int u_color2;
uniform int u_color3;

void main() {
  float r1 = float(u_color1 / 256 / 256);
  float g1 = float(u_color1 / 256 - int(r1 * 256.0));
  float b1 = float(u_color1 - int(r1 * 256.0 * 256.0) - int(g1 * 256.0));

  float r2 = float(u_color2 / 256 / 256);
  float g2 = float(u_color2 / 256 - int(r1 * 256.0));
  float b2 = float(u_color2 - int(r2 * 256.0 * 256.0) - int(g2 * 256.0));

  float r3 = float(u_color3 / 256 / 256);
  float g3 = float(u_color3 / 256 - int(r3 * 256.0));
  float b3 = float(u_color3 - int(r3 * 256.0 * 256.0) - int(g3 * 256.0));

  vec3 color1 = vec3((r1/255.0) , (g1/255.0) , (b1/255.0) );
  vec3 color2 = vec3((r2/255.0) , (g2/255.0) , (b2/255.0) );
  vec3 color3 = vec3((r3/255.0) , (g3/255.0) , (b3/255.0) );

  vec4 outColor = vec4(r1 /256.0, g1/256.0, b1/256.0, 1.0);
  gl_FragColor = outColor;
}

感谢任何输入。谢谢！

Answer 1

跳过整数颜色不正确的形式

uniform int u_color1;uniform int u_color2;uniform int u_color3;

对颜色使用数据类型vec3：

uniform vec3 u_color1;
uniform vec3 u_color2;
uniform vec3 u_color3;

void main()
{
    gl_FragColor = vec4(u_color1.rgb, 1.0);
}

vec3类型的制服可以由THREE.Color对象直接设置。参见THREE.Color。 e.g：

Uniform