{"id":30919,"date":"2026-10-16T04:00:59","date_gmt":"2026-10-16T04:00:59","guid":{"rendered":"https:\/\/umang.pk\/2026\/10\/16\/%d8%ad%d9%82%db%8c%d9%82%db%8c-%d8%af%d9%86%db%8c%d8%a7-%da%a9%db%92-%d9%86%d9%82%d8%b4%db%92-%d9%be%d8%b1-%da%88%db%8c%d8%b2%d8%a7%d8%b3%d9%b9%d8%b1-%d8%b3%d9%85%d9%88%d9%84%db%8c%d8%b4%d9%86-%da%a9\/"},"modified":"2026-10-16T04:01:01","modified_gmt":"2026-10-16T04:01:01","slug":"%d8%ad%d9%82%db%8c%d9%82%db%8c-%d8%af%d9%86%db%8c%d8%a7-%da%a9%db%92-%d9%86%d9%82%d8%b4%db%92-%d9%be%d8%b1-%da%88%db%8c%d8%b2%d8%a7%d8%b3%d9%b9%d8%b1-%d8%b3%d9%85%d9%88%d9%84%db%8c%d8%b4%d9%86-%da%a9","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/10\/16\/%d8%ad%d9%82%db%8c%d9%82%db%8c-%d8%af%d9%86%db%8c%d8%a7-%da%a9%db%92-%d9%86%d9%82%d8%b4%db%92-%d9%be%d8%b1-%da%88%db%8c%d8%b2%d8%a7%d8%b3%d9%b9%d8%b1-%d8%b3%d9%85%d9%88%d9%84%db%8c%d8%b4%d9%86-%da%a9\/","title":{"rendered":"\u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0688\u06cc\u0632\u0627\u0633\u0679\u0631 \u0633\u0645\u0648\u0644\u06cc\u0634\u0646 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2: Mapbox GL JS \u0627\u0648\u0631 Three.js \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u0646\u06cc \u0645\u06cc\u0679\u0688 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06cc \u062a\u06c1\u0648\u06ba \u0627\u0648\u0631 3D \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u0648 \u0627\u0633\u06a9\u06cc\u0644 \u06a9\u0631\u0646\u0627"},"content":{"rendered":"\n
\n

\u06a9\u0633\u06cc \u0648\u0642\u062a\u060c \u0622\u067e \u06a9\u06d2 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0645\u0627\u0631\u06a9\u0631 \u0627\u0648\u0631 \u06a9\u062b\u06cc\u0631 \u0627\u0644\u0627\u0636\u0644\u0627\u0639 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0645\u06cc\u06ba \u0646\u0642\u0634\u06d2 \u067e\u0631 \u06a9\u0686\u06be \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba\u06d4 \u06af\u0644\u06cc \u0645\u06cc\u06ba \u0628\u06c1\u062a\u0627 \u06c1\u0648\u0627 \u067e\u0627\u0646\u06cc\u060c \u06c1\u0648\u0627 \u0645\u06cc\u06ba \u062a\u06cc\u0631\u062a\u0627 \u06c1\u0648\u0627 \u062f\u06be\u0648\u0627\u06ba\u060c \u0627\u06cc\u06a9 \u0646\u0642\u0637\u06c1 \u0633\u06d2 \u067e\u06be\u06cc\u0644\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0635\u062f\u0645\u06d2 \u06a9\u06cc \u0644\u06c1\u0631\u06cc\u06ba \u0648\u063a\u06cc\u0631\u06c1\u06d4<\/p>\n

\u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u062c\u0628 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u062a\u0648 \u0645\u06cc\u06ba \u0646\u06d2 \u06a9\u0686\u06be \u0627\u06cc\u0633\u0627 \u06a9\u06cc\u0627 \u062c\u0648 \u0645\u062c\u06be\u06d2 \u0648\u0627\u0636\u062d \u0646\u0638\u0631 \u0622\u06cc\u0627\u06d4 \u0645\u06cc\u06ba \u06c1\u0648\u06ba <\/code> \u0645\u06cc\u06ba \u0646\u06d2 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0627\u06cc\u06a9 \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u0628\u0646\u0627\u0626\u06cc\u06d4<\/p>\n

\u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0627\u062a\u0646\u0627 \u063a\u0644\u0637 \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648\u062a\u0627 \u062a\u06be\u0627 \u06a9\u06c1 \u0627\u0633\u06d2 \u0645\u0632\u06cc\u062f \u062a\u0637\u06c1\u06cc\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0679\u06be\u06cc\u06a9 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u062a\u06be\u0627\u06d4 \u0627\u062b\u0631 \u0627\u06cc\u06a9 \u06a9\u0646\u0627\u0631\u06d2 \u062a\u06be\u0627. \u06cc\u06c1 \u0632\u0645\u06cc\u0646 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u062a\u06cc\u0631 \u0631\u06c1\u0627 \u062a\u06be\u0627\u06d4 \u0627\u0648\u0631 \u062c\u06cc\u0633\u06d2 \u06c1\u06cc \u0645\u06cc\u06ba \u0646\u06d2 \u0646\u0642\u0634\u06d2 \u06a9\u0648 \u062c\u06be\u06a9\u0627\u06cc\u0627 \u06cc\u0627 \u06af\u06be\u0645\u0627\u06cc\u0627\u060c \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0645\u0648\u062c\u0648\u062f \u0622\u0626\u0679\u0645\u0632 \u063a\u0644\u0637 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648 \u06af\u0626\u06d2\u06d4<\/p>\n

HazardSim\u060c \u0627\u06cc\u06a9 \u0628\u0631\u0627\u0624\u0632\u0631 \u0633\u0645\u06cc\u0644\u06cc\u0679\u0631 \u062c\u0648 \u062d\u0642\u06cc\u0642\u06cc \u0646\u0642\u0634\u0648\u06ba \u067e\u0631 \u0642\u062f\u0631\u062a\u06cc \u0622\u0641\u0627\u062a \u06a9\u0648 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0646\u0627\u062a\u06d2 \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0627 \u0634\u06a9\u0627\u0631 \u06c1\u0648\u0627\u06d4 \u0633\u0648\u0646\u0627\u0645\u06cc \u06a9\u0627 \u0645\u0646\u0638\u0631\u0646\u0627\u0645\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0627\u06cc\u06a9 \u062f\u0631\u062c\u0646 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u06af\u0632\u0631\u0627 \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u0633\u06cc \u0634\u06c1\u0631 \u067e\u0631 \u0686\u0633\u067e\u0627\u06ba \u06a9\u0679 \u0622\u0624\u0679 \u06a9\u06cc \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0646\u0627 \u0628\u0646\u062f \u06c1\u0648 \u06af\u06cc\u0627\u06d4<\/p>\n

\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u062c\u0627\u0646\u0686 \u0627\u0648\u0631 \u0628\u06af \u0631\u067e\u0648\u0631\u0679\u0633 \u06a9\u0627 \u0627\u06cc\u06a9 \u0627\u06c1\u0645 \u062d\u0635\u06c1 \u0645\u06cc\u0631\u06d2 12 \u0633\u0627\u0644\u06c1 \u0628\u06cc\u0679\u06d2 \u0679\u0650\u0645 \u0646\u06d2 \u06a9\u06cc\u0627 \u062a\u06be\u0627\u060c \u062c\u0648 \u0645\u062c\u06be \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0631\u06cc\u0636 \u0679\u06cc\u0633\u0679\u0631 \u0646\u06a9\u0644\u0627\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be\u0646\u06d2 \u0648\u0627\u0644\u0648\u06ba \u0646\u06d2 \u0645\u062c\u06be\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u0686\u06cc\u0632 \u0645\u062e\u062a\u0644\u0641 \u0633\u0645\u062a \u0633\u06d2 \u0633\u06a9\u06be\u0627\u0626\u06cc \u06c1\u06d2\u06d4 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0646\u0642\u0634\u06c1 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679\u0633 \u0645\u06cc\u06ba \u0646\u0642\u0627\u0644\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/strong><\/p>\n

\u0627\u0633 \u0627\u0635\u0648\u0644 \u0646\u06d2 \u0645\u062c\u06be\u06d2 \u0633\u0648\u0646\u0627\u0645\u06cc \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062d\u0627\u0635\u0644 \u06a9\u06cc\u0627\u06d4 \u067e\u06be\u0631\u060c \u0632\u0644\u0632\u0644\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639\u060c \u06c1\u0645 \u0645\u062e\u0627\u0644\u0641 \u0645\u0633\u0626\u0644\u06c1 \u0645\u06cc\u06ba \u0628\u06be\u0627\u06af \u06af\u0626\u06d2. Mapbox GL JS \u0622\u067e \u06a9\u06d2 \u0634\u06c1\u0631 \u06a9\u0648 3D \u0645\u06cc\u06ba \u0688\u0631\u0627\u062a\u0627 \u06c1\u06d2\u06d4 fill-extrusion<\/code> \u062a\u06c1\u0648\u06ba \u0627\u0648\u0631 \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644\u0648\u06ba \u067e\u0631 \u062a\u0645\u0627\u0645 \u0642\u062f\u0645\u0648\u06ba \u06a9\u06d2 \u0646\u0634\u0627\u0646 \u0627\u067e\u0646\u06cc \u0627\u0635\u0644 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u062a\u06a9 \u0628\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n

\u06cc\u06c1 \u0627\u0633 \u0648\u0642\u062a \u062a\u06a9 \u0627\u0686\u06be\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u0622\u067e \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0633\u06cc \u0627\u06cc\u06a9 \u06a9\u0648 \u06af\u0631\u0627 \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u062a\u06d2\u060c \u067e\u06be\u0631 \u0622\u067e \u06a9\u0648 \u0627\u062d\u0633\u0627\u0633 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0646\u0642\u0634\u06d2 \u067e\u0631 3D \u0627\u06cc\u06a9 \u067e\u06cc\u0634 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0686\u0627\u0644 \u06c1\u06d2 \u0646\u06c1 \u06a9\u06c1 \u06a9\u0648\u0626\u06cc \u0645\u0646\u0638\u0631\u06d4 \u067e\u06a9\u0691\u0646\u06d2\u060c \u06af\u06be\u0645\u0627\u0646\u06d2 \u06cc\u0627 \u062a\u0648\u0691\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06cc\u06c1 \u067e\u062a\u06c1 \u0686\u0644\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0632\u0645\u06cc\u0646 \u067e\u0631 \u0644\u06cc\u0679\u0646\u0627 \u0627\u0648\u0631 \u0628\u0644\u0646\u062f \u06c1\u0648\u0646\u0627 \u062f\u0648 \u0645\u062e\u062a\u0644\u0641 \u0645\u06c1\u0627\u0631\u062a\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u06af\u0627\u0626\u06cc\u0688 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

\u062d\u0635\u06c1 1<\/strong> \u06af\u0631\u0627\u0624\u0646\u0688 \u0641\u0644\u0648\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 \u0646\u0642\u0634\u06d2 \u06a9\u06cc \u0627\u067e\u0646\u06cc \u0679\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0646\u0633\u0644\u06a9 \u0627\u06cc\u06a9 \u06af\u0631\u0688 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u060c \u0627\u0635\u0644 \u0628\u0644\u0646\u062f\u06cc \u06a9\u0627 \u0688\u06cc\u0679\u0627 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u060c \u0633\u06cc\u0644\u0627\u0628 \u06a9\u0627 \u0627\u06cc\u06a9 \u0641\u0644\u0688 \u0641\u0644 \u0686\u0644\u0627\u0626\u06cc\u06ba \u062c\u0648 \u067e\u06c1\u0627\u0691\u06cc\u0648\u06ba \u0627\u0648\u0631 \u0648\u0627\u062f\u06cc\u0648\u06ba \u06a9\u0648 \u0645\u062f\u0646\u0638\u0631 \u0631\u06a9\u06be\u06d2\u060c \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0627\u06cc\u06a9 \u0631\u0627\u0633\u0679\u0631 \u0645\u0627\u062e\u0630 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u067e\u0631 \u067e\u06a9\u0633\u0644\u0632 \u0644\u06a9\u06be\u06cc\u06ba\u060c \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0645\u067e\u0648\u0632\u0679\u0646\u06af \u0645\u0648\u0688 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0648\u067e\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06cc \u0633\u0627\u062e\u062a \u0644\u06af\u0627\u0626\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u0645\u0646\u0638\u0631 \u0645\u06cc\u06ba \u0644\u06d2 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n

\u062d\u0635\u06c1 2<\/strong> \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u062c\u0648\u0691\u062a\u0627 \u06c1\u06d2\u06d4 \u0646\u0642\u0634\u06d2 \u06a9\u06cc \u0679\u0627\u0626\u0644\u0648\u06ba \u0633\u06d2 \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u067e\u0627\u0624\u06ba \u06a9\u06d2 \u0646\u0634\u0627\u0646\u0627\u062a \u0627\u0648\u0631 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc\u0627\u06ba \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0648\u0631 \u06c1\u06cc\u0646\u06af\u0632 \u06a9\u0648 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u06cc \u0637\u0631\u062d \u0628\u0646\u0627\u0626\u06cc\u06ba\u060c \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u06d2 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0641\u0627\u0635\u0644\u06d2 \u0645\u06cc\u06ba \u06af\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u06c1\u0648\u06ba \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be\u06d2 \u0628\u063a\u06cc\u0631 \u0645\u062a\u062d\u0631\u06a9 \u06af\u0631\u0646\u0627\u060c three.js<\/code> \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 WebGL \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0627\u06cc\u06a9 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u067e\u0631\u062a \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0642\u062f\u0645\u0648\u06ba \u06a9\u06d2 \u0646\u0634\u0627\u0646\u0627\u062a \u06a9\u0648 \u06af\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062e\u0627\u0646\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0645\u0644\u0628\u06c1 \u0627\u0648\u0631 \u062f\u06be\u0648\u0644 \u067e\u06be\u06cc\u0646\u06a9\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u06c1\u0644\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n

\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u062f\u0648\u0646\u0648\u06ba \u062d\u0635\u0648\u06ba \u0645\u06cc\u06ba \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4 \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0686\u06be \u0646\u06d2 \u063a\u0644\u0637\u06cc \u06a9\u06d2 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u067e\u06cc\u062f\u0627 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u06c1\u0631 \u0627\u06cc\u06a9 \u062f\u0646 \u06a9\u0627 \u0648\u0642\u062a \u0644\u06cc\u0627\u06d4<\/p>\n

\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n

\u0622\u067e \u06a9\u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0633\u06d2 \u0648\u0627\u0642\u0641 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 requestAnimationFrame<\/code>2D \u06a9\u06cc\u0646\u0648\u0633 API \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u06cc\u06ba: getContext(\"2d\")<\/code>\u060c drawImage<\/code>\u0627\u0648\u0631 ImageData<\/code>.<\/p>\n

\u0648\u06cc\u0628 \u0646\u0642\u0634\u0648\u06ba \u06a9\u0648 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0646\u0642\u0634\u06c1 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u06cc\u06c1 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

\u062d\u0635\u06c1 2 \u06cc\u06c1 \u0628\u06be\u06cc \u0645\u0627\u0646\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u0646\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u06c1\u06d2: three.js<\/code> \u06a9\u0645 \u0627\u0632 \u06a9\u0645 \u0627\u06cc\u06a9 \u0628\u0627\u0631: \u0645\u06cc\u0634\u060c \u0645\u0648\u0627\u062f\u060c \u0645\u0646\u0638\u0631 \u0627\u0648\u0631 \u06a9\u06cc\u0645\u0631\u06c1\u06d4 \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0635\u0631\u0641 three.js \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u0648\u06ba \u067e\u0631 \u0639\u0645\u0644 \u06a9\u0631\u0646\u0627 \u06a9\u0627\u0641\u06cc \u06c1\u0648\u06af\u0627\u060c \u0627\u0648\u0631 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0639\u0627\u0645\u0644 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644 \u0633\u06d2 \u0648\u0636\u0627\u062d\u062a \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4<\/p>\n

\u0645\u062b\u0627\u0644\u06cc\u06ba HazardSim \u067e\u0631 \u0686\u0644\u0646\u06d2 \u0648\u0627\u0644\u06d2 Mapbox GL JS \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0628\u06cc\u0633 \u0645\u06cc\u067e \u0627\u0648\u0631 \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0641\u062a \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u06a9\u0627 \u0679\u0648\u06a9\u0646 \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4 \u06cc\u06c1\u0627\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u062a\u0645\u0627\u0645 APIs \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0641\u0648\u0631\u06a9\u060c MapLibre GL JS \u0645\u06cc\u06ba \u0628\u06be\u06cc \u0627\u0633\u06cc \u0646\u0627\u0645 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba\u06d4 \u062f\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0641\u0631\u0642 \u062d\u0635\u06c1 2 \u0645\u06cc\u06ba \u0632\u06cc\u0631 \u0628\u062d\u062b \u0622\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n

\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n

\u062d\u0635\u06c1 1: \u0632\u0645\u06cc\u0646 \u067e\u0631 \u0688\u0631\u0627\u0626\u0646\u06af<\/h2>\n

\u0627\u0633 \u06af\u0627\u0626\u06cc\u0688 \u06a9\u0627 \u067e\u06c1\u0644\u0627 \u0646\u0635\u0641 \u0646\u0642\u0634\u06d2 \u06a9\u06cc \u0633\u0637\u062d \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06c1\u06d2: \u067e\u0627\u0646\u06cc\u060c \u0622\u06af \u06a9\u0627 \u067e\u06be\u06cc\u0644\u0627\u0624\u060c \u062f\u06be\u0648\u0626\u06cc\u06ba \u06a9\u06d2 \u0628\u0644\u0627\u0628\u060c \u0634\u0627\u06a9 \u0648\u06cc\u0648\u0632\u060c \u0648\u063a\u06cc\u0631\u06c1\u06d4 \u06cc\u06c1 \u062a\u06a9\u0646\u06cc\u06a9 \u0627\u06cc\u06a9 \u062e\u06cc\u0627\u0644 \u06a9\u0627 \u0645\u062d\u062a\u0627\u0637 \u0627\u0637\u0644\u0627\u0642 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u0633\u0627\u062a \u0645\u0631\u0627\u062d\u0644 \u0627\u0633\u06d2 \u06af\u0631\u0688 \u0633\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06cc \u0646\u0642\u0644 \u0648 \u062d\u0631\u06a9\u062a \u062a\u06a9 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n

\u06a9\u0644\u06cc\u062f\u06cc \u062e\u06cc\u0627\u0644: \u0646\u0642\u0634\u06c1 \u06a9\u06cc \u062c\u06af\u06c1\u060c \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc \u062c\u06af\u06c1 \u0646\u06c1\u06cc\u06ba\u06d4<\/h2>\n

\u0648\u06cc\u0628 \u06a9\u0627 \u0646\u0642\u0634\u06c1 \u0633\u0637\u062d \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u0648\u0627\u0644\u0627 \u06a9\u06cc\u0645\u0631\u06c1 \u06c1\u06d2\u06d4 \u062c\u0628 \u0635\u0627\u0631\u0641 \u06af\u06be\u0633\u06cc\u0679\u062a\u0627 \u06c1\u06d2\u060c \u0632\u0648\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06be\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u06cc\u0627 \u06af\u06be\u0645\u0627\u062a\u0627 \u06c1\u06d2\u060c \u06a9\u06cc\u0645\u0631\u06c1 \u062d\u0631\u06a9\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0633\u0637\u062d \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06cc \u0631\u06c1\u062a\u06cc \u06c1\u06d2\u06d4 \u0633\u0691\u06a9\u06cc\u06ba\u060c \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba\u060c \u0633\u06cc\u0644\u0627\u0628 \u0648\u063a\u06cc\u0631\u06c1 \u0633\u0628\u06be\u06cc \u0633\u0637\u062d\u06cc\u06ba \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u0627\u0646 \u06a9\u0627 \u062a\u0631\u062c\u0645\u06c1 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n

\u0646\u0642\u0634\u06d2 \u06a9\u06d2 DOM \u0639\u0646\u0635\u0631 \u067e\u0631 \u0631\u06a9\u06be\u0627 \u06c1\u0648\u0627 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06cc\u0645\u0631\u06c1 \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u0633\u0637\u062d \u0633\u06d2 \u0646\u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06d2 \u0639\u06cc\u0646\u06a9 \u06a9\u06d2 \u0633\u0627\u0645\u0646\u06d2 \u0634\u06cc\u0634\u06d2 \u06a9\u06cc \u067e\u0644\u06cc\u0679 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0648\u0686\u06cc\u06ba\u06d4 \u062c\u0648 \u0628\u06be\u06cc \u0622\u067e \u06a9\u06be\u06cc\u0646\u0686\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1\u06cc\u06ba \u0631\u06c1\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0646\u06cc\u0627 \u0627\u0633 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0686\u0644\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n

\u0628\u063a\u06cc\u0631 \u06af\u06be\u0645\u0627\u0624 \u06a9\u06d2 \u0679\u0627\u067e \u0688\u0627\u0648\u0646 \u0632\u0648\u0645 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0631 \u06a9\u06d2 \u0627\u0644\u0627\u0626\u0646\u0645\u0646\u0679 \u06a9\u0648 \u062c\u0639\u0644\u06cc \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u0686 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u06c1 \u0627\u0644\u06af \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0641\u0644\u06cc\u0679 \u0627\u0633\u067e\u0631\u0627\u0626\u0679\u0633 \u06a9\u0627 \u06a9\u0648\u0626\u06cc \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u06a9\u0648\u0626\u06cc \u067e\u06cc\u0634 \u06af\u0648\u0626\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06cc\u0627 \u0628\u0639\u062f \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n

\"\u062f\u0648<\/p>\n

\u0627\u0633 \u06a9\u0627 \u062d\u0644 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0646\u0642\u0634\u06d2 \u06a9\u0648 \u0688\u06cc\u0679\u0627 \u0633\u0648\u0631\u0633 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4 \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 \u062c\u06cc \u0627\u06cc\u0644 \u062c\u06d2 \u0627\u06cc\u0633 \u06a9\u06d2 \u067e\u0627\u0633 \u06c1\u06d2\u06d4 canvas<\/code> \u0645\u0627\u062e\u0630 \u06a9\u06cc \u0642\u0633\u0645\u06d4 \u06c1\u0645 \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06d2 \u0639\u0646\u0635\u0631 \u0627\u0648\u0631 \u0686\u0627\u0631 \u062c\u063a\u0631\u0627\u0641\u06cc\u0627\u0626\u06cc \u06a9\u0648\u0646\u0648\u06ba \u0633\u06d2 \u06af\u0632\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u067e\u06be\u0631 \u06c1\u0645 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0645\u0633\u062a\u0637\u06cc\u0644 \u067e\u0631 \u0627\u0633\u06cc \u0637\u0631\u062d \u06a9\u06be\u06cc\u0646\u0686\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0633 \u0637\u0631\u062d \u06c1\u0645 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0633\u06cc\u0679\u0644\u0627\u0626\u0679 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0646\u0642\u0634\u06d2 \u06a9\u0648 \u06af\u06be\u0645\u0627\u0646\u06d2 \u0633\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u06af\u06be\u0648\u0645\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u06be\u06a9\u0627\u0624 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0686\u06be\u0648\u0679\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0622\u067e 3D \u0679\u06cc\u0631\u0627\u0626\u0646 \u06a9\u0648 \u0622\u0646 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u06c1\u0627\u0691\u06cc\u0648\u06ba \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/p>\n

\u0646\u0642\u0634\u06c1 \u06a9\u06cc \u062c\u06af\u06c1 \u0645\u06cc\u06ba \u0688\u0631\u0627\u0626\u0646\u06af \u06a9\u06cc \u0633\u0637\u062d \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u06a9\u0686\u06be \u0645\u0634\u06a9\u0644\u0627\u062a \u062e\u062a\u0645 \u06c1\u0648\u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06c1\u06cc\u0646\u0688 \u0628\u06a9 \u06a9\u0627 \u0628\u0627\u0642\u06cc \u062d\u0635\u06c1 \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u06cc\u0627 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n

\u0645\u0631\u062d\u0644\u06c1 1: \u06af\u0631\u0688 \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u0646\u0642\u0634\u06c1 \u06a9\u06cc \u0679\u0627\u0626\u0644\u06cc\u06ba \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n

\u062a\u062e\u0631\u0648\u067e\u0646 \u0627\u06cc\u06a9 \u06af\u0631\u0688 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2. \u06cc\u0639\u0646\u06cc\u060c 2D \u062e\u0644\u06cc\u0648\u06ba \u06a9\u06cc \u0627\u06cc\u06a9 \u0635\u0641\u060c \u06c1\u0631 \u0627\u06cc\u06a9 \u0645\u06cc\u06ba \u0628\u0644\u0646\u062f\u06cc\u060c \u06af\u06c1\u0631\u0627\u0626\u06cc\u060c \u06cc\u0627 \u062c\u0648 \u0628\u06be\u06cc \u0645\u0627\u0688\u0644 \u0679\u0631\u06cc\u06a9 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0641\u06cc\u0635\u0644\u06c1 \u062c\u0648 \u0646\u06cc\u0686\u06d2 \u06a9\u06cc \u0637\u0631\u0641 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u0648\u06c1 \u06c1\u06d2 \u0627\u0633 \u06af\u0631\u0688 \u06a9\u0648 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0627\u067e\u0646\u06d2 \u0679\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0627\u06c1\u0631\u0627\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u06cc\u062f\u06be \u0645\u06cc\u06ba \u0644\u0627\u0646\u0627\u06d4<\/p>\n

\u0648\u06cc\u0628 \u0646\u0642\u0634\u06c1 \u0648\u06cc\u0628 \u0645\u0631\u06a9\u0679\u0631 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0634\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 0 \u0633\u06d2 22 \u062a\u06a9 \u0632\u0648\u0645 \u06a9\u06cc \u0633\u0637\u062d \u067e\u0631 256\u00d7256 \u067e\u06a9\u0633\u0644 \u0679\u0627\u0626\u0644\u0648\u06ba \u0645\u06cc\u06ba \u06a9\u0627\u0679\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 z<\/code> \u062f\u0646\u06cc\u0627 2^z<\/code> \u0679\u0627\u0626\u0644\u06cc\u06ba \u0686\u0648\u0691\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0627\u06cc\u06a9 \u06af\u0631\u0688 \u0633\u06cc\u0644 \u06a9\u0633\u06cc \u0632\u0648\u0645 \u067e\u0631 \u0628\u0627\u0644\u06a9\u0644 \u0627\u06cc\u06a9 \u0679\u0627\u0626\u0644 \u067e\u06a9\u0633\u0644 \u06c1\u06d2\u060c \u062a\u0648 \u06af\u0631\u0688 \u0627\u0646\u0688\u06cc\u06a9\u0633 \u0627\u0648\u0631 \u0637\u0648\u0644 \u0628\u0644\u062f\/ \u0639\u0631\u0636 \u0627\u0644\u0628\u0644\u062f \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0686\u0627\u0631 \u0645\u062e\u062a\u0635\u0631 \u0641\u0646\u06a9\u0634\u0646\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0679\u0627\u0626\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u062a\u0645\u0627\u0645 \u0688\u06cc\u0679\u0627\u0633\u06cc\u0679\u0633 (\u0628\u0644\u0646\u062f\u06cc\u060c \u0622\u0628\u0627\u062f\u06cc\u060c \u062a\u0635\u0627\u0648\u06cc\u0631) \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u0645\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u06af\u0631\u0688 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n

\u06cc\u06c1\u0627\u06ba \u0686\u0627\u0631 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06c1\u06cc\u06ba: lon2x<\/code> \u0627\u0648\u0631 lat2y<\/code> \u0641\u0631\u06cc\u06a9\u0634\u0646\u0644 \u0679\u0627\u0626\u0644 \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679\u0633 \u0644\u0648\u0679\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u06a9\u0633\u0644\u0632 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 256 \u0633\u06d2 \u0636\u0631\u0628 \u062f\u06cc\u06ba\u06d4<\/p>\n

function lon2x(lon, z) {\n  return (lon + 180) \/ 360 * Math.pow(2, z);\n}\n\nfunction lat2y(lat, z) {\n  const rad = lat * Math.PI \/ 180;\n  return (1 - Math.log(Math.tan(rad) + 1 \/ Math.cos(rad)) \/ Math.PI) \/ 2 * Math.pow(2, z);\n}\n\nfunction x2lon(x, z) {\n  return x \/ Math.pow(2, z) * 360 - 180;\n}\n\nfunction y2lat(y, z) {\n  const n = Math.PI - 2 * Math.PI * y \/ Math.pow(2, z);\n  return 180 \/ Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));\n}\n<\/code><\/pre>\n
\u0627\u06af\u0644\u0627\u060c \u0632\u0648\u0645 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4 \u0622\u067e \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u06cc \u062f\u0644\u0686\u0633\u067e\u06cc \u06a9\u0627 \u0639\u0644\u0627\u0642\u06c1 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u06d2 \u06af\u0631\u0688 \u0645\u06cc\u06ba \u0641\u0679 \u06c1\u0648 \u062c\u0648 \u06c1\u0645\u0648\u0627\u0631 \u0646\u0638\u0631 \u0622\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0641\u06cc \u0679\u06be\u06cc\u06a9 \u06c1\u0648\u060c \u0644\u06cc\u06a9\u0646 \u0627\u062a\u0646\u0627 \u0686\u06be\u0648\u0679\u0627 \u06c1\u0648 \u06a9\u06c1 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0645\u06cc\u06ba \u06a9\u0645 \u0627\u0632 \u06a9\u0645 60 \u0628\u0627\u0631 \u062f\u06c1\u0631\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2\u06d4 HazardSim \u0632\u0648\u0645 15 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u0627\u062a\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u0628\u0627\u0624\u0646\u0688\u0646\u06af \u0628\u0627\u06a9\u0633 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 620,000 \u0633\u06cc\u0644\u0632 \u0645\u06cc\u06ba \u0627\u0641\u0642\u06cc \u0627\u0648\u0631 \u0639\u0645\u0648\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 780 \u067e\u06a9\u0633\u0644\u0632 \u0641\u0679 \u0646\u06c1 \u06c1\u0648 \u062c\u0627\u0626\u06d2\u06d4<\/p>\n
function chooseZoom(bbox) {\n  for (let z = 15; z >= 8; z--) {\n    const pw = (lon2x(bbox.e, z) - lon2x(bbox.w, z)) * 256;\n    const ph = (lat2y(bbox.s, z) - lat2y(bbox.n, z)) * 256;\n    if (pw <= 780 && pw * ph <= 620000) return z;\n  }\n  return 8;\n}\n<\/code><\/pre>\n
\u0632\u0648\u0645 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0628\u0627\u0624\u0646\u0688\u0646\u06af \u0628\u0627\u06a9\u0633 \u06a9\u0648 \u067e\u0648\u0631\u06cc \u0679\u0627\u0626\u0644 \u06a9\u06d2 \u0628\u0627\u06c1\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4 \u0648\u06c1 \u0645\u0633\u062a\u0637\u06cc\u0644 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0679\u0627\u0626\u0644\u06cc\u06ba \u06c1\u06cc\u06ba:<\/p>\n
function gridFor(bbox) {\n  const z = chooseZoom(bbox);\n  const x0 = Math.floor(lon2x(bbox.w, z)), x1 = Math.floor(lon2x(bbox.e, z));\n  const y0 = Math.floor(lat2y(bbox.n, z)), y1 = Math.floor(lat2y(bbox.s, z));\n  const nx = x1 - x0 + 1, ny = y1 - y0 + 1;\n  const latMid = (bbox.n + bbox.s) \/ 2;\n\n  return {\n    z, x0, y0, nx, ny,\n    W: nx * 256,\n    H: ny * 256,\n    \/\/ metres per cell at this latitude and zoom\n    cellM: 156543.03392 * Math.cos(latMid * Math.PI \/ 180) \/ Math.pow(2, z),\n    \/\/ exact geographic corners of the snapped rectangle\n    corners: {\n      w: x2lon(x0, z), e: x2lon(x1 + 1, z),\n      n: y2lat(y0, z), s: y2lat(y1 + 1, z),\n    },\n  };\n}\n<\/code><\/pre>\n
\"\u0646\u0627\u0631\u0646\u062c\u06cc<\/p>\n
\u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u0627 cellM<\/code> \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \"\u0645\u0648\u062c \u0646\u06d2 400 \u0645\u06cc\u0679\u0631 \u06a9\u0627 \u0633\u0641\u0631 \u06a9\u06cc\u0627\" ~ \u06a9\u0648 \"\u0644\u06c1\u0631 \u0646\u06d2 3.8 \u0633\u06cc\u0644\u0648\u06ba \u06a9\u0627 \u0633\u0641\u0631 \u06a9\u06cc\u0627\" \u06a9\u0648 \u0645\u0648\u0691\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 \u0627\u0648\u0688\u06cc\u0633\u0627 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06cc\u06c1\u0627\u06ba \u06a9\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679\u0633 \u0645\u06cc\u06ba \u0646\u0645\u0627\u06cc\u0627\u06ba \u0634\u06c1\u0631\u060c \u06af\u0631\u0688 105 \u0645\u06cc\u0679\u0631 \u0633\u06cc\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0632\u0648\u0645 10 \u067e\u0631 \u062e\u062a\u0645 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
\u0645\u0631\u062d\u0644\u06c1 2: \u0627\u0635\u0644 \u0628\u0644\u0646\u062f\u06cc \u06a9\u0648 \u06af\u0631\u0688 \u0645\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n
\u067e\u06c1\u0627\u0691\u06cc\u0648\u06ba \u06a9\u0648 \u0646\u0638\u0631 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0633\u06cc\u0644\u0627\u0628 \u0646\u06cc\u0644\u06d2 \u0631\u0646\u06af \u06a9\u0627 \u0628\u0644\u0627\u0628 \u06c1\u06d2\u06d4 \u062c\u0648 \u0686\u06cc\u0632 \u062d\u0642\u06cc\u0642\u06cc \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0646\u0642\u0627\u0644\u06cc \u06a9\u0648 \u062d\u0642\u06cc\u0642\u06cc \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0648\u06c1 \u0627\u0635\u0644\u06cc \u062e\u0637\u06c1 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062e\u0637\u06c1 \u0645\u0641\u062a \u06c1\u06d2\u06d4<\/p>\n
AWS \u0627\u0648\u067e\u0646 \u0688\u06cc\u0679\u0627 \u067e\u0631\u0648\u06af\u0631\u0627\u0645 Mapzen \u06a9\u06cc \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0679\u06cc\u0631\u06cc\u0631\u06cc\u0645<\/strong> \u0628\u0644\u0646\u062f\u06cc \u06a9\u06cc \u0679\u0627\u0626\u0644\u06cc\u06ba\u06d4 \u067e\u06a9\u0633\u0644 \u0631\u0646\u06af \u0645\u06cc\u06ba \u0627\u0646\u06a9\u0648\u0688 \u0634\u062f\u06c1 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 PNG\u06d4<\/p>\n
height_m = R * 256 + G + B \/ 256 - 32768\n<\/code><\/pre>\n
\u06af\u0631\u0688 \u0679\u0627\u0626\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0646\u0633\u0644\u06a9 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0628\u0644\u0646\u062f\u06cc \u06a9\u0648 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u0679\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0644\u06d2 \u062c\u0627\u0646\u0627\u060c \u0627\u0646\u06c1\u06cc\u06ba \u0627\u06cc\u06a9 \u0628\u0691\u06d2 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u0627\u0646 \u06a9\u06cc \u0642\u062f\u0631\u062a\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u06a9\u06be\u06cc\u0646\u0686\u0646\u0627\u060c \u0627\u0648\u0631 \u067e\u06a9\u0633\u0644\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0691\u06be\u0646\u0627 \u0627\u0648\u0631 \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u0646\u0627\u06d4 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u06a9\u0627 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u0645\u0648\u0646\u06c1 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u06af\u0631\u0688 \u0633\u06cc\u0644 \u0627\u0648\u0631 \u0628\u0644\u0646\u062f\u06cc \u06a9\u06d2 \u0646\u0645\u0648\u0646\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u067e\u06a9\u0633\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n
function terrariumUrl(z, x, y) {\n  return `https:\/\/s3.amazonaws.com\/elevation-tiles-prod\/terrarium\/${z}\/${x}\/${y}.png`;\n}\n\nfunction loadImage(url) {\n  return new Promise((resolve, reject) => {\n    const img = new Image();\n    img.crossOrigin = \"anonymous\";\n    img.onload = () => resolve(img);\n    img.onerror = reject;\n    img.src = url;\n  });\n}\n\nasync function loadElevation(grid) {\n  const cv = document.createElement(\"canvas\");\n  cv.width = grid.W;\n  cv.height = grid.H;\n  const cx = cv.getContext(\"2d\", { willReadFrequently: true });\n\n  const jobs = [];\n  for (let iy = 0; iy < grid.ny; iy++) {\n    for (let ix = 0; ix < grid.nx; ix++) {\n      jobs.push(\n        loadImage(terrariumUrl(grid.z, grid.x0 + ix, grid.y0 + iy))\n          .then(img => cx.drawImage(img, ix * 256, iy * 256))\n      );\n    }\n  }\n  await Promise.all(jobs);\n\n  const d = cx.getImageData(0, 0, grid.W, grid.H).data;\n  const elev = new Float32Array(grid.W * grid.H);\n  for (let i = 0; i < elev.length; i++) {\n    const o = i * 4;\n    elev[i] = d[o] * 256 + d[o + 1] + d[o + 2] \/ 256 - 32768;\n  }\n  return elev;\n}\n<\/code><\/pre>\n
crossOrigin = \"anonymous\"<\/code>    \u0622\u067e \u06a9\u0648 \u0627\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u06a9\u06cc\u0646\u0648\u0633 \"\u0645\u06cc\u062f\u06c1\" \u06c1\u06d2 \u0627\u0648\u0631 getImageData<\/code> \u0627\u0633\u06d2 \u067e\u06be\u06cc\u0646\u06a9 \u062f\u06cc\u06ba \u0679\u06cc\u0631\u06cc\u0631\u06cc\u0645 \u0628\u0627\u0644\u0679\u06cc \u0635\u062d\u06cc\u062d CORS \u06c1\u06cc\u0688\u0631 \u0628\u06be\u06cc\u062c\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u06cc\u06c1 \u062a\u062d\u0631\u06cc\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
\u0686\u0648\u0646\u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 \u0679\u0648\u06a9\u0646 \u06c1\u06d2\u060c \u0622\u067e \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 \u06a9\u0627 \u0627\u067e\u0646\u0627 \u0679\u0648\u06a9\u0646 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0679\u06cc\u0631\u06cc\u0646-\u0622\u0631 \u062c\u06cc \u0628\u06cc<\/strong> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0679\u0627\u0626\u0644 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4 URL \u06c1\u06d2: https:\/\/api.mapbox.com\/v4\/mapbox.terrain-rgb\/{z}\/{x}\/{y}.pngraw?access_token=\u2026<\/code> \u0688\u06cc \u06a9\u0648\u0688 \u0641\u0627\u0631\u0645\u0648\u0644\u0627 \u0645\u062e\u062a\u0644\u0641 \u06c1\u06d2\u06d4<\/p>\n
\/\/ Mapbox Terrain-RGB\nelev[i] = -10000 + (d[o] * 65536 + d[o + 1] * 256 + d[o + 2]) * 0.1;\n<\/code><\/pre>\n
HazardSim \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u062c\u06be\u0646\u0688\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0633\u0648\u0626\u0686 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 Terrain-RGB \u0686\u0646\u062f \u0627\u0633\u067e\u0627\u0626\u06a9\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0635\u0627\u0641 \u0688\u06cc\u0679\u0627 \u06c1\u06d2\u06d4 \u0679\u06cc\u0631\u06cc\u0631\u06cc\u0645 \u0641\u06cc \u0679\u0627\u0626\u0644 \u0686\u0627\u0631\u062c \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 \u0679\u06cc\u0631\u06cc\u0631\u06cc\u0645 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n
\"\u0627\u0648\u0688\u06cc\u0633\u0627<\/p>\n
\u062f\u0648 \u0639\u0645\u0644\u06cc \u0646\u0648\u0679\u06d4 \u0679\u06cc\u0631\u06cc\u0631\u06cc\u0645 \u0688\u06cc\u0679\u0627 \u0645\u06cc\u06ba \u06a9\u0628\u06be\u06cc \u06a9\u0628\u06be\u0627\u0631 \u0633\u0646\u06af\u0644 \u067e\u06a9\u0633\u0644 \u0627\u0633\u067e\u0627\u0626\u06a9\u0633 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u0648 3\u00d73 \u0645\u06cc\u0688\u06cc\u0646 \u067e\u06be\u06cc\u0644\u0627\u0624 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062a\u0645\u0627\u0645 \u067e\u0691\u0648\u0633\u06cc\u0648\u06ba \u0627\u0648\u0631 \u0633\u06cc\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u0627\u0641 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0686\u0646\u062f \u0645\u06cc\u0679\u0631 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0645\u062e\u062a\u0644\u0641 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0648\u0631 0 \u0633\u06d2 \u0646\u06cc\u0686\u06d2 \u06a9\u06d2 \u062e\u0644\u06cc\u0627\u062a \u0633\u0645\u0646\u062f\u0631 \u06c1\u06cc\u06ba\u06d4 \u062a\u0627\u06c1\u0645\u060c \u0646\u06cc\u062f\u0631\u0644\u06cc\u0646\u0688\u0632\u060c \u0646\u06cc\u0648 \u0627\u0648\u0631\u0644\u06cc\u0646\u0632\u060c \u0627\u0648\u0631 \u0688\u06cc\u062a\u06be \u0648\u06cc\u0644\u06cc \u062c\u06cc\u0633\u06d2 \u063a\u06cc\u0631 \u0633\u0645\u0646\u062f\u0631\u06cc \u0639\u0644\u0627\u0642\u0648\u06ba \u06a9\u0648 \u062e\u0627\u0631\u062c \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u06ba \u0639\u0644\u0627\u062c \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba elev <= 0<\/code> \u0633\u06cc\u0644 \u06a9\u0648 \u0633\u0645\u0646\u062f\u0631 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0635\u0631\u0641 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba \u0646\u0634\u0627\u0646 \u0632\u062f \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0648\u06c1 \u06a9\u0633\u06cc \u062f\u0648\u0633\u0631\u06d2 \u0633\u0645\u0646\u062f\u0631\u06cc \u0633\u06cc\u0644 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u06a9\u0646\u0627\u0631\u06d2 \u0633\u06d2 \u062c\u0691\u0627 \u06c1\u0648\u06d4 \u0639\u0627\u0645 \u06a9\u06cc\u0633 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
\u0645\u0631\u062d\u0644\u06c1 3: \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0646\u0642\u0634\u06c1 \u06a9\u06d2 \u0645\u0627\u062e\u0630 \u0633\u06d2 \u062c\u0648\u0691\u06cc\u06ba\u06d4<\/h2>\n
\u0627\u0628 \u06cc\u06c1 \u06a9\u0634\u0634 \u062b\u0642\u0644 \u06a9\u06d2 \u0645\u0631\u06a9\u0632 \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0648\u0642\u062a \u06c1\u06d2. \u0627\u06cc\u06a9 \u06af\u0631\u0688 \u0633\u0627\u0626\u0632 \u06a9\u06cc\u0646\u0648\u0633 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0631\u062c\u0633\u0679\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 canvas<\/code> \u0645\u0627\u062e\u0630 \u0648\u06c1 \u0645\u0633\u062a\u0637\u06cc\u0644 \u06c1\u06d2 \u062c\u0633 \u06a9\u06d2 \u0686\u0627\u0631 \u06a9\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0645\u0631\u062d\u0644\u06c1 1 \u0645\u06cc\u06ba \u0686\u06be\u06cc\u0646 \u0644\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4<\/p>\n
\n\n<\/code><\/pre>\n
mapboxgl.accessToken = \"YOUR_MAPBOX_TOKEN\";\n\nconst map = new mapboxgl.Map({\n  container: \"map\",\n  style: \"mapbox:\/\/styles\/mapbox\/satellite-streets-v12\",\n  center: [30.73, 46.48],\n  zoom: 11,\n});\n\nconst fc = document.getElementById(\"floodcanvas\");\nconst fctx = fc.getContext(\"2d\");\nlet fimg = null;\n\nfunction attachCanvas(grid) {\n  fc.width = grid.W;\n  fc.height = grid.H;\n  fimg = fctx.createImageData(grid.W, grid.H);\n\n  const c = grid.corners;\n  const coords = [[c.w, c.n], [c.e, c.n], [c.e, c.s], [c.w, c.s]];\n\n  if (map.getSource(\"flood\")) {\n    map.getSource(\"flood\").setCoordinates(coords);\n    return;\n  }\n  map.addSource(\"flood\", {\n    type: \"canvas\",\n    canvas: \"floodcanvas\",\n    coordinates: coords,\n    animate: true,\n  });\n  map.addLayer({\n    id: \"flood\",\n    type: \"raster\",\n    source: \"flood\",\n    paint: {\n      \"raster-opacity\": 0.94,\n      \"raster-resampling\": \"linear\",\n      \"raster-fade-duration\": 0,\n    },\n  });\n}\n<\/code><\/pre>\n
\u06cc\u06c1\u0627\u06ba \u062a\u06cc\u0646 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0627\u06c1\u0645 \u06c1\u06cc\u06ba:<\/p>\n
    \n
  • \n
    animate: true<\/code>    Mapbox GL \u06a9\u0648 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u0628\u0646\u0627\u0648\u0679 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06c1\u062f\u0627\u06cc\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0648\u0631\u0646\u06c1 \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u067e\u06c1\u0644\u06d2 \u0641\u0631\u06cc\u0645 \u067e\u0631 \u0631\u06a9 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<\/li>\n
  • \n
    \"raster-resampling\": \"linear\"<\/code>    \u062c\u0628 \u0635\u0627\u0631\u0641 \u06af\u0631\u0688 \u0631\u06cc\u0632\u0648\u0644\u0648\u0634\u0646 \u0633\u06d2 \u0622\u06af\u06d2 \u0632\u0648\u0645 \u0627\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0633\u06cc\u0644\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0628\u0644\u06cc\u0646\u0688 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0634\u06c1\u0631 \u06a9\u06cc \u062a\u0648\u0633\u06cc\u0639 \u0645\u06cc\u06ba 105 \u0645\u06cc\u0679\u0631 \u0633\u06cc\u0644\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u067e\u0627\u0646\u06cc \u0627\u0648\u0631 \u067e\u06a9\u0633\u0644 \u0622\u0631\u0679 \u06af\u06cc\u0645 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0641\u0631\u0642 \u06c1\u0648\u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n
  • \n
    \"raster-fade-duration\": 0<\/code>    \u0631\u0627\u0633\u0679\u0631 \u0679\u0627\u0626\u0644\u0632 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0627\u0633 \u0641\u06cc\u0688 \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 GL \u06a9\u0648 \u0622\u0641 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u0646\u06d2 \u0633\u06d2 \u062f\u06be\u0646\u062f\u0644\u0627 \u067e\u06be\u06cc\u0644 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<\/li>\n<\/ul>\n
    \u06a9\u06cc\u0646\u0648\u0633 \u06c1\u06d2\u06d4 display:none<\/code> \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0646\u0642\u0634\u06c1 \u0627\u0633\u06d2 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 DOM \u0645\u06cc\u06ba \u0646\u0638\u0631 \u0622\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n
    \u0627\u0628 \u0633\u06d2 \u062c\u0648 \u0686\u0627\u06c1\u0648 \u0644\u06a9\u06be\u0648\u06d4 fimg<\/code> \u0627\u0648\u0631 \u062f\u06be\u06a9\u0627 fctx.putImageData(fimg, 0, 0)<\/code> \u062c\u0628 \u062e\u0637\u06c1 \u0622\u0646 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0627\u0633\u06d2 \u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0644\u067e\u06cc\u0679 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u067e\u0686 \u0627\u0648\u0631 \u0648\u0627\u0642\u0641\u06cc\u062a \u067e\u0631 \u0635\u062d\u06cc\u062d \u062c\u06af\u06c1 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u06af\u0627\u06d4 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u067e\u06a9\u0633\u0644 \u0627\u0644\u0627\u0626\u0646\u0645\u0646\u0679 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0628\u062f\u0644 \u06af\u0626\u06d2\u06d4<\/p>\n
    \u0645\u0631\u062d\u0644\u06c1 4: \u0679\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0641\u0644\u0688 \u0633\u0645\u0648\u0644\u06cc\u0634\u0646<\/h2>\n
    \u0633\u0648\u0646\u0627\u0645\u06cc \u0644\u06c1\u0631 \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0633\u06d2 \u0646\u06cc\u0686\u06d2 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0633\u06cc\u0644\u0627\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2\u06d4 \u067e\u0627\u0646\u06cc \u0648\u06c1\u0627\u06ba \u067e\u06c1\u0646\u0686\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u06cc\u06c1 \u0633\u0645\u0646\u062f\u0631 \u0633\u06d2 \u0627\u0646\u062f\u0631 \u0622\u062a\u0627 \u06c1\u06d2\u060c \u0646\u0634\u06cc\u0628\u06cc \u0639\u0644\u0627\u0642\u0648\u06ba \u0633\u06d2 \u0628\u06c1\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062c\u06c1\u0627\u06ba \u0632\u0645\u06cc\u0646 \u067e\u0627\u0646\u06cc \u0633\u06d2 \u0627\u0648\u067e\u0631 \u0627\u0679\u06be\u062a\u06cc \u06c1\u06d2 \u0648\u06c1\u0627\u06ba \u0631\u06a9 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062e\u0648\u0627\u06c1 \u067e\u06c1\u0627\u0691\u06cc \u06a9\u06d2 \u062f\u0648\u0633\u0631\u06cc \u0637\u0631\u0641 \u0646\u0634\u06cc\u0628\u06cc \u0639\u0644\u0627\u0642\u06d2 \u06c1\u0648\u06ba\u06d4 \u06cc\u06c1 \u06a9\u0646\u06cc\u06a9\u0679\u06cc\u0648\u06cc\u0679\u06cc \u06a9\u0627 \u0645\u0633\u0626\u0644\u06c1 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0686\u0648\u0691\u0627\u0626\u06cc \u067e\u06c1\u0644\u06cc \u062a\u0644\u0627\u0634 \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0648\u0644 \u06c1\u06d2\u06d4<\/p>\n
    \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0641\u0627\u0635\u0644\u06d2 \u06a9\u0627 \u0645\u06cc\u062f\u0627\u0646. \u06c1\u0631 \u0633\u06cc\u0644 \u0633\u0627\u062d\u0644 \u0633\u06d2 \u06a9\u062a\u0646\u0627 \u062f\u0648\u0631 \u06c1\u06d2\u061f \u0642\u0637\u0627\u0631 \u06a9\u0648 \u0632\u0645\u06cc\u0646 \u0633\u06d2 \u0645\u0644\u062d\u0642 \u062a\u0645\u0627\u0645 \u0633\u0645\u0646\u062f\u0631\u06cc \u062e\u0644\u06cc\u0648\u06ba \u0645\u06cc\u06ba \u0644\u06af\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u0633\u0645\u0646\u062f\u0631 \u0645\u06cc\u06ba \u067e\u06be\u06cc\u0644\u0627\u0626\u06cc\u06ba\u06d4 \u0632\u0645\u06cc\u0646 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0646\u062f\u0631\u0648\u0646 \u0645\u0644\u06a9 \u0622\u0646\u06d2 \u0627\u0648\u0631 \u067e\u06be\u06cc\u0644\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0644\u06c1\u0631\u0648\u06ba \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
    function seaDistance(grid, sea) {\n  const { W, H, cellM } = grid;\n  const N = W * H;\n  const dist = new Float32Array(N).fill(-1);\n  const q = new Int32Array(N);\n  let head = 0, tail = 0;\n\n  \/\/ seed: sea cells that touch land\n  for (let i = 0; i < N; i++) {\n    if (!sea[i]) continue;\n    const x = i % W, y = (i \/ W) | 0;\n    const touchesLand =\n      (x > 0 && !sea[i - 1]) || (x < W - 1 && !sea[i + 1]) ||\n      (y > 0 && !sea[i - W]) || (y < H - 1 && !sea[i + W]);\n    if (touchesLand) { dist[i] = 0; q[tail++] = i; }\n  }\n\n  \/\/ expand\n  while (head < tail) {\n    const c = q[head++];\n    const cx = c % W, cy = (c \/ W) | 0;\n    for (let dy = -1; dy <= 1; dy++) {\n      for (let dx = -1; dx <= 1; dx++) {\n        if (!dx && !dy) continue;\n        const nx = cx + dx, ny = cy + dy;\n        if (nx < 0 || ny < 0 || nx >= W || ny >= H) continue;\n        const n = ny * W + nx;\n        if (!sea[n] || dist[n] >= 0) continue;\n        dist[n] = dist[c] + (dx && dy ? cellM * Math.SQRT2 : cellM);\n        q[tail++] = n;\n      }\n    }\n  }\n  return dist;\n}\n<\/code><\/pre>\n
    \u0633\u06cc\u0644\u0627\u0628 \u062f\u0648\u0633\u0631\u06cc \u0633\u0645\u062a \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u062a\u0644\u0627\u0634 \u06c1\u06d2\u060c \u0627\u06cc\u06a9 \u0627\u0636\u0627\u0641\u06cc \u0627\u0635\u0648\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be\u06d4 \u062e\u0644\u06cc\u0648\u06ba \u062a\u06a9 \u0635\u0631\u0641 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u06a9\u06cc \u062c\u0627\u0633\u06a9\u062a\u06cc \u06c1\u06d2 \u062c\u0628 \u067e\u0627\u0646\u06cc \u06a9\u06cc \u0633\u0637\u062d \u0632\u0645\u06cc\u0646 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u0648\u06d4 waveH<\/code> \u0645\u06cc\u0679\u0631 \u0645\u06cc\u06ba \u0633\u0627\u062d\u0644\u06cc \u0644\u06c1\u0631 \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06c1\u06d2\u06d4 \u067e\u0627\u0646\u06cc \u0627\u0646\u062f\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u0628\u0691\u06be\u062a\u06d2 \u06c1\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u06be\u0648 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0644\u06a9\u06cc\u0631\u06cc \u0679\u0648\u0679\u0646\u0627 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0641\u06cc \u06c1\u06d2\u06d4<\/p>\n
    function floodFill(grid, elev, sea, waveH) {\n  const { W, H, cellM } = grid;\n  const N = W * H;\n  const depth = new Float32Array(N);       \/\/ metres of water above ground\n  const reach = new Float32Array(N).fill(-1); \/\/ distance from shore, metres\n  const q = new Int32Array(N);\n  let head = 0, tail = 0;\n\n  for (let i = 0; i < N; i++) {\n    if (!sea[i]) continue;\n    const x = i % W, y = (i \/ W) | 0;\n    const nb = [i - 1, i + 1, i - W, i + W];\n    for (const n of nb) {\n      if (n < 0 || n >= N || sea[n] || reach[n] >= 0) continue;\n      if ((n === i - 1 && x === 0) || (n === i + 1 && x === W - 1)) continue;\n      reach[n] = 0;\n      q[tail++] = n;\n    }\n  }\n\n  const decayPerM = waveH \/ 12000; \/\/ loses its height over ~12 km\n\n  while (head < tail) {\n    const c = q[head++];\n    const level = waveH - reach[c] * decayPerM;\n    const d = level - elev[c];\n    if (d <= 0) continue;               \/\/ ground is above the water here: stop\n    depth[c] = d;\n\n    const cx = c % W, cy = (c \/ W) | 0;\n    for (let dy = -1; dy <= 1; dy++) {\n      for (let dx = -1; dx <= 1; dx++) {\n        if (!dx && !dy) continue;\n        const nx = cx + dx, ny = cy + dy;\n        if (nx < 0 || ny < 0 || nx >= W || ny >= H) continue;\n        const n = ny * W + nx;\n        if (sea[n] || reach[n] >= 0) continue;\n        reach[n] = reach[c] + (dx && dy ? cellM * Math.SQRT2 : cellM);\n        q[tail++] = n;\n      }\n    }\n  }\n  return { depth, reach };\n}\n<\/code><\/pre>\n
    \u06c1\u0631 \u0645\u0646\u0638\u0631 \u0646\u0627\u0645\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0686\u0644\u0627\u0626\u06cc\u06ba\u060c \u0641\u06cc \u0641\u0631\u06cc\u0645 \u0646\u06c1\u06cc\u06ba\u06d4 700\u00d7500 \u06af\u0631\u0688 \u067e\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0686\u0646\u062f \u0645\u0644\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u0644\u06af\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0628\u062c\u0644\u06cc \u06a9\u06cc \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u060c depth<\/code> \u06c1\u0631 \u0633\u06cc\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 reach<\/code> \u0622\u067e \u0627\u0646\u062f\u0631\u0648\u0646 \u0645\u0644\u06a9 \u06a9\u062a\u0646\u06cc \u062f\u0648\u0631 \u06c1\u06cc\u06ba \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u0645\u0627\u0645 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u06d2 \u062a\u0642\u0627\u0636\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
    \u0628\u06be\u0631\u0646\u0627 \u0627\u0635\u0644 \u0628\u0644\u0646\u062f\u06cc \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062f\u0631\u06cc\u0627 \u06a9\u06cc \u0648\u0627\u062f\u06cc \u0645\u06cc\u06ba \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u0634\u062a\u06d2 \u067e\u0631 \u0631\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u062e\u0644\u06cc\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u06a9\u0648 \u0627\u0633 \u0633\u06d2 \u0636\u0631\u0628 \u062f\u06cc\u06ba: cellM\u00b2<\/code> \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u067e\u06cc\u0686\u06be\u06d2 \u06a9\u06be\u0691\u06d2 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0631\u0628\u0639 \u06a9\u0644\u0648\u0645\u06cc\u0679\u0631 \u0645\u06cc\u06ba \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u0639\u0644\u0627\u0642\u06c1 \u0645\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
    \"\u0645\u0635\u0646\u0648\u0639\u06cc<\/p>\n
    \u0645\u0631\u062d\u0644\u06c1 5: \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06a9\u0633\u0644\u0632 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n
    \u0641\u0631\u06cc\u0645 \u0644\u0648\u067e\u0633 \u0627\u06cc\u06a9 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: \u06c1\u0631 \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u0632\u0645\u06cc\u0646\u06cc \u0633\u06cc\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u067e\u0627\u0646\u06cc \u0627\u0628\u06be\u06cc \u0622\u06cc\u0627 \u06c1\u06d2 \u0627\u0648\u0631\u060c \u0627\u06af\u0631 \u06c1\u06d2\u060c \u062a\u0648 \u067e\u0627\u0646\u06cc \u06a9\u0627 \u0631\u0646\u06af \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n
    \"\u0622\u0626\u06d2 \u06c1\u0648\u0626\u06d2\" \u062e\u0644\u06cc\u0648\u06ba \u06a9\u0627 \u0645\u0648\u0627\u0632\u0646\u06c1\u06d4 reach<\/code> \u0633\u0627\u0645\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0645\u0642\u0627\u0645 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba F<\/code> \u06cc\u06c1 \u0648\u0642\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u0641\u06cc \u0633\u06cc\u0644 \u0634\u0648\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 reach<\/code> \u062a\u0648 \u0633\u0627\u0645\u0646\u06d2 \u0648\u0627\u0644\u0627 \u067e\u0631\u0641\u06cc\u06a9\u0679 \u0633\u0645\u0648\u0686 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u0627\u0646\u06cc \u067e\u0627\u0646\u06cc \u06a9\u06cc \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
    let t0 = null;\nconst T_LANDFALL = 3.9;   \/\/ seconds until the wave reaches the shore\nconst T_FULL = 10.9;      \/\/ seconds until it reaches its maximum extent\n\nfunction ease(k) {\n  return k <= 0 ? 0 : k >= 1 ? 1 : 1 - Math.pow(1 - k, 2.2);\n}\n\nfunction frame(now) {\n  if (t0 === null) t0 = now;\n  const t = (now - t0) \/ 1000;\n  const d = fimg.data;\n  const { W, H } = grid;\n\n  \/\/ how far inland the front has got, in metres\n  const F = t < T_LANDFALL\n    ? -1e9\n    : maxReach * ease((t - T_LANDFALL) \/ (T_FULL - T_LANDFALL));\n\n  for (let i = 0; i < W * H; i++) {\n    const o = i * 4;\n    if (sea[i] || depth[i] <= 0) { d[o + 3] = 0; continue; }\n\n    const arrival = reach[i] + noise[i] * 180;   \/\/ \u00b190 m of jitter\n    if (arrival > F) { d[o + 3] = 0; continue; }\n\n    const age = (F - arrival) \/ 150;             \/\/ how long the cell has been under\n    const dp = depth[i];\n\n    \/\/ base colour: shallow is lighter, deep is darker\n    let r = 40 + Math.max(0, 60 - dp * 10);\n    let g = 70 + Math.max(0, 50 - dp * 8);\n    let b = 95 + Math.max(0, 40 - dp * 6);\n    let a = dp < 0.5 ? 215 + dp * 60 : 245;\n\n    \/\/ the leading edge is foam: push toward white for the first moments\n    if (age < 1.4) {\n      const k = Math.pow(1 - age \/ 1.4, 2) * 0.8;\n      r += (240 - r) * k; g += (246 - g) * k; b += (246 - b) * k;\n    }\n\n    d[o] = r; d[o + 1] = g; d[o + 2] = b; d[o + 3] = a;\n  }\n\n  fctx.putImageData(fimg, 0, 0);\n  if (t < T_FULL + 3) requestAnimationFrame(frame);\n}\n\nrequestAnimationFrame(frame);\n<\/code><\/pre>\n
    noise<\/code>    \u06c1\u06d2 Float32Array<\/code> \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0642\u062f\u0631 [-0.5, 0.5]<\/code> \u0641\u06cc \u0631\u0646 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4 maxReach<\/code> \u0633\u0628 \u0633\u06d2 \u0628\u0691\u0627 reach<\/code> \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u062e\u0644\u06cc\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0642\u062f\u0631\u06cc\u06ba\u06d4<\/p>\n
    \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u06d2 \u062f\u0648 \u0646\u06a9\u0627\u062a \u06c1\u06cc\u06ba: \u0627\u06cc\u06a9 700\u00d7500 \u06af\u0631\u0688 350,000 \u0633\u06cc\u0644\u0632 \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u0644\u0648\u067e \u0645\u06cc\u0631\u06d2 \u0644\u06cc\u067e \u0679\u0627\u067e \u067e\u0631 60fps \u0627\u0648\u0631 \u062f\u0631\u0645\u06cc\u0627\u0646\u06d2 \u0641\u0627\u0635\u0644\u06d2 \u0648\u0627\u0644\u06d2 \u0641\u0648\u0646 \u067e\u0631 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 30fps \u067e\u0631 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0645\u0632\u06cc\u062f \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u062a\u0648\u060c \u0635\u0631\u0641 \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u0632\u0645\u06cc\u0646\u06cc \u062e\u0644\u06cc\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u06c1\u0631\u0627\u0626\u06cc\u06ba (\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0627\u0634\u0627\u0631\u06cc\u06c1 \u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c floodFill<\/code>) \u067e\u0648\u0631\u06d2 \u06af\u0631\u0688 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u06d4 \u0633\u0627\u062d\u0644\u06cc \u0634\u06c1\u0631\u0648\u06ba \u0645\u06cc\u06ba\u060c \u06cc\u06c1 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u062e\u0644\u06cc\u0648\u06ba \u06a9\u06d2 \u0627\u06cc\u06a9 \u0686\u0648\u062a\u06be\u0627\u0626\u06cc \u06a9\u06d2 \u0628\u0631\u0627\u0628\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0648\u0631 \u067e\u0631 \u0627\u0648\u0631 \u067e\u0631 fimg<\/code> \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646\u06d4 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u0627 createImageData<\/code> \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0648\u06c1\u06cc \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u06cc \u0637\u0631\u0641 \u067e\u0631\u0648\u0641\u0627\u0626\u0644\u0631 \u067e\u06c1\u0644\u06d2 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
    \u0627\u06af\u0631 \u0622\u067e \u06cc\u06c1\u0627\u06ba \u0631\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648\u060c \u062e\u0637\u0648\u06ba \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0622\u06af\u0627\u06c1\u06cc \u06a9\u0627 \u0633\u0645\u0648\u0644\u06cc\u0634\u0646 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u0628\u0627\u0642\u06cc \u0627\u0633\u06d2 \u062e\u0627\u06a9\u06c1 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06cc \u0637\u0631\u062d \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
    \u0645\u0631\u062d\u0644\u06c1 6: \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0645\u067e\u0648\u0632\u0679\u0646\u06af \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06cc\u0688\u06cc\u0648 \u0679\u06cc\u06a9\u0633\u0686\u0631 \u06a9\u06cc \u062a\u06c1\u06c1 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4<\/h2>\n
    \u0641\u0644\u06cc\u0679 \u0631\u0646\u06af \u0688\u0627\u06cc\u0627\u06af\u0631\u0627\u0645 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0635\u0644\u06cc \u067e\u0627\u0646\u06cc \u0645\u06cc\u06ba \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631 \u0633\u0627\u062e\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0648 \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0633\u0628 \u0633\u06d2 \u0633\u0633\u062a\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u0639\u0644\u0627\u0642\u06d2 \u067e\u0631 \u062d\u0642\u06cc\u0642\u06cc \u067e\u0627\u0646\u06cc \u06a9\u06cc \u0644\u0648\u067e\u0646\u06af \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0627\u0633\u0679 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \"\u0635\u0631\u0641 \u0633\u06cc\u0644\u0627\u0628 \u0632\u062f\u06c1 \u0639\u0644\u0627\u0642\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\" \u06a9\u0648\u0626\u06cc \u062f\u0648 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0645\u067e\u0648\u0632\u0679 \u0645\u0648\u0688\u0632 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n
      \n
    • \n
      source-atop<\/code>    \u0627\u06cc\u06a9 \u0646\u0626\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0635\u0631\u0641 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u06c1\u062f\u0641 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u067e\u06a9\u0633\u0644\u0632 \u06c1\u0648\u06ba\u06d4 \u0633\u06cc\u0644\u0627\u0628 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 source-atop<\/code> \u0635\u0631\u0641 \u067e\u0627\u0646\u06cc \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u062e\u0634\u06a9 \u0632\u0645\u06cc\u0646 \u0627\u0633\u06cc \u0637\u0631\u062d \u0631\u06c1\u062a\u06cc \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u062e\u0634\u06a9 \u0632\u0645\u06cc\u0646 \u0634\u0641\u0627\u0641 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n
    • \n
      destination-in<\/code>    \u06c1\u062f\u0641 \u0635\u0631\u0641 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u062c\u0628 \u0646\u0626\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u06cc\u06ba \u067e\u06a9\u0633\u0644\u0632 \u06c1\u0648\u06ba\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0641\u0631 \u067e\u0631 \u0633\u06cc\u0627\u06c1 \u0627\u0648\u0631 \u0633\u0641\u06cc\u062f \u0645\u0627\u0633\u06a9 \u0628\u0646\u0627\u0626\u06cc\u06ba: destination-in<\/code>\u0628\u0641\u0631 \u06a9\u0648 \u0645\u0627\u0633\u06a9 \u06a9\u06cc \u0634\u06a9\u0644 \u0645\u06cc\u06ba \u06a9\u0627\u0679\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n
      \u0686\u06be\u067e\u06cc \u06c1\u0648\u0626\u06cc \u0686\u06cc\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u061f <\/code> (\u062e\u0627\u0645\u0648\u0634\u060c \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0648\u0631 playsInline<\/code>. \u0622\u067e \u06a9\u0648 \u062a\u06cc\u0646\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0645\u0648\u0628\u0627\u0626\u0644 \u0633\u0641\u0627\u0631\u06cc \u0622\u0679\u0648 \u067e\u0644\u06d2 \u0633\u06d2 \u0627\u0646\u06a9\u0627\u0631 \u06a9\u0631 \u062f\u06d2 \u06af\u0627\u06d4 \u0627\u06cc\u06a9 \u06af\u0631\u0688 \u0633\u0627\u0626\u0632 \u06a9\u0627 \u0633\u06a9\u0631\u06cc\u0686 \u06a9\u06cc\u0646\u0648\u0633:<\/p>\n
      const vid = document.createElement(\"video\");\nvid.muted = true; vid.loop = true; vid.playsInline = true;\nvid.setAttribute(\"muted\", \"\"); vid.setAttribute(\"playsinline\", \"\");\nvid.src = \"https:\/\/www.freecodecamp.org\/fx\/water.webm\";\nvid.style.cssText = \"position:absolute;width:1px;height:1px;opacity:0;pointer-events:none\";\ndocument.body.appendChild(vid);\nvid.load();\n\nconst buf = document.createElement(\"canvas\");\nbuf.width = grid.W; buf.height = grid.H;\nconst bctx = buf.getContext(\"2d\");\n\nfunction drawWaterTexture(mud) {\n  if (vid.readyState < 2) return;         \/\/ not enough data yet: skip, don't block\n  if (vid.paused) vid.play().catch(() => {});\n\n  \/\/ 1. video into the scratch buffer, stretched to the grid\n  bctx.globalCompositeOperation = \"source-over\";\n  bctx.clearRect(0, 0, grid.W, grid.H);\n  bctx.drawImage(vid, 0, 0, grid.W, grid.H);\n\n  \/\/ 2. tint it, only where the video is (everywhere, at this point)\n  bctx.globalCompositeOperation = \"source-atop\";\n  bctx.globalAlpha = 0.5 + 0.38 * mud;\n  bctx.fillStyle = `rgb(${28 + 108 * mud | 0}, ${112 - 10 * mud | 0}, ${178 - 126 * mud | 0})`;\n  bctx.fillRect(0, 0, grid.W, grid.H);\n  bctx.globalAlpha = 1;\n\n  \/\/ 3. crop the buffer to land cells, so the open sea keeps its own colour\n  bctx.globalCompositeOperation = \"destination-in\";\n  bctx.drawImage(landMask, 0, 0);\n\n  \/\/ 4. onto the flood canvas, only where there's already water\n  fctx.save();\n  fctx.globalCompositeOperation = \"source-atop\";\n  fctx.globalAlpha = 0.8;\n  fctx.drawImage(buf, 0, 0);\n  fctx.restore();\n}\n<\/code><\/pre>\n
      \u0627\u06af\u0644\u06cc \u0628\u0627\u0631 \u0645\u062c\u06be\u06d2 \u0627\u0633 \u067e\u0631 \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 fctx.putImageData(fimg, 0, 0)<\/code> \u0641\u0631\u06cc\u0645 \u0644\u0648\u067e \u0645\u06cc\u06ba. \u0645\u0631\u062d\u0644\u06c1 4 \u0648\u06c1 \u0645\u0631\u062d\u0644\u06c1 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u0622\u067e \u0646\u062a\u0627\u0626\u062c \u062d\u0627\u0635\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u062c\u06c1\u0627\u06ba \u067e\u0627\u0646\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u0648\u06c1\u0627\u06ba \u0633\u06cc\u0644\u0627\u0628 \u06a9\u0627 \u06a9\u06cc\u0646\u0648\u0633 \u0634\u0641\u0627\u0641 \u06c1\u06d2\u06d4 source-atop<\/code> \u06cc\u06c1 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u0641\u06cc \u067e\u06a9\u0633\u0644 \u0622\u067e\u0631\u06cc\u0634\u0646 \u06a9\u06d2\u060c BFS \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u06c1 \u062a\u0645\u0627\u0645 \u062e\u0644\u06cc\u062c\u0648\u06ba \u0627\u0648\u0631 \u0648\u0627\u062f\u06cc\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0633\u0627\u062e\u062a \u06a9\u0648 \u0628\u0627\u0644\u06a9\u0644 \u0633\u06cc\u0644\u0627\u0628\u06cc \u0634\u06a9\u0644 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      landMask<\/code>    \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u062c\u0648 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0641\u06cc \u0631\u0646 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u0641\u06cc\u062f sea[i]<\/code> \u062f\u0648\u0633\u0631\u06cc \u062c\u06af\u06c1 \u06cc\u06c1 \u063a\u0644\u0637 \u0627\u0648\u0631 \u0634\u0641\u0627\u0641 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u0633\u0627\u062e\u062a \u0633\u0645\u0646\u062f\u0631 \u06a9\u06d2 \u0627\u06cc\u06a9 \u0628\u0691\u06d2 \u067e\u06be\u06cc\u0644\u0627\u0624 \u06a9\u0648 \u0688\u06be\u0627\u0646\u067e \u0644\u06d2 \u06af\u06cc \u0627\u0648\u0631 \u067e\u0648\u0631\u06cc \u062e\u0644\u06cc\u062c \u0633\u06cc\u0644\u0627\u0628 \u06a9\u0627 \u0631\u0646\u06af \u0628\u062f\u0644 \u062f\u06d2 \u06af\u06cc\u06d4 \u0627\u0646 \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u0633 \u0648\u0631\u0698\u0646 \u06a9\u0648 \u062a\u0642\u0631\u06cc\u0628\u0627 \u0627\u06cc\u06a9 \u06af\u06be\u0646\u0679\u06c1 \u0628\u0627\u06c1\u0631 \u062a\u06be\u0627 \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633\u06d2 \u062f\u06cc\u06a9\u06be\u0627\u06d4<\/p>\n
      \"\u0627\u0648\u0688\u06cc\u0633\u0627<\/p>\n
      \u06a9\u06c1 mud<\/code> \u067e\u06cc\u0631\u0627\u0645\u06cc\u0679\u0631 0 \u0633\u06d2 1 \u062a\u06a9 \u06a9\u0627 \u0679\u0627\u0626\u0645 \u0631\u06cc\u0645\u067e \u06c1\u06d2\u06d4 \u0633\u0648\u0646\u0627\u0645\u06cc \u06a9\u0627 \u067e\u0627\u0646\u06cc \u0633\u0645\u0646\u062f\u0631\u06cc \u067e\u0627\u0646\u06cc \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0622\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0632\u0645\u06cc\u0646 \u067e\u0631 \u062a\u0644\u0686\u06be\u0679 \u06a9\u0648 \u062c\u0630\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06af\u06c1\u0631\u0627 \u0628\u06be\u0648\u0631\u0627 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u0627\u0633\u06d2 \u0644\u06cc\u0646\u0688\u0646\u06af \u06a9\u06d2 \u0686\u0646\u062f \u0633\u06cc\u06a9\u0646\u0688 \u0628\u0639\u062f \u0633\u0645\u0646\u062f\u0631\u06cc \u0646\u06cc\u0644\u06d2 \u0631\u0646\u06af \u0633\u06d2 \u0645\u0679\u06cc \u06a9\u06d2 \u0628\u06be\u0648\u0631\u06d2 \u0631\u0646\u06af \u062a\u06a9 \u0627\u0646\u0679\u0631\u067e\u0648\u0644 \u06a9\u0631\u06a9\u06d2 \u0645\u0641\u062a \u062d\u0627\u0635\u0644 \u06a9\u0631\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
      \u062c\u0628 \u0645\u06cc\u06ba \u0646\u06d2 \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u0627\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062a\u0648 \u0645\u06cc\u06ba \u0646\u06d2 \u062e\u0648\u062f \u06c1\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0628\u06be\u0648\u0631\u0627 \u06af\u0631\u06cc\u0688 \u067e\u06a9\u0627\u06cc\u0627 \u0627\u0648\u0631 \u067e\u06c1\u0644\u06d2 \u062a\u0648 \u0645\u06cc\u06ba \u067e\u0627\u0646\u06cc \u06a9\u0648 \u0646\u06cc\u0644\u0627 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u062a\u06be\u0627 \u0686\u0627\u06c1\u06d2 \u0645\u06cc\u06ba \u0646\u06d2 \u06a9\u062a\u0646\u06d2 \u06c1\u06cc \u0631\u0646\u06af \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u06d2 \u06c1\u0648\u06ba\u06d4 \u0633\u0648\u0631\u0633 \u0641\u0648\u0679\u06cc\u062c \u06a9\u0648 \u063a\u06cc\u0631 \u062c\u0627\u0646\u0628\u062f\u0627\u0631 \u0631\u06a9\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u0648\u0688 \u0645\u06cc\u06ba \u0631\u0646\u06af \u062f\u06cc\u06ba\u06d4<\/p>\n
      \u0627\u06cc\u06a9 \u06c1\u06cc destination-in<\/code> \u06cc\u06c1 \u0686\u0627\u0644 \u06af\u06c1\u0631\u0627\u0626\u06cc \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u0633\u06cc\u0627\u06c1 \u0631\u0646\u06af \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 (\u0627\u0644\u0641\u0627 \u06a9\u06d2 \u0645\u062a\u0646\u0627\u0633\u0628 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0645\u0627\u0633\u06a9)\u06d4 depth[i]<\/code>\u06af\u06c1\u0631\u06d2 \u0631\u0646\u06af \u0633\u06d2 \u0628\u06be\u0631\u0627 \u06c1\u0648\u0627) \u0627\u0648\u0631 \u0622\u06af\u06d2 \u0628\u0691\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0641\u0648\u0645 \u0628\u06cc\u0646\u0688 (\u06af\u0627\u0648\u0633\u06cc \u06a9\u06d2 \u0627\u0644\u0641\u0627 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0645\u0627\u0633\u06a9)\u06d4 reach[i] - F<\/code>\u0628\u0644\u0628\u0644\u0648\u06ba \u06a9\u0648 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0627\u0633 \u0633\u06d2 \u0628\u06be\u0631\u06cc \u06c1\u0648\u0626\u06cc \u06c1\u06d2)\u06d4 \u06c1\u0631 \u0627\u06cc\u06a9 \u0645\u06cc\u06ba \u0686\u0646\u062f \u0644\u0627\u0626\u0646\u06cc\u06ba \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06c1\u0631 \u0627\u06cc\u06a9 \u067e\u0627\u0646\u06cc \u06a9\u0648 \u062a\u06be\u0648\u0691\u0627 \u0632\u06cc\u0627\u062f\u06c1 \u062d\u062c\u0645 \u0627\u0648\u0631 \u062a\u06be\u0648\u0691\u0627 \u06a9\u0645 \u0631\u0646\u06af \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 7: \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u0645\u0646\u0638\u0631 \u0645\u06cc\u06ba \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n
      \u0627\u0648\u067e\u0631 \u0633\u06d2 \u0646\u06cc\u0686\u06d2 \u06a9\u0627 \u0646\u0642\u0634\u06c1 \u0627\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06c1\u06d2\u06d4 \u062c\u0628 \u0622\u067e \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u062c\u06be\u06a9\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0648\u06c1\u06cc \u067e\u06a9\u0633\u0644\u0632 \u062c\u06af\u06c1 \u0628\u0646 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0633\u06cc\u0644\u0627\u0628 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0645\u062e\u062a\u0635\u0631\u0627\u064b \u0645\u062e\u062a\u0635\u0631 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0632\u0645\u06cc\u0646 \u067e\u0631 \u0644\u067e\u0679\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0627 \u0648\u0627\u062d\u062f \u06a9\u0627\u0645 \u06a9\u06cc\u0645\u0631\u06c1 \u06a9\u0648 \u06a9\u0633\u06cc \u0642\u0627\u0628\u0644 \u062f\u06cc\u062f \u0686\u06cc\u0632 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0633\u0648\u0646\u0627\u0645\u06cc \u06a9\u06cc \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba\u060c \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u0633\u06cc \u0634\u06c1\u0631 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u0633\u0627\u062d\u0644 \u067e\u0631 \u06a9\u06be\u0691\u06d2 \u06c1\u0648\u0646\u0627\u060c \u0633\u0645\u0646\u062f\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u062f\u06cc\u06a9\u06be\u0646\u0627 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0642\u0631\u06cc\u0628 \u0622\u062a\u06d2 \u062f\u06cc\u06a9\u06be\u0646\u0627\u06d4 \"\u0642\u0631\u06cc\u0628 \u0634\u06c1\u0631\" \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0645\u0631\u06a9\u0632 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u062a\u0631\u06cc\u0646 \u0633\u0627\u062d\u0644\u06cc \u0633\u06cc\u0644 \u06c1\u06d2\u06d4 \"\u0633\u0645\u0646\u062f\u0631 \u0633\u06d2 \u0628\u0627\u06c1\u0631\" \u0627\u0633 \u0645\u0642\u0627\u0645 \u0633\u06d2 \u0642\u0631\u06cc\u0628\u06cc \u0633\u0645\u0646\u062f\u0631\u06cc \u062e\u0644\u06cc\u0648\u06ba \u06a9\u06cc \u0627\u0648\u0633\u0637 \u0633\u0645\u062a \u06c1\u06d2\u06d4 \u067e\u0648\u0631\u06d2 \u0633\u0627\u062d\u0644\u06cc \u067e\u0679\u06cc \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0634\u0645\u0627\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0627\u06cc\u06a9 \u062e\u0645\u06cc\u062f\u06c1 \u062e\u0644\u06cc\u062c \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u063a\u0644\u0637 \u0627\u0641\u0642 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0633\u0628\u0628 \u0628\u0646\u06d2 \u06af\u06cc\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633\u06d2 \u0627\u0648\u0688\u06cc\u0633\u0627 \u0645\u06cc\u06ba \u067e\u0627\u06cc\u0627\u060c \u062c\u06c1\u0627\u06ba \u0634\u06c1\u0631 \u0628\u06be\u0631 \u0645\u06cc\u06ba \u0627\u0648\u0633\u0637 \u0646\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u06c1\u0648\u0627\u0626\u06cc \u0627\u0688\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u062e\u0627\u0644\u06cc \u0645\u06cc\u062f\u0627\u0646 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u06cc\u0627\u06d4<\/p>\n
      function shoreCamera(grid, sea, center) {\n  const { W, H, z, x0, y0, cellM } = grid;\n\n  \/\/ 1. nearest coastline cell to the map centre\n  let best = -1, bestD = Infinity;\n  for (let i = 0; i < W * H; i++) {\n    if (!sea[i]) continue;\n    const x = i % W, y = (i \/ W) | 0;\n    const coast = (x > 0 && !sea[i - 1]) || (x < W - 1 && !sea[i + 1]) ||\n                  (y > 0 && !sea[i - W]) || (y < H - 1 && !sea[i + W]);\n    if (!coast) continue;\n    const lng = x2lon(x0 + (x + 0.5) \/ 256, z), lat = y2lat(y0 + (y + 0.5) \/ 256, z);\n    const d = (lng - center.lng) ** 2 + (lat - center.lat) ** 2;\n    if (d < bestD) { bestD = d; best = i; }\n  }\n  const sx = best % W, sy = (best \/ W) | 0;\n\n  \/\/ 2. local seaward direction: average offset to sea cells within ~2.5 km\n  const r = Math.max(6, Math.round(2500 \/ cellM));\n  let vx = 0, vy = 0;\n  for (let dy = -r; dy <= r; dy++) {\n    for (let dx = -r; dx <= r; dx++) {\n      const x = sx + dx, y = sy + dy;\n      if (x < 0 || y < 0 || x >= W || y >= H || !sea[y * W + x]) continue;\n      const len = Math.hypot(dx, dy);\n      if (len < 1 || len > r) continue;\n      vx += dx \/ len; vy += dy \/ len;\n    }\n  }\n  const len = Math.hypot(vx, vy) || 1;\n  const east = vx \/ len, north = -vy \/ len;   \/\/ grid y grows southward\n\n  const shoreLng = x2lon(x0 + (sx + 0.5) \/ 256, z);\n  const shoreLat = y2lat(y0 + (sy + 0.5) \/ 256, z);\n  const mLng = 111320 * Math.cos(shoreLat * Math.PI \/ 180), mLat = 111320;\n\n  return {\n    \/\/ stand 900 m inland of the shore...\n    center: [shoreLng - east * 900 \/ mLng, shoreLat - north * 900 \/ mLat],\n    \/\/ ...facing the sea\n    bearing: Math.atan2(east, north) * 180 \/ Math.PI,\n  };\n}\n<\/code><\/pre>\n
      \u067e\u06be\u0631 2 \u06c1\u06cc\u06ba\u06d4 easeTo<\/code> \u06a9\u0627\u0644 \u06a9\u0631\u06cc\u06ba: \u0627\u062a\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u063a\u0648\u0637\u06c1 \u0644\u06af\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0646\u062a\u0627\u0626\u062c \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u06c1\u0679 \u062c\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n
      const before = {\n  center: map.getCenter(), zoom: map.getZoom(),\n  pitch: map.getPitch(), bearing: map.getBearing(),\n};\nconst cam = shoreCamera(grid, sea, map.getCenter());\n\nmap.easeTo({\n  center: cam.center,\n  zoom: Math.min(13.6, before.zoom + 2.8),\n  pitch: 72,\n  bearing: cam.bearing,\n  duration: 1200,\n});\n\nsetTimeout(() => map.easeTo({ ...before, duration: 2600 }), (T_LANDFALL + 3.2) * 1000);\n<\/code><\/pre>\n
      \u06cc\u06c1 \u062f\u0648 \u06a9\u0627\u0644\u06cc\u06ba \u06a9\u06cc\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba: \u06a9\u06cc\u0645\u0631\u0627 \u0627\u0648\u0688\u06cc\u0633\u0627 \u06a9\u06d2 \u0633\u0627\u062d\u0644 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0627\u06cc\u06a9 \u06a9\u06be\u0691\u06cc \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u06af\u0631\u0627 \u0627\u0648\u0631 \u062e\u0644\u06cc\u062c \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u06cc\u0627\u06d4 \u0633\u0645\u0646\u062f\u0631 \u067e\u06c1\u0644\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u06c1\u0679\u062a\u0627 \u06c1\u06d2\u060c \u0631\u06cc\u062a \u06a9\u06cc \u0627\u06cc\u06a9 \u0686\u0648\u0691\u06cc \u067e\u0679\u06cc \u06a9\u0648 \u0628\u06d2 \u0646\u0642\u0627\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u06be\u0631 \u0633\u0627\u0645\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0633\u0627\u062d\u0644 \u0633\u0645\u0646\u062f\u0631 \u0627\u0648\u0631 \u0628\u0646\u062f\u0631\u06af\u0627\u06c1 \u06a9\u06cc \u0637\u0631\u0641 \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0648\u06c1 \u0686\u06cc\u0632 \u062c\u0648 \u062d\u0631\u06a9\u062a \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0648\u06c1 \u0627\u0633\u0679\u06cc\u062c 3 \u0633\u06d2 \u0633\u06cc\u0644\u0627\u0628 \u06a9\u06cc\u0646\u0648\u0633 \u0633\u06d2 \u0645\u0644\u062a\u06cc \u062c\u0644\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0648 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u067e\u06cc\u0634 \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0632\u0645\u06cc\u0646 \u067e\u0631 \u0644\u067e\u0679\u06cc \u06c1\u0648\u0626\u06cc \u06c1\u06d2\u06d4<\/p>\n
      \"\u062d\u0631\u06a9\u062a<\/p>\n
      \u0646\u0648\u0679 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0641\u0631\u06cc\u0645 \u0644\u0648\u067e \u0645\u06cc\u06ba \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u06a9\u0648 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06cc \u0646\u0642\u0644 \u0648 \u062d\u0631\u06a9\u062a \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0639\u0644\u0645 \u06cc\u0627 \u067e\u0631\u0648\u0627\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0644\u0648\u067e \u0627\u06cc\u06a9 \u06c1\u06cc \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u067e\u06a9\u0633\u0644\u0632 \u0644\u06a9\u06be\u0646\u0627 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0646\u0642\u0634\u06c1 \u0628\u0627\u0642\u06cc \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u0646\u06d2 \u0645\u0631\u062d\u0644\u06c1 3 \u0645\u06cc\u06ba \u062e\u0631\u06cc\u062f\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u062c\u06c1\u0627\u06ba \u06af\u0631\u0627\u0624\u0646\u0688 \u0641\u0644\u0648\u0631 \u0631\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/h2>\n
      \u0627\u0628 \u062a\u06a9 \u06c1\u0631 \u0686\u06cc\u0632 \u0632\u0645\u06cc\u0646 \u067e\u0631 \u0631\u06c1\u062a\u06cc \u06c1\u06d2\u06d4 \u0633\u06cc\u0644\u0627\u0628 \u06a9\u06cc\u0646\u0648\u0633 \u062e\u0648\u062f \u0646\u0642\u0634\u06d2 \u06a9\u06cc \u0633\u0637\u062d \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0633\u06cc \u0644\u06cc\u06d2 \u06cc\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631\u060c \u06af\u0631\u062f\u0634 \u0627\u0648\u0631 \u062e\u0637\u06c1 \u0622\u0632\u0627\u062f\u0627\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062c\u0633 \u0644\u0645\u062d\u06d2 \u0622\u067e \u06a9\u0648 \u06a9\u0633\u06cc \u0644\u0645\u0628\u06d2 \u0644\u0645\u0628\u06d2 \u0686\u06cc\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u060c \u0686\u0627\u0644 \u0686\u0644\u06cc \u06af\u0626\u06cc\u06d4 \u0622\u067e \u06a9\u0633\u06cc \u0631\u0627\u0633\u0679\u0631 \u067e\u0631 \u0679\u0627\u0648\u0631 \u0646\u06c1\u06cc\u06ba \u0628\u0627\u0646\u062f\u06be \u0633\u06a9\u062a\u06d2\u06d4<\/p>\n
      \u0645\u06cc\u06ba \u0646\u06d2 \u0633\u06cc\u06a9\u06be\u0627 \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u0627 \u0631\u0627\u0633\u062a\u06c1 \u0645\u06c1\u0646\u06af\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u06cc\u06a9 \u062d\u0642\u06cc\u0642\u06cc 3D \u067e\u0627\u0646\u06cc \u06a9\u06cc \u062f\u06cc\u0648\u0627\u0631 \u0628\u0646\u0627\u0626\u06cc\u06d4 three.js<\/code> \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06cc \u067e\u0631\u062a \u0646\u06d2 \u06a9\u0627\u0645 \u06a9\u06cc\u0627\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633\u06d2 \u0628\u06be\u06cc \u06a9\u0627\u0679 \u062f\u06cc\u0627\u060c \u0627\u0646 \u0648\u062c\u0648\u06c1\u0627\u062a \u06a9\u06cc \u0628\u0646\u0627 \u067e\u0631 \u062c\u0648 \u0622\u067e \u0627\u0633 \u067e\u0631 \u06a9\u0648\u0626\u06cc \u0648\u0642\u062a \u06af\u0632\u0627\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062c\u0627\u0646 \u0644\u06cc\u06ba\u06d4<\/p>\n
      250 \u0645\u06cc\u0679\u0631 \u062f\u0648\u0631 \u0633\u06d2 \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0648\u0627\u0644\u06cc 30 \u0645\u06cc\u0679\u0631 \u06a9\u06cc \u0644\u06c1\u0631 37 \u0688\u06af\u0631\u06cc \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0632\u0627\u0648\u06cc\u06c1 \u06a9\u06d2 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 7 \u0688\u06af\u0631\u06cc \u06cc\u0627 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u067e\u0627\u0646\u0686\u0648\u06cc\u06ba \u062d\u0635\u06d2 \u067e\u0631 \u0645\u062d\u06cc\u0637 \u06c1\u06d2\u06d4 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0628\u06be\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06cc\u0645\u0631\u06c1 \u06a9\u0648 \u06a9\u06cc\u0645\u0631\u06d2 \u0633\u06d2 100 \u0645\u06cc\u0679\u0631 \u06a9\u06d2 \u0641\u0627\u0635\u0644\u06d2 \u067e\u0631 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0632\u0645\u06cc\u0646 \u067e\u0631 \u0631\u06a9\u06be\u0646\u0627 \u067e\u0691\u062a\u0627 \u06c1\u06d2\u060c \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0633\u06cc\u0679\u0644\u0627\u0626\u0679 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u0679\u06cc \u0645\u06cc\u06ba \u062f\u0628\u06cc \u06c1\u0648\u0626\u06cc \u06c1\u06d2\u06d4 \u062c\u06cc\u0648\u0645\u06cc\u0679\u0631\u06cc \u062f\u0631\u0633\u062a \u062a\u06be\u06cc \u0627\u0648\u0631 \u0634\u0627\u0679\u0633 \u062e\u0631\u0627\u0628 \u062a\u06be\u06d2\u06d4 \u06cc\u06c1 \u067e\u062a\u06c1 \u0686\u0644\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062c\u06be\u06a9\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0644\u067e\u0679\u0627 \u06c1\u0648\u0627 \u067e\u0627\u0646\u06cc \u0635\u062d\u06cc\u062d \u0633\u0627\u0626\u0632 \u06a9\u06cc \u062f\u06cc\u0648\u0627\u0631 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u067e\u0627\u0646\u06cc \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0627\u0633 \u0644\u06cc\u06d2 \u0632\u0645\u06cc\u0646\u06cc \u062a\u06c1\u06c1 \u0632\u0645\u06cc\u0646\u06cc \u062a\u06c1\u06c1 \u06c1\u06cc \u0631\u06c1\u06cc\u06d4 \u0644\u06cc\u06a9\u0646 \u0632\u0644\u0632\u0644\u06d2 \u06a9\u06d2 \u0645\u0646\u0638\u0631 \u0646\u0627\u0645\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u0633\u0627 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba \u062a\u06be\u0627\u06d4 \u06af\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0639\u0645\u0627\u0631\u062a \u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u06cc\u06c1 \u062d\u0635\u06c1 2 \u06c1\u06d2\u06d4<\/p>\n
      \u062d\u0635\u06c1 2: \u0686\u0627\u0628\u06cc\u0627\u06ba \u0648\u0627\u0644\u06cc \u0686\u06cc\u0632\u06cc\u06ba<\/h2>\n
      \"\u0648\u0633\u0637\u06cc<\/p>\n
      \u0632\u0644\u0632\u0644\u06d2 \u06a9\u06d2 \u0645\u0646\u0638\u0631 \u0646\u0627\u0645\u06d2 \u0645\u06cc\u06ba\u060c \u0639\u0645\u0627\u0631\u062a \u06a9\u0648 \u06af\u0631\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627\u06d4 \u06cc\u06c1 \u0646\u0635\u0641 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u0645\u06cc\u06ba \u0646\u06d2 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 10 \u062a\u0639\u0645\u06cc\u0631 \u0646\u0648 \u06a9\u06d2 \u0628\u0639\u062f \u062e\u062a\u0645 \u06a9\u06cc\u0627\u06d4 \u06cc\u06c1 \u0627\u0646 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u0642\u0634\u06c1 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u06a9\u06d2 \u0627\u062e\u0631\u0627\u062c \u06a9\u0627 \u0645\u0631\u06a9\u0628 \u06c1\u06d2 \u062c\u0646\u06c1\u06cc\u06ba \u0648\u06c1\u0627\u06ba \u06a9\u06be\u0691\u06d2 \u06c1\u0648\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 three.js<\/code> \u0646\u06cc\u0686\u06d2 \u0622\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0645\u0646\u0638\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06cc\u06c1 \u0648\u06c1 \u0645\u0646\u0638\u0631 \u06c1\u06d2 \u062c\u0648 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 WebGL \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0645\u06cc\u06ba \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u062f\u0648\u0646\u0648\u06ba \u0631\u0627\u0633\u062a\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644\u0632 \u06a9\u0648 \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u06cc\u06a9 \u06c1\u06cc \u06af\u06c1\u0631\u0627\u0626\u06cc \u0648\u0627\u0644\u06d2 \u0628\u0641\u0631 \u06a9\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06cc \u06c1\u0631 \u062d\u0631\u06a9\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u0686\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
      3D \u06a9\u06cc \u062f\u0648 \u0642\u0633\u0645\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u062f\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06cc\u0648\u06ba \u06c1\u06d2\u06d4<\/h2>\n
      \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba fill-extrusion<\/code> \u067e\u0631\u062a\u06cc\u06ba \u0646\u0642\u0634\u06c1 \u06a9\u06d2 \u0627\u0646\u062c\u0646 \u06a9\u06cc \u06c1\u06cc 3D \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u062a\u06cc\u0632 \u06c1\u06d2\u060c \u062f\u0633\u06cc\u0648\u06ba \u06c1\u0632\u0627\u0631 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0627\u0642\u06cc \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0633\u062a\u0642\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0631\u0648\u0634\u0646\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc\u060c \u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u06d2 \u0631\u0646\u06af\u060c \u0627\u0648\u0631 (\u06cc\u06c1\u0627\u06ba \u0627\u06c1\u0645 \u062d\u0635\u06c1) \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u0648 \u062e\u0635\u0648\u0635\u06cc\u062a \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0633\u06d2 \u0636\u0631\u0628 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u062a\u0642\u0648\u06cc\u062a \u06cc\u0627\u0641\u062a\u06c1 \u06c1\u06d2\u06d4 \u0635\u0648\u0631\u062a \u062d\u0627\u0644<\/em> \u0622\u067e \u0627\u0633\u06d2 \u0631\u0646 \u0679\u0627\u0626\u0645 \u067e\u0631 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u062c\u0648 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u0648\u06c1 \u062d\u0631\u06a9\u062a \u06c1\u06d2\u06d4 \u067e\u0631\u0648\u0679\u0631\u0648\u0698\u0646 \u0627\u06cc\u06a9 \u0639\u0645\u0648\u062f\u06cc \u067e\u0631\u0632\u0645 \u06c1\u06d2 \u062c\u0648 \u06c1\u0645\u06cc\u0634\u06c1 \u0632\u0645\u06cc\u0646 \u067e\u0631 \u06a9\u06be\u0691\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba custom<\/code> \u0627\u06cc\u06a9 \u067e\u0631\u062a \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u067e\u0631 \u0646\u0642\u0634\u06d2 \u06a9\u0627 WebGL \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0627\u0648\u0631 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u062c\u0648 \u0686\u0627\u06c1\u06cc\u06ba \u06a9\u06be\u06cc\u0646\u0686\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4 \u06a9\u06d2 \u0633\u0627\u062a\u06be three.js<\/code> \u062f\u0648\u0633\u0631\u06cc \u0637\u0631\u0641\u060c \u06cc\u06c1 \u062d\u0642\u06cc\u0642\u06cc \u0627\u0634\u06cc\u0627\u0621 \u0633\u06d2 \u0645\u0631\u0627\u062f \u06c1\u06d2. \u0645\u06cc\u0634\u060c \u067e\u0648\u0632\u06cc\u0634\u0646\u060c \u06af\u0631\u062f\u0634\u060c \u0627\u0648\u0631 \u067e\u06cc\u0645\u0627\u0646\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06c1\u0632\u0627\u0631\u0648\u06ba \u0645\u06cc\u06ba \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u0646\u0642\u0634\u06c1 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u06cc \u06af\u06c1\u0631\u0627\u0626\u06cc \u06a9\u06d2 \u0628\u0641\u0631 \u067e\u0631 \u0644\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06af\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0628\u0644\u0627\u06a9\u0633 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u063a\u0627\u0626\u0628 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u062c\u0648 \u0627\u0628 \u0628\u06be\u06cc \u06a9\u06be\u0691\u06cc \u06c1\u06cc\u06ba.<\/p>\n
      \u062c\u0648 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u0648\u06c1 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4 \u062a\u0645\u0627\u0645 \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u067e\u06be\u06cc\u0644\u06cc \u06c1\u0648\u0626\u06cc \u06c1\u06cc\u06ba\u06d4<\/strong> \u0627\u06af\u0631 \u06a9\u0633\u06cc \u06a9\u0648 \u0646\u0642\u0635\u0627\u0646 \u067e\u06c1\u0646\u0686\u0627 \u06c1\u06d2 \u062a\u0648\u060c \u0627\u062e\u0631\u0627\u062c \u0633\u06a9\u0691 \u062c\u0627\u062a\u0627 \u06c1\u06d2 (\u0627\u06cc\u06a9 \u062e\u0635\u0648\u0635\u06cc\u062a \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u0645\u062e\u0635\u0648\u0635 \u062d\u0627\u0644\u062a)\u06d4 \u0641\u0631\u0642 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06d2 \u06a9\u0627\u0641\u06cc \u0642\u0631\u06cc\u0628 \u0632\u0648\u0645 \u0622\u0624\u0679 \u06a9\u0631\u0646\u06d2 \u067e\u0631\u060c \u0627\u062e\u0631\u0627\u062c \u0633\u06a9\u0691 \u06a9\u0631 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 three.js<\/code> \u0634\u06d2 \u06af\u0631\u062a\u06d2 \u06c1\u06cc 2 \u0633\u06cc\u06a9\u0646\u0688 \u062a\u06a9 \u0627\u067e\u0646\u06cc \u062c\u06af\u06c1 \u067e\u0631 \u0631\u06c1\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u0633 \u0686\u06cc\u0632 \u06a9\u0648 \u0645\u0644\u0628\u06d2 \u06a9\u06d2 \u0688\u06be\u06cc\u0631 \u0633\u06d2 \u0628\u062f\u0644 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 three.js<\/code>\u0641\u0631\u06cc\u0645 \u06a9\u06cc \u0634\u0631\u062d \u0628\u0627\u0644\u06a9\u0644 \u062a\u0633\u0644\u06cc\u0645 \u0634\u062f\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n
      \"\u06c1\u0644\u0686\u0644<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 8: \u0646\u0642\u0634\u06d2 \u067e\u0631 \u0627\u0646 \u06a9\u06cc \u0627\u067e\u0646\u06cc \u0679\u0627\u0626\u0644\u0648\u06ba \u0633\u06d2 \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n
      \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0688\u06cc\u0679\u0627\u0633\u06cc\u0679 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0646\u0642\u0634\u06c1 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 \u0627\u0633\u0679\u0631\u06cc\u0679 \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644 building<\/code> \u06a9\u062b\u06cc\u0631 \u0627\u0644\u0627\u0636\u0644\u0627\u0639 \u0641\u0648\u0679 \u067e\u0631\u0646\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0627\u062e\u0630 \u067e\u0631\u062a height<\/code>\u060c min_height<\/code> \u0632\u0645\u06cc\u0646 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 extrude<\/code> \u067e\u0631\u0686\u0645 querySourceFeatures<\/code> \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u0644\u0648\u0688 \u06a9\u0631\u062f\u06c1 \u0645\u0648\u0627\u062f \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      function buildingSource(map) {\n  const sources = map.getStyle().sources;\n  if (sources.composite) return \"composite\";         \/\/ Mapbox styles\n  if (sources.openmaptiles) return \"openmaptiles\";   \/\/ MapLibre + OpenMapTiles\n  for (const id in sources) if (sources[id].type === \"vector\") return id;\n  return null;\n}\n\nfunction collectBuildings(map, center, kx, ky) {\n  const src = buildingSource(map);\n  if (!src) return [];\n  const feats = map.querySourceFeatures(src, { sourceLayer: \"building\" });\n  const out = [], seen = new Set();\n\n  for (const f of feats) {\n    const p = f.properties || {}, g = f.geometry;\n    if (!g || p.extrude === \"false\" || p.underground === \"true\") continue;\n\n    const polys = g.type === \"Polygon\" ? [g.coordinates]\n                : g.type === \"MultiPolygon\" ? g.coordinates : null;\n    if (!polys || !polys[0] || polys[0][0].length < 4) continue;\n\n    \/\/ centroid and bounds of the outer ring\n    const ring = polys[0][0], n = ring.length - 1;\n    let sx = 0, sy = 0, x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;\n    for (let j = 0; j < n; j++) {\n      const [x, y] = ring[j];\n      sx += x; sy += y;\n      if (x < x0) x0 = x; if (x > x1) x1 = x;\n      if (y < y0) y0 = y; if (y > y1) y1 = y;\n    }\n    sx \/= n; sy \/= n;\n\n    \/\/ the same building appears once per tile it touches\n    const key = sx.toFixed(6) + \",\" + sy.toFixed(6) + \",\" + n;\n    if (seen.has(key)) continue;\n    seen.add(key);\n\n    let h = +(p.height ?? p.render_height);\n    if (!(h > 0)) h = 8;                              \/\/ no data: assume two storeys\n    const mh = Math.min(h, +(p.min_height ?? p.render_min_height) || 0);\n\n    out.push({\n      geometry: g, polys, lng: sx, lat: sy, h, mh,\n      d: Math.hypot((sx - center.lng) * kx, (sy - center.lat) * ky),   \/\/ metres from epicentre\n      rf: 0.5 * Math.sqrt(Math.max(4, (x1 - x0) * kx * (y1 - y0) * ky)), \/\/ rough radius, metres\n    });\n  }\n  out.sort((a, b) => a.d - b.d);\n  return out.slice(0, 9000);\n}\n<\/code><\/pre>\n
      kx<\/code>    \u0627\u0648\u0631 ky<\/code> \u0634\u06c1\u0631 \u06a9\u06d2 \u0639\u0631\u0636 \u0628\u0644\u062f \u06a9\u0627 \u0637\u0648\u0644 \u0628\u0644\u062f \u0627\u0648\u0631 \u0645\u06cc\u0679\u0631 \u0641\u06cc \u0639\u0631\u0636 \u0628\u0644\u062f\u06d4 111320 * cos(lat)<\/code> \u0627\u0648\u0631 110574<\/code>. \u06c1\u0631 \u0686\u06cc\u0632 \u0688\u0627\u0648\u0646 \u0627\u0633\u0679\u0631\u06cc\u0645 \u06a9\u06d2 \u0645\u0631\u06a9\u0632 \u0633\u06d2 \u0645\u06cc\u0679\u0631 \u0628\u06c1 \u0645\u06cc\u0679\u0631 \u0686\u0644\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n
      \u0627\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0646 \u0686\u06cc\u0632\u06cc\u06ba\u06d4 \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 querySourceFeatures<\/code> \u0686\u0648\u0646\u06a9\u06c1 \u06c1\u0645 \u06c1\u0631 \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u0648 \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u0648 \u0645\u0644\u0627\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0679\u0627\u0626\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0639\u0645\u0627\u0631\u062a \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06c1\u0645\u06cc\u06ba \u0646\u0642\u0644\u06cc\u06ba \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0627\u0686\u06be\u06cc \u06a9\u0644\u06cc\u062f \u062d\u0627\u0635\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06af\u0648\u0644 \u0645\u0631\u0627\u06a9\u0632 \u0627\u0648\u0631 \u0686\u0648\u0679\u06cc\u0648\u06ba \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
      \u062f\u0648\u0633\u0631\u0627\u060c \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648\u0626\u06cc \u0645\u0633\u062a\u062d\u06a9\u0645 ID \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/strong> \u0645\u06cc\u067e \u0628\u0627\u06a9\u0633 \u0627\u0633\u0679\u0631\u06cc\u0679 \u067e\u0631\u06d4 \u06cc\u06c1 \u0645\u0631\u062d\u0644\u06c1 11 \u0645\u06cc\u06ba \u0628\u06c1\u062a \u0627\u06c1\u0645 \u06c1\u06d2\u06d4<\/p>\n
      \u062a\u06cc\u0633\u0631\u0627\u060c \u0622\u067e \u06a9\u0648 \u0635\u0631\u0641 \u0648\u06c1\u06cc \u0645\u0644\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0628\u06be\u0631\u06cc \u06c1\u0648\u0626\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u0648 \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u06a9\u06c1\u0627\u06ba \u06c1\u06cc\u06ba \u0627\u0633 \u067e\u0631 \u0632\u0648\u0645 \u0627\u0646 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627 \u0627\u0648\u0631 \u0679\u0627\u0626\u0644\u06cc\u06ba \u062c\u0645\u0639 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0646 \u06a9\u06d2 \u0622\u0646\u06d2 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n
      HazardSim \u0645\u06cc\u06ba \u06a9\u06cc\u0645\u0631\u06c1 \u062f\u0648 \u0645\u0631\u0627\u062d\u0644 \u0645\u06cc\u06ba \u0688\u0648\u0628\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 map.areTilesLoaded()<\/code> \u0627\u06af\u0631 \u0635\u062d\u06cc\u062d \u06c1\u06d2 \u062a\u0648\u060c \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06cc \u06af\u0646\u062a\u06cc \u067e\u0648\u0644\u0632 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648 \u06a9\u0631 \u0631\u06a9 \u062c\u0627\u0626\u06d2 \u06af\u06cc \u0627\u0648\u0631 \u067e\u06be\u0631 \u0686\u0644\u0627\u0626\u06cc \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4 collectBuildings<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0627\u0633\u06d2 \u0628\u06c1\u062a \u062c\u0644\u062f \u062c\u0645\u0639 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 10 \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u0645\u0644\u06cc\u06ba \u06af\u06cc \u062c\u0648 \u067e\u06c1\u0644\u06cc \u0679\u0627\u0626\u0644 \u067e\u0631 \u062a\u06be\u06cc\u06ba\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 9: \u0627\u0648\u0648\u0631 \u06c1\u06cc\u0646\u06af \u06a9\u0648 \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u0637\u0631\u062d \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n
      \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0627\u062e\u0631\u0627\u062c \u0627\u06cc\u06a9 \u0679\u06be\u0648\u0633\u060c \u0641\u0644\u06cc\u0679 \u0633\u0627\u06cc\u06c1 \u062f\u0627\u0631 \u062e\u0627\u0646\u06c1 \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u062e\u0627\u06a9\u06c1 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0691\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u062d\u0644 \u06a9\u06cc \u0642\u06cc\u0645\u062a \u0628\u06c1\u062a \u06a9\u0645 \u06c1\u06d2\u06d4 fill-extrusion-pattern<\/code> \u0622\u067e \u0627\u0633\u067e\u0631\u0627\u0626\u0679 \u0633\u06d2 \u0627\u0633\u0679\u0627\u0626\u0644 \u0645\u06cc\u06ba \u062a\u0635\u0648\u06cc\u0631 \u0644\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633\u06d2 \u062f\u06cc\u0648\u0627\u0631 \u067e\u0631 \u0679\u0627\u0626\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0631\u0646 \u0679\u0627\u0626\u0645 \u06a9\u06d2 \u0648\u0642\u062a \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u0627\u0633\u067e\u0631\u0627\u0626\u0679 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: map.addImage<\/code>.<\/p>\n
      \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u06a9\u0686\u06be \u0628\u06cc\u0631\u0648\u0646\u06cc \u0633\u0627\u062e\u062a (\u0648\u0646\u0688\u0648\u0632 \u06a9\u06cc \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u062c\u0633 \u0645\u06cc\u06ba \u062f\u06cc\u0648\u0627\u0631 \u06a9\u06d2 \u0631\u0646\u06af \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u06be\u0648\u0691\u0627 \u0633\u0627 \u0634\u0648\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0648\u06c1 \u06a9\u0645\u067e\u06cc\u0648\u0679\u0631 \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0646\u0638\u0631 \u0646\u06c1 \u0622\u0626\u06cc\u06ba) \u0688\u0631\u0627 \u0627\u0648\u0631 \u0631\u062c\u0633\u0679\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba\u060c \u067e\u06be\u0631 \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u067e\u0631 \u0627\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0627\u06cc\u06a9 \u06a9\u0631\u06a9\u06d2 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba\u06d4<\/p>\n
      function makeFacade(map, id, wall, glass) {\n  const cv = document.createElement(\"canvas\");\n  cv.width = 128; cv.height = 64;\n  const c = cv.getContext(\"2d\");\n  c.fillStyle = wall; c.fillRect(0, 0, 128, 64);\n\n  \/\/ four floors of windows, 16px per floor\n  for (let f = 0; f < 4; f++) {\n    for (let x = 3; x + 6 <= 128; x += 12) {\n      const lit = Math.random() < 0.07;\n      c.fillStyle = lit ? \"#c6b68c\" : glass;\n      c.fillRect(x, f * 16 + 3, 6, 9);\n    }\n  }\n  \/\/ film grain\n  const im = c.getImageData(0, 0, 128, 64), d = im.data;\n  for (let i = 0; i < d.length; i += 4) {\n    const n = (Math.random() - 0.5) * 12;\n    d[i] += n; d[i + 1] += n; d[i + 2] += n;\n  }\n  map.addImage(id, im);\n}\n\nmakeFacade(map, \"fac-glass\",  \"#566a78\", \"#3c4e5c\");\nmakeFacade(map, \"fac-light\",  \"#cdc8be\", \"#364048\");\nmakeFacade(map, \"fac-brick\",  \"#8a5a44\", \"#2e2a26\");\n<\/code><\/pre>\n
      \u067e\u06be\u0631 \u067e\u0631\u062a\u06d4 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0627\u0648\u0631 \u0628\u0646\u06cc\u0627\u062f \u0627\u0638\u06c1\u0627\u0631 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0641\u06cc\u0686\u0631 \u0627\u0633\u0679\u06cc\u0679 \u0648\u06cc\u0644\u06cc\u0648 \u0633\u06d2 \u0636\u0631\u0628 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 k<\/code> \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 1 \u06c1\u06d2\u06d4 \u0648\u06c1 \u0636\u0631\u0628 \u0627\u0628 \u062f\u0631\u062c \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0645\u062c\u0645\u0648\u0639\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u0645\u06cc \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/p>\n
      const H  = [\"coalesce\", [\"get\", \"height\"], [\"get\", \"render_height\"], 8];\nconst MH = [\"coalesce\", [\"get\", \"min_height\"], [\"get\", \"render_min_height\"], 0];\nconst K  = [\"coalesce\", [\"feature-state\", \"k\"], 1];\n\nfunction addBuildingLayers(map, source, sourceLayer, before) {\n  const common = { type: \"fill-extrusion\", source, minzoom: 13 };\n  if (sourceLayer) {\n    common[\"source-layer\"] = sourceLayer;\n    common.filter = [\"all\", [\"!=\", [\"get\", \"extrude\"], \"false\"], [\"!=\", [\"get\", \"underground\"], \"true\"]];\n  }\n  map.addLayer({\n    ...common, id: \"bld-walls\",\n    paint: {\n      \"fill-extrusion-pattern\": [\"case\",\n        [\">=\", H, 45], \"fac-glass\",\n        [\">=\", H, 14], \"fac-light\",\n        \"fac-brick\"],\n      \"fill-extrusion-height\": [\"*\", H, K],\n      \"fill-extrusion-base\":   [\"*\", MH, K],\n      \"fill-extrusion-opacity\": 1,\n    },\n  }, before);\n  \/\/ a thin second extrusion on top gives the roof its own texture\n  map.addLayer({\n    ...common, id: \"bld-roof\",\n    paint: {\n      \"fill-extrusion-pattern\": \"fac-roof\",\n      \"fill-extrusion-height\": [\"+\", [\"*\", H, K], 0.05],\n      \"fill-extrusion-base\":   [\"max\", [\"*\", MH, K], [\"-\", [\"*\", H, K], 0.45]],\n      \"fill-extrusion-opacity\": 1,\n    },\n  }, before);\n}\n<\/code><\/pre>\n
      before<\/code>    \u06cc\u06c1 \u067e\u06c1\u0644\u06cc \u0634\u0646\u0627\u062e\u062a \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u06cc\u06d2\u06d4 symbol<\/code> \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0639\u0645\u0627\u0631\u062a \u0637\u0631\u0632 \u06a9\u06cc \u067e\u0631\u062a \u067e\u0631 \u0644\u06cc\u0628\u0644 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u0644\u0648\u067e \u0627\u0648\u0648\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 map.getStyle().layers<\/code>.<\/p>\n
      \u0641\u06cc \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0648 \u06af\u06be\u0645\u0627\u06cc\u0627 \u0646\u06c1\u06cc\u06ba \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06cc\u0627 \u0627\u0633 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06a9\u06be\u0691\u06a9\u06cc \u0641\u0631\u0634 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u0644\u06a9\u0644 \u0633\u06cc\u062f\u06be \u0645\u06cc\u06ba \u0646\u06c1\u06cc\u06ba \u0622\u0626\u06d2 \u06af\u06cc\u06d4 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0633\u06d2 \u06a9\u0633\u06cc \u06a9\u0648 \u067e\u062a\u06c1 \u0646\u06c1\u06cc\u06ba \u0686\u0644\u06d2 \u06af\u0627 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0627 \u062c\u0627 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 10: \u0641\u06cc\u0635\u0644\u06c1 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0627 \u06af\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/h2>\n
      \u0627\u0628 \u0646\u0642\u0644\u06cc \u062d\u0635\u06c1 \u0645\u062e\u062a\u0635\u0631 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645\u06cc\u06ba \u0627\u0633 \u0645\u0642\u0627\u0645 \u067e\u0631 \u06c1\u0644\u0646\u06d2 \u06a9\u06cc \u0634\u062f\u062a \u0627\u0648\u0631 \u0627\u0633 \u0634\u062f\u062a \u0633\u06d2 \u0627\u0633 \u0642\u0633\u0645 \u06a9\u06cc \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u06af\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/p>\n
      \u0632\u0644\u0632\u0644\u06d2 \u06a9\u0627 \u0627\u0638\u06c1\u0627\u0631 \u062a\u0631\u0645\u06cc\u0645 \u0634\u062f\u06c1 \u0645\u0631\u06a9\u0627\u0644\u06cc \u0627\u0633\u06a9\u06cc\u0644 I \u0633\u06d2 XII \u067e\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0639\u06cc\u0627\u0631\u06cc \u06a9\u0634\u0646\u062f\u06af\u06cc \u06a9\u0627 \u0631\u0634\u062a\u06c1 \u0634\u062f\u062a \u0633\u06d2 \u0637\u0627\u0642\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 M<\/code> \u0627\u0648\u0631 \u0641\u0627\u0635\u0644\u06d2 r<\/code> \u06a9\u0644\u0648\u0645\u06cc\u0679\u0631 \u06cc\u0648\u0646\u0679\u0633 (depth<\/code> \u0627\u062a\u0644\u06cc \u06a9\u0631\u0633\u0679\u0644 \u0632\u0644\u0632\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u0631\u06a9\u0632 \u06a9\u06cc \u06af\u06c1\u0631\u0627\u0626\u06cc 10 \u06a9\u0644\u0648\u0645\u06cc\u0679\u0631 \u06c1\u06d2\u06d4<\/p>\n
      const DEPTH_KM = 10;\n\nfunction mmiAt(M, rKm) {\n  const R = Math.sqrt(rKm * rKm + DEPTH_KM * DEPTH_KM);\n  const v = 1.5 * M - 3.0 * Math.log10(R) - 0.0018 * R + 1.6;\n  return Math.max(0, Math.min(12, v));\n}\n<\/code><\/pre>\n
      \u0634\u062f\u062a \u06a9\u06d2 \u0641\u0639\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u06af\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0646\u0627\u0632\u06a9 \u0648\u06a9\u0631 \u06c1\u06d2\u06d4 \u0634\u0627\u0626\u0639 \u0634\u062f\u06c1 \u0645\u0648\u0627\u062f \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0644\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0646\u0642\u0644\u06cc \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0641\u0635\u06cc\u0644\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u0679\u06a9\u0691\u06d2 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u0644\u06a9\u06cc\u0631\u06cc \u0648\u0631\u0698\u0646 \u06a9\u0648 \u062f\u0631\u0633\u062a \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0627\u0648\u0631 \u0639\u0627\u0645 \u062c\u0627\u0646\u06cc \u0646\u0642\u0635\u0627\u0646 \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u062a\u0639\u0645\u06cc\u0631\u0627\u062a\u06cc \u0645\u0639\u06cc\u0627\u0631 \u06a9\u06d2 \u0639\u0646\u0635\u0631 \u0627\u0648\u0631 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u06d2 \u0639\u0646\u0635\u0631 \u0633\u06d2 \u0636\u0631\u0628 \u062f\u06cc\u06ba\u06d4 \u062f\u0631\u0645\u06cc\u0627\u0646\u06cc \u0628\u0644\u0646\u062f\u06cc \u0648\u0627\u0644\u06cc \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u0633\u0628 \u0633\u06d2 \u062e\u0631\u0627\u0628 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0628\u06c1\u062a \u0627\u0648\u0646\u0686\u06cc \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u0628\u06c1\u062a\u0631 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n
      const FRAG = [[6.5, 0], [7, 0.004], [8, 0.025], [9, 0.08], [10, 0.2], [11, 0.38], [12, 0.55]];\nconst QUALITY = { strict: 0.2, avg: 1, poor: 3 };\n\nfunction collapseProbability(mmi) {\n  if (mmi <= FRAG[0][0]) return 0;\n  for (let i = 1; i < FRAG.length; i++) {\n    if (mmi <= FRAG[i][0]) {\n      const [m0, p0] = FRAG[i - 1], [m1, p1] = FRAG[i];\n      return p0 + (p1 - p0) * (mmi - m0) \/ (m1 - m0);\n    }\n  }\n  return FRAG[FRAG.length - 1][1];\n}\n\nfunction assignDamage(buildings, M, epicentre, quality) {\n  const kx = 111320 * Math.cos(epicentre.lat * Math.PI \/ 180), ky = 110574;\n  const q = QUALITY[quality] || 1;\n\n  for (const b of buildings) {\n    const rKm = Math.hypot((b.lng - epicentre.lng) * kx, (b.lat - epicentre.lat) * ky) \/ 1000;\n    const mmi = mmiAt(M, rKm);\n    const hf = b.h < 5 ? 0.7 : b.h < 35 ? 1.15 : b.h < 70 ? 0.8 : 0.45;\n    const pCollapse = Math.min(0.9, collapseProbability(mmi) * q * hf);\n    const pDamage = mmi >= 6 ? Math.min(0.6, pCollapse * 2.5 + 0.004) : 0;\n\n    const r = Math.random();\n    b.cat = r < pCollapse ? 2 : r < pCollapse + pDamage ? 1 : 0;   \/\/ 2 collapse, 1 damaged, 0 fine\n    b.start = 0.8 + Math.random() * 2.8;                            \/\/ seconds after the shock\n  }\n}\n<\/code><\/pre>\n
      \u0641\u06cc \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628\u06cc \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06d2 \u0641\u0631\u0648\u062e\u062a \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u062f\u0648 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0679\u0627\u0648\u0631\u060c \u0627\u06cc\u06a9 \u06af\u0631 \u06af\u06cc\u0627 \u0627\u0648\u0631 \u062f\u0648\u0633\u0631\u0627 \u06a9\u06be\u0691\u0627\u06d4 \u062d\u0642\u06cc\u0642\u06cc \u0632\u0644\u0632\u0644\u06d2 \u0627\u06cc\u0633\u06d2 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 11: \u067e\u0631\u062a \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u0626\u06d2 \u0628\u063a\u06cc\u0631 \u0632\u0648\u0645 \u0622\u0624\u0679 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4<\/h2>\n
      \u0645\u0631\u062d\u0644\u06c1 9 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u06a9\u0627\u0631 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u06c1\u06d2: \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06af\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u06c1\u0631 \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0641\u0639\u0627\u0644 \u062d\u0627\u0644\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 k<\/code> 1 \u0627\u0648\u0631 \u0622\u062e\u0631\u06cc \u0645\u0644\u0628\u06d2 \u06a9\u06cc \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0646\u0645\u0628\u0631 \u067e\u0631 \u0633\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u062e\u0631\u0627\u062c \u0648\u0627\u067e\u0633 \u0644\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u0631\u062a\u0648\u06ba \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u06c1\u06cc\u06ba \u0644\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c GeoJSON \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0679\u0627\u0626\u0644\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0627\u0631\u0633 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      map.setFeatureState({ source: \"bld\", id: b.id }, { k: 0.62 });\n<\/code><\/pre>\n
      \u0627\u06cc\u06a9 \u0645\u0633\u0626\u0644\u06c1 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0648\u06c1 \u06c1\u06d2 \u062c\u0633 \u0646\u06d2 \u0645\u062c\u06be\u06d2 \u0627\u0633 \u067e\u0648\u0631\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0648\u0642\u062a \u0644\u06cc\u0627\u06d4 setFeatureState<\/code> \u0641\u06cc\u0686\u0631 ID \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 Mapbox Streets \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u0645\u06cc\u06ba \u0641\u06cc\u0686\u0631 ID \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/strong> \u062c\u0628 \u0645\u06cc\u06ba \u0648\u06cc\u06a9\u0679\u0631 \u0633\u0648\u0631\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062e\u0627\u0645\u0648\u0634\u06cc \u0633\u06d2 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u062a\u0648 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627\u06d4<\/p>\n
      \u062d\u0644 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u062c\u0645\u0639 \u0634\u062f\u06c1 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u0648 \u0627\u067e\u0646\u06d2 GeoJSON \u0633\u0648\u0631\u0633 \u0645\u06cc\u06ba \u06a9\u0627\u067e\u06cc \u06a9\u0631\u06cc\u06ba\u06d4 id<\/code> \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0627\u062e\u0630 \u06a9\u0648 \u06c1\u062f\u0627\u06cc\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06c1 \u0627\u0633 \u0648\u0635\u0641 \u06a9\u0648 \u0627\u06cc\u06a9 \u0641\u0646\u06a9\u0634\u0646\u0644 ID \u0645\u06cc\u06ba \u0641\u0631\u0648\u063a \u062f\u06d2\u06d4<\/p>\n
      const feats = buildings.map((b, i) => {\n  b.id = i;\n  return { type: \"Feature\", properties: { i, height: b.h, min_height: b.mh }, geometry: b.geometry };\n});\n\nmap.addSource(\"bld\", {\n  type: \"geojson\",\n  data: { type: \"FeatureCollection\", features: feats },\n  promoteId: \"i\",\n  maxzoom: 16,\n});\naddBuildingLayers(map, \"bld\", null, firstSymbolLayer);\n<\/code><\/pre>\n
      \u0627\u0628 setFeatureState({ source: \"bld\", id: 17 }, ...)<\/code> \u0639\u0645\u0627\u0631\u062a 17 \u062a\u06a9 \u067e\u06c1\u0646\u0686\u06cc\u06ba\u06d4 \u0627\u0635\u0644 \u0679\u0627\u0626\u0644 \u0628\u06cc\u06a9 \u0644\u06cc\u0626\u0631 \u06a9\u0648 \u0627\u0633 \u0648\u0642\u062a \u062a\u06a9 \u0631\u06a9\u06be\u06cc\u06ba \u062c\u0628 \u062a\u06a9 GeoJSON \u0630\u0631\u06cc\u0639\u06c1 \u0627\u0633 \u06a9\u06cc \u0627\u0637\u0644\u0627\u0639 \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u062a\u0627\u06d4 isSourceLoaded<\/code>\u067e\u06be\u0631 \u0627\u0633\u06d2 \u06c1\u0679\u0627 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u0634\u06c1\u0631 \u0645\u06cc\u06ba \u0686\u0645\u06a9\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0641\u0631\u06cc\u0645 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n
      \u0634\u06a9\u0644 k<\/code> \u0645\u0642\u0635\u062f \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06af\u0631\u0646\u06d2 \u06a9\u0648 \u0648\u0642\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0632\u0645\u06cc\u0646 \u067e\u0631 \u067e\u06be\u0633\u0644\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u06af\u0631\u0646\u06d2 \u06a9\u06cc \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0626\u06d2\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 5 \u0637\u0631\u06cc\u0642\u0648\u06ba \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u06cc\u0627\u060c \u062c\u0633 \u0645\u06cc\u06ba \u06c1\u0631 \u0639\u0645\u0627\u0631\u062a \u062a\u0635\u0627\u062f\u0641\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u0646\u062a\u062e\u0628 \u0627\u0648\u0631 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0645\u06cc\u06ba \u0645\u062d\u062f\u0648\u062f \u062a\u06be\u06cc\u06d4<\/p>\n
      \/\/ k0 = starting height multiplier (1), kf = final rubble height, u = progress 0..1\nfunction collapseK(b, u) {\n  const k0 = b.k0, sp = k0 - b.kf;\n  switch (b.mode) {\n    case 1: {   \/\/ floor by floor: ns steps, each with a fast drop then a pause\n      const s = u * b.ns, i = Math.min(b.ns - 1, Math.floor(s));\n      let f = s - i;\n      f = f < 0.45 ? f * f \/ 0.45 * 1.1 : 0.55 + (f - 0.45) * 0.45 \/ 0.55;\n      return k0 - sp * Math.min(1, (i + Math.min(1, f)) \/ b.ns);\n    }\n    case 2: {   \/\/ soft storey: ground floor gives, building drops one floor, pauses, then goes\n      const sd = Math.min(sp * 0.5, 3.2 \/ b.h);\n      if (u < 0.12) return k0 - sd * (u \/ 0.12) ** 2;\n      if (u < 0.5)  return k0 - sd;\n      const v = (u - 0.5) \/ 0.5;\n      return k0 - sd - (sp - sd) * v * v;\n    }\n    case 3: {   \/\/ crushed top: upper part fails first\n      const pt = sp * 0.45;\n      if (u < 0.3)  return k0 - pt * (u \/ 0.3) ** 2;\n      if (u < 0.55) return k0 - pt;\n      const v = (u - 0.55) \/ 0.45;\n      return k0 - pt - (sp - pt) * v * v;\n    }\n    case 4:     \/\/ sideways: steady, slightly accelerating\n      return k0 - sp * Math.pow(u, 1.6);\n    default:    \/\/ pancake: accelerating free fall\n      return k0 - sp * u * u;\n  }\n}\n<\/code><\/pre>\n
      \"\u0644\u0627\u0626\u0646<\/p>\n
      \u06c1\u0631 \u0639\u0645\u0627\u0631\u062a \u0645\u06cc\u06ba \u0641\u0631\u06cc\u0645 \u0644\u0648\u067e\u0633 \u06a9\u06cc \u06a9\u062a\u0646\u06cc \u0642\u0637\u0627\u0631\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n
      function frame(now) {\n  const el = (now - T0) \/ 1000, dt = Math.min(0.04, (now - last) \/ 1000);\n  last = now;\n\n  for (const b of active) {\n    if (b.done || el < b.start) continue;\n    const u = Math.min(1, (el - b.start) \/ b.dur);\n    const k = collapseK(b, u);\n    map.setFeatureState({ source: \"bld\", id: b.id }, { k });\n    if (u >= 1) { b.done = true; onLanded(b); }\n  }\n  requestAnimationFrame(frame);\n}\n<\/code><\/pre>\n
      \u062a\u0628\u0627\u06c1 \u0634\u062f\u06c1 \u0644\u06cc\u06a9\u0646 \u0628\u0627\u0642\u06cc \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 (cat === 1<\/code>) kf<\/code> 1 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0648\u0688 \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0635\u0631 \u0627\u0633\u0679\u0627\u067e \u06c1\u06d2\u06d4 \u0639\u0645\u0627\u0631\u062a \u0646\u0645\u0627\u06cc\u0627\u06ba \u0637\u0648\u0631 \u067e\u0631 \u0622\u062f\u06be\u0627 \u0645\u06cc\u0679\u0631 \u06af\u0631\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06be\u0631 \u0631\u06a9 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u06cc \u0633\u06cc \u062a\u0641\u0635\u06cc\u0644 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u0627\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u067e\u0648\u0631\u06cc \u06af\u0644\u06cc \u0645\u062a\u0627\u062b\u0631 \u06c1\u0648\u0626\u06cc \u06c1\u06d2\u060c \u0646\u06c1 \u0635\u0631\u0641 \u0645\u0646\u06c1\u062f\u0645 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u0646\u06d2\u06d4<\/p>\n
      \u0686\u0645\u0679\u06d2 dt<\/code> 40ms \u062a\u06a9\u06d4 \u062c\u0628 \u0646\u0644 \u06c1\u06a9\u0644\u0627\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0627\u06cc\u06a9 \u0686\u0648\u062a\u06be\u0627\u0626\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u0627 \u0648\u0642\u062a \u0644\u06af\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0632\u0648\u0627\u0644 \u06a9\u06d2 \u0628\u06cc\u0686 \u0645\u06cc\u06ba \u0648\u0627\u0642\u0639 \u0639\u0645\u0627\u0631\u062a \u06af\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0648\u067e\u0631 \u06a9\u0648\u062f \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u0646\u06a9\u06be \u0641\u0648\u0631\u0627\u064b \u06af\u0631\u0641\u062a \u0645\u06cc\u06ba \u0622\u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 12: \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0627\u0646\u062f\u0631 Three.js \u0645\u0646\u0638\u0631<\/h2>\n
      \u0633\u06a9\u0691 \u0627\u06cc\u06a9\u0633\u0679\u0631\u0648\u0634\u0646 \u0627\u0646 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u062f\u0648\u0631 \u06c1\u06cc\u06ba\u06d4 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u0644\u0648\u06af\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u0688\u06be\u0627\u0646\u0686\u06d2 \u06a9\u0648 \u0679\u0648\u0679\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u06cc\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0686\u0627\u06c1\u06d2 \u0648\u06c1 \u0679\u0627\u0648\u0631 \u06a9\u0627 \u06af\u0631\u0646\u0627 \u0627\u0648\u0631 \u0628\u0644\u0627\u06a9 \u0633\u06d2 \u0679\u06a9\u0631\u0627\u0646\u0627 \u06c1\u0648\u060c \u0641\u0631\u0634 \u0633\u06d2 \u0645\u0644\u0628\u06c1 \u0646\u06a9\u0644 \u0631\u06c1\u0627 \u06c1\u0648\u060c \u06cc\u0627 \u0633\u0691\u06a9 \u067e\u0631 \u0628\u0686\u0627 \u06c1\u0648\u0627 \u0645\u0644\u0628\u06c1 \u06c1\u0648\u06d4 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0634\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u06cc\u06c1\u0627\u06ba \u06c1\u06d2\u06d4 three.js<\/code> \u0627\u0646\u062f\u0631 \u0622\u0648<\/p>\n
      \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u067e\u0631\u062a\u06cc\u06ba \u062f\u0648 \u06a9\u0627\u0644 \u0628\u06cc\u06a9 \u0644\u06cc\u062a\u06cc \u06c1\u06cc\u06ba: onAdd<\/code> \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0646\u0642\u0634\u06c1 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 GL \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f render<\/code> \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0627\u0648\u0631 \u0646\u0642\u0634\u06d2 \u06a9\u0627 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0648 \u0686\u06cc\u0632 \u0648\u0627\u0636\u062d \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u0648\u06c1 \u06c1\u06d2 \u0646\u0642\u0627\u0637\u06d4 \u0686\u0648\u0646\u06a9\u06c1 \u06c1\u0645 \u0645\u0631\u06a9\u06cc\u0679\u0631 \u06cc\u0648\u0646\u0679\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0635\u0644 \u0633\u06d2 \u0645\u06cc\u0679\u0631 \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u06c1\u0645 \u0627\u06cc\u06a9 \u0679\u0631\u0627\u0646\u0633\u0641\u0627\u0631\u0645\u0646\u06af \u0645\u06cc\u0679\u0631\u06a9\u0633 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u06d2 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0634\u0646 \u0633\u06d2 \u0636\u0631\u0628 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n
      function makeScene(map, origin, before) {\n  const mc = mapboxgl.MercatorCoordinate.fromLngLat([origin.lng, origin.lat], 0);\n  const s = mc.meterInMercatorCoordinateUnits();\n  \/\/ metres east \/ north \/ up at the origin  ->  Mercator.  Mercator y grows southward, hence -s.\n  const toMercator = new THREE.Matrix4()\n    .makeTranslation(mc.x, mc.y, mc.z)\n    .scale(new THREE.Vector3(s, -s, s));\n\n  const scene = new THREE.Scene();\n  const camera = new THREE.Camera();\n  scene.add(new THREE.HemisphereLight(0xfff4e4, 0x3c342d, 0.55));\n  scene.add(new THREE.AmbientLight(0xffffff, 0.1));\n  const sun = new THREE.DirectionalLight(0xfff8ee, 0.8);\n  sun.position.set(-0.45, -0.6, 1);\n  scene.add(sun);\n\n  let renderer = null;\n  const layer = {\n    id: \"debris3d\",\n    type: \"custom\",\n    renderingMode: \"3d\",\n    onAdd(m, gl) {\n      renderer = new THREE.WebGLRenderer({ canvas: m.getCanvas(), context: gl, antialias: true });\n      renderer.autoClear = false;             \/\/ the map has already drawn this frame\n      renderer.localClippingEnabled = true;   \/\/ used to sink buildings below ground\n    },\n    render(gl, matrix) {\n      camera.projectionMatrix.fromArray(matrix).multiply(toMercator);\n      renderer.resetState();                  \/\/ Mapbox changed GL state since our last draw\n      renderer.render(scene, camera);\n    },\n  };\n  map.addLayer(layer, before);\n  return { scene, camera, layer };\n}\n<\/code><\/pre>\n
      MapLibre \u0645\u06cc\u06ba\u060c \u062f\u0648\u0633\u0631\u06cc \u062f\u0644\u06cc\u0644 \u06c1\u06d2\u06d4 render<\/code> \u0627\u06cc\u06a9 \u0634\u06d2 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u06c1\u06d2: args.defaultProjectionData.mainMatrix<\/code>. \u0628\u0627\u0642\u06cc \u0633\u0628 \u06a9\u0686\u06be \u0648\u06cc\u0633\u0627 \u06c1\u06cc \u06c1\u06d2\u06d4<\/p>\n
      renderingMode: \"3d\"<\/code>    \u062e\u06cc\u0627\u0644 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0646\u0642\u0634\u06c1 \u06a9\u0648 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633 \u06a9\u06cc \u06af\u06c1\u0631\u0627\u0626\u06cc \u06a9\u06d2 \u0628\u0641\u0631 \u06a9\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \u0627\u0679\u06be\u0627\u0626\u06d2 \u06c1\u0648\u0626\u06d2 \u062d\u0635\u0648\u06ba \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u06a9\u0646\u06a9\u0631\u06cc\u0679 \u06a9\u06d2 \u0628\u0644\u0627\u06a9\u0633 \u0686\u06be\u067e\u06d2 \u06c1\u0648\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u0644\u06cc\u06d2 \u0627\u0633\u06d2 \u0627\u0648\u067e\u0631\u06cc \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0639\u0644\u06cc\u062d\u062f\u06c1 \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u062a\u0646\u0627\u0638\u0631 \u0645\u06cc\u06ba \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0645\u0644\u0628\u06d2 \u06a9\u06d2 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0679\u06a9\u0691\u06d2 \u0627\u0646\u0633\u0679\u06cc \u0679\u06cc\u0634\u0646\u0632 \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 HazardSim \u062f\u0631\u062c \u0630\u06cc\u0644 \u067e\u0648\u0644\u0632 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2: InstancedMesh<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0645\u0642\u0631\u0631\u06c1 \u0635\u0644\u0627\u062d\u06cc\u062a \u0648\u0627\u0644\u06cc \u0627\u0634\u06cc\u0627\u0621 \u06c1\u06cc\u06ba\u060c \u06c1\u0631 \u0642\u0633\u0645 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 (\u0633\u0644\u06cc\u0628\u060c \u062f\u06cc\u0648\u0627\u0631 \u06a9\u0627 \u0679\u06a9\u0691\u0627\u060c \u0631\u06cc\u0628\u0627\u0631\u060c \u0686\u0679\u0627\u0646\u060c \u0686\u06be\u062a \u06a9\u0627 \u067e\u0631\u0632\u0645) \u0627\u0648\u0631 \u062c\u0628 \u0679\u06a9\u0691\u0627 \u0628\u0646\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0627\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u062b\u0627\u0644 \u06a9\u0627 \u0627\u0634\u0627\u0631\u06cc\u06c1 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      function makePool(scene, geometry, material, capacity) {\n  const mesh = new THREE.InstancedMesh(geometry, material, capacity);\n  \/\/ allocate the colour buffer for the full capacity up front (see Gotchas)\n  mesh.instanceColor = new THREE.InstancedBufferAttribute(new Float32Array(capacity * 3).fill(1), 3);\n  mesh.count = 0;\n  mesh.frustumCulled = false;                 \/\/ the map camera is not a three.js camera\n  mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);\n  scene.add(mesh);\n\n  const dummy = new THREE.Object3D(), color = new THREE.Color();\n  dummy.rotation.order = \"ZXY\";\n  return {\n    n: 0, capacity,\n    add(p) {\n      if (this.n >= capacity) return -1;\n      const i = this.n++;\n      this.set(i, p);\n      color.setRGB(p.rgb[0], p.rgb[1], p.rgb[2]);\n      mesh.setColorAt(i, color);\n      mesh.instanceColor.needsUpdate = true;\n      mesh.count = this.n;\n      return i;\n    },\n    set(i, p) {\n      dummy.position.set(p.x, p.y, p.z);\n      dummy.rotation.set(p.tx, p.ty, p.yaw);\n      dummy.scale.set(p.sx, p.sy, p.sz);\n      dummy.updateMatrix();\n      mesh.setMatrixAt(i, dummy.matrix);\n      mesh.instanceMatrix.needsUpdate = true;\n    },\n  };\n}\n\nconst concrete = new THREE.MeshStandardMaterial({ map: concreteTexture, roughness: 1 });\nconst pools = {\n  slab: makePool(scene, new THREE.BoxGeometry(1, 1, 1), concrete, 30000),\n  wall: makePool(scene, new THREE.BoxGeometry(1, 1, 1), facadeMaterial, 1500),\n  bar:  makePool(scene, new THREE.BoxGeometry(1, 1, 1), new THREE.MeshStandardMaterial({ color: 0x6e4c38, metalness: 0.25 }), 20000),\n  rock: makePool(scene, rockGeometry(), concrete, 9000),\n};\n<\/code><\/pre>\n
      30,000 \u0633\u0644\u06cc\u0628 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u0644\u06af \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0688\u0631\u0627 \u06a9\u0627\u0644 \u06c1\u06d2\u06d4<\/p>\n
      \u0646\u0642\u0634\u06d2 \u06a9\u0648 \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u0686\u06cc\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2: \u0646\u0642\u0634\u06c1 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u06cc\u0627\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u06a9\u0686\u06be \u062a\u0628\u062f\u06cc\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0646\u0638\u0631 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u0633\u06d2 \u06a9\u0686\u06be \u0628\u062f\u0644 \u062c\u0627\u0626\u06d2\u06d4 \u06a9\u0627\u0644 map.triggerRepaint()<\/code> \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u06d2 \u0622\u062e\u0631 \u0645\u06cc\u06ba \u0622\u067e \u062c\u0648 \u062d\u0631\u06a9\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631 \u0645\u06cc\u0634 \u06a9\u0648 \u0645\u06cc\u0645\u0648\u0631\u06cc \u0645\u06cc\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u0646\u06c1 \u06a9\u06c1 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631\u06d4<\/p>\n
      \"\u06a9\u06cc\u0641<\/p>\n
      \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0641\u0648\u0679 \u067e\u0631\u0646\u0679 \u06a9\u062b\u06cc\u0631 \u0627\u0644\u0627\u0636\u0644\u0627\u0639 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u062a \u06c1\u06d2\u06d4 \u06a9\u0633\u06cc \u0639\u0645\u0627\u0631\u062a \u06a9\u0648 \u067e\u0644\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u06a9\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u0645\u0631\u06a9\u0632\u060c \u0648\u0627\u0642\u0641\u06cc\u062a \u0627\u0648\u0631 \u062f\u0648 \u0637\u0631\u0641 \u06a9\u06cc \u0644\u0645\u0628\u0627\u0626\u06cc \u06c1\u0648\u06d4 \u0627\u06cc\u06a9 \u0627\u0648\u0631\u06cc\u0646\u0679\u0688 \u0628\u0627\u0624\u0646\u0688\u0646\u06af \u0628\u0627\u06a9\u0633 \u06a9\u0626\u06cc \u0644\u0627\u0626\u0646\u0648\u06ba \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      function orientedBox(ring, kx, ky, origin) {\n  \/\/ ring in lng\/lat -> local metres\n  const loc = ring.map(([lng, lat]) => [(lng - origin.lng) * kx, (lat - origin.lat) * ky]);\n\n  \/\/ the longest edge sets the orientation\n  let ang = 0, best = 0;\n  for (let i = 1; i < loc.length; i++) {\n    const ex = loc[i][0] - loc[i - 1][0], ey = loc[i][1] - loc[i - 1][1];\n    if (ex * ex + ey * ey > best) { best = ex * ex + ey * ey; ang = Math.atan2(ey, ex); }\n  }\n\n  \/\/ project every vertex onto that axis and its normal, take the extents\n  const ca = Math.cos(ang), sa = Math.sin(ang);\n  let u0 = Infinity, u1 = -Infinity, v0 = Infinity, v1 = -Infinity;\n  for (const [x, y] of loc) {\n    const u = x * ca + y * sa, v = -x * sa + y * ca;\n    if (u < u0) u0 = u; if (u > u1) u1 = u;\n    if (v < v0) v0 = v; if (v > v1) v1 = v;\n  }\n  const cu = (u0 + u1) \/ 2, cv = (v0 + v1) \/ 2;\n  return {\n    x: cu * ca - cv * sa, y: cu * sa + cv * ca,    \/\/ centre, metres from origin\n    ang,\n    L1: Math.max(2, u1 - u0), L2: Math.max(2, v1 - v0),\n  };\n}\n<\/code><\/pre>\n
      \"3-\u067e\u06cc\u0646\u0644<\/p>\n
      \u0633\u06cc\u0646\u06d2 2 \u0633\u06d2 4 \u0628\u0644\u0627\u06a9\u0633 \u06a9\u06d2 \u0688\u06be\u06cc\u0631 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 Mesh<\/code> \u06c1\u0631 \u0627\u06cc\u06a9\u060c \u0627\u06cc\u06a9 Group<\/code> \u0627\u0635\u0644 \u0646\u06cc\u0686\u06d2 \u06a9\u06d2 \u06a9\u0646\u0627\u0631\u06d2 \u067e\u0631 \u06c1\u06d2 \u062c\u0633 \u06a9\u06d2 \u06af\u0631\u062f \u0639\u0645\u0627\u0631\u062a \u06af\u06be\u0648\u0645\u06d2 \u06af\u06cc\u06d4 \u0637\u0628\u06cc\u0639\u06cc\u0627\u062a \u0627\u06cc\u06a9 \u0633\u062e\u062a \u062c\u0633\u0645 \u06c1\u06d2 \u062c\u0648 \u06af\u0631 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0648\u0646\u06cc\u06cc \u0633\u0631\u0639\u062a \u0645\u062a\u0646\u0627\u0633\u0628 \u06c1\u06d2: g \/ h \u00b7 sin \u03b8<\/code>\u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u06cc\u06c1 \u06c1\u0644\u06a9\u06cc \u06c1\u0644\u06a9\u06cc \u06c1\u0644\u06a9\u06cc \u06c1\u0644\u06a9\u06cc \u062d\u0631\u06a9\u062a \u06a9\u0631\u0646\u06d2 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u062c\u06be\u06a9\u0627\u0624 \u062f\u06c1\u0644\u06cc\u0632 \u0633\u06d2 \u06af\u0632\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0627\u0648\u067e\u0631\u06cc \u0628\u0644\u0627\u06a9 \u0627\u0644\u06af \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0641\u0648\u0631\u06cc \u0631\u0641\u062a\u0627\u0631 \u067e\u0631 \u0628\u06cc\u0644\u0633\u0679\u06a9 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0691 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      function startTip(scene, box, h, onLand) {\n  const n = Math.max(2, Math.min(4, Math.round(h \/ 9))), hs = h \/ n;\n  const geo = new THREE.BoxGeometry(box.L1, box.L2, hs);\n  const group = new THREE.Group();\n  group.position.set(box.x + Math.cos(box.ang) * box.L1 \/ 2, box.y + Math.sin(box.ang) * box.L1 \/ 2, 0);\n  group.rotation.z = box.ang;\n  scene.add(group);\n\n  const segs = [];\n  for (let i = 0; i < n; i++) {\n    const m = new THREE.Mesh(geo, wallMaterial);\n    m.frustumCulled = false;\n    group.add(m);\n    segs.push({ m, free: false, gone: false, x: -box.L1 \/ 2, z: hs * (i + 0.5), th: 0, px: 0, pz: 0 });\n  }\n\n  const tip = { th: 0.03, w: 0.22, broke: false, bend: 0.1 + Math.random() * 0.14, brk: 0.4 + Math.random() * 0.3 };\n\n  function pose() {\n    let bx = -box.L1 \/ 2, bz = 0;\n    for (let j = 0; j < n; j++) {\n      const s = segs[j];\n      if (s.free) continue;\n      const th = tip.th * (1 + tip.bend * j);        \/\/ upper blocks bend a little further\n      const sn = Math.sin(th), cs = Math.cos(th);\n      if (j === 0) { bx = -box.L1 \/ 2 * cs; bz = box.L1 \/ 2 * sn; }\n      s.px = s.x; s.pz = s.z;\n      s.x = bx + sn * hs \/ 2; s.z = bz + cs * hs \/ 2; s.th = th;\n      bx += sn * hs; bz += cs * hs;\n      s.m.position.set(s.x, 0, s.z);\n      s.m.rotation.y = th;\n    }\n  }\n\n  return function tick(dt) {\n    tip.w = Math.min(2.2, tip.w + 1.5 * 9.8 \/ h * Math.sin(tip.th) * dt);\n    tip.th += Math.min(0.09, tip.w * dt);          \/\/ never more than ~5 degrees per frame\n    pose();\n\n    if (!tip.broke && tip.th * (1 + tip.bend * (n - 1)) > tip.brk && n > 1) {\n      tip.broke = true;\n      for (let j = 1; j < n; j++) {\n        const s = segs[j];\n        s.free = true;\n        s.vx = Math.max(-18, Math.min(18, (s.x - s.px) \/ Math.max(dt, 0.008)));\n        s.vz = Math.max(-18, Math.min(18, (s.z - s.pz) \/ Math.max(dt, 0.008)));\n        s.w = tip.w * (1 + tip.bend * j) * (1.05 + Math.random() * 0.25);\n      }\n    }\n\n    let left = 0;\n    for (const s of segs) {\n      if (s.gone) continue;\n      if (s.free) {\n        s.vz -= 9.8 * dt; s.x += s.vx * dt; s.z += s.vz * dt; s.th += s.w * dt;\n        s.m.position.set(s.x, 0, s.z);\n        s.m.rotation.y = s.th;\n      }\n      const landed = s.free ? s.z < Math.min(hs, box.L1) * 0.5 + 0.3 : tip.th >= 1.25;\n      if (landed) {\n        s.gone = true;\n        group.remove(s.m);\n        onLand(group.position.x + Math.cos(box.ang) * s.x, group.position.y + Math.sin(box.ang) * s.x);\n      } else left++;\n    }\n    if (!left) { scene.remove(group); geo.dispose(); return true; }   \/\/ finished\n    return false;\n  };\n}\n<\/code><\/pre>\n
      \u06a9\u0644\u06cc\u0645\u067e \u0622\u0631\u0627\u0626\u0634\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4 \u0639\u0644\u06cc\u062d\u062f\u06af\u06cc \u06a9\u06cc \u0631\u0641\u062a\u0627\u0631 18 \u0645\u06cc\u0679\u0631 \u0641\u06cc \u0633\u06cc\u06a9\u0646\u0688 \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06d2 \u0627\u0648\u0631 \u0641\u0631\u06cc\u0645 \u0645\u0631\u062d\u0644\u06c1 \u06c1\u06d2\u06d4 dt<\/code> \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u067e\u0648\u0632\u06cc\u0634\u0646 \u06a9\u06d2 \u0641\u0631\u0642 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u06a9\u0645 \u0627\u0632 \u06a9\u0645 8ms \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06c1\u0686\u06a9\u06cc \u06a9\u06d2 \u0641\u0631\u06cc\u0645 \u0628\u0644\u0627\u06a9\u0633 \u06a9\u0648 \u0645\u062f\u0627\u0631 \u0645\u06cc\u06ba \u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633\u06cc \u0648\u062c\u06c1 \u0633\u06d2\u060c \u06a9\u0648\u0646\u06cc\u06cc \u0631\u0641\u062a\u0627\u0631 2.5 rad\/s \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06d2 \u0627\u0648\u0631 \u062c\u06be\u06a9\u0627\u0624 0.09 rad \u0641\u06cc \u0641\u0631\u06cc\u0645 \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06c1\u06d2\u06d4 \u0639\u0645\u0627\u0631\u062a \u06a9\u0648 \u0627\u06cc\u0633\u0627 \u06a9\u0686\u06be \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u06cc\u06a9\u06be \u06a9\u0631 \u062c\u0648 \u0648\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u062a\u06be\u06cc \u0627\u0646 \u062a\u0645\u0627\u0645 \u0646\u0645\u0628\u0631\u0648\u06ba \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4<\/p>\n
      onLand<\/code>    \u06cc\u06c1\u06cc\u06ba \u0633\u06d2 \u0627\u0646\u06c1\u062f\u0627\u0645 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u0627 \u0646\u0638\u0631 \u0622\u0646\u06d2 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0628\u0644\u0627\u06a9 \u062c\u0648 \u0632\u0645\u06cc\u0646 \u06a9\u0648 \u0686\u06be\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0633 \u0645\u0642\u0627\u0645 \u067e\u0631 \u062f\u06be\u0645\u0627\u06a9\u06c1 \u062e\u06cc\u0632 \u0645\u0644\u0628\u06c1 \u0627\u0648\u0631 \u062f\u06be\u0648\u0644 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u0627\u06cc\u06a9 \u0688\u06be\u06cc\u0631 \u0686\u06be\u0648\u0691 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 14: \u0645\u0644\u0628\u06c1 \u0627\u0648\u0631 \u062f\u06be\u0648\u0644<\/h2>\n
      \u0645\u0644\u0628\u06c1 \u0633\u0637\u062d 12 \u067e\u0644\u0633 \u06a9\u0634\u0634 \u062b\u0642\u0644 \u0633\u06d2 \u0627\u06cc\u06a9 \u0645\u062b\u0627\u0644\u06cc \u067e\u0648\u0644 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u06af\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0639\u0645\u0627\u0631\u062a \u0627\u06cc\u06a9 \u0633\u0646\u06af \u0645\u06cc\u0644 \u0633\u06d2 \u06af\u0632\u0631\u062a\u06cc \u06c1\u06d2 (\u067e\u06c1\u0644\u0627 \u0632\u0648\u0627\u0644\u060c \u06c1\u0631 \u0645\u0646\u0632\u0644 \u06a9\u0648 \u0641\u0631\u0634 \u0628\u06c1 \u0645\u0646\u0632\u0644 \u0645\u0648\u0688 \u0645\u06cc\u06ba\u060c \u0628\u0644\u0627\u06a9 \u0644\u06cc\u0646\u0688\u0646\u06af)\u060c \u0627\u0633 \u06a9\u06d2 \u0642\u062f\u0645\u0648\u06ba \u06a9\u06d2 \u0646\u0634\u0627\u0646\u0627\u062a \u06a9\u06d2 \u06a9\u0646\u0627\u0631\u06d2 \u0633\u06d2 \u0686\u0646\u062f \u0679\u06a9\u0691\u06d2 \u067e\u06be\u06cc\u0646\u06a9 \u062f\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0633 \u06a9\u06cc \u0631\u0641\u062a\u0627\u0631 \u0645\u0631\u06a9\u0632 \u0633\u06d2 \u062f\u0648\u0631 \u06c1\u0648\u062a\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n
      function throwDebris(pools, b, origin, kx, ky, top, n) {\n  const ring = b.polys[0][0];\n  const cx = (b.lng - origin.lng) * kx, cy = (b.lat - origin.lat) * ky;\n  for (let i = 0; i < n; i++) {\n    \/\/ a random point on a random edge of the footprint\n    const e = 1 + Math.floor(Math.random() * (ring.length - 1)), t = Math.random();\n    const a = ring[e - 1], z = ring[e];\n    const x = ((a[0] + (z[0] - a[0]) * t) - origin.lng) * kx;\n    const y = ((a[1] + (z[1] - a[1]) * t) - origin.lat) * ky;\n    \/\/ outward, with a little spread\n    const ox = x - cx, oy = y - cy, ol = Math.hypot(ox, oy) || 1, v = 2 + Math.random() * 6;\n    const size = 0.3 + Math.random() * 1.1;\n    const idx = pools.rock.add({\n      x, y, z: top * (0.35 + Math.random() * 0.65),\n      yaw: Math.random() * 6, tx: Math.random() * 6, ty: Math.random() * 6,\n      sx: size, sy: size * 0.8, sz: size * 0.6, rgb: concreteColour(),\n    });\n    if (idx >= 0) flying.push({ idx, x, y, z: top, vx: ox \/ ol * v, vy: oy \/ ol * v, vz: Math.random() * 3, spin: (Math.random() - 0.5) * 8 });\n  }\n}\n\nfunction tickDebris(pools, dt) {\n  for (let i = flying.length - 1; i >= 0; i--) {\n    const p = flying[i];\n    p.vz -= 9.8 * dt;\n    p.x += p.vx * dt; p.y += p.vy * dt; p.z += p.vz * dt;\n    p.tx += p.spin * dt;\n    if (p.z <= p.sz * 0.35) { p.z = p.sz * 0.35; flying.splice(i, 1); }   \/\/ landed: stays as rubble\n    pools.rock.set(p.idx, p);\n  }\n}\n<\/code><\/pre>\n
      \u0648\u06c1 \u0679\u06a9\u0691\u06d2 \u062c\u0648 \u0627\u062a\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 \u0627\u067e \u0688\u06cc\u0679 \u06c1\u0648\u0646\u0627 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u067e\u0648\u0644 \u0645\u06cc\u06ba \u0631\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0622\u067e \u06a9\u0627 \u0645\u0644\u0628\u06c1 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0645\u0641\u062a \u06c1\u06d2\u06d4<\/p>\n
      HazardSim \u0627\u0633 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u06a9\u0686\u06be \u0627\u0648\u0631 \u0686\u06cc\u0632\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0633 \u067e\u0631 \u0639\u0645\u0627\u0631\u062a \u06a9\u06be\u0691\u06cc \u06c1\u06d2 \u0648\u06c1 \u0641\u0631\u0634 \u0633\u0644\u06cc\u0628 \u06a9\u0627 \u0627\u06cc\u06a9 \u0633\u06cc\u0679 \u06c1\u06d2 \u062c\u0648 9 \u0645\u06cc\u0679\u0631 \u06a9\u06d2 \u06af\u0631\u0688 \u0645\u06cc\u06ba \u0633\u062c\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u060c \u06a9\u06be\u0691\u06a9\u06cc\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u06cc\u0648\u0627\u0631 \u06a9\u06d2 \u0679\u06a9\u0691\u06d2\u060c \u062c\u06be\u06a9\u0627 \u06c1\u0648\u0627 \u0631\u06cc\u0628\u0627\u0631\u060c \u0688\u06be\u06cc\u0631\u0648\u06ba \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0644\u0648 \u0641\u0644 \u0627\u06cc\u06a9\u0633\u0679\u0631\u0648\u0634\u0646 \u0645\u0627\u0624\u0646\u0688\u0632 \u06c1\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u06cc\u06c1 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u06d2 \u06a9\u06c1 \u0632\u0645\u06cc\u0646 \u0628\u0631\u0627\u0628\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0642\u0631\u06cc\u0628 \u062a\u0631\u06cc\u0646 \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u0644\u0628\u06d2 \u06a9\u0627 \u0641\u0648\u0679\u0648 \u06af\u0631\u0627\u0641\u06cc \u0633\u06d2 \u0627\u0633\u06a9\u06cc\u0646 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u0645\u0627\u0688\u0644\u06d4 \u0648\u06c1 \u0633\u062c\u06cc\u0644\u0627 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u067e\u0648\u0644 \u0627\u0648\u0631 \u06a9\u0634\u0634 \u062b\u0642\u0644 \u06a9\u0648 \u0622\u067e \u0633\u06d2 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0641\u0627\u0626\u062f\u06c1 \u0627\u0679\u06be\u0627\u0646\u06d2 \u062f\u06cc\u06ba\u06d4<\/p>\n
      \"\u06af\u0631\u0646\u06d2<\/p>\n
      \u062f\u06be\u0648\u0644 \u0648\u0627\u062d\u062f \u062c\u06af\u06c1 \u06c1\u06d2 \u062c\u0633\u06d2 \u0645\u06cc\u06ba \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0627\u0633\u067e\u06cc\u0633 \u0645\u06cc\u06ba \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u0648\u06ba\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0628\u0627\u062a \u0642\u0627\u0628\u0644 \u0630\u06a9\u0631 \u06c1\u06d2 \u06a9\u06c1 \u062d\u0635\u06c1 1 \u0645\u06cc\u06ba \u067e\u0627\u0646\u06cc \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u06c1\u0644\u06a9 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0627\u0648\u062c\u0648\u062f \u06cc\u06c1 \u06a9\u06cc\u0648\u06ba \u0679\u06be\u06cc\u06a9 \u06c1\u06d2\u06d4 \u062f\u06be\u0648\u0644 \u06a9\u06d2 \u0630\u0631\u0627\u062a \u0686\u06be\u0648\u0679\u06d2 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646 \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u0633\u06cc\u0646\u06a9\u0691\u0648\u06ba \u0645\u06cc\u06ba \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u06c1\u0631 \u0627\u06cc\u06a9 3 \u0633\u06d2 8 \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0632\u06cc\u062f \u0628\u0631\u0622\u06ba\u060c \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u06a9\u0648 \u0627\u06cc\u06a9 \u0646\u0631\u0645 \u0627\u0633\u067e\u0631\u0627\u0626\u0679 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u06a9\u06be\u06cc\u0646\u0686\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u06c1\u0631 \u0630\u0631\u06c1 \u06a9\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646\u060c \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u06af\u0631\u062f\u0634 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u0633\u06d2 \u067e\u06cc\u0634 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u0626\u06d2 \u06a9\u0648\u0626\u06cc \u06a9\u0646\u0627\u0631\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u06cc\u062f\u06be\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u0626\u06d2 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc \u062c\u06af\u06c1 \u06a9\u06d2 \u0627\u0635\u0648\u0644 \u0628\u0691\u06cc\u060c \u0645\u0633\u062a\u0642\u0644 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u06cc \u0634\u06a9\u0644\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n
      \u0627\u06c1\u0645 \u0641\u06cc\u0635\u0644\u06d2 \u062e\u0627\u06a9 \u06a9\u06c1\u0627\u06ba \u0633\u06d2 \u0622\u062a\u06cc \u06c1\u06d2<\/strong>. \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0648\u0631\u0698\u0646 \u0645\u06cc\u06ba \u067e\u0648\u0631\u06d2 \u0634\u06c1\u0631 \u0645\u06cc\u06ba \u0645\u0633\u0644\u0633\u0644 \u062f\u06be\u0646\u062f \u0627\u0648\u0631 \u062c\u0644\u062a\u06cc \u06c1\u0648\u0626\u06cc \u0622\u06af \u062a\u06be\u06cc\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0633\u06cc\u0648\u0631 \u06a9\u06cc \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u062a\u0627 \u062a\u06be\u0627\u06d4 \u062c\u0633\u06d2 \u06c1\u0645 \u0627\u0635\u0644\u06cc \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0691\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 \u062e\u0627\u06a9 \u06c1\u06d2 \u062c\u0648 \u0635\u0631\u0641 \u0648\u0627\u0642\u0639\u0627\u062a \u0633\u06d2 \u0622\u062a\u06cc \u06c1\u06d2\u06d4 \u0641\u0631\u0634 \u06a9\u06d2 \u06af\u0631\u062a\u06d2 \u06c1\u06cc \u062f\u06be\u0691\u06a9\u0646\u06d2 \u06a9\u06cc \u0622\u0648\u0627\u0632\u060c \u0632\u0645\u06cc\u0646 \u067e\u0631 \u06af\u0631\u062a\u06d2 \u06c1\u06cc \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0633\u06d2 \u0627\u0679\u06be\u0646\u06d2 \u06a9\u06cc \u0622\u0648\u0627\u0632\u060c \u0646\u0631\u0645 \u0641\u0631\u0634 \u06a9\u06d2 \u06af\u0631\u062a\u06d2 \u06c1\u06cc \u06af\u0631\u0627\u0624\u0646\u0688 \u0641\u0644\u0648\u0631 \u0633\u06d2 \u062c\u06cc\u0679 \u0637\u06cc\u0627\u0631\u0648\u06ba \u06a9\u06d2 \u067e\u06be\u0679\u0646\u06d2 \u06a9\u06cc \u0622\u0648\u0627\u0632\u06d4 \u06c1\u0631 \u0648\u0627\u0642\u0639\u06c1 \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0631\u0642\u0628\u06d2 \u06a9\u06d2 \u0645\u062a\u0646\u0627\u0633\u0628 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0632\u0648\u0627\u0644 \u06a9\u06d2 \u0645\u062a\u0646\u0627\u0633\u0628 \u0639\u0645\u0648\u062f\u06cc \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627 \u0627\u062e\u0631\u0627\u062c \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u0648\u0627\u0642\u0639\u06d2 \u062a\u06a9 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      function emitDust(b, level, n, surge) {\n  for (let i = 0; i < n && dust.length < MAX_DUST; i++) {\n    const a = Math.random() * Math.PI * 2;\n    const speed = surge ? 5 + Math.random() * 8 : 1 + Math.random() * 3;\n    dust.push({\n      lng: b.lng, lat: b.lat,                                        \/\/ anchor on the map\n      x: Math.cos(a) * b.rf * 0.6, y: Math.sin(a) * b.rf * 0.6,     \/\/ offset, metres\n      z: surge ? Math.random() * 5 : level * (0.2 + Math.random() * 0.8),\n      vx: Math.cos(a) * speed, vy: Math.sin(a) * speed,\n      vz: surge ? 0.3 + Math.random() * 1.2 : 1.5 + Math.random() * 3,\n      size: (surge ? b.rf * 0.5 + 6 : b.rf * 0.6 + 4) * (0.7 + Math.random() * 0.6),\n      grow: 3 + Math.random() * 5,\n      t: 0, life: (surge ? 5 : 3.5) + Math.random() * 2.5,\n      sprite: sprites[Math.floor(Math.random() * sprites.length)],\n      alpha: 0.5 + Math.random() * 0.3,\n    });\n  }\n}\n<\/code><\/pre>\n
      \u06c1\u0631 \u0641\u0631\u06cc\u0645\u060c \u06c1\u0631 \u0630\u0631\u06c1 \u0633\u0633\u062a \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u06c1\u0648\u0627 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u06c1\u06c1 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679\u0633\u06d4 map.project([lng + x \/ kx, lat + y \/ ky])<\/code> \u06af\u0631\u0627\u0624\u0646\u0688 \u067e\u0648\u0627\u0626\u0646\u0679 \u06a9\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0644\u0648\u06a9\u06cc\u0634\u0646 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u0627\u0633 \u0637\u0631\u062d \u06c1\u0648\u062a\u0627 \u06c1\u06d2: y -= z * pixelsPerMetre * sin(pitch)<\/code>. \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06cc \u06af\u06c1\u0631\u0627\u0626\u06cc \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0633\u06d2 \u0633\u0627\u0645\u0646\u06d2 \u06a9\u06cc \u0637\u0631\u0641 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba: drawImage<\/code>\u06cc\u06c1 \u0639\u0645\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062e\u062a\u0645 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0686\u0646\u062f \u0633\u0648 \u06c1\u06d2\u06d4 drawImage<\/code> \u06cc\u06c1 \u0646\u0642\u0634\u06d2 \u067e\u0631 2D \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u0641\u06cc \u0641\u0631\u06cc\u0645 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06cc \u0642\u06cc\u0645\u062a \u0628\u06c1\u062a \u06a9\u0645 \u06c1\u06d2\u06d4<\/p>\n
      \u0645\u0631\u062d\u0644\u06c1 15: \u0627\u06af\u0631 \u06a9\u06cc\u0645\u0631\u06c1 \u06c1\u0644\u062a\u0627 \u200b\u200b\u06c1\u06d2\u06d4<\/h2>\n
      \u0627\u0628 \u062a\u06a9 \u06a9\u06cc \u06c1\u0631 \u0686\u06cc\u0632 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u06a9\u0648\u0646\u06d2 \u0645\u06cc\u06ba \u062e\u0627\u0645\u0648\u0634\u06cc \u0633\u06d2 \u0686\u0644\u0646\u06d2 \u0645\u06cc\u06ba \u06a9\u0627\u0645\u06cc\u0627\u0628 \u0631\u06c1\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06a9\u06cc\u0645\u0631\u06c1 \u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u0633\u0627\u0645\u0639\u06cc\u0646 \u06a9\u0648 \u0632\u0644\u0632\u0644\u06d2 \u06a9\u0627 \u0627\u062d\u0633\u0627\u0633 \u062f\u0644\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u062f\u0648 \u0686\u06cc\u0632\u06cc\u06ba\u06d4 \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u063a\u0648\u0637\u06c1 \u0644\u06af\u0627\u0626\u06cc\u06ba: \u062c\u0627\u0626\u0632\u06c1 \u0645\u06cc\u06ba \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 45 \u0688\u06af\u0631\u06cc \u0633\u06d2 14.6 \u062a\u06a9 \u0632\u0648\u0645 \u06a9\u0631\u06cc\u06ba\u060c \u0679\u0627\u0626\u0644 \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u062a\u06a9 \u067e\u06a9\u0691\u06d2 \u0631\u06c1\u06cc\u06ba\u060c \u067e\u06be\u0631 \u0645\u0631\u06a9\u0632 \u0645\u06cc\u06ba \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 62 \u0688\u06af\u0631\u06cc \u0633\u06d2 16.2 \u062a\u06a9 \u0632\u0648\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 \u067e\u06cc\u0686\u06be\u06d2 \u06c1\u0679\u0646\u0627 \u06a9\u0648\u0626\u06cc \u0622\u067e\u0634\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0645\u06cc\u06ba \u0633\u06cc\u062f\u06be\u06d2 \u0632\u0648\u0645 16 \u0645\u06cc\u06ba \u063a\u0648\u0637\u06c1 \u0644\u06af\u0627\u062a\u0627 \u06c1\u0648\u06ba\u060c \u062a\u0648 \u0627\u0633 \u0632\u0648\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644 \u0646\u06c1\u06cc\u06ba \u0622\u06cc\u0627 \u06c1\u06d2\u060c querySourceFeatures<\/code> \u0627\u06cc\u06a9 \u0632\u0644\u0632\u0644\u06c1 \u062e\u0627\u0644\u06cc \u0634\u06c1\u0631 \u067e\u0631 \u062d\u0645\u0644\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0642\u0631\u06cc\u0628\u0627 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0648\u0627\u067e\u0633 \u0646\u06c1\u06cc\u06ba \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      function diveToCity(map, center, then) {\n  const bearing = map.getBearing();\n  map.easeTo({ center, zoom: 14.6, pitch: 45, bearing: bearing - 10, duration: 1100, essential: true });\n  const t1 = Date.now();\n  (function hold() {\n    const loaded = !map.isMoving() && map.areTilesLoaded();\n    if (Date.now() - t1 > 1000 && (loaded || Date.now() - t1 > 2000)) {\n      map.easeTo({ center, zoom: 16.2, pitch: 62, bearing: bearing - 25, duration: 1500, essential: true });\n      map.once(\"moveend\", then);\n    } else setTimeout(hold, 150);\n  })();\n}\n<\/code><\/pre>\n
      \u062f\u0648\u0633\u0631\u0627\u060c \u06c1\u0644\u0646\u0627. \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u06cc\u067e \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u062d\u0631\u06a9\u062a \u0646\u06c1 \u062f\u06cc\u06ba\u06d4 \u06c1\u0644\u0627\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u06cc\u0645\u0631\u06c1 easeTo<\/code> \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u06a9\u06d2 \u0646\u0638\u0627\u0645 \u0633\u06d2 \u0644\u0691\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u06d2 \u062a\u0645\u0627\u0645 \u06af\u06be\u0645\u0627\u0624 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0627\u0626\u0644\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633\u06d2 \u06c1\u0644\u0627\u0626\u06cc\u06ba \u06a9\u0646\u0679\u06cc\u0646\u0631<\/em> CSS \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0633\u0627\u062a\u06be\u06d4 \u0646\u0642\u0634\u06c1 \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u062a\u0627 \u06a9\u06c1 \u06cc\u06c1 \u0645\u0646\u062a\u0642\u0644 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2:<\/p>\n
      function shake(durationMs, magnitude) {\n  const el = map.getContainer();\n  const w = window.innerWidth, h = window.innerHeight;\n  const amp = Math.min(28, w * 0.02, Math.max(6, (magnitude - 4) * 4.2));\n  const dir = Math.random() * Math.PI;\n  const t0 = performance.now();\n  let last = t0, phase = 0;\n\n  function tick(now) {\n    const k = (now - t0) \/ durationMs;\n    if (k >= 1) { el.style.transform = \"\"; return; }\n    const dt = Math.min(0.05, (now - last) \/ 1000); last = now;\n\n    \/\/ builds up over the first third, then decays; frequency rises with it\n    let env, omega;\n    if (k < 0.35) { const u = k \/ 0.35; env = 0.15 + 0.85 * u * u * (3 - 2 * u); omega = 7 + 39 * u * u; }\n    else          { const v = (k - 0.35) \/ 0.65; env = Math.pow(1 - v, 1.4); omega = 46 - 18 * v; }\n    phase += omega * dt;\n\n    const a = amp * env;\n    const osc = Math.sin(phase) * 0.78 + (Math.random() - 0.5) * 0.44 * Math.min(1, omega \/ 30);\n    const x = Math.cos(dir) * osc * a, y = Math.sin(dir) * osc * a * 0.7;\n    el.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px) rotate(${(osc * a * 0.012).toFixed(3)}deg) scale(${(1 + 2.4 * amp \/ Math.min(w, h) * env).toFixed(4)})`;\n    requestAnimationFrame(tick);\n  }\n  requestAnimationFrame(tick);\n}\n<\/code><\/pre>\n
      \u0644\u0641\u0627\u0641\u06c1 \u0637\u0648\u0644 \u0648 \u0639\u0631\u0636 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u06c1\u0645 \u06c1\u06d2\u06d4 \u0627\u0635\u0644 \u06c1\u0644\u0646\u0627 \u0627\u06cc\u06a9 \u06cc\u0627 \u062f\u0648 \u0633\u06cc\u06a9\u0646\u0688 \u062a\u06a9 \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u060c \u0686\u0648\u0679\u06cc\u0648\u06ba \u067e\u0631\u060c \u0627\u0648\u0631 \u067e\u06be\u0631 \u06a9\u0686\u06be \u0627\u0648\u0631 \u06a9\u06d2 \u0628\u0639\u062f \u062e\u062a\u0645 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u06cc\u0633\u06d2 \u062c\u06cc\u0633\u06d2 \u06cc\u06c1 \u0628\u0691\u0627 \u06c1\u0648\u062a\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0639\u062f\u062f \u0628\u06be\u06cc \u0628\u0691\u06be\u062a\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u0633\u0679\u06cc\u0646\u0688 \u062c\u06cc\u0679\u0631 \u06a9\u0648 \u0679\u0648\u0679\u06cc \u06c1\u0648\u0626\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u0691\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u062b\u0631 \u062e\u062a\u0645 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0645\u0631\u06a9\u0632\u06cc \u062c\u06be\u0679\u06a9\u06d2 \u06a9\u06d2 3 \u0633\u06d2 4 \u0633\u06cc\u06a9\u0646\u0688 \u0628\u0639\u062f \u0646\u0635\u0641 \u0637\u0648\u0644 \u0648 \u0639\u0631\u0636 \u06a9\u0627 \u0622\u0641\u0679\u0631 \u0634\u0627\u06a9 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u06c1\u0644\u0646\u0627 \u0628\u0646\u062f \u06c1\u0648\u062c\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u06a9\u06cc\u0645\u0631\u06c1 \u06a9\u0648 \u062f\u06be\u06cc\u0631\u06d2 \u062f\u06be\u06cc\u0631\u06d2 \u0642\u0631\u06cc\u0628 \u062a\u0631\u06cc\u0646 \u06af\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0645\u0642\u0627\u0645 \u06a9\u06d2 \u0628\u06cc\u0686 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba\u060c \u0627\u0633\u06d2 \u0686\u0646\u062f \u0633\u06cc\u06a9\u0646\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u06c1\u0627\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0645\u0644\u0628\u06d2 \u06a9\u0648 \u0627\u0633 \u0644\u0645\u062d\u06d2 \u06a9\u0648 \u067e\u06a9\u0691\u0646\u06d2 \u06a9\u0627 \u0645\u0648\u0642\u0639 \u0645\u0644\u06d2\u060c \u067e\u06be\u0631 \u0637\u0627\u0642\u062a \u06a9\u06cc \u0627\u0646\u06af\u0648\u0679\u06be\u06cc \u0627\u0648\u0631 \u06c1\u0644\u0627\u06a9\u062a\u0648\u06ba \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba\u06d4<\/p>\n
      \u0627\u0633\u06d2 \u062a\u06cc\u0632 \u0631\u06a9\u06be\u0648<\/h2>\n
      \u0686\u0646\u062f \u0641\u06cc\u0635\u0644\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u06c1\u0645 \u0627\u067e\u0646\u06d2 \u0644\u06cc\u067e \u0679\u0627\u067e \u067e\u0631 60fps \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 \u0641\u0648\u0646 \u067e\u0631 \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u0648 \u06af\u0626\u06d2\u06d4<\/p>\n
      1. \u0641\u06a9\u0633\u0688 \u0635\u0644\u0627\u062d\u06cc\u062a \u067e\u0648\u0644<\/h3>\n
      \u06c1\u0631 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u067e\u0648\u0644 \u06a9\u06cc \u0627\u06cc\u06a9 \u062d\u062f \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 add<\/code> \u0631\u067e\u0648\u0631\u0679 -1<\/code> \u062c\u0628 \u0628\u06be\u0631\u0627 \u06c1\u0648\u06d4 \u06a9\u0645 \u0637\u0627\u0642\u062a \u0648\u0627\u0644\u06d2 \u0622\u0644\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0679\u0648\u067e\u06cc \u06a9\u0645 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u0639\u0646\u06cc 30,000 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 9,000 \u0633\u0644\u06cc\u0628 \u0627\u0648\u0631 9,000 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 3,000 \u067e\u062a\u06be\u0631\u06d4 \u0645\u0646\u0638\u0631 \u06a9\u0648 \u0633\u0644\u0627\u0626\u06cc\u0688 \u0634\u0648 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u06a9\u0645 \u0679\u06a9\u0691\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n
      2. \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0622\u0644\u06c1 \u06a9\u06cc \u067e\u0631\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06c1\u0648 \u06af\u06cc\u0627\u06d4<\/h3>\n
      \u0645\u0648\u0628\u0627\u0626\u0644 \u0635\u0627\u0631\u0641 \u0627\u06cc\u062c\u0646\u0679\u060c navigator.deviceMemory < 6<\/code>\u060c hardwareConcurrency <= 4<\/code>\u0645\u062a\u0628\u0627\u062f\u0644 \u0637\u0648\u0631 \u067e\u0631\u060c 700px \u0633\u06d2 \u06a9\u0645 \u06a9\u0627 \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0635\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u06c1\u0644\u0648 \u0622\u0644\u06c1 \u06a9\u0648 \u0646\u0686\u0644\u06d2 \u062f\u0631\u062c\u06d2 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06d2 \u06af\u0627\u06d4 \u0646\u0686\u0644\u06d2 \u062f\u0631\u062c\u0648\u06ba \u06a9\u0648 \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4 three.js<\/code> \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u062c\u06be\u06a9\u0627 \u06c1\u0648\u0627\u060c \u0635\u0631\u0641 \u06af\u06be\u0679\u0627 \u06c1\u0648\u0627 \u067e\u0631\u0648\u0679\u0631\u06cc\u0634\u0646 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u060c 1\/3 \u06a9\u0648 \u062f\u06be\u0648\u0644 \u0633\u06d2 \u0688\u06be\u0627\u0646\u067e\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06c1\u06cc\u0631\u0648 \u0645\u0627\u0688\u0644 \u06a9\u0648 \u06af\u0631\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n
      3. \u06c1\u0631 1.2 \u0633\u06cc\u06a9\u0646\u0688 \u062a\u06a9 \u0645\u0644\u0628\u06d2 \u06a9\u06cc \u067e\u06c1\u0627\u0691\u06cc \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n
      \u06a9\u0645 fill-extrusion<\/code> \u06c1\u0631 \u0688\u06be\u06cc\u0631 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u06a9\u0627 \u0679\u06cc\u0644\u0627 GeoJSON \u0630\u0631\u06cc\u0639\u06c1 \u06c1\u06d2\u06d4 setData<\/code> GeoJSON \u0645\u0627\u062e\u0630 \u0633\u06d2 \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u067e\u0627\u0631\u0633 \u06a9\u0631\u06cc\u06ba\u06d4 \u06c1\u0631 \u0645\u0646\u06c1\u062f\u0645 \u0639\u0645\u0627\u0631\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0627\u06cc\u0633\u0627 \u06a9\u0631\u0646\u0627 \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0648\u0631\u0698\u0646 \u0645\u06cc\u06ba \u06c1\u0646\u06af\u0627\u0645\u06c1 \u0622\u0631\u0627\u0626\u06cc \u06a9\u0627 \u0627\u06cc\u06a9 \u0628\u0691\u0627 \u0633\u0628\u0628 \u062a\u06be\u0627\u06d4 \u062c\u0646 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u067e\u0631 \u0622\u067e \u0627\u062a\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u0648\u06c1 \u0627\u0628 \u0632\u06cc\u0631 \u0627\u0644\u062a\u0648\u0627\u0621 \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba \u062c\u0627\u0626\u06cc\u06ba \u06af\u06cc \u062c\u0648 \u0679\u0627\u0626\u0645\u0631 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u0635\u0627\u0641 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06cc\u06d4<\/p>\n
      4. \u0645\u0646\u06c1\u062f\u0645 \u0639\u0645\u0627\u0631\u062a \u06a9\u0648 \u0627\u0633 \u06a9\u06d2 \u0627\u0635\u0644 \u0645\u0642\u0627\u0645 \u0633\u06d2 \u06a9\u0628\u06be\u06cc \u0646\u06c1 \u06c1\u0679\u0627\u0626\u06cc\u06ba<\/h3>\n
      \u06cc\u06c1 \u062c\u0627\u0631\u06cc \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4 bld<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be k<\/code> 0.001 \u067e\u0631 \u0633\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u0633\u06cc \u062e\u0635\u0648\u0635\u06cc\u062a \u06a9\u0648 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2: setData<\/code>\u0627\u0648\u0631 setData<\/code> \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06cc\u0646\u0679\u06cc\u0646\u06d4<\/p>\n
      5. \u0627\u0631\u0627\u062f\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u062b\u0627\u062b\u06d2 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n
      \u0645\u06a9\u0645\u0644 \u062a\u0641\u0635\u06cc\u0644 \u06a9\u06d2 \u0645\u0648\u0688 \u0645\u06cc\u06ba \u0628\u0646\u0627\u0648\u0679 \u0627\u0648\u0631 \u0645\u0627\u0688\u0644\u0632 24MB \u062a\u06a9 \u06a9\u0627 \u0627\u0636\u0627\u0641\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062c\u0628 \u06a9\u0648\u0626\u06cc \u0648\u0632\u06cc\u0679\u0631 Earthquake \u0679\u06cc\u0628 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u0635\u0631\u0641 \u067e\u0648\u0631\u06cc \u067e\u0631\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u06af\u0627 \u0646\u06c1 \u06a9\u06c1 \u0635\u0641\u062d\u06c1 \u0644\u0648\u0688 \u067e\u0631\u06d4<\/p>\n
      \u06a9\u06cc\u0627 \u063a\u0644\u0637 \u06c1\u0648\u0627 \u0627\u0648\u0631 \u06a9\u06cc\u0648\u06ba\u061f<\/h2>\n
      \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u06c1\u0631 \u0627\u06cc\u06a9 \u0645\u06cc\u0631\u06d2 \u0644\u06cc\u06d2 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u06a9\u06d2 \u0627\u062e\u0631\u0627\u062c\u0627\u062a \u06a9\u0627 \u0628\u0627\u0639\u062b \u0628\u0646\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u067e\u06c1\u0644\u06d2 \u062f\u0648 \u0627\u0633 \u0644\u06cc\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u062d\u0635\u06c1 1 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2\u06d4<\/p>\n
      \u0627\u0633\u0679\u06cc\u06a9\u0631 \u06a9\u0627 \u0645\u0633\u0626\u0644\u06c1<\/h3>\n
      \u0645\u06cc\u0631\u0627 \u067e\u06c1\u0644\u0627 \u0648\u0631\u0698\u0646 \"\u067e\u0627\u0646\u06cc \u06a9\u06cc \u062f\u06cc\u0648\u0627\u0631\" \u062a\u06be\u0627 - \u0627\u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0627\u0633\u067e\u06cc\u0633 \u06a9\u06cc\u0646\u0648\u0633 \u067e\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0627\u06cc\u06a9 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0644\u067e \u062c\u0633 \u0645\u06cc\u06ba \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u067e\u0631 \u0646\u0642\u0634\u06c1 \u06a9\u06d2 \u0646\u0642\u0637\u06c1 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4 \u0627\u0633 \u0646\u06d2 \u0645\u06cc\u0631\u06d2 13 \u0627\u0646\u0686 \u06a9\u06d2 \u0644\u06cc\u067e \u0679\u0627\u067e \u067e\u0631 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06a9\u0627\u0645 \u06a9\u06cc\u0627\u06d4 \u0645\u06cc\u0631\u06d2 4K \u0645\u0627\u0646\u06cc\u0679\u0631 \u067e\u0631\u060c \u06cc\u06c1 \u0627\u06cc\u06a9 \u0645\u0633\u062a\u0637\u06cc\u0644 \u062a\u06be\u0627 \u062c\u0633 \u06a9\u06d2 \u0646\u0631\u0645 \u06a9\u0646\u0627\u0631\u06d2 \u0634\u06c1\u0631 \u067e\u0631 \u0645\u0646\u0688\u0644\u0627 \u0631\u06c1\u06d2 \u062a\u06be\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u0645\u0646\u0638\u0631 \u06a9\u0627 \u062d\u0635\u06c1 \u0646\u06c1\u06cc\u06ba \u062a\u06be\u0627\u06d4<\/p>\n
      \u0645\u0633\u0626\u0644\u06c1 \u0627\u0633\u067e\u0631\u0627\u0626\u0679 \u06a9\u0627 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u062f\u06be\u0646\u062f\u0644\u0627\u067e\u0646\u060c \u067e\u0646\u06a9\u06be\u0648\u06ba\u060c \u06cc\u0627 \u0633\u0627\u0626\u0632 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0626\u06cc \u0645\u0642\u062f\u0627\u0631 \u0627\u0633\u06d2 \u0679\u06be\u06cc\u06a9 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u06d2 \u06af\u06cc\u06d4 \u0627\u0633\u067e\u0631\u0627\u0626\u0679\u0633 3D \u062f\u0646\u06cc\u0627 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062a\u0645\u0627\u0645 \u0645\u0631\u0627\u062d\u0644 3-6 \u0645\u062a\u0628\u0627\u062f\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n
      \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0627\u0633\u067e\u06cc\u0633 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06cc \u0628\u0627\u0644\u06a9\u0644 \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u067e\u0644\u06cc\u0634 \u0627\u0633\u067e\u0631\u0627\u0626\u0679\u0633 \u062c\u0648 \u0627\u06cc\u06a9 \u0645\u0642\u0627\u0645 \u067e\u0631 \u0637\u06d2 \u0634\u062f\u06c1 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u0646\u06c1\u06cc\u06ba \u0686\u06be\u0648\u0679\u06d2\u060c \u0642\u0644\u06cc\u0644 \u0627\u0644\u0645\u062f\u062a \u0627\u0648\u0631 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u0631\u06a9\u06be\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0642\u0628\u0648\u0644 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u0628\u06be\u06cc \u06a9\u0627\u0645\u06cc\u0627\u0628 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n
      \u0645\u06cc\u0631\u06cc \u067e\u0631\u062a \u062f\u0648 \u0628\u0627\u0631 \u0646\u06c1\u06cc\u06ba \u0645\u0644 \u0633\u06a9\u06cc\u06d4<\/h3>\n
      \u062d\u0635\u06c1 1 \u06a9\u06d2 \u0622\u062e\u0631 \u0645\u06cc\u06ba 3D \u067e\u0627\u0646\u06cc \u06a9\u06cc \u062f\u06cc\u0648\u0627\u0631 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u063a\u0644\u0637\u06cc \u06a9\u06d2 \u067e\u06cc\u0634 \u06a9\u06cc \u06af\u0626\u06cc\u060c \u0645\u06cc\u0634 \u0628\u0627\u0644\u06a9\u0644 \u0648\u06c1\u06cc\u06ba \u0645\u0646\u062a\u0642\u0644 \u06c1\u0648\u0627 \u062c\u06c1\u0627\u06ba \u0688\u06cc\u0628\u06af \u067e\u0631\u0648\u0628 \u0646\u06d2 \u06a9\u06c1\u0627 \u062a\u06be\u0627\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0638\u0627\u06c1\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u0627\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u06cc\u0627\u06d4 map.addLayer(layer, \"flood\")<\/code>\u06cc\u06c1 \u062f\u0627\u062e\u0644 \u06a9\u0631\u0646\u0627 \u0646\u06cc\u0686\u06d2<\/em> \u0633\u06cc\u0644\u0627\u0628 \u0631\u0627\u0633\u0679\u0631 \u0627\u0648\u0631 \u0645\u0628\u06c1\u0645 \u067e\u0627\u0646\u06cc \u0645\u06cc\u0631\u06cc \u062f\u06cc\u0648\u0627\u0631\u0648\u06ba \u06a9\u0648 \u0686\u06be\u067e\u0627 \u0631\u06c1\u06d2 \u062a\u06be\u06d2\u06d4 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba map.getStyle().layers<\/code> \u06a9\u0686\u06be \u0627\u0648\u0631 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u06d4<\/p>\n
      \u062f\u0648\u0633\u0631\u06cc \u0628\u0627\u0631 \u062c\u0628 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u06cc\u06a9 \u067e\u0631\u062a \u06a9\u06be\u0648 \u062f\u06cc \u062a\u0648 \u0645\u062c\u06be\u06d2 \u0627\u0644\u0679\u0627 \u0645\u0633\u0626\u0644\u06c1 \u062f\u0631\u067e\u06cc\u0634 \u062a\u06be\u0627\u06d4 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0648\u06c1\u0627\u06ba \u067e\u0631\u062a\u06cc\u06ba \u0628\u0627\u0644\u06a9\u0644 \u0646\u06c1\u06cc\u06ba \u062a\u06be\u06cc\u06ba\u06d4 map.getStyle().layers<\/code> \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u067e\u0631\u062a\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0627\u0633\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba map.getLayer(\"debris3d\")<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2. \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u067e\u0646\u06d2 \u0622\u067e \u06a9\u0648 \u06cc\u06c1 \u0628\u0627\u0648\u0631 \u06a9\u0631\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0648\u0642\u062a \u06af\u0632\u0627\u0631\u0627 \u06a9\u06c1 \u06a9\u0648\u0626\u06cc \u067e\u0631\u062a\u06cc\u06ba \u0634\u0627\u0645\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc \u062c\u0627 \u0631\u06c1\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n
      \u0634\u0641\u0627\u0641\u06cc\u062a \u06a9\u06cc 24 \u0633\u0637\u062d\u06cc\u06ba\u06d4<\/h3>\n
      \u0645\u06cc\u06ba \u0646\u06d2 \u06c1\u0645\u0648\u0627\u0631 \u0627\u0644\u0641\u0627 \u06a9\u0646\u0627\u0631\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0633\u067e\u0631\u0627\u0626\u0679 \u0634\u06cc\u0679 \u0628\u0646\u0627\u0626\u06cc \u0627\u0648\u0631 \u0686\u0644\u0627\u0626\u06cc\u06d4 PIL.Image.quantize()<\/code> PNG \u0633\u06a9\u0691\u06cc\u06ba\u06d4 \u067e\u06cc\u0644\u06cc\u0679 \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u0646\u06d2 \u0631\u0646\u06af\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0644\u0641\u0627 \u0686\u06cc\u0646\u0644 \u06a9\u0648 \u0645\u0642\u062f\u0627\u0631 \u0628\u062e\u0634\u06cc\u06d4 \u0644\u06cc\u0648\u0644 256 \u0644\u06cc\u0648\u0644 24 \u0628\u0646 \u06af\u06cc\u0627\u060c \u06c1\u0645\u0648\u0627\u0631 \u0641\u0627\u0644 \u0622\u0641 \u0633\u06cc\u0691\u06be\u06cc\u0627\u06ba \u0628\u0646 \u06af\u0626\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062a\u0645\u0627\u0645 \u0633\u06cc\u0691\u06be\u06cc\u0648\u06ba \u06a9\u06d2 \u0633\u062e\u062a \u0633\u06cc\u062f\u06be\u06d2 \u06a9\u0646\u0627\u0631\u06d2 \u062a\u06be\u06d2 \u062c\u0648 \u0628\u0627\u0644\u06a9\u0644 \u0679\u0627\u0626\u0644 \u06a9\u06cc \u0633\u0631\u062d\u062f\u0648\u06ba \u06a9\u06cc \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u062a\u06d2 \u062a\u06be\u06d2\u06d4 \u0645\u06cc\u06ba \u0646\u06d2 \u0679\u0627\u0626\u0644\u0646\u06af \u0628\u06af \u06a9\u06cc \u062a\u0644\u0627\u0634 \u0645\u06cc\u06ba \u062f\u0648 \u0686\u06a9\u0631 \u0644\u06af\u0627\u0626\u06d2 \u062c\u0648 \u0645\u0648\u062c\u0648\u062f \u0646\u06c1\u06cc\u06ba \u062a\u06be\u0627\u06d4<\/p>\n
      \"\u0633\u06cc\u0627\u06c1<\/p>\n
      \u0641\u06a9\u0633 \u06a9\u0648\u0627\u0646\u0679\u0627\u0626\u0632\u0646\u06af \u06a9\u0648 \u0631\u0648\u06a9\u0646\u0627 \u0627\u0648\u0631 \u0622\u0631 \u062c\u06cc \u0628\u06cc \u0686\u06cc\u0646\u0644\u0632 \u06a9\u0648 \u0645\u0633\u062a\u0642\u0644 \u0628\u0646\u0627\u0646\u0627 \u062a\u06be\u0627 (\u0627\u0633\u067e\u0631\u0627\u0626\u0679 \u0648\u06cc\u0633\u06d2 \u0628\u06be\u06cc \u0633\u0641\u06cc\u062f \u062a\u06be\u0627)\u06d4 \u0644\u06c1\u0630\u0627 \u067e\u06cc \u0627\u06cc\u0646 \u062c\u06cc \u06a9\u0645\u067e\u0631\u06cc\u0634\u0646 \u06a9\u0648 \u0645\u0632\u06cc\u062f \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \u0641\u0627\u0626\u0644 3 \u06af\u0646\u0627 \u0686\u06be\u0648\u0679\u06cc \u06c1\u0648 \u06af\u0626\u06cc \u06c1\u06d2\u06d4 \u0627\u0628 \u0645\u06cc\u06ba \u0627\u067e\u0646\u06cc \u0622\u0646\u06a9\u06be\u0648\u06ba \u067e\u0631 \u0628\u06be\u0631\u0648\u0633\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u06c1\u0633\u0679\u0648\u06af\u0631\u0627\u0645 \u0633\u06d2 \u0627\u0644\u0641\u0627 \u0686\u06cc\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba\u06d4<\/p>\n
      \u0627\u06cc\u06a9 \u06c1\u06cc \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645\u060c \u0645\u062e\u062a\u0644\u0641 \u0641\u0627\u0626\u0644<\/h3>\n
      \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0646\u06a9\u0648\u0688 \u06a9\u06cc\u0627\u06d4 flood.webm<\/code> \u062f\u0648\u0633\u0631\u06cc \u0633\u0637\u062d \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0641\u0648\u06cc\u0636 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4 \u0632\u0627\u0626\u0631\u06cc\u0646 \u06af\u06be\u0646\u0679\u0648\u06ba \u067e\u0631\u0627\u0646\u06cc \u0686\u06cc\u0632\u06cc\u06ba \u062e\u0631\u06cc\u062f\u062a\u06d2 \u0631\u06c1\u06d2\u06d4 CDN URL \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u06a9\u06cc\u0634 \u0634\u062f\u06c1 \u0627\u0648\u0631 ?v=2<\/code> \u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u06a9\u06d2 \u0627\u0633\u0679\u0631\u0646\u06af \u0646\u06d2 \u0627\u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u06cc\u0627\u06d4<\/p>\n
      \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u062f\u0644 \u062f\u06cc\u06ba\u06d4 flood2.webm<\/code> \u06c1\u0645 \u0646\u06d2 \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u062a\u0639\u06cc\u0646\u0627\u062a\u06cc \u0633\u06d2 \u062d\u0644 \u06a9\u06cc\u0627\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0633\u06d2\u060c \u06cc\u06c1 \u06c1\u0631 \u0628\u0627\u0626\u0646\u0631\u06cc \u0627\u062b\u0627\u062b\u06d2 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u062f\u0644 \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06d2 URL \u0648\u0631\u0698\u0646\u0632 \u06a9\u0648 \u0645\u0646\u0638\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u0628\u063a\u06cc\u0631 \u06c1\u06cc\u0688 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679 \u0646\u06d2 \u062f\u0648 \u0628\u0627\u0631 \u062c\u06be\u0648\u0679 \u0628\u0648\u0644\u0627\u06d4<\/h3>\n
      \u0633\u0627\u0641\u0679 \u0648\u06cc\u0626\u0631 GL \u0631\u06cc\u0646\u0688\u0631\u0631 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06c1\u06cc\u0688 \u0644\u06cc\u0633 \u06a9\u0631\u0648\u0645 \u0645\u06cc\u06ba \u062a\u062c\u0631\u0628\u06c1 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4 \u06c1\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679 \u067e\u0631 \u0642\u0628\u0636\u06c1 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06cc\u0627 \u062f\u0648 \u0633\u06cc\u06a9\u0646\u0688 \u0644\u06af\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \"\u0622\u0624\u0679 \u0622\u0641 \u0622\u0631\u0688\u0631\" \u0641\u0631\u06cc\u0645 \u06a9\u0627\u0624\u0646\u0679 \u0628\u0627\u0644\u06a9\u0644 \u0646\u06c1\u06cc\u06ba \u062a\u06be\u0627 \u0627\u0648\u0631 \u0645\u06cc\u06ba \u0646\u06d2 \u062f\u0648\u067e\u06c1\u0631 \u06a9\u0648 \u0634\u0648\u0631 \u06a9\u06d2 \u062e\u0644\u0627\u0641 \u0648\u0642\u062a \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06af\u0632\u0627\u0631\u0627\u06d4<\/p>\n
      \u062f\u0648 \u0645\u0633\u0627\u0626\u0644 \u062d\u0644 \u06c1\u0648 \u0686\u06a9\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u06cc\u06ba \u0628\u0631\u0627\u0624\u0632\u0631 \u0633\u06cc\u0634\u0646 \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0648\u06cc\u0688\u06cc\u0648 \u0631\u06cc\u06a9\u0627\u0631\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u0627\u0648\u0631 ffmpeg \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0641\u0631\u06cc\u0645\u0648\u06ba \u06a9\u0648 \u062a\u0631\u0627\u0634\u062a\u0627 \u06c1\u0648\u06ba\u060c \u0627\u0648\u0631 \u0631\u0646\u06af\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u06cc\u06ba \u0646\u0642\u0644\u06cc \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0691\u06be\u062a\u0627 \u06c1\u0648\u06ba: getImageData<\/code> \u062f\u0648\u0633\u0631\u06cc \u0622\u0648\u0627\u0632 \u0633\u06d2 \u0627\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u0645\u067e\u0648\u0632\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u06a9\u06cc \u067e\u06cc\u0645\u0627\u0626\u0634 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u0644\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06d2 \u067e\u06c1\u0646\u0686\u0646\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u062f\u0648\u067e\u06c1\u0631 \u0644\u06af \u06af\u0626\u06cc\u06d4<\/p>\n
      \u0627\u0633\u06cc \u0628\u06d2 \u0633\u0631 \u0633\u06cc\u0679 \u0627\u067e \u0646\u06d2 \u0645\u062c\u06be\u06d2 \u067e\u06be\u0631 \u0632\u0644\u0632\u0644\u06c1 \u067e\u0631 \u0628\u06cc\u0648\u0642\u0648\u0641 \u0628\u0646\u0627\u06cc\u0627\u06d4 \u0648\u06c1\u0627\u06ba\u060c \u0633\u06cc\u0679\u0644\u0627\u0626\u0679 \u0679\u0627\u0626\u0644 \u0622\u06c1\u0633\u062a\u06c1 \u0622\u06c1\u0633\u062a\u06c1 \u0644\u0648\u0688 \u06c1\u0648\u0626\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679\u0633 \u0646\u06d2 \u0633\u06cc\u0627\u06c1 \u0634\u06c1\u0631 \u062f\u06a9\u06be\u0627\u0626\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0645\u06cc\u06ba \u0646\u06d2 \u0633\u0648\u0686\u0627 \u06a9\u06c1 \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u062a\u06c1\u06c1 \u06a9\u0627\u0641\u06cc \u0639\u0631\u0635\u06d2 \u0633\u06d2 \u0679\u0648\u0679\u06cc \u06c1\u0648\u0626\u06cc \u06c1\u06d2\u06d4 \u062c\u0648 \u0646\u06c1\u06cc\u06ba \u067e\u06c1\u0646\u0686\u0627 \u0648\u06c1 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0646\u0642\u0634\u06c1 \u062a\u06be\u0627\u06d4 \u0627\u06af\u0631 \u06c1\u06cc\u0688 \u0644\u06cc\u0633 \u0679\u06cc\u0633\u0679 \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u067e\u0631\u062a \u063a\u0644\u0637 \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c map.areTilesLoaded()<\/code> \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u0622\u067e \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u0679\u0633 \u067e\u0631 \u06cc\u0642\u06cc\u0646 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
      \u0645\u06cc\u06ba \u0646\u06d2 \u0641\u06cc\u0686\u0631 \u0627\u0633\u0679\u06cc\u0679 \u0633\u06cc\u0679 \u06a9\u06cc\u0627 \u0627\u0648\u0631 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u0627\u06d4<\/h3>\n
      setFeatureState<\/code>    \u0686\u0648\u0646\u06a9\u06c1 \u0627\u0633 \u0641\u06cc\u0686\u0631 \u0645\u06cc\u06ba ID \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0627\u0633 \u0646\u06d2 \u0679\u0627\u0626\u0644 \u0633\u0648\u0631\u0633 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u0627\u0648\u0631 \u0646\u06c1 \u06c1\u06cc \u06a9\u0686\u06be \u0631\u067e\u0648\u0631\u0679 \u06a9\u06cc\u0627\u06d4 \u0641\u06a9\u0633 \u0627\u0633 \u0637\u0631\u062d \u0627\u06cc\u06a9 GeoJSON \u06a9\u0627\u067e\u06cc \u06c1\u06d2: promoteId<\/code> \u0645\u0631\u062d\u0644\u06c1 11 \u0633\u06d2\u06d4 \u0627\u0633\u06d2 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0634\u0631\u0645\u0646\u0627\u06a9 \u062d\u062f \u062a\u06a9 \u0637\u0648\u06cc\u0644 \u0648\u0642\u062a \u0644\u06af\u0627 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 API \u0646\u0627\u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0635\u0631\u0641 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
      \u062a\u0645\u0627\u0645 \u0648\u0627\u0642\u0639\u0627\u062a \u0633\u06cc\u0627\u06c1 \u062a\u06be\u06d2\u06d4<\/h3>\n
      InstancedMesh.setColorAt<\/code>    3 r128 \u0645\u06cc\u06ba\u060c \u062c\u0628 \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u06a9\u0627\u0644 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u0622\u06c1\u0633\u062a\u06af\u06cc \u0633\u06d2 \u0645\u06cc\u0634 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u0633\u06d2 \u0645\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u0646\u06af\u06cc\u0646 \u0628\u0641\u0631 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0648\u062c\u0648\u062f<\/strong> count<\/code>. \u0645\u06cc\u0631\u0627 \u067e\u0648\u0644 \u0627\u0633 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u0627: count = 0<\/code>\u0644\u06c1\u0630\u0627\u060c \u0628\u0641\u0631 \u0628\u063a\u06cc\u0631 \u06a9\u0633\u06cc \u0622\u0626\u0679\u0645 \u06a9\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627 \u0627\u0648\u0631 \u062a\u0645\u0627\u0645 \u0679\u06a9\u0691\u0648\u06ba \u06a9\u0648 \u0633\u06cc\u0627\u06c1 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4 \u0645\u062e\u062a\u0635 instanceColor<\/code> \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u067e\u0646\u06d2 \u0622\u067e \u06a9\u0648 \u067e\u0648\u0631\u06cc \u0635\u0644\u0627\u062d\u06cc\u062a \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 setColorAt<\/code>. \u0648\u06c1 \u0644\u0627\u0626\u0646 \u06c1\u06d2 makePool<\/code>.<\/p>\n
      \u062c\u06cc\u0633\u06d2 \u06c1\u06cc \u06c1\u0645 \u0646\u06d2 \u067e\u06cc\u0646 \u06a9\u06cc\u0627\u060c \u0622\u062f\u06be\u0627 \u0645\u0644\u0628\u06c1 \u062e\u062a\u0645 \u06c1\u0648 \u0686\u06a9\u0627 \u062a\u06be\u0627\u06d4<\/h3>\n
      three.js<\/code>    \u06cc\u06c1 \u0627\u067e\u0646\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0641\u0631\u0633\u0679\u0645 \u06a9\u0644\u0646\u06af \u0645\u06cc\u0634 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0645\u0627\u0631\u06d2 \u06a9\u06cc\u0645\u0631\u06d2 \u0646\u0646\u06af\u06d2 \u06c1\u06cc\u06ba\u06d4 THREE.Camera<\/code> \u0641\u0631\u0633\u0679\u0645 \u06a9\u0627 \u062e\u06cc\u0627\u0644 \u0628\u06d2 \u06c1\u0648\u062f\u06c1 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0634\u0646 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u0633\u06d2 \u0628\u06be\u0631\u0627 \u06c1\u0648\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u06a9\u0648 \u0627\u0646\u062f\u0627\u0632\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u0646\u0642\u0634\u06c1 \u06a9\u06c1\u0627\u06ba \u062f\u06cc\u06a9\u06be \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 \u0633\u06cc\u0679 frustumCulled = false<\/code> \u0627\u067e\u0646\u06cc \u0645\u0631\u0636\u06cc \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u062a\u06c1\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0645\u0627\u0645 meshes \u067e\u0631.<\/p>\n
      \u0645\u0646\u0638\u0631 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2.<\/h3>\n
      \u0646\u0642\u0634\u06c1 \u06a9\u0648 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u062f\u0648\u0628\u0627\u0631\u06c1 \u0631\u0646\u06af \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0627\u0633\u06d2 \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0686\u06be \u0628\u062f\u0644 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u06a9\u0627\u0644 map.triggerRepaint()<\/code> \u0627\u0639\u062a\u0631\u0627\u0636 \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u0627\u0633 \u0634\u0631\u062d \u0633\u06d2 \u0642\u0637\u0639 \u0646\u0638\u0631 \u0686\u0644\u06d2 \u06af\u06cc \u062c\u0633 \u067e\u0631 \u0646\u0642\u0634\u06c1 \u06a9\u0648 \u062f\u0648\u0633\u0631\u06cc \u0648\u062c\u0648\u06c1\u0627\u062a \u06a9\u06cc \u0628\u0646\u0627\u0621 \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 (\u062c\u0648 \u0627\u0633\u0679\u06cc\u0644 \u0633\u06cc\u0646\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 0 \u06c1\u06d2)\u06d4<\/p>\n
      \u0622\u0633\u0645\u0627\u0646 \u0646\u06d2 \u0633\u0628 \u06a9\u0686\u06be \u063a\u0627\u0626\u0628 \u06a9\u0631 \u062f\u06cc\u0627<\/h3>\n
      \u0627\u0633\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba map.setSky(...)<\/code> \u0645\u06cc\u06ba \u0646\u06d2 \u0633\u0628 \u06a9\u0686\u06be \u0686\u06be\u067e\u0627 \u062f\u06cc\u0627\u06d4 three.js<\/code> \u0645\u0646\u0638\u0631 \u0622\u0633\u0645\u0627\u0646 \u06a9\u0648 \u06af\u06c1\u0631\u0627\u0626\u06cc \u06a9\u06d2 \u0628\u0641\u0631 \u067e\u0631 \u0644\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062c\u0648 \u0628\u06be\u06cc \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u067e\u0631\u062a \u0628\u0639\u062f \u0645\u06cc\u06ba \u06a9\u06be\u06cc\u0646\u0686\u062a\u06cc \u06c1\u06d2 \u0648\u06c1 \u06af\u06c1\u0631\u0627\u0626\u06cc \u06a9\u06d2 \u0627\u0645\u062a\u062d\u0627\u0646 \u0645\u06cc\u06ba \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0633\u06cc \u0646\u0642\u0634\u06d2 \u067e\u0631 3D \u067e\u06cc\u0634 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u0633\u0645\u0627\u0646\u06cc \u062a\u06c1\u06c1 \u06a9\u0648 \u0686\u0627\u0644\u0648 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n
      \u06a9\u06c1 idle<\/code> \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0679\u06cc\u0628\u0632 \u0645\u06cc\u06ba \u0627\u06cc\u0648\u0646\u0679\u0633 \u0646\u06c1\u06cc\u06ba \u0686\u0644 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/h3>\n
      \u0622\u067e \u0646\u06d2 \u0645\u0627\u0688\u0644 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0644\u0648\u0688 \u06a9\u0631 \u062f\u06cc\u0627 \u06c1\u06d2\u06d4 map.on(\"idle\")<\/code>. \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0679\u06cc\u0628 \u0645\u06cc\u06ba\u060c \u0646\u0642\u0634\u06c1 \u0628\u06d2 \u06a9\u0627\u0631 \u0631\u06c1\u0646\u06d2 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u0627\u0641\u06cc \u062f\u06cc\u0631 \u062a\u06a9 \u0686\u0644 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0632\u0627\u0626\u0631\u06cc\u0646 \u062c\u0646\u06c1\u0648\u06ba \u0646\u06d2 \u0679\u06cc\u0628 \u0645\u06cc\u06ba \u0633\u0627\u0626\u0679 \u06a9\u0648 \u06a9\u06be\u0648\u0644\u0627 \u0627\u0648\u0631 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0648\u0627\u067e\u0633 \u0622\u0626\u06d2 \u0648\u06c1 \u0645\u0627\u0688\u0644 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0632\u0644\u0632\u0644\u06d2 \u06a9\u0627 \u062a\u062c\u0631\u0628\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4 \u062e\u0637\u0631\u06d2 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u06cc\u06d2 \u062c\u0627\u0646\u06d2 \u06a9\u06d2 \u0648\u0642\u062a \u067e\u0631\u06cc\u0644\u0648\u0688 \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u062a\u06be\u0627\u06d4<\/p>\n
      \u0646\u062a\u06cc\u062c\u06c1<\/h2>\n
      \u067e\u0648\u0631\u06cc \u06af\u0627\u0626\u06cc\u0688 \u06a9\u0648 \u062f\u0648 \u0688\u06be\u0627\u0646\u0686\u06d2 \u0645\u06cc\u06ba \u06a9\u0645 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2:<\/p>\n
      \u0632\u0645\u06cc\u0646:<\/p>\n
        \n
      1. \n
        \u0627\u06af\u0631 \u0622\u067e \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0679\u0627\u0626\u0644 \u0627\u06c1\u0631\u0627\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06af\u0631\u0688 \u06a9\u0648 \u0633\u06cc\u062f\u06be \u0645\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u062a\u0645\u0627\u0645 \u0679\u0627\u0626\u0644 \u0688\u06cc\u0679\u0627 \u0633\u06cc\u0679\u0633 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u0645\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0686\u06be\u0648\u0691 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<\/li>\n
      2. \n
        \u0645\u0641\u062a \u0627\u06cc\u0644\u06cc\u0648\u06cc\u0634\u0646 \u0679\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0627\u0646 \u06a9\u06d2 \u0645\u062a\u0639\u0644\u0642\u06c1 \u06af\u0631\u0688 \u0645\u06cc\u06ba \u0688\u06cc \u06a9\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
      3. \n
        \u06a9\u06cc\u0646\u0648\u0633 \u06a9\u0648 \u0646\u0642\u0634\u06c1 \u06a9\u06d2 \u0645\u0627\u062e\u0630 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u06af\u0631\u0688 \u06a9\u06d2 \u0645\u0633\u062a\u0637\u06cc\u0644 \u067e\u0631 \u0631\u062c\u0633\u0679\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 animate: true<\/code>.<\/p>\n<\/li>\n
      4. \n
        \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u06af\u0631\u0688 \u067e\u0631 \u0646\u0642\u0644\u06cc \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4 \u0622\u067e \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u067e\u06a9\u0633\u0644\u0632 \u0644\u06a9\u06be \u06a9\u0631 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
      5. \n
        \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba source-atop<\/code> \u0627\u0648\u0631 destination-in<\/code> \u0646\u0642\u0644\u06cc \u0634\u06a9\u0644\u0648\u06ba \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0633\u0627\u062e\u062a \u06a9\u0648 \u0679\u06be\u06cc\u06a9 \u0679\u06be\u06cc\u06a9 \u0633\u06d2 \u0688\u0631\u06cc\u067e \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
      6. \n
        \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u062d\u0631\u06a9\u062a \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06cc\u06ba\u06d4 \u0688\u0631\u0627\u0626\u0646\u06af \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba.<\/p>\n<\/li>\n<\/ol>\n
        \u0627\u0648\u0646\u0686\u0627\u0626\u06cc:<\/p>\n
          \n
        1. \n
          \u0639\u0645\u0627\u0631\u062a\u06cc\u06ba \u0646\u0642\u0634\u06d2 \u067e\u0631 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0628\u06be\u0631\u06cc \u06c1\u0648\u0626\u06cc \u0648\u06cc\u06a9\u0679\u0631 \u0679\u0627\u0626\u0644\u0648\u06ba \u0633\u06d2 \u062f\u0631\u0622\u0645\u062f \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0686\u0648\u0646\u06a9\u06c1 \u06a9\u0648\u0626\u06cc IDs \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u060c \u06c1\u0645 \u0688\u067e\u0644\u06cc\u06a9\u06cc\u0679\u0633 \u06a9\u0648 \u06c1\u0679\u0627 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
        2. \n
          \u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u06a9\u06be\u06cc\u0646\u0686\u06cc\u06ba: fill-extrusion<\/code> GeoJSON \u06a9\u0627\u067e\u06cc \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0641\u06cc \u0641\u06cc\u0686\u0631 \u0627\u0648\u0646\u0686\u0627\u0626\u06cc \u0636\u0631\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 promoteId<\/code> \u062a\u0648 \u0641\u0639\u0627\u0644 \u062d\u0627\u0644\u062a \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n
        3. \n
          \u0646\u0642\u0635\u0627\u0646 \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u0639\u0645\u0627\u0631\u062a \u06a9\u06cc \u0645\u062e\u0635\u0648\u0635 \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628\u06cc \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062a\u0648\u062c\u06c1 \u06a9\u06d2 \u0631\u0634\u062a\u0648\u06ba \u0627\u0648\u0631 \u06a9\u0645\u0632\u0648\u0631\u06cc \u06a9\u06d2 \u0645\u0646\u062d\u0646\u06cc \u062e\u0637\u0648\u0637 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n
        4. \n
          \u06c1\u0645 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0636\u0631\u0628 \u0628\u0646\u0627 \u06a9\u0631 \u0632\u0648\u0645 \u0622\u0624\u0679 \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n
        5. \n
          \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af three.js<\/code> \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 GL \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u0645\u06cc\u06ba renderingMode: \"3d\"<\/code>\u062a\u0648 \u06af\u06c1\u0631\u0627\u0626\u06cc \u06a9\u0627 \u0628\u0641\u0631 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n
        6. \n
          \u0642\u062f\u0645\u0648\u06ba \u06a9\u06d2 \u0646\u0634\u0627\u0646\u0627\u062a \u06a9\u0648 \u0627\u0648\u0631\u06cc\u0646\u0679\u0688 \u0628\u06a9\u0633 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0646\u06c1\u06cc\u06ba \u0628\u0644\u0627\u06a9\u0633 \u0645\u06cc\u06ba \u067e\u0644\u0679\u0627\u0626\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u0646 \u067e\u0631 \u0645\u062b\u0627\u0644\u06cc \u0645\u0644\u0628\u06c1 \u067e\u06be\u06cc\u0646\u06a9 \u062f\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0635\u0631\u0641 \u0648\u0627\u0642\u0639\u0627\u062a \u0645\u06cc\u06ba \u062f\u06be\u0648\u0644 \u062e\u0627\u0631\u062c \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06c1\u0644\u0627\u0626\u06cc\u06ba\u060c \u06a9\u06cc\u0645\u0631\u06d2 \u06a9\u0648 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n
          \u0627\u0633 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u062e\u06cc\u0627\u0644 \u06a9\u0686\u06be \u0627\u06cc\u0633\u0627 \u06c1\u06d2 \u062c\u0648 \u0645\u06cc\u06ba \u0646\u06d2 \u0628\u0627\u0631 \u0628\u0627\u0631 \u0633\u06cc\u06a9\u06be\u0627 \u06c1\u06d2\u06d4 \u062f\u0646\u06cc\u0627 \u0633\u06d2 \u062a\u0639\u0644\u0642 \u0631\u06a9\u06be\u0646\u06d2 \u0648\u0627\u0644\u06cc \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u0639\u0627\u0644\u0645\u06cc \u0646\u0642\u0627\u0637 \u0645\u06cc\u06ba \u06a9\u06be\u06cc\u0646\u0686\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u0646\u0642\u0634\u06d2 \u067e\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u0627\u06cc\u06a9 \u0634\u06cc\u0634\u06d2 \u06a9\u06cc \u067e\u0644\u06cc\u0679 \u06c1\u06d2\u06d4 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u06a9\u06cc\u0646\u0648\u0633 \u0632\u0645\u06cc\u0646 \u06c1\u06d2\u060c three.js<\/code> \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u062c\u06cc \u0627\u06cc\u0644 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u06a9\u0627 \u0645\u0646\u0638\u0631 \u0627\u0633 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u06a9\u06cc \u06c1\u0648\u0627 \u06c1\u06d2\u06d4<\/p>\n
          \u0648\u06c1 \u062a\u0645\u0627\u0645 \u062a\u0631 \u0627\u0635\u0644\u0627\u062d\u0627\u062a \u062c\u0646\u06c1\u0648\u06ba \u0646\u06d2 \u062f\u0648\u0646\u0648\u06ba \u0633\u0645\u0648\u0644\u06cc\u0634\u0646\u0632 \u06a9\u0648 \u0632\u06cc\u0627\u062f\u06c1 \u062d\u0642\u06cc\u0642\u062a \u067e\u0633\u0646\u062f\u0627\u0646\u06c1 \u0628\u0646\u0627\u06cc\u0627 \u0648\u06c1 \u067e\u06c1\u0644\u06cc \u0642\u0633\u0645 \u0633\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u0645\u06cc\u06ba \u062c\u0627\u0646\u06d2 \u0633\u06d2 \u0622\u0626\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n
          \u0627\u06cc\u06a9 \u0627\u0648\u0631 \u0686\u06cc\u0632 \u062c\u0648 \u0645\u06cc\u06ba \u0627\u067e\u0646\u06d2 \u0622\u067e \u06a9\u0648 \u0634\u0631\u0648\u0639 \u0645\u06cc\u06ba \u0628\u062a\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba \u0648\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0646\u0642\u0634\u06c1 \u0627\u0646\u062c\u0646 \u0627\u0648\u0631 three.js<\/code> \u0645\u062f\u0645\u0642\u0627\u0628\u0644 \u0646\u06c1\u06cc\u06ba\u06d4 \u0646\u0642\u0634\u06c1 10,000 \u0641\u06a9\u0633\u0688 \u0639\u0645\u0627\u0631\u062a\u0648\u06ba \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u06cc \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0631\u062f\u06c1 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u0633\u06d2 \u0628\u06c1\u062a\u0631 \u06c1\u06d2\u06d4 three.js<\/code> \u06cc\u06c1 10 \u062c\u0630\u0628\u0627\u062a \u06a9\u0627 \u0627\u0638\u06c1\u0627\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u062f\u0648\u0633\u0631\u06cc \u0627\u0638\u06c1\u0627\u0631\u06cc \u0632\u0628\u0627\u0646 \u0633\u06d2 \u0628\u06c1\u062a\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n
          \u06c1\u0631 \u0641\u0631\u062f \u06a9\u0648 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u06a9\u0627\u0645 \u062f\u06cc\u06ba \u062c\u0633 \u0645\u06cc\u06ba \u0648\u06c1 \u0627\u0686\u06be\u06d2 \u06c1\u0648\u06ba \u0627\u0648\u0631 \u062f\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0633\u06cc\u0648\u0646 \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 12 \u0642\u062f\u0645\u06cc \u06a9\u0648\u0622\u0631\u0688\u06cc\u0646\u06cc\u0679 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0627\u0648\u0631 11 \u0642\u062f\u0645\u06cc \u0641\u06cc\u0686\u0631 \u0627\u0633\u0679\u06cc\u0679 \u0679\u0631\u06a9 \u06c1\u06d2\u06d4<\/p>\n
          \"\u0645\u06a9\u0645\u0644<\/p>\n
          \u0622\u067e Hazardim.com \u067e\u0631 \u062f\u0648\u0646\u0648\u06ba \u0645\u0646\u0638\u0631\u0646\u0627\u0645\u06d2 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0633\u0627\u062d\u0644\u06cc \u0634\u06c1\u0631 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0633\u0648\u0646\u0627\u0645\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u060c \u06cc\u0627 \u0634\u06c1\u0631 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u060c \u067e\u06cc\u0645\u0627\u0646\u06c1 \u0633\u06cc\u0679 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0628\u0679\u0646 \u062f\u0628\u0627\u0626\u06cc\u06ba\u06d4 \u0627\u0633 \u06af\u0627\u0626\u06cc\u0688 \u0645\u06cc\u06ba \u0645\u0648\u062c\u0648\u062f \u06a9\u0648\u0688 \u0627\u0633 \u06a9\u0648\u0688 \u06a9\u0627 \u06a9\u0644\u06cc\u0646 \u0627\u067e \u0648\u0631\u0698\u0646 \u06c1\u06d2 \u062c\u0648 \u06cc\u06c1\u0627\u06ba \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4 \u0679\u0645 \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1 \u06a9\u06c1 \u0622\u067e \u0646\u06d2 \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u0633\u06d2 \u062a\u0648\u0691 \u062f\u06cc\u0627 \u06a9\u06c1 \u0645\u06cc\u06ba \u06a9\u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u062a\u06be\u0627\u06d4<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
          \u06a9\u0633\u06cc \u0648\u0642\u062a\u060c \u0622\u067e \u06a9\u06d2 \u0646\u0642\u0634\u06d2 \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u0645\u0627\u0631\u06a9\u0631 \u0627\u0648\u0631 \u06a9\u062b\u06cc\u0631 \u0627\u0644\u0627\u0636\u0644\u0627\u0639 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0645\u06cc\u06ba \u0646\u0642\u0634\u06d2 \u067e\u0631 \u06a9\u0686\u06be \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba\u06d4 \u06af\u0644\u06cc \u0645\u06cc\u06ba \u0628\u06c1\u062a\u0627 \u06c1\u0648\u0627 \u067e\u0627\u0646\u06cc\u060c \u06c1\u0648\u0627 \u0645\u06cc\u06ba \u062a\u06cc\u0631\u062a\u0627 \u06c1\u0648\u0627 \u062f\u06be\u0648\u0627\u06ba\u060c \u0627\u06cc\u06a9 \u0646\u0642\u0637\u06c1 \u0633\u06d2 \u067e\u06be\u06cc\u0644\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0635\u062f\u0645\u06d2 \u06a9\u06cc \u0644\u06c1\u0631\u06cc\u06ba \u0648\u063a\u06cc\u0631\u06c1\u06d4 \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u062c\u0628 \u0645\u06cc\u06ba \u0646\u06d2 \u0627\u0633 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u06cc \u062a\u0648 \u0645\u06cc\u06ba […]<\/p>\n","protected":false},"author":7,"featured_media":30920,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-30919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/30919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=30919"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/30919\/revisions"}],"predecessor-version":[{"id":30921,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/30919\/revisions\/30921"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/30920"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=30919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=30919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=30919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}