Мы постоянно пересобирали браузер на WebGL, хотя в этом нет необходимости

Внедрите настоящий DOM в WebGL — кнопки, формы, живой текст — и добавьте шейдерные эффекты прямо поверх него 🚀 Два разработчика из Basement Studio показывают тупиковые ситуации, с которыми они столкнулись при синхронизации DOM и WebGL, и экспериментальное предложение, которое наконец-то решает проблему компромисса между красотой и доступностью ⚙️ Что внутри: 🔍 Настоящий DOM внутри холста: шейдерные эффекты на реальных кнопках, формах и тексте 🔍 Приём с прокруткой, который объединяет DOM и WebGL — без смещения, без обрезки 🔍 Почему текст в WebGL сегодня стоит около 150 строк, и как HTML в Canvas решает эту проблему (экспериментально, за флагом) 🎙️ Томас Феррерас — разработчик в Basement Studio (известной своими высококачественными веб-сайтами на базе WebGL), специализирующийся на React, Three.js и WebXR. Он расширяет границы веб-разработки с помощью шейдеров и графики с открытым исходным кодом. 🎙️ Сантьяго Коломбатто — фронтенд-разработчик в Basement Studio. Он обеспечивает сосуществование традиционного пользовательского интерфейса и графики GPU, заставляя DOM и WebGL работать как единое целое. Свяжитесь с Томасом: 🔗   / tfdev__   Свяжитесь с Сантьяго: 🔗   / sanco_dev   📝 Доклад: HTML в Canvas: Соединяя пользовательский интерфейс и GPU в веб-разработке | Сантьяго Коломбатто и Томас Феррерас Этот доклад был записан на JSNation Amsterdam 2026: 🔗 https://jsnation.com/?utm_source=yout... 📌 Перейдите по ссылке, чтобы посмотреть полную версию всех докладов конференции, ответы на вопросы докладчиков и записи практических мастер-классов: 🔗 https://gitnation.com/events/jsnation... 🕐 Временные метки: 00:00 - Разница, о которой никто не предупреждает 00:54 - Ваша скидка 20% 🫣 01:28 - WebGL и шейдеры простым языком 03:39 - Выглядит великолепно - вот скрытая цена 04:03 - Прокрутка: Где DOM и WebGL расходятся 04:57 - Три исправления, три новые проблемы 06:44 - Неприятная правда: вы перестраиваете браузер 07:29 - Внутри холста программы чтения с экрана слепнут 08:16 - 150 строк кода только для рендеринга текста 09:45 - Ловушка обходного пути 10:36 - Ввод HTML в Canvas: настоящие кнопки внутри WebGL 11:00 - Всё предложение: 1 атрибут, 2 метода, 1 событие 12:28 - Шейдеры на реальном DOM - и проблема прокрутки исчезает 14:18 - Настоящий HTML в 3D: демонстрации WebXR 15:38 - Красиво или доступно? Больше нет выбора 📌 Мы спрятали секретный код на скидку 20% на ваше следующее мероприятие. Присоединяйтесь к нашим предстоящим конференциям! 💫 JSNation US 2026 16 и 19 ноября 2026 г. (Нью-Йорк и онлайн) 🔗 https://jsnation.us/?utm_source=youtu... 💫 React Summit US 2026 17 и 20 ноября 2026 г. (Нью-Йорк и онлайн) 🔗 https://reactsummit.us/?utm_source=yo... 💫 AI Coding Summit 16 и 17 ноября 2026 г. (Нью-Йорк и онлайн) https://aicodingsummit.com/nyc/?utm_s... и многое другое! 🚀 Ознакомьтесь со всеми предстоящими событиями от GitNation: 🔗 https://gitnation.com/events?utm_sour... Не забудьте использовать промокод INSIDER20 для получения скидки 20% на билеты. #JSNation #GitNation #webgl #threejs #creativedeveloper #creativecoding #frontenddeveloper #javascript #shaders #glsl #webdevelopment #webdev #htmlincanvas #canvas #gpurendering #webgraphics #reactjs #nextjs #webxr #frontend #uidevelopment #interactiveweb #codenewbie #devcommunity #programming #techtalk