social

Веб-приложения для 3D-печати и моделирования прямо в браузере – как с ними работать? Первый урок на примере сервиса Materiallab

3D-печать — отличная штука, особенно когда знаешь особенности технологии и умеешь работать в CAD-редакторах. А что делать рядовому пользователю, который страстно желает написать на чехле для iPhone имя любимой, но из программ, связанных с 3D, помнит только DOOM? Как показывает практика, работы в онлайн-сервисе 3D-печати, подавляющее большинство пользователей владеет трехмерным моделированием достаточно слабо.

Что там говорить, нарисовать кубик в 3DS Max — это полбеды. Нужно его грамотно подготовить к 3D-печати! А это отдельная наука. Но, тем не менее, мы не желаем терять сегмент новичков. В конце концов, сервис не был бы сервисом, если бы не предлагал решения для пользователей с любым опытом. Выход очевиден — за новичка нужно сделать самую тяжелую часть работы. Тут-то нам и помогут веб-приложения.

Классификация

Я бы разделил всю палитру веб-приложений всего на 2 вида:

  • приложения, позволяющие получить на выходе stl-файл, готовый к печати;
  • приложения, выдающие промежуточный результат, требующий вмешательства профессионала.

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

Почему так? Да потому что фреймворк для работы в браузере с трехмерными объектами крайне несовершенен, ограничен ресурсами пользователя, браузера и многое попросту не умеет. Например, визуализировать «на лету» сложные булевы операции с многополигональными объектами вы не сможете (на момент написания данного материала это так). А, следовательно, не получите резного чехла для телефона в готовом виде, как не пытайтесь.

Но, тем не менее, визуализировать модель на начальном уровне и натянуть загруженную пользователем картинку на виртуальный чехол — можно. Далее примитивная модель уходит профессиональному дизайнеру, и он «допиливает» ее до конечной красоты.

Другое дело – простейшие математические объекты, к которым можно применять деформации, позиционирование и, что самое важное, вы можете сразу точно рассчитать стоимость (поскольку знаете объем и количество объектов на экране). Смотрите пример на materiallab.ru.

Мы оперируем исключительно графическими примитивами, при этом на выходе получаем готовый stl файл, не требующий доработки и печатаем его. Ниже фото готового результата, выполненного по технологии SLS из белого полиамида:

Пример

Инструментарий

Что нужно для работы с 3D в браузере? Прежде всего, вам понадобится java фреймворк three.js. Скачать его прямо с примерами можно на родной странице проекта: threejs.org. Там же находится руководство по применению оного. Стоит отметить, что для работы фреймворка браузер обязан поддерживать технологию WebGl, что не всегда имеет место быть. Так что не рассчитывайте, что 100% посетителей увидят ваш тридэшный экспириенс.

Чтобы успешно программировать для threejs, вам необходимо знать javascript. Без этого — никуда. Зато ваши трехмерные объекты полностью интерактивны — кликабельны, двигабельны, наполнябельны контентом и масштабируемы. Фреймворк поставляется с кучей примеров, что серьезно облегчит вам задачу. Кроме того, вы получаете в свое распоряжение всю мощь jQuery и Ajax для передачи данных на сервер и мгновенной регистрации пользователя и его заказа.

Внутри threejs — модульная система. Ничего лишнего. Все лишнее пользователь должен подключить сам. Например, хотите импортировать в сцену obj.-файл — будьте добры подключить соответствующий загрузчик, хотите экспорт в stl — отдельный выгрузчик. Подключение модулей ничем не отличается от подключения обычных ява-скриптов и внешне выглядит также.

В набор инструментов входят свет, камера, сцена, рендерер и контейнеры, предназначенные для размещения в них подгружаемых объектов. Источников света предлагается аж три штуки (спот, эмбиент и точка). Все управление параметрами объектов и деформаторов производится при помощи кода.

Например, создание камеры:

var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

Говорим где поставить камеру:

camera.position.y = 400;

Создаем сцену:

var scene = new THREE.Scene();

Расставляем свет:

var light, object, object2;

scene.add( new THREE.AmbientLight( 0×404040 ) );

light = new THREE.DirectionalLight( 0xffffff );

light.position.set( 0, 1, 0 );

scene.add( light );

И тому подобное. В данном материале мы не будем рассматривать подробных технических аспектов, а попытаемся дать общую информацию о работе с 3D в браузере. Конкретные примеры вы найдете в наших следующих публикациях, а также в коллекции упражнений, поставляемых с самим ТриДжиЭс.

Из интересных для трехмерной печати форматов, threejs успешно «кушает» obj, stl, ply, vrml (последний — с треском и бубном). Имеется полный набор деформаторов (например, даже меш дисплйес на основе битмапа имеется), но есть подводные камни…

Подводные камни

  • Threejs работает как бы отдельно с геометрией и мэшем. Геометрия для него это нечто виртуальное, исключительно математическое, экранное и с ней можно производить модификации типа того же дисплейсмент мапа. Но при этом она так и останется виртуальной. Реальный мэш на базе модификатора построить нельзя и, следовательно, записать stl файл тоже;
  • Threejs, просчитывающий многополигональный объект может подвесить ваш нетбук. Поэтому, если вы оперируете геометрическими примитивами — подумайте о оптимальном количестве полигонов. Не переборщите.

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

MATERIALLABLOGO

Продолжение следует.

Сергей Привалов, руководитель проекта materiallab.ru.

  • Задать вопрос через форму сайта

Войти с помощью: 

Вопросы запрещены.