CSS на ESP32-S3: не браузер, а компилятор веб-модели в C++

3D-куб с перспективой, прозрачными гранями и отсечением обратных поверхностей GEA отрисовала на ESP32-S3 за 24 мс на кадр. Интерфейс описывается TSX и CSS, затем превращается в нативную прошивку C++; разбор CSS в цикле рисования отсутствует. Предел сцены задают внешний PSRAM, DMA и обмен с AMOLED-панелью.

GEA показала стек для микроконтроллерного интерфейса, в котором разметка TSX и правила CSS служат исходным описанием UI, а результатом сборки становится нативный C++ для ESP32-S3. Демонстрация работает на плате Waveshare ESP32-S3-Touch-AMOLED-2.06: двухъядерный Xtensa LX7 до 240 МГц, 512 КБ внутренней SRAM, 8 МБ PSRAM и AMOLED 410×502 с QSPI-подключением.

Тестовая сцена содержит CSS 3D-куб с перспективной проекцией, прозрачностью граней, градиентным фоном и backface culling. GEA оценивает её в 24 мс на кадр, или около 42 fps. В опубликованном бюджете примерно 13 мс занимает raster/replay, 6 мс — отправка изменившихся областей на дисплей, 2.7 мс — перепроекция, ещё около 2 мс приходится на остальные операции. Это собственное измерение разработчика для конкретной сцены, а не независимый бенчмарк платформы.

Архитектурный смысл проекта лежит в переносе привычной модели описания интерфейса в AOT-прошивку. В устройстве отсутствуют CSS-файл и CSS-парсер, работающий на каждом кадре. Правила при сборке преобразуются в регистрацию свойств и код, а значения разбираются при загрузке в типизированное хранилище. Расчёт стилей далее опирается на фиксированную структуру ComputedStyle размером около 520 байт. UI-дерево ограничено 512 узлами, сетка поддерживает до восьми треков по каждой оси. Такие ограничения заранее фиксируют объём памяти и упрощают время исполнения, но исключают совместимость с полным браузерным CSS.

Полный RGB565-кадр для панели 410×502 занимает 411 640 байт. Он почти сопоставим со всей внутренней SRAM ESP32-S3, поэтому framebuffer размещён во внешней PSRAM. Именно этот участок определяет главный компромисс: память одновременно обслуживает CPU, кэш и дисплейный DMA. Для сокращения трафика стек использует retained display list, объединяет до 32 dirty rectangles и выделяет быстрый путь для кадров, где меняется только transform. Полная перерисовка экрана быстро упирается в транспорт и память, тогда как частичное обновление оставляет процессорный запас для анимации и композитинга.

Заявление о 60 fps относится к другой демонстрации с bouncing balls. Для 3D-куба GEA отдельно приводит 42 fps; объединять эти цифры в один результат некорректно. Также публичный репозиторий прежнего проекта gea-embedded содержит XS JavaScript runtime, поэтому он подтверждает работу с ESP32 и ESP-IDF, но не служит доказательством устройства нового AOT-стека.

Демонстрация показывает применимость веб-подобной декларативной модели к приборным панелям, компактным терминалам и носимой электронике. Цена такого подхода выражается в заранее ограниченной модели CSS, фиксированных лимитах дерева и тщательном контроле PSRAM/DMA-трафика. На ESP32-S3 производительность 3D-интерфейса определяется уже не только геометрией и смешиванием пикселей, но и тем, сколько байтов покидает framebuffer в каждом кадре.