codeisart.

CSS и интерфейсы

Как создать текстуру дерева

Соберите рисунок из колец, изгибов и тонких волокон. Настройте палитру и сохраните результат в PNG.

В этой статье

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

Браузерный генератор строит рисунок по формулам, не требует установки программ и сохраняет PNG. Управляйте частотой колец, изгибами, палитрой и направлением волокон.

Получите первый рисунок

  1. Оставьте seed master-27, 18 колец, изгибы 1,3 и медовую палитру. Выберите продольные волокна и горизонтальное направление.
  2. Нажмите «Построить текстуру». На изображении появятся длинные тёмные полосы с плавными отклонениями и более тонкие волокна между ними.
  3. Увеличьте число колец до 28: полосы станут чаще. Затем уменьшите его до 10 и сравните более широкий рисунок.
  4. Поднимите изгибы до 2,5, чтобы нарушить регулярность. Если линии выглядят слишком беспокойными, верните значение ближе к 1.
  5. Выберите размер и нажмите «Скачать PNG». Файл можно открыть в графическом редакторе, наложить на форму или использовать как фон.

Создать текстуру дерева

Подготовка текстуры…

Для интерактивного построения нужен браузер с Canvas 2D. Ниже доступен готовый пример.
Медовая текстура: горизонтальные волнистые тёмные полосы и тонкие светло-коричневые волокна
Продольный рисунок при seed master-27, 18 кольцах и изгибах 1,3.

Как работает генератор

Каждому пикселю сопоставляется число — значение скалярного поля. Для поперечного рисунка это расстояние от центра с небольшими плавными возмущениями. Для продольного рисунка центр вынесен за границу изображения, а одна координата сжата: поэтому линии вытягиваются вдоль доски. Это художественная модель, а не реконструкция анатомии конкретной породы.

Периодическая функция превращает поле в полосы. Узкая тёмная часть каждого периода отделяет соседние светлые участки. Плавный шум деформирует границы, чтобы кольца не выглядели идеальными окружностями или параллельными линейками.

r = расстояние с учётом растяжения координат
phase = r × число_колец + плавное_возмущение
ring = (0.5 + 0.5 × sin(2π × phase))¹²

Следующий слой добавляет вытянутые вдоль рисунка мелкие неоднородности. Частота шума поперёк волокон намного выше, чем вдоль них: так появляются тонкие штрихи, а не равномерная рябь. Небольшой пиксельный шум смягчает слишком гладкий компьютерный вид.

В конце яркость смешивает два цвета выбранной палитры. «Медовая», «тёмная» и «светлая» — варианты тона, а не названия или гарантированное соответствие породам дерева.

Четыре этапа: плавное серое поле превращается в тёмные кольца; к ним добавляются тонкие волокна, затем коричневая палитра
От поля расстояний к повторяющимся полосам, мелким волокнам и цвету.

Что меняют параметры

  • Seed задаёт рисунок шума. Одинаковые seed, параметры и размер воспроизводят один результат; другая строка меняет мелкие изгибы и волокна.
  • Кольца управляют частотой полос. Большое значение даёт частый рисунок; на маленьком изображении слишком частые полосы могут выглядеть жёстко.
  • Изгибы усиливают плавное смещение полос. Ноль убирает основное возмущение, но сохраняет небольшой волоконный слой.
  • Направление поворачивает продольный рисунок между горизонтальным и вертикальным положением.
  • Срез выбирает вытянутые волокна или поперечные кольца вокруг центра.
  • Размер определяет разрешение PNG. Для проб достаточно 256 пикселей; 512–768 подходят для более подробной обработки. Расчёт большого изображения занимает больше времени.

Как довести текстуру в редакторе

Сначала подгоните масштаб полос к изображаемому предмету: на узкой рамке частый рисунок уместнее, чем огромные кольца. Затем скорректируйте яркость и насыщенность. Для объёма используйте отдельный слой освещения — не запекайте сильный блик в повторяемую текстуру. Сохраните исходный PNG, чтобы возвращаться к нейтральному рисунку.

Генератор не обещает бесшовности: противоположные края могут не совпадать. Перед повторением фона проверьте стык. Для тайловой текстуры потребуется отдельное согласование границ в редакторе или периодический алгоритм шума.

Вычисления выполняются в браузере. Изображение формируется из чисел; введённый seed и PNG не отправляются на сервер.