Экспериментируя с примитивом фильтра feTurbulence
, я получаю тонкие темные линии везде, где я их не ожидал. Они наиболее заметны, когда numOctaves="1"
. Почему они там?
Допустим, я начну со ссылочного кода из https://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement (исправлю его, чтобы он компилировался). Я называю это как
turbulence(
0, /* color channel */,
point, /* {x,y} */
1.0, 1.0, /* fBaseFreqX and Y */
1, /* numOctaves */
0, /* bFractalSum */
0, /* bDoStitching */
0.0, 0.0, /* fTileX and Y */
0.0, 0.0, /* fTileWidth and Height */
)
(Мой полный исходный код доступен по адресу https://gitlab.com/AlanDeSmet/svg-1.1-feturbulence)
Итерация x и y от 0,0 до 10,0, взятие 300 выборок и умножение каждой выборки на 256 создает изображение в оттенках серого 300x300:
Это то, что я ожидаю увидеть. Это похоже на турбулентность Перлина, создаваемую такими программами, как
.Adobe Flash (источник):
3ds Max (источник):
Но если я создаю SVG с помощью feTurbulence и просматриваю его в Firefox, Chromium или Inkscape (которые, как мне кажется, являются тремя независимыми реализациями), я получаю следующее:
Источник:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="10" width="10" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<filter color-interpolation-filters="sRGB"
id="test-turbulence" x="0" y="0" width="1" height="1">
<feTurbulence type="turbulence" numOctaves="1" baseFrequency="1" />
<feColorMatrix
values="1 0 0 0 0
1 0 0 0 0
1 0 0 0 0
0 0 0 0 1 " />
</filter>
<rect width="10" height="10" style="filter:url(#test-turbulence)" x="0" y="0" />
</svg>
(Я использую color-interpolation-filters="sRGB"
, чтобы более точно соответствовать выходным данным моей простой программы. Это не меняет структуру, а просто "затемняет" изображение.
На изображении есть тонкие темные линии по всему изображению, чего я не ожидал. Вот параллельное сравнение; мое использование стандартной эталонной реализации слева (или выше) и вывод Chromium (который выглядит идентично Firefox и Inkscape) справа (или ниже).
Похоже, что это соответствует стандарту, так как три разных средства визуализации согласуются друг с другом, но я считаю, что это не то, что делает стандартная эталонная реализация, и не то, что делают некоторые другие программы.
Почему существует разница между моей попыткой использовать эталонную реализацию стандарта и тем, что делают Firefox, Chrome и Inkscape? Предполагается ли, что стандарт отличается от других программ, реализованных для турбулентности Перлина? Если да, то какая разница?
gitlab.com/AlanDeSmet/svg-1.1-feturbulence/-/blob/master/… должен выполнять цикл до тех пор, пока один из градиентов не станет ненулевым. В противном случае s будет 0, и вы будете делить на 0
Этот проект gitlab существует исключительно для экспериментов со спецификацией SVG feTurbulence, поэтому я использую эталонную реализацию стандарта с минимальными изменениями. Это включает в себя опасность всех нулевых градиентов. Я должен добавить несколько заметок, чтобы любой, кто наткнулся на него, знал, что он не подходит для использования в производстве.
В стандарте где-то есть опечатки, которые указывают на это.
lists.w3.org/Archives/Public/www-svg/2015Jan/0014.html