WebGL - Как нарисовать точки в фрагментном шейдере с цветовой интерполяцией, основанной на значении оценки для каждой точки? - PullRequest
Новая
       108

WebGL - Как нарисовать точки в фрагментном шейдере с цветовой интерполяцией, основанной на значении оценки для каждой точки?

0 голосов
/ 18 декабря 2018

У меня есть несколько точек в двухмерных координатах, и у каждой точки есть оценка.Я хочу нарисовать точки на шейдере, и цвет точек должен быть красным, но вес должен быть основан на счете.

Это должно выглядеть следующим образом, например, верхний левый счет равен 0,8, верхний правый и нижний левый счет равен 0,9, а нижний правый показатель равен 0,7.

(Прошу прощения за то, что не могу вставить сюда несколько изображений. Это мой первый вопрос, и у меня недостаточно репутации ....)

https://jsfiddle.net/p19uc825/

Формула, которую я сейчас имею, рассчитывает расстояние между центром и 2-й координатой для каждой точки.Ниже приведен метод, который я использую, чтобы получить цвет для каждой позиции.

Мои координаты: 

const coordinates = [
    0.2,0.8,
    0.2,0.2,
    0.8,0.8,
    0.8,0.2,
];

Оценки: 

const scores = [
    0.8,0.9,0.9,0.7
];

Часть источника фрагмента шейдера: 

vec3 get_pos_color(in vec2 st, in vec2 normalizedPosition, in float score)
{               
    float mult = 1.4;
    float pct = 0.0;
    pct = ( 
         distance(
             vec3(normalizedPosition.x, normalizedPosition.y, score), 
             vec3(st.x,st.y,score)
         ) * mult - score);

    vec3 color = vec3(pct, pct, pct) + vec3(1,1,1);
    return color;
}

Работает с 4 координатами, как показано выше в jsfiddle.

Однако, если я добавлю еще одну точку с координатой [0.8,0.5] и присвоу ей оценку 0.1, она будет выглядеть так -

https://jsfiddle.net/nqy3az1b/

кажется, что новая точка имеет больший вес, чем эти две 0,9 точки, в то время как у нее должен быть очень светлый цвет, так как у этой новой точки самый низкий балл.Я думаю, что для этого есть две причины - 1. Когда шейдер интерполирует эту новую точку, он учитывает 2 близкие к ней точки, верхнюю правую и нижнюю правую.2. Новая точка может быть добавлена ​​на больший вес, потому что она находится ближе всего к центру, потому что в коде фрагмента шейдера выше, я вычисляю расстояние между точкой и центром.

Чего я действительно хочу добиться, так это того, чтобы вес цвета для каждой точки определялся только оценкой, независимо от ее положения.

Я знаю, что расстояние () в источнике фрагмента - это не совсем правильная формула для интерполяции пикселей, поэтому любые предложения по поводу того, что я могу попробовать, будут с благодарностью.

...