Поменяйте точки с квадратов на прямоугольники

Question

У меня есть изображение, которое я разделяю на частицы.Эти частицы по умолчанию являются квадратами.Теперь я хочу, чтобы они выглядели как прямоугольники.Я знаю, что неравномерная шкала для очков невозможна, но у вас есть предложение, как все еще достичь этой цели?

В настоящее время это пользовательский фрагментный шейдер:

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );

Теперь якаждый квадрат должен выглядеть как прямоугольник с размерами: x: 0.7, y: 1. Могу ли я добиться этого, сделав квадрат частично прозрачным?Я не смог найти пример, где это уже было сделано.

Вот пример, который у меня есть: https://jsfiddle.net/7jtvkh0x/

Answer 1

Теперь мне нужно, чтобы каждый квадрат был похож на прямоугольник с размерами: x: 0.7, y: 1.

Чтобы сделать то, что вы хотите, вы должны масштабировать компонент xкоординаты текстуры на '1.0 / 0.7`.В результате текстура появляется на квадрате, как будто она сжимается в прямоугольник.Изменение координаты на 0,5 до и -0,5 после делает симметричное сжатие к центру четырехугольника.

pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;

Можно ли добиться этого, сделав квадрат частично прозрачным?

Использование ключевого слова discard в фрагментном шейдере приводит квыходные значения фрагмента отбрасываются.Это означает, что фрагменты не изменяют кадровый буфер и выглядят как полностью прозрачные.

Отбросьте фрагменты с компонентом ax измененной координаты текстуры выше 1.0 или ниже 0.0 , чтобы обрезать квад по прямоугольнику:

if ( pUv.x > 1.0 || pUv.x < 0.0 )
    discard; 

Конечный фрагментный шейдер может выглядеть так:

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;
if ( pUv.x > 1.0 || pUv.x < 0.0 )
      discard;

vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );