三色片段着色器

时间:2019-10-02 19:14:52

标签: three.js 3d glsl fragment-shader

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

最终产品的愿景:

img

我是GLSL的新手,因此到达这一点并不容易。我从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;
}

任何输入表示赞赏。谢谢!

0 个答案:

没有答案
相关问题