{"id":288359,"date":"2018-08-22T13:35:02","date_gmt":"2018-08-22T09:35:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=288359"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=288359","title":{"rendered":"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432"},"content":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/420847\/\" class=\"post__text post__text-html js-mediator-article\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mx\/-v\/ry\/mx-vryd99xgt73gzsgzhfvcqpe0.jpeg\"><\/p>\n<p>  <\/p>\n<p>WebGL \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e, \u043f\u0440\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0435\u043c\u0430\u043b\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u0435\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0438 \u0443\u0440\u043e\u043a\u043e\u0432. \u041d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u0430\u0441\u0441\u0435 \u043e\u043d\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430. \u0414\u0430\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0431\u044a\u0435\u043c\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0443\u0436\u043d\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043a\u0430, \u0447\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443. \u0422\u0430\u043c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0441\u0446\u0435\u043d\u044b, \u043a\u0430\u043c\u0435\u0440\u0430, \u0441\u0432\u0435\u0442\u2026 \u041d\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u043c\u0438 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043b\u044e\u0434\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438 \u043f\u0438\u0448\u0443\u0442 \u0434\u043b\u0438\u043d\u043d\u044b\u0435-\u0434\u043b\u0438\u043d\u043d\u044b\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0440\u0430\u0434\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u043e \u0441\u0443\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. <\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u043e\u0431\u0443\u0434\u0438\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 2d-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u043e\u043d\u0438 \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u043e. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS \u0431\u0435\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0434\u0435\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0434\u0432\u0438\u0433\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 SVG, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d\u0438 \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<blockquote><p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0441 <code>canvas<\/code>, \u0432 \u043e\u0431\u0449\u0438\u0445 \u0447\u0435\u0440\u0442\u0430\u0445 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 WebGL, \u0438 \u0432\u043b\u0430\u0434\u0435\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u043e\u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u0432 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0435. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e, \u043d\u0435 \u0430\u043a\u0430\u0434\u0435\u043c\u0438\u0447\u043d\u043e, \u0441 \u0446\u0435\u043b\u044c\u044e \u0434\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438, \u0430 \u043d\u0435 \u043f\u043e\u043b\u043d\u0443\u044e \u0442\u0435\u043e\u0440\u0438\u044e \u0438\u0445 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043a\u0443\u0445\u043d\u0438 \u0438\u043b\u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0434\u043b\u044f \u0432\u044b\u0437\u0443\u0431\u0440\u0438\u0432\u0430\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0443\u043c\u043d\u044b\u0435 \u043a\u043d\u0438\u0436\u043a\u0438.<\/p><\/blockquote>\n<p><em>\u0421\u0440\u0430\u0437\u0443 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043e\u0442 CodePen \u0438\u043c\u0435\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 \u043d\u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u043d\u0430 \u043c\u0430\u043a\u0431\u0443\u043a\u0435 \u0447\u0442\u043e-\u0442\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442 \u2014 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043e\u0442 \u043d\u0438\u0445.<\/em><\/p>\n<p>  <\/p>\n<h2 id=\"osnovnye-idei\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0434\u0435\u0438<\/h2>\n<p>  <\/p>\n<p><strong>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0448\u0435\u0439\u0434\u0435\u0440?<\/strong><\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440? \u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e \u2014 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430. \u041e\u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043d\u0430 <code>\u0441anvas<\/code>. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c <code>canvas<\/code> \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 1000x500px, \u0442\u043e \u044d\u0442\u0430 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f 500000 \u0440\u0430\u0437, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u043e\u043b\u0443\u0447\u0430\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0438\u0445 \u0432\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043f\u0438\u043a\u0441\u0435\u043b\u044f, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u042d\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 GPU \u0432\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0442\u043e\u043a\u043e\u0432. \u041d\u0430 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438 \u0431\u044b \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412\u0435\u0440\u0448\u0438\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u2014 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430, \u043d\u043e \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043d\u0430 <code>canvas<\/code>, \u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0432 \u0444\u0438\u0433\u0443\u0440\u0430\u0445, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0432 \u0442\u0440\u0435\u0445\u043c\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. \u0422\u0430\u043a\u0436\u0435 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u0435\u0440\u0448\u0438\u043d. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0448\u0438\u043d\u044b, \u0430 \u043d\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u0448\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041c\u044b \u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432\u0435\u0440\u0448\u0438\u043d \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 &#171;\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430&#187; \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f.<\/li>\n<li>\u0412\u0435\u0440\u0448\u0438\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0435\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043a \u0447\u0430\u0441\u0442\u043d\u043e\u043c\u0443 \u0441\u043b\u0443\u0447\u0430\u044e \u2014 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438, \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0443. \u0424\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0432 3d \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043f\u0440\u043e\u0435\u043a\u0446\u0438\u044f \u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442.<\/li>\n<li>\u0414\u0430\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432-\u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440, \u043e\u043d \u0431\u0435\u0440\u0435\u0442 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0447\u0442\u043e-\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0438 \u0432\u044b\u0434\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>drawImage()<\/code> \u0443 <code>canvas<\/code>. \u041d\u043e \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u0442\u0443 \u0441\u0430\u043c\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0442\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p><strong>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<p>\u0428\u0435\u0439\u0434\u0435\u0440\u044b \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 GLSL \u2014 OpenGL Shading Language. \u042d\u0442\u043e\u0442 \u044f\u0437\u044b\u043a \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0421\u0438. \u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u0432\u0435\u0441\u044c \u0441\u0438\u043d\u0442\u0430\u0441\u0438\u0441 \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430, \u043d\u043e \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u043f\u043e\u0439\u043b\u0435\u0440 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438<\/b><\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/id\/vb\/6e\/idvb6ew9k7ackf94bjviuxavhxc.jpeg\"><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ye\/ax\/b4\/yeaxb44uvcjkhir92ezxcsnc2oo.jpeg\"><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/f7\/2q\/5q\/f72q5qifi99xwv5nsqfnkb2x1au.jpeg\"><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/8c\/ty\/in\/8ctyinenggjs8gutaj484oreep4.jpeg\"><\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0438\u043c\u0435\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e main, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0438 \u0432\u044b\u0432\u043e\u0434 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u0440\u0438\u0441\u0442\u0430\u0432\u043a\u043e\u0439 <code>gl_<\/code>. \u041e\u043d\u0438 \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u0438\u0445 \u0441\u0430\u043c\u044b\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432. \u0422\u0430\u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0434\u043b\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u043b\u0435\u0436\u0430\u0442 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>gl_Position<\/code>, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 (\u043f\u0438\u043a\u0441\u0435\u043b\u044f) \u0434\u043b\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u043b\u0435\u0436\u0430\u0442 \u0432 <code>gl_FragCoord<\/code> \u0438.\u0442.\u0434. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u0432 \u0442\u043e\u0439 \u0436\u0435 \u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0435.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 GLSL \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0437\u0430\u0442\u0435\u0439\u043b\u0438\u0432\u044b \u2014 <code>void<\/code>, <code>bool<\/code>, <code>int<\/code>, <code>float<\/code>\u2026 \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 \u043a\u0430\u043a\u0438\u043c-\u043d\u0438\u0431\u0443\u0434\u044c \u0421\u0438-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c, \u0432\u044b \u0438\u0445 \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438. \u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0438\u043f\u044b, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u044b \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0435\u0439 \u2014 <code>vec2<\/code>, <code>vec3<\/code>, <code>vec4<\/code>. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432. \u0421\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c, \u0431\u044b\u0432\u0430\u044e\u0442 \u0442\u0440\u0435\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li><strong>Uniform<\/strong> \u2014 \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043c\u044b\u0441\u043b\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u0432\u043d\u0435, \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u044b\u0445 \u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432.<\/li>\n<li><strong>Attribute<\/strong> \u2014 \u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0443\u0436\u0435 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u0435\u0447\u043d\u043e \u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438.<\/li>\n<li><strong>Varying<\/strong> \u2014 \u041d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u044b\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<blockquote><p>\u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b u\/a\/v \u043a\u043e \u0432\u0441\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u0445, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u043a\u0443\u0434\u0430 \u0432\u0437\u044f\u043b\u0438\u0441\u044c.<\/p><\/blockquote>\n<p>\u041f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0437\u0443 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0438 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043f\u0430\u043c\u044f\u0442\u044c.<\/p>\n<p>  <\/p>\n<h2 id=\"gotovim-startovyy-shablon\">\u0413\u043e\u0442\u043e\u0432\u0438\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 JS. \u041a\u0430\u043a \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0438 \u0431\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 <code>canvas<\/code>, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043e\u043d \u0441\u0430\u043c \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<p>  <\/p>\n<pre><code>const CANVAS = document.getElementById(IDs.canvas); const GL = canvas.getContext('webgl');<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u043c\u043e\u043c\u0435\u043d\u0442, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c <code>canvas<\/code> \u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442\u043e\u043c \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u041d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0430\u043a\u0446\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435. \u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c \u0441 WebGL.<\/p>\n<p>  <\/p>\n<pre><code>function createProgram() {     const shaders = getShaders();      PROGRAM = GL.createProgram();      GL.attachShader(PROGRAM, shaders.vertex);     GL.attachShader(PROGRAM, shaders.fragment);     GL.linkProgram(PROGRAM);      GL.useProgram(PROGRAM); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u044b (\u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0438\u0436\u0435), \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0435\u0435 \u043e\u0431\u0430 \u043d\u0430\u0448\u0438\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u043b\u0438\u043d\u043a\u043e\u0432\u043a\u0443. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432. \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u043e varying-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439? \u2014 \u0412\u043e\u0442 \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0438\u0445 \u043d\u0430\u0431\u043e\u0440\u044b \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438, \u043d\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0442\u043e. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u0430\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0435 \u0432\u044b\u044f\u0432\u0438\u0442, \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0448\u0438\u043d \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435-\u0431\u0443\u0444\u0435\u0440\u0435 \u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u0430\u043c, \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0432\u0435\u0440\u0448\u0438\u043d\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0430. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u0438\u043c\u0438 \u043a\u0443\u0441\u043e\u0447\u043a\u0430\u043c\u0438. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e-\u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>a_position<\/code>. \u041c\u043e\u0436\u043d\u043e \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043d\u0430\u0437\u0432\u0430\u0442\u044c, \u043d\u0435 \u0432\u0430\u0436\u043d\u043e. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0435\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u0432 \u0421\u0438, \u043d\u043e \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c, \u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u043e\u043c\u0435\u0440 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b).<\/p>\n<p>  <\/p>\n<pre><code>const vertexPositionAttribute = GL.getAttribLocation(PROGRAM, 'a_position');<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 (\u0432 \u0441\u0430\u043c\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435 \u043c\u044b \u0435\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0443\u0436\u0435 \u043a\u0430\u043a \u0432\u0435\u043a\u0442\u043e\u0440). WebGL \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0430\u043a\u0438\u0445 \u0442\u043e\u0447\u0435\u043a \u0432 \u043d\u0430\u0448\u0438\u0445 \u0444\u0438\u0433\u0443\u0440\u0430\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u0439 \u0432\u044b\u0437\u043e\u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0430. \u041c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430-\u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f: \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u2014 2 (\u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b <code>(x,y)<\/code>), \u043e\u043d \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0447\u0438\u0441\u0435\u043b \u0438 \u043d\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043d\u0430\u043c \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b, \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0443\u043b\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/p>\n<p>  <\/p>\n<pre><code>GL.enableVertexAttribArray(vertexPositionAttribute); GL.vertexAttribPointer(vertexPositionAttribute, 2, GL.FLOAT, false, 0, 0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0430\u043c \u0431\u0443\u0444\u0435\u0440 \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u0432\u0435\u0440\u0448\u0438\u043d \u043d\u0430\u0448\u0435\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f. \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b &#171;\u0432 2d&#187; \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435, \u0430 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435.<\/p>\n<p>  <\/p>\n<pre><code>function createPlane() {     GL.bindBuffer(GL.ARRAY_BUFFER, GL.createBuffer());     GL.bufferData(         GL.ARRAY_BUFFER,         new Float32Array([             -1, -1,             -1,  1,              1, -1,              1,  1         ]),         GL.STATIC_DRAW     ); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e\u0433\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. <code>STATIC_DRAW<\/code> \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0431\u0443\u0444\u0435\u0440 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0441\u0430\u043c\u0438\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0438\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code>function getShaders() {     return {         vertex: compileShader(             GL.VERTEX_SHADER,             document.getElementById(IDs.shaders.vertex).textContent         ),         fragment: compileShader(             GL.FRAGMENT_SHADER,             document.getElementById(IDs.shaders.fragment).textContent         )     }; }  function compileShader(type, source) {     const shader = GL.createShader(type);      GL.shaderSource(shader, source);     GL.compileShader(shader);      return shader; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u0434 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0448\u0435\u0439\u0434\u0435\u0440 \u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e. \u041f\u043e \u0438\u0434\u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043d\u043e CodePen \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0412\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0443\u0440\u043e\u043a\u0430\u0445 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u043f\u0440\u044f\u043c\u043e \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0432 JS, \u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u044f\u0437\u044b\u043a \u043d\u0435 \u043f\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0425\u043e\u0442\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0430 \u0432\u043a\u0443\u0441 \u0438 \u0446\u0432\u0435\u0442&#8230;<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0430, \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u0432 \u043f\u0430\u0440\u0443 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043d\u0435\u0441\u0443\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430. \u041f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043b\u043e\u0433\u0438 \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043b\u043e\u043c\u0430\u0442\u044c \u0433\u043e\u043b\u043e\u0432\u0443 \u043d\u0430\u0434 \u0442\u0435\u043c, \u0447\u0442\u043e \u0436\u0435 \u0442\u0430\u043c \u043d\u0435 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c:<\/p>\n<p>  <\/p>\n<pre><code>console.log(GL.getShaderInfoLog(shader));<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>WebGL \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u044b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043f\u043e\u0447\u0438\u043d\u0438\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u044b\u0441\u043b\u044c\u044e &#171;\u043e\u0442\u0432\u0430\u043b\u0438\u043b\u043e\u0441\u044c \u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u0442\u0432\u0430\u043b\u0438\u043b\u043e\u0441\u044c&#187; \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u043e\u0434 \u043a\u0443\u0447\u0435\u0439 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a.<\/p><\/blockquote>\n<p><strong>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0430\u043c\u0438\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0430 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044c, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f, \u043d\u0430\u043c \u0445\u0432\u0430\u0442\u0438\u0442 \u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0443\u0441\u0438\u043b\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d\u044b \u043d\u0430 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u0445 \u0438 \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u043d\u0438\u043c.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0441 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445. \u0412 \u0441\u0435\u0442\u0438 \u0432\u044b \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u0433\u0434\u0435 \u0438\u0437 \u043e\u0434\u043d\u043e\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u044f\u0434\u0440\u0435\u043d\u043e\u0439 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u043e\u0439 \u043d\u0430 200 \u0441\u0442\u0440\u043e\u043a \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442, \u0435\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u2014 \u044d\u0442\u043e \u043d\u0435 &#171;\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 GL&#187;, \u044d\u0442\u043e \u2014 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u0435\u0449\u0435 \u0438\u0437 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0432\u0435\u043a\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043b\u044e\u0434\u044c\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043c\u043e\u043b\u043e\u0434\u043e\u0441\u0442\u0438 \u0438\u043c\u0435\u043b\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043d\u0430 \u0434\u043b\u0438\u043d\u0443 \u0438\u043c\u0435\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445.<\/p><\/blockquote>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440. \u0412 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e-\u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>a_position<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f 2d-\u0432\u0435\u043a\u0442\u043e\u0440 \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 <code>(x,y)<\/code>, \u043a\u0430\u043a \u043c\u044b \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438. \u0428\u0435\u0439\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440 \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 <code>(x,y,z,w)<\/code>. \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u043e\u043d \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e \u043e\u0441\u0438 z \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0435 \u043e\u0431\u043d\u0443\u043b\u044f\u0435\u043c \u0438 \u0441\u0442\u0430\u0432\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 w \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u0435\u0434\u0438\u043d\u0438\u0446\u0443. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0447\u0435\u0442\u044b\u0440\u0435, \u0430 \u043d\u0435 \u0442\u0440\u0438, \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u043c \u0432 \u0441\u0435\u0442\u0438 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 &#171;\u043e\u0434\u043d\u043e\u0440\u043e\u0434\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b&#187;.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script id='vertex-shader' type='x-shader\/x-vertex'&gt;     precision mediump float;      attribute vec2 a_position;      void main() {         gl_Position = vec4(position, 0, 1);     } &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>gl_Position<\/code>. \u0423 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u043d\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0430 <code>return<\/code> \u0432 \u043f\u043e\u043b\u043d\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430, \u0432\u0441\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u043d\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0442\u0438\u043f\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 float. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0445\u0443\u0436\u0435, \u0447\u0435\u043c highp \u0438 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0432 \u043e\u0431\u043e\u0438\u0445 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u0445. \u0417\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u043a\u0440\u0430\u0441\u043e\u0442\u0443 \u0441 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c.<\/p><\/blockquote>\n<p>\u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0446\u0432\u0435\u0442. \u041d\u0430\u0448 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0435\u0441\u044c <code>canvas<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u044e:<\/p>\n<p>  <\/p>\n<pre><code>&lt;script id='fragment-shader' type='x-shader\/x-fragment'&gt;     precision mediump float;      #define GOLD vec4(1.0, 0.86, 0.6, 1.0)      void main() {         gl_FragColor = GOLD;     }  &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0447\u0438\u0441\u043b\u0430, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0446\u0432\u0435\u0442. \u042d\u0442\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u0432\u0441\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430\u043c RGBA, \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u0446\u0435\u043b\u044b\u0435 \u043e\u0442 0 \u0434\u043e 255, \u0430 \u0434\u0440\u043e\u0431\u043d\u044b\u0435 \u043e\u0442 0 \u0434\u043e 1. \u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0442\u043e\u0442 \u0436\u0435.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u2014 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u043d\u0435 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c (\u043f\u043e\u0434\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u0432 \u0421\u0438, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438).<\/p><\/blockquote>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u043e \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0435:<\/p>\n<p>  <\/p>\n<blockquote><p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a #ifdef GL_ES \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0443\u0440\u043e\u043a\u0430\u0445 \u043b\u0438\u0448\u0435\u043d\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430, \u0442.\u043a. \u0443 \u043d\u0430\u0441 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 GL \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442.<\/p><\/blockquote>\n<p>\u041d\u043e \u043f\u043e\u0440\u0430 \u0431\u044b \u0443\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/JaoYMj?height=300&amp;slug-hash=JaoYMj&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0417\u043e\u043b\u043e\u0442\u043e\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u0430\u043a \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e. \u0418\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c\u0438, \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u0443\u0440\u043e\u043a\u0430\u0445 \u043f\u043e WebGL \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0441 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u043c\u0430\u043b\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430, \u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code>void main() {     gl_FragColor = vec4(gl_FragCoord.zxy \/ 500.0, 1.0); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0446\u0432\u0435\u0442\u0430. \u0412\u044b \u0447\u0430\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u0442\u0430\u043a\u043e\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0442\u044c \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432 \u0441\u0435\u0442\u0438. \u0418 \u0442\u043e \u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 \u0432\u0435\u043a\u0442\u043e\u0440\u044b. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u043c\u0435\u0448\u0430\u0442\u044c \u0432 \u043a\u0443\u0447\u0443. \u0423 \u0435\u0432\u0430\u043d\u0433\u0435\u043b\u0438\u0441\u0442\u043e\u0432 TypeScript \u0437\u0434\u0435\u0441\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u0441\u0442\u0443\u043f. \u0412\u0430\u0436\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u043a\u0430\u043a \u043c\u044b \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u0438\u0437 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>.x<\/code>, <code>.y<\/code>, <code>.z<\/code>, <code>.xy<\/code>, <code>.zy<\/code>, <code>.xyz<\/code>, <code>.zyx<\/code>, <code>.xyzw<\/code> \u0438.\u0442.\u0434. \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044f\u0445 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0432\u0435\u043a\u0442\u043e\u0440\u0430. \u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e. \u0422\u0430\u043a\u0436\u0435 \u0432\u0435\u043a\u0442\u043e\u0440 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u043c\u044b \u0438 \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u043b\u0438.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0412\u0441\u0435\u0433\u0434\u0430 \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0447\u0438\u0441\u0435\u043b. \u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f int -&gt; float \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442.<\/p><\/blockquote>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/vzENvx?height=300&amp;slug-hash=vzENvx&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p><strong>Uniforms \u0438 \u0445\u043e\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 uniforms. \u042d\u0442\u043e \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0435. \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0445 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0447\u0442\u0438 \u0442\u0435\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u0438 \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code>GL.getUniformLocation(PROGRAM, 'u_time')<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u0430\u0434\u0440\u043e\u043c. \u0422\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438, \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u043e \u0441\u043b\u043e\u0432\u0430 <code>uniform<\/code>, \u0434\u0430\u043b\u0435\u0435 \u0438\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 (1 \u0434\u043b\u044f \u0447\u0438\u0441\u0435\u043b, 2, 3 \u0438\u043b\u0438 4 \u0434\u043b\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043e\u0432) \u0438 \u0442\u0438\u043f (f \u2014 float, i \u2014 int, v \u2014 \u0432\u0435\u043a\u0442\u043e\u0440).<\/p>\n<p>  <\/p>\n<pre><code>function draw(timeStamp) {     GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_time'), timeStamp \/ 1000.0);      GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);      window.requestAnimationFrame(draw); }<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0430\u043c \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u044b 60fps \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445. \u0412\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b\u043a\u0443 \u043a requestAnimationFrame \u0438 \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0430\u0434\u0440\u043e\u0432.<\/p><\/blockquote>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438. \u0412 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 <code>sin<\/code>, <code>cos<\/code>, <code>tan<\/code>, <code>asin<\/code>, <code>acos<\/code>, <code>atan<\/code>, <code>pow<\/code>, <code>exp<\/code>, <code>log<\/code>, <code>sqrt<\/code>, <code>abs<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0438\u0437 \u043d\u0438\u0445.<\/p>\n<p>  <\/p>\n<pre><code>uniform float u_time;  void main() {     gl_FragColor = vec4(             abs(sin(u_time)),             abs(sin(u_time * 3.0)),             abs(sin(u_time * 5.0)), 1.0); } <\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0440\u0435\u043c\u044f \u0432 \u0442\u0430\u043a\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445 \u2014 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c <code>requestAnimationFrame<\/code>, \u043d\u043e \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0435 &#171;\u0432\u0440\u0435\u043c\u044f&#187;. \u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c, \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0438\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u042d\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e. <\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/VGYvNP?height=300&amp;slug-hash=VGYvNP&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041d\u043e \u0445\u0432\u0430\u0442\u0438\u0442 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u0430 \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0441\u0430\u043c\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<pre><code>function createTexture() {     const image = new Image();      image.crossOrigin = 'anonymous';      image.onload = () =&gt; {         \/\/ ....     };      image.src = 'example.jpg'; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0442\u0438 \u043f\u043e\u0434 \u043d\u043e\u043c\u0435\u0440\u043e\u043c 0. \u0412 WebGL \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0443\u0440 \u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a \u043a\u0430\u043a\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. \u0412 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0430, \u043d\u043e \u043c\u044b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u043b\u0435\u0432\u043e\u0439.<\/p>\n<p>  <\/p>\n<pre><code>const texture = GL.createTexture();  GL.activeTexture(GL.TEXTURE0); GL.bindTexture(GL.TEXTURE_2D, texture);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0435\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043e \u043e\u0441\u0438 Y, \u0442.\u043a. \u0432 WebGL \u043e\u0441\u044c \u043f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code>GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true); GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGB, GL.RGB, GL.UNSIGNED_BYTE, image);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e \u0438\u0434\u0435\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u043c\u0438. \u0422\u043e\u0447\u043d\u0435\u0435 \u0434\u0430\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440, \u0440\u0430\u0432\u043d\u044b\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0434\u0432\u043e\u0439\u043a\u0438 \u2014 32px, 64px, 128px \u0438.\u0442.\u0434. \u041d\u043e \u0432\u0441\u0435 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u043d\u0438\u043a\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u0438 \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 <code>canvas<\/code> \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043e \u043a\u0440\u0430\u0435\u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u043a\u0440\u0430\u0439\u043d\u0438\u043c\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u0445\u043e\u0442\u044f \u0438 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u043e\u0439.<\/p>\n<p>  <\/p>\n<pre><code>GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u044b. \u042d\u0442\u043e \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 <code>uniform<\/code>.<\/p>\n<p>  <\/p>\n<pre><code>GL.uniform1i(GL.getUniformLocation(PROGRAM, 'u_texture'), 0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0438\u0437 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b \u0432\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u043e\u043c \u0448\u0435\u0439\u0434\u0435\u0440\u0435. \u041d\u043e \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u0432\u0435\u0441\u044c <code>canvas<\/code>. \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 <code>canvas<\/code> \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438, \u0442\u043e \u044d\u0442\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0439. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 <code>canvas<\/code> \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u044b (\u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430):<\/p>\n<p>  <\/p>\n<pre><code>GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_canvas_size'),     Math.max(CANVAS.height, CANVAS.width));<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0434\u0435\u043b\u0438\u043c \u043d\u0430 \u043d\u0435\u0433\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code>uniform sampler2D u_texture; uniform float u_canvas_size;  void main() {     gl_FragColor = texture2D(u_texture, gl_FragCoord.xy \/ u_canvas_size); } <\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/QVwjeJ?height=300&amp;slug-hash=QVwjeJ&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p><em>\u041d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0430\u0443\u0437\u0443 \u0438 \u0437\u0430\u0432\u0430\u0440\u0438\u0442\u044c \u0447\u0430\u044e. \u041c\u044b \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u0441\u044e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/em><\/p>\n<p>  <\/p>\n<h2 id=\"effekty\">\u042d\u0444\u0444\u0435\u043a\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0432\u0430\u0436\u043d\u0443\u044e \u0440\u043e\u043b\u044c \u0438\u0433\u0440\u0430\u0435\u0442 \u0438\u043d\u0442\u0443\u0438\u0446\u0438\u044f \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0447\u0435\u043c-\u0442\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u0434\u0430\u044e\u0449\u0438\u043c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442, \u0430 \u043c\u044b \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443. WebGL \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u043a\u043e\u0432\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u0432\u044b\u0433\u043e\u0434\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u0443\u0441\u043a\u0438 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u043c\u0435\u0441\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u0446\u0435\u043b\u0438\u043a\u043e\u043c.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u2014 \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u0418 \u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435. \u0412\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b, \u043d\u0430\u0439\u0434\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0435\u0442\u0438, \u043d\u0430 \u043f\u0440\u0435\u0434\u043c\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0411\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u043a\u043e\u0434\u0430 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f.<\/p><\/blockquote>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0435\u043c \u0441 \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u043c. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043d\u0430\u0448\u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u043d\u0435 \u0442\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043d\u0430 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0430 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0438\u0437 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445. \u041f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0412\u0440\u0435\u043c\u044f \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u2014 \u0442\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u0434\u0430 \u0438 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435 \u043c\u044b \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0443\u0441:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture, gl_FragCoord.xy \/ u_canvas_size     + sin(u_time + gl_FragCoord.y));<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0439. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432\u0441\u0435 \u0434\u0432\u0438\u0436\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0430\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u043e\u0439. \u041f\u043e\u0434\u0435\u043b\u0438\u043c \u0432\u0441\u0435 \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0447\u0438\u0441\u043b\u043e:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture, gl_FragCoord.xy \/ u_canvas_size     + sin(u_time + gl_FragCoord.y) \/ 250.0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0436\u0435 \u043b\u0443\u0447\u0448\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0432\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u041f\u043e \u0438\u0434\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u0443\u044e \u0432\u043e\u043b\u043d\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0441\u0438\u043d\u0443\u0441\u0430 \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture, gl_FragCoord.xy \/ u_canvas_size     + sin(u_time + gl_FragCoord.y \/ 30.0) \/ 250.0);<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/jvEWbJ?height=300&amp;slug-hash=jvEWbJ&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0433\u043b\u0430\u0437\u043e\u043a. \u041a\u0430\u043a \u0438 \u0441 \u043a\u0443\u043b\u0438\u043d\u0430\u0440\u0438\u0435\u0439, \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0442\u044c, \u043d\u043e \u043f\u043e\u0442\u043e\u043c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043d\u0430 \u0447\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0432 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0444\u043e\u0440\u043c\u0443\u043b\u0435. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u043d\u044b, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0445 \u0432 \u043c\u0430\u043a\u0440\u043e\u0441\u044b (\u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435) \u0438 \u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430.<\/p>\n<p>  <\/p>\n<p><strong>\u041a\u0440\u0438\u0432\u043e\u0435 \u0437\u0435\u0440\u043a\u0430\u043b\u043e, \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434\u044b \u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0443\u043c\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u0414\u0430, \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0431\u0440\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u043d\u0438\u044f \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u0435\u043c \u0438\u0434\u0435\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u043a \u0431\u044b \u043f\u0440\u043e\u0448\u043b\u0438 \u043c\u0438\u043c\u043e \u043d\u0430\u0441.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u043b\u043d\u044b, \u0430 \u0445\u043e\u0442\u0438\u043c &#171;\u043a\u0440\u0438\u0432\u043e\u0435 \u0437\u0435\u0440\u043a\u0430\u043b\u043e&#187;, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u0427\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438? \u0420\u0430\u0437 \u0443\u0436 \u0432\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c. \u041d\u043e \u0432\u043e\u0442 \u043d\u0435\u0437\u0430\u0434\u0430\u0447\u0430, \u0443 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 rand() \u0438\u043b\u0438 \u0447\u0435\u0433\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e. \u0412\u0441\u0435 \u0434\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b. \u041d\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0438 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0431\u0435\u0437 \u0432\u0440\u0435\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c, \u0442\u043e \u043d\u0430\u043c \u044d\u0442\u043e \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0443\u0440\u0435\u0437\u0430\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u042d\u0442\u043e \u0434\u0430\u0436\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0445\u0435\u0448-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0447\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0445\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e. \u041d\u0430\u043c \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0442\u0430\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b \u043d\u0430 \u0432\u0445\u043e\u0434 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u043c\u0438\u043c \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043d\u0430\u0434 \u043d\u0438\u043c, \u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u043b \u0447\u0438\u0441\u043b\u043e. \u0415\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0432\u043d\u043e \u043a\u043e\u0447\u0443\u0435\u0442 \u043f\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443 \u0438 \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f &#171;\u043a\u0430\u043d\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c&#187;:<\/p>\n<p>  <\/p>\n<pre><code>float rand(vec2 seed) {     return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123); } <\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0438 \u0443\u043c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b \u0443 \u043d\u0435\u0435 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0441\u0430\u043c\u043e\u0435 \u043b\u0443\u0447\u0448\u0435\u0435, \u0434\u0440\u0443\u0433\u0438\u0435, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u0438\u043d\u0443\u0441\u0430 \u0443 NVIDIA \u0438 ATI \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c\u0438. \u0412\u0441\u0435 \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u0434\u043b\u044f \u043a\u0440\u0438\u043f\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438, \u0430 \u043d\u0430\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u0438\u043a \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438 \u0441\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u0435\u0447\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u043c \u043d\u0430 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0430\u043c\u043f\u043b\u0438\u0442\u0443\u0434\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0430\u043d\u0434\u043e\u043c\u0430:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture,     gl_FragCoord.xy \/ u_canvas_size     + rand(gl_FragCoord.xy) \/ 100.0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u044e\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043b\u0438\u0448\u043d\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture,     gl_FragCoord.xy \/ u_canvas_size     + rand(gl_FragCoord.xy + vec2(sin(u_time))) \/ 250.0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u0442\u043e\u0436\u0435 \u0437\u0430\u043d\u044f\u0442\u043d\u043e:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/pOvgbX?height=300&amp;slug-hash=pOvgbX&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u043c\u044b \u0434\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0432 \u0442\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0422\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438, \u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0432\u0438\u0433\u0430\u043b\u0438\u0441\u044c \u0446\u0435\u043b\u044b\u0435 \u043a\u0443\u0441\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c \u2014 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u041e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435\u043c. \u041f\u043e\u0445\u043e\u0436\u0430\u044f \u0444\u0438\u0448\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043e\u0442 0 \u0434\u043e 1, \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u043d\u043e\u0436\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 5 \u2014 \u044d\u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043d\u0430\u0448\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437.<\/p>\n<p>  <\/p>\n<pre><code>vec2 texture_coord = gl_FragCoord.xy \/ u_canvas_size;  gl_FragColor = texture2D(u_texture,     texture_coord     + rand(floor(texture_coord * 5.0) + vec2(sin(u_time))) \/ 100.0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u0442\u0443\u0434\u0430-\u0441\u044e\u0434\u0430 \u0438 \u0440\u0432\u0443\u0442 \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u0441\u0433\u043b\u0430\u0434\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e. \u0421\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0432\u0438\u0433\u0438 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u043b\u0430\u0432\u043d\u043e, \u0431\u0435\u0437 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u0433\u0440\u0430\u043d\u0438\u0446. \u041a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a, \u0430 \u0432\u0441\u0435, \u0447\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439. \u042d\u0442\u043e \u0442\u0430\u043a \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u044f, \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0438\u043b\u0438\u043d\u0435\u0439\u043d\u0430\u044f, \u0442.\u043a. \u0443 \u043d\u0430\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442 \u0434\u0432\u0443\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u041f\u0443\u0441\u0442\u044c \u044d\u0442\u0438\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0435\u0440\u0448\u0438\u043d\u044b \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043e\u0432, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0438 \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0412\u044b\u043d\u0435\u0441\u0435\u043c \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u0422\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432 \u0438\u0442\u043e\u0433\u0435 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u0448\u0443\u043c\u0430. \u0412\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e <code>sin<\/code> \u0438 <code>cos<\/code> \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e. \u0422\u0430\u043a\u043e\u0435 \u0447\u0430\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442. \u0411\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0438 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture,     texture_coord     + vec2(         noise(texture_coord * 10.0 + sin(u_time + texture_coord.x * 5.0)) \/ 10.0,         noise(texture_coord * 10.0 + cos(u_time + texture_coord.y * 5.0)) \/ 10.0));<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0443\u0441\u0442\u044c \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u043c. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>fract<\/code> \u043a\u0430\u043a \u0435\u0441\u0442\u044c. \u0411\u043b\u043e\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 1 \u043d\u0430 1 \u2014 \u043c\u044b \u043e\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u043c \u0434\u043e \u0446\u0435\u043b\u044b\u0445 \u0447\u0438\u0441\u0435\u043b:<\/p>\n<p>  <\/p>\n<pre><code>float noise(vec2 position) {     vec2 block_position = floor(position);      float top_left_value     = rand(block_position);     float top_right_value    = rand(block_position + vec2(1.0, 0.0));     float bottom_left_value  = rand(block_position + vec2(0.0, 1.0));     float bottom_right_value = rand(block_position + vec2(1.0, 1.0));      vec2 computed_value = fract(position);      \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438. WebGL \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>smoothstep<\/code>, \u043e\u043d\u0430 \u0434\u0430\u0441\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code>vec2 computed_value = smoothstep(0.0, 1.0, fract(position));<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438\u0437 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d, \u043d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 \u043f\u043e X \u0443 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code>return computed_value.x;<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/mGyVBK?height=300&amp;slug-hash=mGyVBK&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041e\u043e\u043e\u2026 \u041d\u0438 \u0440\u0430\u0437\u0443 \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u0437\u0430\u0442\u043e \u043a\u0430\u043a \u043a\u0440\u0430\u0441\u0438\u0432\u043e&#8230;<\/p>\n<p>  <\/p>\n<blockquote><p>\u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u043a\u0438 \u0432 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430\u0445, \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0438.\u0442.\u0434. \u0438 \u0437\u0430\u043e\u0434\u043d\u043e \u043d\u0430\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0434\u0435\u0439 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p><\/blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e y \u2014 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438. \u0410 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0434\u043b\u0438\u043d\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u0430?<\/p>\n<p>  <\/p>\n<pre><code>return length(computed_value);<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/OoPMza?height=300&amp;slug-hash=OoPMza&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0422\u043e\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0436\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u043c\u0443 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u0447\u0438\u0442\u0430\u0435\u043c 0.5 \u2014 \u043f\u0443\u0441\u0442\u044c \u0431\u0443\u0434\u0443\u0442 \u0438 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u0436\u0435. <\/p>\n<p>  <\/p>\n<pre><code>return mix(top_left_value, top_right_value, computed_value.x)     + (bottom_left_value  - top_left_value)  * computed_value.y * (1.0 - computed_value.x)     + (bottom_right_value - top_right_value) * computed_value.x * computed_value.y     - 0.5;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0442\u043e\u0447\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/eLmJMZ?height=300&amp;slug-hash=eLmJMZ&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p><em>\u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u043f\u0430\u0443\u0437\u0443, \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442.<\/em><\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435, \u0430 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445, \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u0441\u0435 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435. \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438 \u0438\u043b\u0438 \u0435\u0449\u0435 \u043a\u0430\u043a\u043e\u043c-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c uniform-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c \u0437\u0430 \u0441\u0438\u043b\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439. \u0421\u043a\u0430\u0436\u0435\u043c \u043e\u0442 0 \u0434\u043e 1, \u0433\u0434\u0435 0 \u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0430 1 \u2014 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435. <\/p>\n<p>  <\/p>\n<pre><code>uniform float u_intensity;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u043c\u043d\u043e\u0436\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0435 \u0432\u0435\u043a\u0442\u043e\u0440 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture,     texture_coord     + vec2(noise(texture_coord * 10.0 + sin(u_time + texture_coord.x * 5.0)) \/ 10.0,            noise(texture_coord * 10.0 + cos(u_time + texture_coord.y * 5.0)) \/ 10.0)         * u_intensity);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438, \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442 \u0441 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/PdwZdX?height=300&amp;slug-hash=PdwZdX&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0446\u0432\u0435\u0442\u0430 (\u0442\u0430\u043a\u0436\u0435 \u043e\u0442 0 \u0434\u043e 1), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0435 \u0440\u0430\u0441\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0441\u043b\u0430\u0439\u0434\u0443 \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043c\u0435\u043d\u0435\u043d, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u043d\u043e\u0432\u0430. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0432\u0441\u0435 \u0438\u0445 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u0446\u0438\u043a\u043b \u0441 requestAnimationFrame. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u0442\u0438\u0445 \u0446\u0438\u043a\u043b\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0435\u0434\u0430\u0442\u044c FPS.<\/p><\/blockquote>\n<p><strong>\u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0442\u0435\u043a\u043b\u043e \u0438 \u043c\u044b\u0448\u043a\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0418 \u0440\u0430\u0437 \u0443\u0436 \u0437\u0430\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043f\u0440\u043e \u043c\u044b\u0448\u043a\u0443, \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043b\u0438\u0448\u043d\u0438\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0448\u0435\u0439\u0434\u0435\u0440 \u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 uniform-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e.<\/p>\n<p>  <\/p>\n<pre><code>document.addEventListener('mousemove', (e) =&gt; {     let rect = CANVAS.getBoundingClientRect();      MOUSE_POSITION = [         e.clientX - rect.left,         rect.height - (e.clientY - rect.top)     ];      GL.uniform2fv(GL.getUniformLocation(PROGRAM, 'u_mouse_position'), MOUSE_POSITION); });<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0434\u0432\u0438\u0433, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438 \u0434\u043b\u0438\u043d\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u044b\u0448\u0438. \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u2014 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0443\u0441\u0442\u044c \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<pre><code>void main() {     vec2 texture_coord = gl_FragCoord.xy \/ u_canvas_size;     vec2 direction = u_mouse_position \/ u_canvas_size - texture_coord;     float dist = distance(gl_FragCoord.xy, u_mouse_position) \/ u_canvas_size;      if (dist &lt; 0.4) {         gl_FragColor = texture2D(u_texture,             texture_coord             + u_intensity * direction * dist * 1.2         );     } else {         gl_FragColor = texture2D(u_texture, texture_coord);     } } <\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0438\u0442\u0430\u0442\u0435\u043b\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u043d\u0435\u043b\u0438\u043d\u0435\u0439\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u043e\u0433\u043d\u0443\u0442\u0443\u044e \u0438\u043b\u0438 \u0432\u044b\u043f\u0443\u043a\u043b\u0443\u044e \u043b\u0438\u043d\u0437\u0443.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u043a\u0430\u043a \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438 \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u042d\u0442\u043e \u0434\u0430\u0441\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u0430\u0434\u0443\u0442 \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p><\/blockquote>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/bxNEOP?height=300&amp;slug-hash=bxNEOP&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u043c\u0435\u0445\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0443 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0443\u044e \u0448\u0442\u0443\u043a\u0443. Glitch-\u044d\u0444\u0444\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u044b\u0441\u044f\u0447\u0435\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043d\u0430 SVG. \u041d\u043e \u0442\u0430\u043c \u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c. \u0410 \u043d\u0430 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u0445 \u2014 \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432. \u0427\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442? \u0412 \u0446\u0435\u043b\u043e\u043c \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u2014 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043b\u043e\u0441\u044b, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u0434\u0432\u0438\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/p>\n<p>  <\/p>\n<pre><code>float random_value = rand(vec2(texture_coord.y, u_time));  if (random_value &lt; 0.05) {     gl_FragColor = texture2D(u_texture,         vec2(texture_coord.x + random_value \/ 5.0,              texture_coord.y)); } else {     gl_FragColor = texture2D(u_texture, texture_coord); }<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>&#171;\u0427\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442?&#187; \u2014 \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442 \u0441\u0435\u0431\u0435 \u0437\u0430\u0434\u0430\u0442\u044c. \u0418 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0442\u0443\u043f\u043e\u0440\u0443 \u0434\u0430\u0436\u0435 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438.<\/p><\/blockquote>\n<p>\u041c\u043e\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043f\u043e\u043b\u043e\u0441. \u0414\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u043c \u043f\u043e \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u043c\u0443 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e \u2014 \u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043e\u043a\u0440\u0443\u0433\u043b\u044f\u0435\u043c \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0442\u043e\u0447\u0435\u043a.<\/p>\n<p>  <\/p>\n<pre><code>float random_value = rand(vec2(floor(texture_coord.y * 20.0), u_time));<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u0446\u0432\u0435\u0442\u043e\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u044f\u0440\u043a\u043e\u0441\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e \u0432\u0441\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0430\u043c \u0446\u0432\u0435\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code>gl_FragColor = texture2D(u_texture,     vec2(texture_coord.x + random_value \/ 4.0,          texture_coord.y))     + vec4(vec3(random_value), 1.0);<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u0444\u043e\u043d\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u044d\u0442\u043e\u0442 \u0443\u0436\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c. \u0418\u0433\u0440\u044b \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0446\u0432\u0435\u0442\u0430 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0443\u043f\u0440\u0430\u0436\u043d\u0435\u043d\u0438\u044f \u2014 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u043b\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0423\u0434\u043e\u0431\u043d\u043e, \u0447\u0442\u043e \u0438\u0437 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043a\u0430\u043d\u0430\u043b\u044b \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c \u2014 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>.r<\/code>, <code>.g<\/code>, <code>.b<\/code>, <code>.rg<\/code>, <code>.rb<\/code>, <code>.rgb<\/code>, <code>.bgr<\/code>, \u0438.\u0442.\u0434. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0434\u043b\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0435 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u0443 \u043a\u0443\u0447\u0443.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code>float random_value = u_intensity * rand(vec2(floor(texture_coord.y * 20.0), u_time));<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 300px; position: relative;\"><iframe src=\"https:\/\/codepen.io\/sfi0zy\/embed\/preview\/OoPMeY?height=300&amp;slug-hash=OoPMeY&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io&amp;embed-version=2\" style=\"border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;\" allowfullscreen><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"chto-v-itoge\">\u0427\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435?<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u043c\u0438 \u043c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u0447\u0442\u043e \u0438\u0445 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0447\u0442\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u043c\u0438 \u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f, \u0435\u0441\u043b\u0438 \u0438\u0445 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c. \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0431\u0430\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0444\u043e\u0440\u043c\u0443\u043b\u0430\u043c, \u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0438\u0445 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0435.<\/p>\n<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/post\/420847\/\"> https:\/\/habr.com\/post\/420847\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/420847\/\" class=\"post__text post__text-html js-mediator-article\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mx\/-v\/ry\/mx-vryd99xgt73gzsgzhfvcqpe0.jpeg\"><\/p>\n<p>  <\/p>\n<p>WebGL \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e, \u043f\u0440\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0435\u043c\u0430\u043b\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u0435\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0438 \u0443\u0440\u043e\u043a\u043e\u0432. \u041d\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043c\u0430\u0441\u0441\u0435 \u043e\u043d\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430. \u0414\u0430\u0436\u0435 \u043b\u0443\u0447\u0448\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0431\u044a\u0435\u043c\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0443\u0436\u043d\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0438\u0433\u0440\u043e\u0432\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043a\u0430, \u0447\u0435\u043c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443. \u0422\u0430\u043c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0441 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0441\u0446\u0435\u043d\u044b, \u043a\u0430\u043c\u0435\u0440\u0430, \u0441\u0432\u0435\u0442\u2026 \u041d\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u043c\u0438 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043b\u044e\u0434\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438 \u043f\u0438\u0448\u0443\u0442 \u0434\u043b\u0438\u043d\u043d\u044b\u0435-\u0434\u043b\u0438\u043d\u043d\u044b\u0435 \u0448\u0435\u0439\u0434\u0435\u0440\u044b \u0440\u0430\u0434\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u043e \u0441\u0443\u0442\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. <\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u043e \u043f\u043e\u0431\u0443\u0434\u0438\u043b\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 2d-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u043e\u043d\u0438 \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0434\u043a\u043e. \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS \u0431\u0435\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0434\u0435\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0434\u0432\u0438\u0433\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 SVG, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d\u0438 \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0448\u0435\u0439\u0434\u0435\u0440\u043e\u0432.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-288359","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/288359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=288359"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/288359\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=288359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=288359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=288359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}