Рабочий дневник: День 13

Вчера познакомился с Three.js. Спрашивается, зачем? Мы же тут, типа, мессенджер делаем в WEB3. Оказалось, что заказчик хотел бы сохранять анимации, но не просто GIF, а анимации, которые используют всю мощь GPU на языке GLSL.

Шейдеры — это программы, которые выполняются на графическом процессоре (GPU). Они позволяют создавать сложные визуальные эффекты и анимации, которые невозможно или очень сложно реализовать с помощью CPU.

Браузеры используют WebGL (Web Graphics Library). Это JavaScript API для рендеринга 2D и 3D графики. WebGL предоставляет доступ к GPU, позволяя выполнять шейдеры на графическом процессоре.

Three.js — это библиотека для создания 3D-графики и анимаций в браузере. Она использует WebGL для рендеринга и позволяет легко интегрировать шейдеры.

За 30 минут мы с GPT накидали вполне рабочий модуль для отображения кода с Shadertoy. Он даже работал, когда я через пропсы передавал в него код шейдера. Но проблемы в понимании сцены, камеры и самого API Three.js вызывали трудности для дальнейшего рефакторинга и поддержки такого сложного компонента.

Подумав, что же лучше: читать документацию Three.js или искать готовые решения, я остановился на втором варианте. Это привело меня к NPM пакету glslCanvas для рендеринга шейдеров. Его простой API сразу запустил мои анимации без танцев и погружения в 3D-графику.

Теперь мы храним код выбранного шейдера в переменной из Pinia для дальнейшего присоединения его к сообщению, которое будет отправлено в ETH блокчейн.

📊 #статистика День 970 == 1598 час в IT