LUMAFORGE: движок для цветокоррекции в браузере с использованием стеганографии

TL;DR: LUMAFORGE — это профессиональный движок для цветокоррекции, работающий полностью в браузере. Он использует стеганографию для встраивания данных редактирования в PNG и позволяет экспортировать результаты в стандартные .CUBE файлы для использования в профессиональных видеоредакторах.

Введение

Цветокоррекция — это ключевой этап в создании визуального контента, будь то фото или видео. Однако большинство профессиональных инструментов для цветокоррекции требуют мощного железа и подписки на дорогостоящее ПО. Как студент CS и дизайнер, я решил создать решение, которое бы объединило компьютерные науки и цифровое искусство. Так появился LUMAFORGE — движок для цветокоррекции, работающий полностью в браузере, без необходимости серверной обработки.

Основная часть

1. Изображение как пресет: стеганографические данные

Обычные фоторедакторы сохраняют данные редактирования в отдельном файле или базе данных. В LUMAFORGE я решил пойти другим путем: вся информация о редактировании (слайдеры, кривые RGB, сплит-тона) встраивается прямо в изображение с использованием стеганографии. Это достигается за счет добавления пользовательских tEXt чанков в PNG файл.

Пример кода для добавления данных в PNG:

function encodePayload(imageData, payload) {
  const data = imageData.data;
  for (let i = 0; i < payload.length; i++) {
    data[i * 4] = payload.charCodeAt(i); // Сохраняем данные в красном канале
  }
  return imageData;
}

Когда изображение, обработанное в LUMAFORGE, снова загружается в движок, он расшифровывает встроенные данные и восстанавливает историю редактирования.

2. The Uplink: глобальная база данных пресетов

Чтобы создать сообщество вокруг LUMAFORGE, я разработал функцию “The Uplink” — глобальную базу данных, где пользователи могут публиковать свои пресеты. Любой пользователь может “форкнуть” пресет и применить его к своему изображению.

Пример работы с базой данных:

async function fetchPreset(presetId) {
  const { data, error } = await supabase
    .from('presets')
    .select('*')
    .eq('id', presetId)
    .single();
  if (error) throw error;
  return data;
}

3. Экспорт в .CUBE файлы

LUMAFORGE позволяет экспортировать результаты цветокоррекции в стандартные .CUBE файлы, которые можно использовать в профессиональных программах, таких как Premiere Pro или DaVinci Resolve.

Пример генерации LUT:

function generateLUT(imageData) {
  const lut = [];
  for (let i = 0; i < imageData.length; i += 4) {
    lut.push([imageData[i], imageData[i + 1], imageData[i + 2]]);
  }
  return lut;
}

Практическое применение

LUMAFORGE может быть использован как для профессиональной цветокоррекции, так и для обучения. Его открытый исходный код позволяет разработчикам изучать внутреннюю работу движка и вносить свои улучшения. Кроме того, интеграция с Supabase обеспечивает масштабируемость и надежность.

Заключение

LUMAFORGE — это пример того, как современные веб-технологии могут быть использованы для создания профессиональных инструментов. Использование Canvas API и стеганографии открывает новые возможности для обработки изображений прямо в браузере. Я приглашаю всех попробовать движок, изучить код и внести свой вклад в его развитие.

Источник: https://www.reddit.com/r/reactjs/comments/1rpna9d/i_built_an_opensource_browserbased_color_grading/