The post has been translated automatically. Original language: Russian
A single beautiful tree is easy to show in a picture. The more interesting challenge comes when users choose plants, arrange them on a plot, change their dimensions and view the garden from above, from a path or in VR. All of this needs to work in one editable scene, directly in a browser.
For Gardmi, we built an image-based plant visualization system. It lets a small team develop a broad catalog without modeling every branch by hand. But several problems separate “putting an image in 3D” from a convincing tree, and a first screenshot can easily hide them.
An apple tree from the Gardmi catalog in 3D mode.
Thousands of details without thousands of individual leaves
The plant’s appearance lives in an image with a transparent background: a branching trunk, gaps between leaves and an irregular crown outline. We place these images on intersecting planes. Together, they create an impression of volume while keeping the geometry simple.
This separates two kinds of work. The image defines each plant’s character; a shared rendering system handles its behavior in space. Adding a plant does not require rebuilding branches, leaves and an entire geometric model.
Illustration of the principle: the cyan outline marks one sprite plane. Several surfaces work together.
The underlying technique is established in computer graphics. The engineering in our implementation lies in coordinating these surfaces with the camera angle, plant dimensions and viewing mode.
What happens when a plane is seen edge-on
Simply crossing several images creates a problem: as you walk around the tree, one plane eventually faces you edge-on. A thin strip appears instead of foliage, revealing the construction.
Surface visibility depends on the viewing direction. A poorly oriented card is gradually removed from the image while the others continue to show the crown. We control individual surfaces’ contributions instead of rotating the whole tree to follow the camera.
Reducing opacity would introduce another problem: intersecting translucent surfaces are difficult to draw in the correct order. We therefore use dithering for the transition—discarding pixels in a distributed pattern. This gradually hides a surface while preserving depth writes, so the renderer can still determine what is in front of what.
Left to right: one card contributes less as the view approaches its edge. The dithering pattern is enlarged for clarity; the other tree cards continue rendering. The dotted outline on the right marks the hidden plane only in this illustration.
The overhead view needs another solution
Vertical cards show a tree’s side silhouette well, but their thickness almost disappears when viewed from above. That is especially inconvenient in a planner, where users move between an overview and a three-dimensional view.
For plants with a prepared overhead view, we therefore use a separate crown representation. Its height and dimensions are coordinated with the side image. As the camera tilts, the contributions of the top and side representations change. One universal image does not have to look equally convincing from every direction.
Left: three side sprites and a top-down crown image. Upper right: their arrangement, with three vertical planes intersecting on the trunk axis. Orange marks the horizontal crown; the side elevation below shows that it passes through the tree. Outlines are explanatory overlays.
Dimensions cannot simply be stretched
A tree has a height and a crown width. Its source image has its own proportions. Stretching it independently along two axes can turn a tall, slender plant into a short, broad one.
We preserve the image’s proportions and fit it within the specified dimensions. The trunk’s base needs special attention: even a small transparent margin at the bottom can make a tree appear to float. Aligning the silhouette with the ground and adding a contact shadow help connect it to the plot.
Repetition should not become a row of clones
A garden often contains several plants of the same species. Giving every instance the same orientation makes repetition obvious. Instances therefore receive different but stable rotations: editing the plan does not randomly change their appearance.
Identical images and materials are reused. Variation in placement does not require a separate texture copy for every tree. This matters for a catalog that needs to work inside an interactive editor, not just in a prepared scene.
One garden, several ways to explore it
This system is used in the editor’s 3D and VR modes. Plant rendering surfaces are excluded from obstacle and ground-support calculations during walkthroughs: a rectangle carrying a crown image should not become an invisible wall or a platform beneath your feet.
Close inspection and stereo vision can still reveal the flat structure—an image does not become geometry for every branch. We chose this approach to let users assemble a garden and assess planting in space, while allowing a small team to develop a varied visual catalog without a separate complex modeling cycle for every plant.
Simple elements form a coordinated system that accounts for viewpoint, scale and user interaction.
This approach trades geometric simplicity against visual depth. Its quality depends on coordinating viewpoints, depth and proportions; the flat underlying surfaces remain a limitation during close-up and stereoscopic viewing.
Одно красивое дерево легко показать на картинке. Гораздо интереснее задача, когда пользователь сам выбирает растения, расставляет их на участке, меняет размеры и смотрит на сад сверху, с дорожки или в VR. Всё это должно работать в одной редактируемой сцене прямо в браузере.
В Gardmi мы построили для этого систему визуализации растений на основе изображений. Она позволяет небольшой команде развивать большой каталог без ручного моделирования каждой ветви. Но между «поставить картинку в 3D» и получить убедительное дерево — несколько задач, которые на первом скриншоте легко не заметить.
Яблоня из каталога Gardmi в 3D-режиме.
Тысячи деталей без тысяч отдельных листьев
Внешний вид растения хранится в изображении с прозрачным фоном: разветвлённый ствол, просветы между листьями, неровный край кроны. Мы размещаем такие изображения на пересекающихся плоскостях. Вместе они создают впечатление объёма, хотя геометрия остаётся простой.
Это даёт полезное разделение работы. Характер каждого растения задаётся его изображением, а поведение в пространстве обеспечивает общая система отображения. Добавляя растение, не приходится заново собирать ветви, листья и всю модель целиком.
Иллюстрация принципа: голубая рамка показывает одну плоскость со спрайтом. Несколько таких поверхностей работают вместе.
Сам приём известен в компьютерной графике. Инженерная часть нашего решения — в том, как согласовать эти поверхности с ракурсом камеры, размерами растения и режимом просмотра.
Что происходит, когда дерево видно с ребра
Если просто пересечь несколько картинок, при обходе дерева одна из них рано или поздно повернётся к зрителю ребром. Вместо листвы появится узкая полоса, которая выдаёт конструкцию.
Видимость поверхностей зависит от направления взгляда. Неудачно ориентированная карточка постепенно исключается из изображения, пока остальные продолжают показывать крону. Мы управляем вкладом отдельных поверхностей, а не поворачиваем всё дерево вслед за камерой.
Обычное уменьшение прозрачности здесь создаёт новую проблему: пересекающиеся полупрозрачные поверхности трудно корректно нарисовать одна поверх другой. Поэтому для перехода используется дизеринг — распределённое отбрасывание пикселей. Он позволяет постепенно скрывать поверхность, сохраняя запись глубины: рендерер по-прежнему может определять, что находится перед чем.
Слева направо — вклад одной карточки при приближении к взгляду с ребра. Рисунок дизеринга увеличен для наглядности; остальные карточки дерева продолжают отображаться. Пунктир справа обозначает скрытую плоскость только на схеме.
Вид сверху требует другого решения
Вертикальные карточки хорошо показывают силуэт сбоку, но сверху их толщина почти исчезает. Для планировщика это особенно неудобно: пользователь постоянно переходит от общего плана к объёмному виду.
Поэтому для растений с подготовленным верхним ракурсом мы используем отдельное представление кроны. Оно согласовано с боковым изображением по высоте и размерам. При изменении наклона камеры меняется вклад верхнего и бокового представлений — дерево не приходится заменять одним универсальным изображением, которое должно одинаково хорошо выглядеть со всех сторон.
Слева — три боковых спрайта и изображение кроны сверху. Справа сверху — их взаимное расположение: три вертикальные плоскости пересекаются на оси ствола. Оранжевым обозначена горизонтальная крона; на боковом сечении внизу видно, что она проходит внутри дерева. Контуры показаны для объяснения конструкции.
Размеры нельзя просто «растянуть»
У дерева есть высота и ширина кроны. У исходного изображения — собственные пропорции. Если независимо растянуть картинку по двум осям, высокое стройное растение легко превратить в приземистое и широкое.
Мы сохраняем пропорции изображения и вписываем его в заданные габариты. Отдельное внимание — основанию ствола: даже небольшой прозрачный отступ у нижнего края может создать ощущение, что дерево висит над землёй. Согласование силуэта с поверхностью и контактная тень помогают связать растение с участком.
Повторение не должно превращаться в строй клонов
В саду часто встречается несколько растений одного вида. Одинаковая ориентация каждого экземпляра сразу делает повтор заметным. Поэтому экземпляры получают разные, но устойчивые развороты: после редактирования плана их внешний вид не меняется случайным образом.
При этом одинаковые изображения и материалы используются повторно. Разнообразие размещения не требует отдельной копии текстуры для каждого дерева. Это важно для каталога, который должен работать внутри интерактивного редактора, а не только в заранее подготовленной сцене.
Один сад — несколько способов его посмотреть
Эта система используется в 3D- и VR-режимах редактора. Служебные поверхности растительности исключены из расчёта препятствий и опоры при прогулке: прямоугольник с изображением кроны не должен становиться невидимой стеной или площадкой под ногами.
Близкое рассмотрение и стереозрение всё ещё могут выявить плоскую основу — изображение не превращается в геометрию каждой ветви. Мы выбирали этот подход для другой задачи: дать пользователю возможность самому собрать сад и оценить посадки в пространстве, а команде — развивать разнообразный визуальный каталог без отдельного цикла сложного 3D-моделирования для каждого растения.
Простые элементы работают как единая система, которая учитывает ракурс, масштаб и взаимодействие с пользователем.
Этот подход — компромисс между простой геометрией и убедительностью изображения. Его качество зависит от согласования ракурсов, глубины и пропорций; при близком просмотре и в стереорежиме плоская основа остаётся ограничением.
Share
