Материал шейдера плавный градиент между двумя цветами - PullRequest
Новая
       121

Материал шейдера плавный градиент между двумя цветами

0 голосов
/ 21 мая 2018

У меня есть следующие шейдеры, используемые в шейдере пользовательских материалов в ThreeJS и применяемые к метаболам.Позиции каждого метабола (в данном примере 2) передаются в массив allPos и сравниваются по расстоянию с нормалью вершины, чтобы найти ближайший.Его индекс используется для назначения цвета blobColor, который затем передается фрагментному шейдеру.

вершинный шейдер 

uniform vec3 colChoice[2];
varying vec3 vNormal;
varying vec3 blobColor;
varying vec3 otherColor;
uniform vec3 allPos[2];
varying float mixScale;

void main() {
   vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
   vNormal = normalize( normalMatrix * normal );
   float prevdist = 1000000000000000000000000000000.0;

   for(int i=0;i<2;i++){
      float distV = distance(allPos[i],normal.xyz);
      if(distV<prevdist){
         prevdist = distV;
         mixScale = distV;
         blobColor = colChoice[i];
         otherColor = colChoice[i-1];
      }
   }
   gl_Position = projectionMatrix * mvPosition;
}

фрагментный шейдер 

"varying vec3 blobColor;",
"varying vec3 otherColor;",
"varying vec3 vNormal;",
"varying float mixScale;",

void main() {
    finalColor = (0.45*vNormal) + mix(otherColor,blobColor,mixScale);
    gl_FragColor = vec4( finalColor, 1.0 );
}

, что дает мне что-то вроде этого: enter image description here

Пока это немного грубо, и я хотел бы применить точечный градиент междудва цвета.Любое предложение?

...