WebGL интерполировать с эталонным цветом внутри треугольника - PullRequest
Новая
       38

WebGL интерполировать с эталонным цветом внутри треугольника

1 голос
/ 05 марта 2019

Использование REGL, я пытаюсь нарисовать треугольник с WebGL, где я могу определить цвет в какой-то точке отсчета внутри треугольника, и иметь цвет других пикселов функция от их расстояния до этой точки.

Пока что это работает только тогда, когда эта контрольная точка находится в одном из углов:

градиент от угла

Это было сделано с использованием следующих шейдеров Vert и Frag: 

  vert: `
  precision mediump float;
  uniform float scale;
  attribute vec2 position;
  attribute vec3 color;
  varying vec3 fcolor;
  void main () {
    fcolor = color;
    gl_Position = vec4(scale * position, 0, 1);
  }
  `,

  frag: `
  precision mediump float;
  varying vec3 fcolor;
  void main () {
    gl_FragColor = vec4(sqrt(fcolor), 1);
  }
  `,

  attributes: {
    position: [
      [1, 0],
      [0, 1],
      [-1, -1]
    ],

    color: [
      [1, 0, 0],
      [0, 1, 0],
      [0, 0, 1]
    ]
  },

  uniforms: {
    scale: regl.prop('scale')
  }

Опорными точками здесь являются [1,0], [0,1] и [-1, -1]. С тем же треугольником, как я могу поставить другую контрольную точку в [0,0] с белым цветом, например? (это дало бы «остров» белого внутри треугольника)

1 Ответ

0 голосов
/ 05 марта 2019

Вы должны определить 2 одинаковые переменные Одна для координат контрольной точки и одна для цвета контрольной точки: 

uniforms: {
    scale: regl.prop('scale'),
    refPoint: [0, 0],
    refColor: [1, 1, 1]
}

Передайте координату вершины от вершинного шейдера фрагментному шейдеру с помощью переменной varying: 

precision mediump float;

uniform float scale;

attribute vec2 position;
attribute vec3 color;

varying vec2 fpos;
varying vec3 fcolor;

void main()
{
    fpos        = position;
    fcolor      = color;
    gl_Position = vec4(scale * position, 0, 1);
}

Вычислить расстояние от опорной точки до интерполированного позиции в пиксельный шейдер, от * 1 010 *distance: 

float dist = distance(refPoint, fpos);

Интерполировать цвета, зависящие от расстояния, на mix: 

vec3 micColor = mix(refColor, fcolor, dist);

Фрагмент шейдера: 

precision mediump float;

uniform vec2 refPoint;
uniform vec3 refColor;

varying vec2 fpos;
varying vec3 fcolor;

void main()
{
    float dist    = distance(refPoint, fpos);
    vec3 micColor = mix(refColor, fcolor, dist);
    gl_FragColor  = vec4(sqrt(micColor), 1);
}

...