이것은 FOSS4G Advent Calendar 2018 여섯째 날 기사입니다.

소개

고도 PNG 타일을 사용하여 브라우저에서 침수 시뮬레이션을 수행하고 싶습니다. 다만 어디까지나 기술 소개를 위한 시작품이므로 주의해 주십시오. 아무래도 이 시뮬레이션 결과 그 자체를, 생명이나 재산에 영향이 있는 행동의 참고에는 행해지지 않게.

데모

여기에서 부디. 스마트 폰에서도 움직이는 것이 아닐까 생각합니다.

htps : // f 여과 또는 t. 기주 b. 이오/fぉ오d/

Step1 기동하면 우선 지도가 표시되므로, 적당하게 보고 싶은 지역까지 이동합니다.



Step2 지금 보고 있는 지도의 고도 PNG 타일 로드가 완료되면 Click to Run 띠가 표시되므로, 이것을 클릭하면 시뮬레이션 시작입니다.



Step3 처음에는 지도상의 전면에 물이 뿌려진 상태에서 시작하지만, 서서히 물이 낮은 쪽으로 이동합니다.



농담이 물의 깊이에 대응하고 있습니다. 물이 없어진 곳은 투명하게.



시간이 지남에 따라 서서히 수렴합니다.



마지막은 이런 식으로.

해설

고도 PNG 타일

지도보기와 병행하여 지리원 고도 PNG 타일을 얻고 있습니다. 그 결과 화면상의 모든 픽셀에 대해 고도 값을 알 수 있는 상황을 만들고 있습니다. 자세한 내용은 과거 기사 등을 참조하십시오.

물 이동

Web GL 의 드로잉 루프를 빙빙 돌리는 중, 이하와 같은 처리를 하고 있습니다.

이 턴의 물 이동 방향 (8 방향 중 하나)을 무작위로 결정합니다

모든 픽셀에 대해 유출, 유입 또는 상태 유지 중 하나를 결정합니다.

유출이라면 수량을 1 단위 줄이고, 유입하면 수량을 1 단위 늘립니다

픽셀의 총 수량에 따라 픽셀을 채색하여 그리기

하고 있는 것은 간단합니다만 계산량이 방대합니다. 보통 JS/Canvas에서는 처리할 수 없지만 WebGL이라면 괜찮습니다.

요약

올해도 해발 PNG 타일과 WebGL의 응용 자료였습니다.