Мы постоянно пересобирали браузер на 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