Моделирование воды для веб-браузеров: различия между версиями
(не показано 112 промежуточных версий этого же участника) | |||
Строка 2: | Строка 2: | ||
[[Категория:Перетекание воды]] | [[Категория:Перетекание воды]] | ||
− | + | [[aw:Shader]] на GPU | |
+ | = сколько проходов = | ||
+ | Думал, что будет два прохода с передачей {{sym|letter=h_{to}|строка=скобки}}, но это число невозможно вместить в байт для [[Метрика перетекания#Middle]]; переделал в один проход (побочный эффект - двойной расчет {{sym|letter=h_{to}|строка=нет}}). | ||
− | # расчет | + | Однопроходный шейдер выдает {{sym|тазик#высота|строка=нет}} для 4 соседей, поэтому только один байт для соседа; а также не посчитан общий {{sym|тазик#высота|строка=нет}}. |
− | + | ||
− | + | Поэтому возвращаюсь к двух проходам: | |
− | # | + | # для [[Метрика перетекания#RadiusIntersection]] {{sym|letter=h_{to}|строка=нет}} есть расстоянием от Q соседа до точки пересечения и вмещается в байт: 127 градаций перетекания, соответствие одной градации метрам плавающее |
− | #* на | + | # считается {{sym|тазик#высота|строка=нет}} для текущего тазика ([[#данные|2 или 3 байта можно брать]]); следим, чтобы изменения {{sym|тазик#высота|строка=нет}} у соседей точно совпали |
− | #* на выходе: {{sym|letter=h_{to}|строка= | + | #: надо смотреть Depth соседей, будет двойной расчет {{sym|letter=h_{to}|строка=нет}}. |
− | + | ||
− | + | Но при [[#перелить воду между всеми соседями|упрощении значения heigth]] = {{sym|letter=h_{to}|строка=нет}} - {{sym|letter=h_{to}|строка=нет}}<sub>соседа</sub> снова вернулся к одному проходу, который генерирует {{sym|тазик#высота_воды|fine=,|строка=скобки}} для текущего тазика. Двойной расчет {{sym|letter=h_{to}|строка=нет}} меньшее зло для быстродействия, чем два прохода. | |
− | + | ||
− | #* | + | = алгоритм = |
+ | == [[Gradient and height crosses]] == | ||
+ | * на входе: начальная {{sym|тазик#плоскость|строка=нет}} (достаточно D<sub>initial</sub> и cos α) и {{sym|тазик#высота|fine=,|строка=скобки}} (0 вначале) | ||
+ | *: расчет актуальной {{sym|тазик#плоскость|fine=,|строка=скобки}}: | ||
+ | *:* ΔD = -{{sym|тазик#высота|строка=нет}} * cos α, где α - угол между OQ и {{sym|градиент|строка=скобки}} | ||
+ | *:* расстояние OQ равно -D / cos α <html> | ||
+ | <svg width="260" height="220.00000000000003" xmlns="http://www.w3.org/2000/svg"> | ||
+ | <g> | ||
+ | <title>background</title> | ||
+ | <rect x="-1" y="-1" width="262" height="222" id="canvas_background" fill="#fff"/> | ||
+ | <g id="canvasGrid" display="none"> | ||
+ | <rect id="svg_3" width="100%" height="100%" x="0" y="0" stroke-width="0" fill="url(#gridpattern)"/> | ||
+ | </g> | ||
+ | </g> | ||
+ | <g> | ||
+ | <title>Layer 1</title> | ||
+ | <ellipse fill="#fff" stroke-width="1.5" cx="18.80136" cy="200.698109" id="svg_1" rx="200" ry="150" stroke="#000"/> | ||
+ | <line fill="none" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" x1="-182.055914" y1="201.874579" x2="259.232128" y2="201.874579" id="svg_2" stroke-linejoin="null" stroke-linecap="null" stroke="#000"/> | ||
+ | <ellipse fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" cx="17.944087" cy="201.874579" id="svg_5" rx="2" ry="2"/> | ||
+ | <ellipse fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" cx="306.444087" cy="203.374579" id="svg_6"/> | ||
+ | <ellipse fill="#fff" stroke="#000" stroke-width="1.5" stroke-opacity="null" fill-opacity="null" cx="380.080436" cy="230.374579" id="svg_7"/> | ||
+ | <line fill="none" stroke-width="1.5" x1="17.944087" y1="201.874579" x2="208.125875" y2="95.08672" id="svg_9" stroke-linejoin="null" stroke-linecap="null" stroke="#0000ff"/> | ||
+ | <line stroke="#56aaff" transform="rotate(-0.40490052103996277 110.62321472168206,115.33796691894631) " fill="none" stroke-width="1.5" x1="201.674612" y1="31.097692" x2="19.568471" y2="199.577307" id="svg_10" stroke-linejoin="null" stroke-linecap="null"/> | ||
+ | <line stroke-linecap="null" stroke-linejoin="null" id="svg_13" y2="351.874579" x2="18.328738" y1="1.874579" x1="17.944087" fill-opacity="null" stroke-width="1.5" stroke="#000000" fill="none"/> | ||
+ | <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_16" y="213.606794" x="-36.125607" stroke-width="0" fill="#000000" transform="matrix(0.573626160621643,0,0,0.5997716784477233,24.256674205884337,87.09873345587403) " stroke="#56aaff">O</text> | ||
+ | <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_18" y="125.468361" x="142.624731" stroke-opacity="null" stroke-width="0" fill="#007fff" transform="matrix(0.7157507538795471,0,0,0.7570042610168457,66.41217151936144,35.409035339951515) " stroke="#ff56ff">Q</text> | ||
+ | <line stroke-linecap="null" stroke-linejoin="null" id="svg_20" y2="38.780985" x2="106.93748" y1="142.827124" x1="205.880187" stroke-width="1.5" fill="none" transform="rotate(-3.021343946456909 156.41047668456957,90.80450439453153) " stroke="#ffaa56"/> | ||
+ | <ellipse ry="2.307692" rx="1.923076" id="svg_23" cy="112.116062" cx="177.997788" stroke-width="1.5" stroke="#ffaa56" fill="#007fff"/> | ||
+ | <path transform="rotate(43.97276306152344 146.24943542480463,89.18740844726565) " stroke="#ffaa56" id="svg_27" d="m141.31671,91.18737l2.46554,-2.00041l0,1.0002l3.6983,0l0,-3.0006l-1.23277,0l2.46554,-2.0004l2.46553,2.0004l-1.23276,0l0,5.00101l-6.16383,0l0,1.0002l-2.46554,-2.0004l0,0l-0.00001,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="none"/> | ||
+ | <text stroke="#56aaff" transform="matrix(1.113876461982727,0,0,0.8454328876433692,-32.520087833418074,32.16742012011869) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_28" y="76.564373" x="135.775449" stroke-opacity="null" stroke-width="0" fill="#ffaa56"/> | ||
+ | <line stroke-linecap="null" stroke-linejoin="null" id="svg_4" y2="25.144635" x2="121.710193" y1="129.190774" x1="220.6529" stroke-width="1.5" fill="none" transform="rotate(-3.021343946456909 171.18199157714835,77.16787719726554) " stroke="#ff56ff"/> | ||
+ | <g id="svg_14" stroke="null"> | ||
+ | <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_11" y="54.172485" x="104.802094" stroke-opacity="null" stroke-width="0" fill="#007fff" transform="matrix(0.4584089289658623,0,0,0.3906770264678258,126.01823911900813,77.86323045597706) " stroke="#ff56ff">h</text> | ||
+ | <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_12" y="32.326445" x="-3.30108" stroke-opacity="null" stroke-width="0" fill="#007fff" transform="matrix(0.19837286430384515,0,0,0.1942846486503837,180.93562972359098,93.98978068959855) " stroke="#ff56ff">OQ</text> | ||
+ | </g> | ||
+ | <path fill="#ff0000" stroke-width="0" stroke-opacity="null" fill-opacity="null" d="m185.81399,103.13469l-3.06508,-9.65246l5.51111,9.65246l-5.51111,9.65245l3.06508,-9.65245z" id="svg_15" transform="rotate(-116.7201156616211 185.50491333007812,103.13486480712893) " stroke="#56aaff"/> | ||
+ | <ellipse ry="2.307692" rx="1.923076" id="svg_25" cy="101.631705" cx="197.069157" stroke-width="1.5" stroke="#56aaff" fill="#ff00ff"/> | ||
+ | <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_17" y="-67.542986" x="99.447475" stroke-opacity="null" stroke-width="0" fill="#007fff" transform="matrix(0.4734834356545827,0,0,0.28645217269963263,91.41474773633698,86.91295359872588) " stroke="#ff56ff">ΔD</text> | ||
+ | <path fill="#ff0000" stroke-width="0" stroke-opacity="null" fill-opacity="null" d="m151.64875,72.61236l-2.50658,-9.65245l4.50691,9.65245l-4.50691,9.65245l2.50658,-9.65245z" id="svg_22" transform="rotate(-129.5471954345703 151.3956298828125,72.61236572265624) " stroke="#56aaff"/> | ||
+ | <path stroke="#ff0000" transform="rotate(-33.077789306640625 68.86128997802724,165.5277557373047) " id="svg_8" d="m71.14087,166.456612c0,-2.376317 -2.041205,-4.302705 -4.559158,-4.302705l0,-3.442164l0,0c2.517953,0 4.559158,1.926386 4.559158,4.302705l0,3.442164c0,1.962026 -1.406416,3.67557 -3.419368,4.166076l0,1.721082l-1.139789,-3.305535l1.139789,-3.578792l0,1.721082l0,0c1.357349,-0.330752 2.478002,-1.232438 3.038748,-2.444994" stroke-width="1.5" fill="#fff"/> | ||
+ | <text stroke="#000" transform="rotate(-1.1154186725616455 76.52529144287156,156.71487426757824) matrix(0.7942582964897155,0,0,0.796081006526947,14.815147342887384,32.966803061575945) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_19" y="163.835193" x="70.77724" stroke-opacity="null" stroke-width="0" fill="#ff0000">α</text> | ||
+ | </g> | ||
+ | </svg> | ||
+ | </html> (gives only 0.1 meter difference and 0.01 meter fluctuation on k11) | ||
+ | * на выходе: актуальный D = D<sub>initial</sub> + ΔD = D<sub>initial</sub> - {{sym|тазик#высота|строка=нет}} * cos α | ||
+ | * на входе: {{sym|градиент|строка=нет}} и RadiusNormal соседей | ||
+ | *: точка пересечения [https://www.cs.princeton.edu/courses/archive/fall00/cs426/lectures/raycast/sld017.htm P = -VD/(V dot N)], где N - это {{sym|градиент|строка=скобки}}, V - это нормализированный RadiusNormal соседа для выбранной [[Метрика перетекания#RadiusIntersection]] (или соседская нормализованная биссектриса для [[Метрика перетекания#Middle]]). | ||
+ | * {{sym|letter=h_{to}|строка=скобки}} равно <math>{\sqrt{(P.x-(V.x * H))² + (P.y-(V.y * H))² + (P.z-(V.z * H))²}}</math>, где H - это длина радиуса соседа = -D<sub>соседа</sub> / cos α<sub>соседа</sub> | ||
+ | * на выходе: {{sym|letter=h_{to}|строка=нет}} (расстояние от точки пересечения к верхушке соседа) для каждого из 4 соседей | ||
+ | |||
+ | == перелить воду между всеми соседями == | ||
+ | рассчитываются {{sym|тазик#объёмы_перетекания|fine=,|строка=скобки}} | ||
+ | * на входе: [[Threshhold]], [[Текучесть]], Depth | ||
+ | *: {{sym|letter=h_{to}|строка=нет}} - {{sym|letter=h_{to}|строка=нет}}<sub>соседа</sub> = height (расход воды от текущего тазика) | ||
+ | очевидно, что height = -height<sub>соседа</sub> | ||
+ | === volume === | ||
+ | <source lang="CSharp">if (Math.Abs(height) > Threshhold) { | ||
+ | var v = Fluidity * height; | ||
+ | var volumeFromBasin = v > 0 | ||
+ | ? Min(basin.WaterHeight, v); | ||
+ | : -Min(toBasin.WaterHeight, -v); | ||
+ | |||
+ | Hoq -= volumeFromBasin; | ||
+ | }</source> from {{GithubExchange|Logy.Maps/ReliefMaps/Water/WaterModel.cs}} | ||
+ | |||
+ | * на выходе: {{sym|тазик#высота|строка=нет}}, и вся их сумма должна быть равна 0 (но округления в [[#данные|данных]] дают погрешность, что нарушает [[Сохранение массы]]) | ||
+ | |||
+ | == данные == | ||
+ | Результирующий {{sym|тазик#высота|строка=нет}} лучше хранить в виде {{sym|тазик#высота_воды|fine=,|строка=скобки}} = {{sym|тазик#высота|строка=нет}} + Depth; точности двух байтов value<sub>1</sub> и value<sub>2</sub>, которые формируют число value=value<sub>1</sub>*256+value<sub>2</sub>, достаточно тогда. | ||
+ | |||
+ | {{sym|тазик#высота_воды|строка=нет}} только приблизительно выражается как a * value + b, | ||
+ | где a = (max - b) / 65535; b = min, что вытекает из max = a * 65535 + b; min = a * 0 + b | ||
+ | где max, min - границы возможных значений Hoq | ||
+ | Для {{sym|тазик#высота_воды|строка=нет}} min = 0. | ||
+ | |||
+ | Если не хватает двух байтов, то или брать три value=value<sub>1</sub>*256*256 + value<sub>2</sub>*256+value<sub>3</sub>, или уменьшить возможные значения WaterHeight, ориентируясь на начальное значение {{sym|тазик#высота|строка=нет}} | ||
+ | |||
+ | == Текстуры == | ||
+ | Текстуры GPU формируются из памяти JS. | ||
+ | * виды dem | ||
+ | # одна - для самой простой игры | ||
+ | #: в памяти JS можно ничего не хранить | ||
+ | # 12 dem-текстур для сферы - превращаются в одну {{sym|тазик#высота|строка=нет}}-текстуру, а также две входные текстуры для S, R и Depth | ||
+ | #: в памяти JS можно ничего не хранить | ||
+ | #: есть одна текстура (назовем [[#demmap]]), описывающая 12 соседей | ||
+ | # изменчивое количество dem - для сложной игры | ||
+ | #: надо хранить исходники dem в памяти JS | ||
+ | #: [[#demmap]] изменчива | ||
+ | #: при изменении demmap пересчитывается текстуры из исходников, потому что надо границы dem пересчитывать | ||
+ | === [[#demmap]] === | ||
+ | from [[lw:HEALPix#for_DEM]] | ||
+ | right NW = 0; | ||
+ | down NE = 1; | ||
+ | up SW = 2; | ||
+ | left SE = 3; |
Текущая версия на 13:16, 7 мая 2020
aw:Shader на GPU
Содержание
сколько проходов[править]
Думал, что будет два прохода с передачей [math]h_{to}[/math] (Волна соседям), но это число невозможно вместить в байт для Метрика перетекания#Middle; переделал в один проход (побочный эффект - двойной расчет [math]h_{to}[/math]).
Однопроходный шейдер выдает [math]h_{OQ}[/math] для 4 соседей, поэтому только один байт для соседа; а также не посчитан общий [math]h_{OQ}[/math].
Поэтому возвращаюсь к двух проходам:
- для Метрика перетекания#RadiusIntersection [math]h_{to}[/math] есть расстоянием от Q соседа до точки пересечения и вмещается в байт: 127 градаций перетекания, соответствие одной градации метрам плавающее
- считается [math]h_{OQ}[/math] для текущего тазика (2 или 3 байта можно брать); следим, чтобы изменения [math]h_{OQ}[/math] у соседей точно совпали
- надо смотреть Depth соседей, будет двойной расчет [math]h_{to}[/math].
Но при упрощении значения heigth = [math]h_{to}[/math] - [math]h_{to}[/math]соседа снова вернулся к одному проходу, который генерирует [math]h_{water}[/math] (тазик, высота воды) для текущего тазика. Двойной расчет [math]h_{to}[/math] меньшее зло для быстродействия, чем два прохода.
алгоритм[править]
Gradient and height crosses[править]
- на входе: начальная [math]S_{q}[/math] (достаточно Dinitial и cos α) и [math]h_{OQ}[/math] (тазик, высота) (0 вначале)
- расчет актуальной [math]S_{q}[/math] (тазик, плоскость):
- ΔD = -[math]h_{OQ}[/math] * cos α, где α - угол между OQ и [math]\nabla{g}[/math] (градиент)
- расстояние OQ равно -D / cos α (gives only 0.1 meter difference and 0.01 meter fluctuation on k11)
- расчет актуальной [math]S_{q}[/math] (тазик, плоскость):
- на выходе: актуальный D = Dinitial + ΔD = Dinitial - [math]h_{OQ}[/math] * cos α
- на входе: [math]\nabla{g}[/math] и RadiusNormal соседей
- точка пересечения P = -VD/(V dot N), где N - это [math]\nabla{g}[/math] (градиент), V - это нормализированный RadiusNormal соседа для выбранной Метрика перетекания#RadiusIntersection (или соседская нормализованная биссектриса для Метрика перетекания#Middle).
- [math]h_{to}[/math] (Волна соседям) равно [math]{\sqrt{(P.x-(V.x * H))² + (P.y-(V.y * H))² + (P.z-(V.z * H))²}}[/math], где H - это длина радиуса соседа = -Dсоседа / cos αсоседа
- на выходе: [math]h_{to}[/math] (расстояние от точки пересечения к верхушке соседа) для каждого из 4 соседей
перелить воду между всеми соседями[править]
рассчитываются [math]V_{to}[/math] (тазик, объёмы перетекания)
- на входе: Threshhold, Текучесть, Depth
- [math]h_{to}[/math] - [math]h_{to}[/math]соседа = height (расход воды от текущего тазика)
очевидно, что height = -heightсоседа
volume[править]
if (Math.Abs(height) > Threshhold) {
var v = Fluidity * height;
var volumeFromBasin = v > 0
? Min(basin.WaterHeight, v);
: -Min(toBasin.WaterHeight, -v);
Hoq -= volumeFromBasin;
}
from WaterModel.cs
- на выходе: [math]h_{OQ}[/math], и вся их сумма должна быть равна 0 (но округления в данных дают погрешность, что нарушает Сохранение массы)
данные[править]
Результирующий [math]h_{OQ}[/math] лучше хранить в виде [math]h_{water}[/math] (тазик, высота воды) = [math]h_{OQ}[/math] + Depth; точности двух байтов value1 и value2, которые формируют число value=value1*256+value2, достаточно тогда.
[math]h_{water}[/math] только приблизительно выражается как a * value + b,
где a = (max - b) / 65535; b = min, что вытекает из max = a * 65535 + b; min = a * 0 + b где max, min - границы возможных значений Hoq
Для [math]h_{water}[/math] min = 0.
Если не хватает двух байтов, то или брать три value=value1*256*256 + value2*256+value3, или уменьшить возможные значения WaterHeight, ориентируясь на начальное значение [math]h_{OQ}[/math]
Текстуры[править]
Текстуры GPU формируются из памяти JS.
- виды dem
- одна - для самой простой игры
- в памяти JS можно ничего не хранить
- 12 dem-текстур для сферы - превращаются в одну [math]h_{OQ}[/math]-текстуру, а также две входные текстуры для S, R и Depth
- в памяти JS можно ничего не хранить
- есть одна текстура (назовем #demmap), описывающая 12 соседей
- изменчивое количество dem - для сложной игры
- надо хранить исходники dem в памяти JS
- #demmap изменчива
- при изменении demmap пересчитывается текстуры из исходников, потому что надо границы dem пересчитывать
#demmap[править]
from lw:HEALPix#for_DEM
right NW = 0; down NE = 1; up SW = 2; left SE = 3;