Альфа-фильтр SVG, изменяющий цвет пикселя

Я использую JS и <canvas> для рендеринга изометрической сцены. Я использую этот фильтр SVG, чтобы у плиток были четкие края пикселей:

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="linear" slope="255"></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

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

введите здесь описание изображения


svg-filters
person jadle    schedule 10.08.2019    source источник
comment
Это очень интересно. Что натолкнуло вас на идею использовать SVG для трехмерной среды? Это для игры? Пока это выглядит очень красиво.   -  person JSON Brody    schedule 11.08.2019
comment
Спасибо! на самом деле это не трехмерная среда, просто имеет такой эффект из-за порядка отрисовки плитки. Я использую фильтр SVG, чтобы края плитки не сглаживались при рендеринге на холсте, мне нужно четкое, пиксельное ощущение.   -  person jadle    schedule 11.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

В чистом SVG вы должны использовать shape-rendering=crispEdges, чтобы исключить сглаживание. Но у Canvas нет такой возможности.

Одно решение здесь — вместо того, чтобы повышать непрозрачность пикселей сглаживания, вы можете попробовать их устранить — так что останутся только (почти) полностью непрозрачные пиксели. Вы можете сделать это, используя другой файл feComponentTransfer. Этот фильтр ниже устанавливает каждую непрозрачность ниже примерно 0,96 на 0, а каждую непрозрачность выше на 1.

<svg width="0" height="0" style="position:absolute;z-index:-1;">
  <defs>
    <filter id="crush-alpha" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1></feFuncA>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

person Michael Mullany    schedule 13.08.2019