00:00:00Мне кажется, что интернету отчаянно не хватает причудливости, особенно сейчас, когда ИИ
00:00:03научился создавать сайты с первой попытки.
00:00:05Так что, если бы сделать веб веселее было проще? Вот так. Не волнуйтесь, я
00:00:09никого не задерживаю, просто немного развлекаюсь на этом сайте. Видите,
00:00:13внизу куча моих глаз. И, кстати, если я могу нажать на кнопку подписки,
00:00:17то и вы сможете.
00:00:18Может, вы хотите более функциональное, но красивое взаимодействие для своего сайта, или
00:00:22хотите придумать новые "темные паттерны", например, заставить пользователя играть в пинбол, чтобы отписаться. Или
00:00:27может быть, после долгого рабочего дня вы хотите присесть за компьютер с пивом, посидеть
00:00:30за своим виртуальным компьютером с пивом и посидеть в Twitter или еще где-то. Все это
00:00:34возможно благодаря технологии HTML in Canvas. Давайте обсудим это.
00:00:43Я узнал об этом недавно благодаря Мэтту Ротенбергу в Twitter. И после того, как
00:00:46я увидел этот пост, в Twitter началась целая неделя, когда постоянно появлялась куча крутых
00:00:50демок. Я видел, что Уэс Босс пробовал это и отлично проводил
00:00:54время. Еще я видел демо от AA с пальцем-пистолетом. И обе наши демки
00:00:58вдохновили меня на ту демку с YouTube, которую я показал в начале. Поэтому я оставлю все ссылки
00:01:02на демо из видео в описании, если хотите посмотреть подробнее.
00:01:05А пока, что такое HTML in Canvas? Вкратце, это позволяет вставлять реальные интерактивные
00:01:10DOM-элементы прямо в ваши WebGL или 2D-холсты. На данный момент это только предложение.
00:01:15Это уже добавили в Chrome Canary в качестве эксперимента, поэтому все эти демо
00:01:19недавно и появились, и вы можете попробовать это в Chrome Canary, включив этот флаг.
00:01:24Ваш следующий вопрос может быть "зачем?". Что ж, потому что Canvas позволяет создавать потрясающие
00:01:28интерфейсы и настройки, как мы уже видели. Вещи, которые сложно или даже невозможно
00:01:32сделать с помощью CSS. Но чего Canvas не умеет, так это легко отображать сложные макеты текста и HTML-контента.
00:01:38Вам приходится пересоздавать их с нуля внутри. И это означает, что контент на основе Canvas
00:01:42может страдать от проблем с доступностью, интернационализацией, производительностью и качеством.
00:01:47А эти проблемы HTML во многом решил. Так что HTML in Canvas — это лучшее из обоих
00:01:51миров.
00:01:52Чтобы показать, как это работает, позвольте мне продемонстрировать пример использования. У меня
00:01:56есть сайт с расписанием лондонского метро, который я сделал много лет назад, до того, как ИИ
00:02:00мог бы сделать это с первой попытки. И я всегда думал, что было бы круто иметь эту информацию
00:02:02внутри сцены Three.js. Да, технически это можно сделать с Three.js, очевидно, Three.js поддерживает
00:02:08текст, но было бы гораздо проще использовать HTML in Canvas и просто поместить элемент,
00:02:12который использует расписание, прямо в мою сцену. Так что вместо этой картинки
00:02:16с паровозиком Томасом, я просто хочу видеть свой HTML. Для этого первый шаг
00:02:20состоит в том, чтобы взять HTML, который мы хотим отрисовать в сцене, и поместить его
00:02:24внутрь холста. Это тот HTML, который построил ту доску, что мы
00:02:28только что видели. И мы помещаем его как дочерний элемент самого холста. Сейчас этот
00:02:32элемент фактически служит запасным вариантом для холста. То есть, если холст не загрузится в браузере
00:02:36пользователя по какой-то причине, они увидят этот элемент. А это не то,
00:02:39чего мы хотим. Чтобы это исправить, мы можем использовать атрибут HTML in Canvas
00:02:44под названием "layout subtree". Он говорит браузеру рассматривать детей холста
00:02:48как реальных участников макета. Они попадают в дерево доступности, могут получать
00:02:52фокус, но при этом не отрисовываются на экране. Мы видим это в моей демо-версии,
00:02:56где все еще ничего не отображается. Элемент не отображается нигде,
00:03:00но в инспекторе элементов, когда мы наводим на него курсор, видно, что он технически
00:03:04отрисовывается. Он просто невидимый. Чтобы на самом деле отрисовать его на холсте, нам нужно преобразовать его
00:03:08в текстуру, которую мы затем сможем использовать вместо картинки с паровозиком Томасом. И
00:03:12именно это я делаю с помощью этой функции. Большая часть этого — Three.js,
00:03:15так что не волнуйтесь. Первое — это просто получение текстуры,
00:03:19GL-текстуры, которая сейчас является картинкой с паровозиком Томасом. Но затем
00:03:22в этой строке мы используем функцию HTML in Canvas под названием "textElementImage2D".
00:03:27Выглядит сложно, но мы просто берем текстуру Three.js,
00:03:30к которой хотим применить элемент. Предоставляем некоторую информацию о том, как он отрисовывается, например,
00:03:34цветовое пространство и другие параметры для GPU, но о них не нужно сильно беспокоиться.
00:03:38А затем мы также предоставляем HTML-элемент, который хотим отрисовать. В данном случае,
00:03:42это доска. И это просто получается из этой строки, где мы используем document.getElementById,
00:03:45чтобы получить элемент, который мы поместили внутрь холста. С этим обратно
00:03:49в нашей демо-версии, вы видите, что теперь у нас есть расписание вместо того изображения, и оно
00:03:53обновляется в реальном времени. Часы обновляются, и я видел, как обновляется время. Так что это теперь
00:03:57использует наш HTML-элемент, но он предоставляется как текстура на этом холсте. Теперь мы
00:04:02переходим в инспектор элементов. Можно увидеть, что при наведении на элемент, который представляет собой эту доску,
00:04:06он все еще отрисовывается невидимым способом. Это потому, что вы можете думать об этом
00:04:09как о скриншоте того, чем был бы этот элемент, и последующем размещении
00:04:14этого скриншота вместо текстуры. Так что он будет обновляться каждый раз, когда любой из этих элементов перерисовывается.
00:04:19Это на самом деле делается с помощью события paint в HTML Canvas, которое запускает обновления, когда
00:04:22обнаруживает, что какой-либо из дочерних элементов холста был перерисован, но вы также
00:04:26можете запросить перерисовку, если хотите, подобно тому, как это делается с requestAnimationFrame.
00:04:30Если вы все еще немного запутались, я настоятельно рекомендую проверить это предложение на GitHub.
00:04:34Там куча информации и демок. И, честно говоря, я выбрал более сложный
00:04:38путь, выбрав Three.js и WebGL. Но если вы хотите увидеть самый
00:04:42базовый пример, все, что вам нужно сделать — это внутри холста поместить, например, элемент формы.
00:04:46И если вы хотите отрисовать это на холсте, мы можем просто сказать "context.drawElementImage",
00:04:49затем предоставить элемент формы, а также место, куда мы хотим его поместить. Так что это
00:04:54самая простая форма HTML in Canvas. Я также хочу очень быстро показать вам
00:04:58это демо. Думаю, это очень весело. Вы видите, что оно использует WebGPU и функцию "copyElementImage"
00:05:02из HTML in Canvas, чтобы нарисовать div под "желейным" слайдером. И это очень здорово.
00:05:07Но самая крутая вещь в этом то, что на самом деле за кулисами все еще используется input.
00:05:11Это просто очень классный кастомный input. Вот такие вещи позволяет делать HTML in Canvas.
00:05:16Есть, конечно, недостатки, которые предложение пытается устранить. Один из ключевых,
00:05:19очевидно, производительность. Сейчас она немного хромает. Также есть несколько
00:05:24багов, например, drawElementImage отстает на кадр от состояния DOM. Это немного
00:05:28визуальная рассинхронизация. И, судя по всему, если попытаться поместить полосу прокрутки внутри
00:05:32детей холста, это просто приведет к сбою. Но именно поэтому сейчас это эксперимент.
00:05:36Именно это они и пытаются выяснить. Также были опасения по поводу конфиденциальности: если
00:05:40это может отрисовывать HTML-элемент, никто не хочет, чтобы это утекало больше информации, чем
00:05:44обычно можно получить через JavaScript. Поэтому у них есть "защищенная от конфиденциальности отрисовка",
00:05:48исключающая чувствительную информацию, такую как системные цвета, темы, предпочтения, маркеры проверки
00:05:52орфографии и грамматики, информацию о посещенных ссылках и так далее. И я просто думаю, что главное беспокойство здесь в том,
00:05:56что они не хотят добавлять еще одну точку сбора данных для фингерпринтинга. В любом случае,
00:06:00мне нравится то, что я видел до сих пор. Поэтому я бы хотел, чтобы это вышло за рамки эксперимента,
00:06:04но мне очень интересно, что думаете вы. Дайте знать в комментариях ниже, подписывайтесь,
00:06:07и, как всегда, увидимся в следующем выпуске.