BITSPARK / Статьи / Дизайн и элементы сайта
Интерактивный сайт: что это и что проверить заказчику
Коротко: определения «интерактивного сайта» в MDN, Khronos и W3C нет. Студия BITSPARK так называет услугу и описывает её словами «WebGL, motion и нестандартные интерфейсы». По MDN, WebGL рисует двухмерную и трёхмерную графику в элементе canvas, и ему нужны две вещи: браузер с поддержкой WebGL и оборудование на устройстве посетителя. Что увидит посетитель без этого, стоит записать в задание заранее. Для содержимого canvas и для управления на странице WCAG 2.2 называет критерии 1.1.1 и 2.1.1.
Заказчик слышит от подрядчика слова «интерактивный сайт» и WebGL и решает три вещи: что вписать в задание, что спросить заранее и что проверить при приёмке. Дальше идут услуга «Интерактивный сайт» с главной страницы BITSPARK, страницы MDN и Khronos о canvas, WebGL, WebGL 2 и WebGPU, поведение страницы на устройстве без поддержки графики, критерии WCAG 2.2 и вопросы для задания и приёмки.
Сведения приведены по страницам источников на 21.10.2026. Khronos, W3C и MDN пишут по-английски, кроме одной русской страницы MDN о WebGL. Английские цитаты даны с переводом, перевод наш.
Цитаты даны дословно, пропуски обозначены знаком (...). Длинное тире в цитатах заменено дефисом. Пример вымышленный: магазин керамики с сайтом example.ru.
Что такое интерактивный сайт?
Коротко: открытые страницы MDN, Khronos и W3C не определяют «интерактивный сайт» как вид сайта, поэтому чужую классификацию за термин выдавать нельзя. Известна формулировка студии BITSPARK: так называется четвёртая услуга на её главной странице. Расшифровки слов «motion» и «нестандартные интерфейсы» на главной нет, и в задании их заменяет описание экранов и действий посетителя.
Источники статьи описывают технологии, из которых собирают такие страницы, и эти описания разобраны в следующих разделах. Для услуги студии источник один: главная страница bitspark.ru. В списке «Что мы делаем» четвёртая услуга названа «Интерактивный сайт» и описана так:
«Индивидуальная оценка - WebGL, motion и нестандартные интерфейсы.»
- BITSPARK, главная страница, раздел «Что мы делаем»
Цены у этой услуги нет, на главной стоит «Индивидуальная оценка». В разделе «О нас» на той же странице сказано, что студия создаёт «рабочий адаптивный продукт - от статического сайта до сложного интерактивного интерфейса». Что такое статический сайт по определению MDN, разбирает статья о статическом и динамическом сайте.
Слово «движение» на главной стоит в описании шага «Дизайн»: «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.» О том, как проверять движение на странице, пишет статья об анимации на сайте. Здесь анимация разбирается только там, где она связана с графикой WebGL.
Из чего сделана графика на таком сайте?
Коротко: MDN описывает canvas как элемент, в котором рисуют скриптом, и отдельно WebGL, который рисует в том же элементе двухмерную и трёхмерную графику с аппаратным ускорением. WebGL 2 назван крупным обновлением WebGL. WebGPU на 21.10.2026 помечен на MDN как Limited availability и «not Baseline».
Страница MDN о Canvas API открывается словами: «The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element.» Перевод наш: Canvas API даёт средство для рисования графики через JavaScript и HTML-элемент <canvas>. Дальше на странице сказано, что Canvas API сосредоточен на двухмерной графике («largely focuses on 2D graphics»), а WebGL «draws hardware-accelerated 2D and 3D graphics», то есть рисует аппаратно ускоренную двухмерную и трёхмерную графику. Аппаратное ускорение здесь означает, что страница использует графическое ускорение, которое даёт оборудование устройства (так сказано на английской странице MDN о WebGL).
Русская страница MDN о WebGL, переведённая сообществом, определяет технологию так:
«WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов.»
- WebGL - Интерфейсы веб API | MDN, страница изменена 29 апреля 2026 года
Английская страница WebGL: 2D and 3D graphics for the web - Web APIs | MDN изменена 15 июля 2025 года. Она называет WebGL «a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins». Перевод наш: JavaScript-интерфейс для высокопроизводительной интерактивной трёхмерной и двухмерной графики в любом совместимом браузере без плагинов. В таблице собраны формулировки источников по четырём названиям.
| Название | Что пишет источник | Отметка или оговорка на 21.10.2026 | Страница | |
|---|---|---|---|---|
| Canvas API | Рисование графики через JavaScript и элемент <canvas>; сосредоточен на двухмерной графике | Baseline, Widely available; страница пишет, что функция доступна в браузерах с июля 2015 года | [Canvas API - Web APIs \ | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), изменена 17 сентября 2026 года |
| WebGL | Интерактивная трёхмерная и двухмерная графика в совместимом браузере без плагинов; использует аппаратное ускорение устройства | Поддержка есть во всех современных браузерах, но на устройстве должно быть оборудование, которое её поддерживает | [WebGL: 2D and 3D graphics for the web - Web APIs \ | MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) |
| Вторая версия, WebGL 2 | Крупное обновление WebGL: по MDN, добавляет значительную часть возможностей OpenGL ES 3.0. Спецификация Khronos описывает дополнительный контекст отрисовки для canvas | Страница по адресу latest названа Editor's Draft от 30 июня 2026 года, цитировать её предложено только как незаконченную работу | WebGL 2.0 Specification | |
| WebGPU | Интерфейс для вычислений и сложных изображений силами графического процессора устройства; MDN называет его преемником WebGL | Limited availability, не Baseline: «does not work in some of the most widely-used browsers»; доступен только в защищённом контексте (HTTPS) | [WebGPU API - Web APIs \ | MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API), изменена 2 сентября 2026 года |
Перевод оговорки по WebGPU: не работает в некоторых из самых распространённых браузеров. Спецификация WebGL 2.0 на странице latest помечена как черновик редактора (editor's draft), поэтому статья берёт из неё только то, что она описывает, и её статус. Какой из четырёх вариантов выбрать, источники не говорят. На главной странице BITSPARK о выборе технологий сказано так: «Технологии выбираем под задачу.»
Что будет, если браузер или устройство не поддерживают WebGL?
Коротко: по MDN метод getContext возвращает null, если тип контекста не поддерживается. Для WebGL браузеру мало поддержки самой технологии, нужно ещё подходящее оборудование. При создании контекста можно включить параметр failIfMajorPerformanceCaveat, и тогда создание контекста завершится неудачей, если реализация сочтёт производительность резко сниженной. Что покажет страница в каждом из этих случаев, задаёт задание.
Чтобы нарисовать что-то в canvas, скрипт на странице запрашивает у элемента контекст отрисовки, то есть объект, через который идёт рисование. Для этого служит метод getContext. Страница HTMLCanvasElement: getContext() method - Web APIs | MDN (изменена 2 июля 2025 года) пишет:
«The HTMLCanvasElement.getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.» Перевод наш: метод возвращает контекст отрисовки на canvas, либо null, если идентификатор контекста не поддерживается или для canvas уже выбран другой режим контекста.
- HTMLCanvasElement: getContext() method - Web APIs | MDN
Контекст «webgl» та же страница описывает как «only available on browsers that implement WebGL version 1», то есть доступный только в браузерах, которые реализуют первую версию WebGL. Такая же оговорка стоит у «webgl2» (про вторую версию) и у «webgpu» (про WebGPU).
Вторая причина отказа названа на странице MDN о WebGL. Там сказано: «Support for WebGL is present in all modern browsers (see the compatibility tables below); however, the user's device must also have hardware that supports these features.» Перевод наш: поддержка WebGL есть во всех современных браузерах (см. таблицы совместимости ниже), но у устройства пользователя должно быть и оборудование, которое поддерживает эти возможности.
Русская страница MDN говорит то же: «(...) помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.»
Третий случай описан в параметре failIfMajorPerformanceCaveat. На странице getContext о нём сказано: «A boolean value that indicates if a context will be created if the system performance is low or if no hardware GPU is available.» Перевод наш: логическое значение, которое показывает, будет ли создан контекст, если производительность системы низкая или аппаратного GPU нет.
Подробнее его описывает WebGL Specification (Editor's Draft от 30 июня 2026 года) в разделе о параметрах контекста:
«If the value is true, context creation will fail if the implementation determines that the performance of the created WebGL context would be dramatically lower than that of a native application making equivalent OpenGL calls.» Перевод наш: если значение true, создание контекста завершится неудачей, когда реализация решит, что производительность созданного контекста WebGL будет резко ниже, чем у родного приложения, делающего равноценные вызовы OpenGL.
- WebGL Specification, раздел WebGLContextAttributes, параметр failIfMajorPerformanceCaveat
Среди причин спецификация называет переход браузера на программную отрисовку, если драйвер графики известен как нестабильный. Другая причина: перед сборкой страницы кадр приходится копировать из памяти графического процессора в основную память. Дальше спецификация называет два пути, когда параметр включён и создание контекста не удалось:
«Applications that require high performance may set this parameter to true, and if context creation fails then the application may prefer to use a fallback rendering path such as a 2D canvas context. Alternatively the application can retry WebGL context creation with this parameter set to false, with the knowledge that a reduced-fidelity rendering mode should be used to improve performance.» Перевод наш: приложения, которым нужна высокая производительность, могут задать этот параметр true, и если создание контекста не удалось, приложение может перейти на запасной путь отрисовки, например на двухмерный контекст canvas. Либо приложение может повторить создание контекста WebGL с параметром false, зная, что для сохранения производительности нужно использовать режим с пониженным качеством отрисовки.
- WebGL Specification, раздел WebGLContextAttributes
Для заказчика отсюда следует вопрос к подрядчику: как поведёт себя страница, когда у посетителя контекст не создался. Спецификация называет два пути (запасная отрисовка на 2D canvas и режим с пониженным качеством), и выбор между ними или иной вариант записывают в задании. Источники такого вопроса прямо не формулируют.
Почему WebGL-сайт работает не на каждом устройстве?
Коротко: страница MDN «WebGL best practices» предупреждает разработчиков, что возможности и пределы системы разработчика отличаются от систем посетителей. Страница советует по возможности делать расширения WebGL необязательными, а один из режимов точности вычислений в WebGL 1 необязателен, и без запасного пути сайт может не заработать на старом мобильном оборудовании. Для элемента canvas на устройствах iOS MDN называет предел размера 4096 на 4096 пикселей.
Страница WebGL best practices - Web APIs | MDN (изменена 7 октября 2026 года) обращена к разработчикам, и заказчику читать её целиком не нужно. Три места из неё касаются вопроса, который заказчик может задать подрядчику.
О пределах системы страница советует разработчикам не считать, что сцена, которая работает на их компьютере, сработает у посетителей: пределы систем разные, например по числу текстур, с которыми одновременно работает одна графическая программа (шейдер). Для заказчика отсюда вопрос: на каком устройстве сцену проверяли.
О расширениях, то есть о дополнениях к WebGL, там сказано: «The availability of most WebGL extensions depends on the client system. When using WebGL extensions, if possible, try to make them optional by gracefully adapting to the case there they are not supported.» Перевод наш: доступность большинства расширений WebGL зависит от системы клиента; если возможно, делайте расширения необязательными, аккуратно подстраиваясь под случай, когда их нет.
Ещё один пример касается точности вычислений в шейдерах, то есть в программах, которые обрабатывает графический процессор (так MDN называет шейдеры на странице WebGPU). В WebGL 1 поддержка высокой точности («highp float») во фрагментных шейдерах необязательна. По MDN, безусловное использование highp не даст содержимому работать на некотором старом мобильном оборудовании. Для заказчика это ещё одна причина проверять сцену на старом телефоне.