Three.js 三色片段着色器

Three.js 三色片段着色器,three.js,3d,glsl,fragment-shader,Three.js,3d,Glsl,Fragment Shader,我正在使用Three.js开发一个动画,它只涉及一个二十面体缓冲区几何体和一个应用到网格中的着色器材质。目标是使对象与此相似: 最终产品愿景: 我是GLSL的新手,所以要达到这一点并不容易。我从这个着色器的问题中使用的着色器中借用了一些代码,渲染的颜色只是红色、绿色和蓝色的不同输出,而我想要三种特定的颜色,每种颜色都有自己独特的十六进制值 以下是我尝试过的片段着色器代码片段: uniform int u_color1; uniform int u_color2; uniform int u_c

我正在使用Three.js开发一个动画,它只涉及一个二十面体缓冲区几何体和一个应用到网格中的着色器材质。目标是使对象与此相似:

最终产品愿景:

我是GLSL的新手,所以要达到这一点并不容易。我从这个着色器的问题中使用的着色器中借用了一些代码,渲染的颜色只是红色、绿色和蓝色的不同输出,而我想要三种特定的颜色,每种颜色都有自己独特的十六进制值

以下是我尝试过的片段着色器代码片段:

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

欢迎您的任何意见。谢谢

谢谢你的澄清!谢谢你的澄清!