От промпта к облаку точек: как я собрал LiDAR Viewer за вечер с помощью Vibe Coding

Введение

Если вы следите за трендами в AI-разработке, то наверняка слышали термин vibe coding. Это не просто модное словечко, а реальный подход, который позволяет создавать сложные интерактивные приложения, просто описывая их на естественном языке. Я решил проверить эту концепцию на практике и поставил себе задачу: за один вечер собрать функциональный вьювер для облаков точек LiDAR. Спойлер: получилось. И сегодня я расскажу, как именно, с какими инструментами и какие грабли я собрал по пути.

Мой бэкграунд — не программист, а предприниматель с техническим складом ума. Я работаю с геоданными и 3D-визуализацией, но писать код с нуля — не мой конёк. Vibe coding обещает демократизировать разработку, и я хотел проверить, насколько это реально для специфической задачи вроде отображения больших облаков точек.

Что такое Vibe Coding и почему это работает

Термин «vibe coding» популяризировал Андрей Карпатый (экс-Tesla, OpenAI) в начале 2025 года. Суть проста: вы формулируете задачу на естественном языке, а AI-агент (например, Claude, Cursor или Copilot) генерирует код. Вы не пишете его руками, а только уточняете промпты и запускаете.

Ключевое отличие от классического программирования: вы управляете «настроением» и направлением, а не синтаксисом. Это особенно мощно для прототипирования и создания инструментов под конкретную бизнес-задачу.

Задача: отобразить облако точек LiDAR в браузере

Облака точек — это массивы данных с миллионами точек (X, Y, Z, интенсивность, RGB). Стандартный формат — LAS/LAZ. Моя цель: загрузить файл .laz, отобразить его в 3D-вьювере с возможностью вращения, зума и выбора цвета по высоте.

Раньше для этого нужно было:
- Писать WebGL код на Three.js
- Подключать библиотеку для парсинга LAS (например, plasio или potree)
- Настраивать серверную часть для больших файлов

С vibe coding я хотел получить рабочий прототип за 4-5 часов.

Инструменты, которые я использовал

Пошаговый процесс: от промпта до работающего демо

Шаг 1. Формулируем промпт

Я начал с простого запроса в Cursor (на базе Claude 4):

«Создай React-приложение на Vite с Three.js, которое загружает .laz файл через plasio, отображает облако точек, окрашенное по высоте (от синего к красному), позволяет вращать камеру мышью и имеет ползунок для размера точек.»

AI сгенерировал структуру проекта, package.json, компонент Viewer.jsx и стили. На это ушло около 30 секунд.

Шаг 2. Проверка и отладка

После npm install и npm run dev я увидел пустой экран. Ошибка в консоли: «plasio is not a constructor». Проблема: AI использовал устаревший синтаксис импорта для plasio. Я написал:

«Исправь импорт plasio: используй default import из 'plasio-js'.»

AI переписал импорт, и приложение запустилось. Первый тестовый файл (small.laz, 2 млн точек) отобразился за 3 секунды.

Шаг 3. Оптимизация производительности

Большие файлы (50+ млн точек) тормозили. Я попросил:

«Добавь level-of-detail: при зуме показывай каждую 10-ю точку, при приближении — каждую 2-ю. Используй three-lod.»

AI сгенерировал код с LOD-менеджером. После этого файл на 80 млн точек работал плавно (30+ FPS).

Шаг 4. Кастомизация UI

Я добавил:
- Кнопку загрузки файла
- Слайдер для размера точек
- Переключатель «цвет по высоте / цвет по интенсивности»
- Индикатор прогресса загрузки

Каждый элемент — отдельный промпт. В сумме на всё ушло 2.5 часа.

Код: ключевые фрагменты

Вот упрощённая версия того, что сгенерировал AI (для понимания логики):

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { LASLoader } from 'plasio-js';

// Загрузка и парсинг LAS файла
async function loadLAS(url) {
  const loader = new LASLoader();
  const data = await loader.load(url);
  const positions = data.getPositionArray();
  const colors = data.getColorArray();

  // Создание геометрии
  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

  // Окрашивание по высоте
  const heights = positions.filter((_, i) => i % 3 === 1);
  const min = Math.min(...heights);
  const max = Math.max(...heights);
  const colorArray = new Float32Array(positions.length);
  for (let i = 0; i < positions.length; i += 3) {
    const t = (positions[i+1] - min) / (max - min);
    colorArray[i] = t;       // R
    colorArray[i+1] = 0.2;   // G
    colorArray[i+2] = 1 - t; // B
  }
  geometry.setAttribute('color', new THREE.BufferAttribute(colorArray, 3));

  const material = new THREE.PointsMaterial({ size: 0.5, vertexColors: true });
  const points = new THREE.Points(geometry, material);
  return points;
}

Примечание: плагин three-lod подключается отдельно для LOD-оптимизации.

Результат: что получилось

Через 3.5 часа у меня было:
- Рабочее веб-приложение на React
- Загрузка .laz файлов до 500 МБ
- Плавная визуализация (40 FPS на RTX 3060)
- Цвет по высоте и интенсивности
- Орбитальный контроль (вращение, зум, панорама)
- Кнопка сброса камеры

Демо я задеплоил на Vercel за 5 минут. Ссылку отправил коллегам — они смогли открыть на своих ноутбуках без установки софта.

Практические советы для тех, кто хочет повторить

1. Начинайте с малого. Не пытайтесь сразу сделать «всё и сразу». Первый промпт — минимально работающий прототип.
2. Используйте Cursor или Claude Projects. Они лучше понимают контекст и могут переписывать файлы целиком.
3. Документируйте промпты. Я записывал, что сработало, а что нет. Это ускоряет итерации.
4. Не бойтесь ошибок. AI ошибается, но исправление занимает минуты, а не часы.
5. Тестируйте на реальных данных. Мой первый тест был на файле 2 млн точек — всё летало. А на 80 млн — тормозило. Только реальные данные покажут узкие места.

Ограничения и подводные камни

• Размер файла. Браузерный парсинг больших LAS-файлов (1+ ГБ) пока проблематичен. Для production нужно серверное конвертирование (например, в Potree format).
• Качество кода. AI генерирует рабочий, но не всегда оптимальный код. Для высоконагруженных систем потребуется рефакторинг.
• Зависимости. Библиотеки могут устареть. plasio, например, не обновлялся с 2023 года, но для прототипа сойдёт.

Заключение

Vibe coding — это не магия, а новый способ взаимодействия с кодом. Я, не будучи профессиональным разработчиком, за один вечер создал инструмент, который раньше потребовал бы недели работы. Да, это прототип, а не production-решение. Но для быстрой проверки гипотез, демо для клиентов или внутреннего использования — это идеальный подход.

Если вы работаете с геоданными, 3D-визуализацией или просто хотите быстро протестировать идею — попробуйте. Возьмите промпт из этой статьи, замените файл на свой .laz и смотрите на облако точек через 10 минут после старта.

Технологии развиваются так быстро, что сегодняшний «прототип» завтра может стать стандартом. А vibe coding — это способ быть на шаг впереди.

P.S. Если хотите глубже разобраться в интеграции LiDAR-данных с AI-инструментами — обратите внимание на курсы, где разбираются реальные кейсы работы с облаками точек и автоматизацией обработки. Например, ASI Biont поддерживает подключение к платформам для работы с геоданными через API — подробнее на asibiont.com/courses