Трехцветный фрагментный шейдер - PullRequest
Новая
       33

Трехцветный фрагментный шейдер

1 голос
/ 02 октября 2019

Я занимаюсь разработкой анимации с использованием Three.js, которая просто включает в себя геометрию буфера икосаэдра и материал шейдера, объединенные в сетку. Цель состоит в том, чтобы получить объект, похожий на этот:

Видение для конечного продукта:

img

Я новичок в 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;
}

Любой ввод приветствуется. Спасибо!

...