Вопросы и ответы

Ниже приведены ответы на наиболее часто встречающиеся вопросы по Verge3D и связанным с ним технологиям.

Лицензирование и поддержка

Я купил Verge3D. Как мне скачать версию без водяных знаков?

После покупки (через несколько минут или часов в зависимости от вашего часового пояса) вам будет отправлено электронное письмо с лицензионным ключом. Скопируйте этот ключ и вставьте его в диалоговом окне Licensing Manager диспетчера приложений. Это сделает уже установленную копию Verge3D лицензионной и удалит водяной знак из ваших приложений.

Кроме того, если вы приобрели корпоративную или максимальную версию Verge3D, вы можете загрузить специальный дистрибутив разработчика, содержащий исходный код Verge3D. Чтобы получить его, зайдите в свой аккаунт на сайте Soft8Soft и нажмите кнопку «Загрузки». То же самое касается всех пакетов материалов, приобретенных у Soft8Soft.

На сколько компьютеров можно установить Verge3D? Сколько пользователей могут использовать одну лицензию?

Лицензия назначается на человека («Фриланс») либо на организацию («Малый бизнес», «Корпоративная»). Количество установок не ограничено. В случае варианта «Фриланс» только один человек может использовать ПО Verge3D. Для лицензий «Малый Бизнес», «Корпоративная» или «Максимальная» ПО может использовать до 5 разработчиков.

Каковы ограничения пробной версии Verge3D? Я могу сделать ... ?

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

В частности, вы можете использовать Verge3D для ознакомления, оттачивания навыков работы, либо для показа предварительных результатов начальству внутри компании. Если вы работаете в образовательном учреждении, вам потребуется специальная лицензия, которую мы предоставляем со значительной скидкой (запросить тут). Также учтите, создание персонального портфолио не входит в число разрешённых применений пробной версии. В этом случае вам понадобится приобрести «Фриланс»-лицензию.

Посмотрите эту страницу для получения дополнительной информации о преимуществах и ограничениях пробной версии Verge3D.

Как мне получить техническую поддержку?

Услуга технической поддержки предоставляется вместе с корпоративными пакетами Verge3D. Если у вас лицензия «Verge3D Фриланс» или «Малый Бизнес», воспользуйтесь форумом.

Основные вопросы

Что такое WebGL?

WebGL — это технология для визуализации интерактивной 3D-графики в браузерах. Графика отображается прямо на сайте, без необходимости что-либо устанавливать, причём неважно с какого устройства заходит пользователь: мобильного или настольного. Технология WebGL требует высокой квалификации и ресурсов для реализации рендеринга даже простейших моделей, в силу чего требует использования трёхмерных движков, таких как Verge3D. Скрывая сложности и экономя время, Verge3D позволяет не-программисту (художнику, инженеру или преподавателю) с легкостью создавать интерактивные веб-приложения.

В чем разница между WebGL и WebGPU?

Обе эти технологии созданы для рендеринга интерактивной 3D-графики в интернете. Разница между ними в том, что стандарт WebGL уже зарекомендовал себя и поддерживается практически повсеместно, в то время как WebGPU считается экспериментальным и пока не получил широкой поддержки в браузерах.

Несмотря на то, что WebGPU призван стать низкоуровневой и более производительной альтернативой WebGL, для типичных случаев использования Verge3D данная технология не дает каких-либо существенных преимуществ. В настоящее время движок рендеринга Verge3D использует WebGL, но мы держим руку на пульсе и внимательно следим за разработкой WebGPU.

Что означают выражения «на стороне клиента» и «на стороне сервера»?

В контексте веб-разработки термин «на стороне клиента» означает, что что-то происходит в браузере, работающем на устройстве пользователя. «На стороне сервера» означает, что что-то выполняется удалённо, на веб-сервере.

Базовая модель клиент-сервер

Если мы говорим о том, что Verge3D это клиентское решение, это означает, что ваше 3D-приложение работает в браузере, поэтому для его запуска и работы не требуется серверное программирование или использование сторонних платформ. Это ключевая особенность Verge3D, которая делает его таким простым в использовании. Однако, поскольку мы говорим о веб-разработке, наличие примитивной серверной инфраструктуры всё же потребуется. В большинстве случаев эта функциональность ограничивается передачей файлов приложения в браузер.

Чтобы облегчить вам жизнь, мы уже подумали о серверной части, реализовав в Verge3D целых 3 готовых решения:

  1. Диспетчер приложений предоставляет сервер, который позволяет запускать приложения и использовать функцию Sneak Peek на локальном компьютере.
  2. Verge3D Network — облачный сервер, который можно использовать для распространения приложений среди ваших пользователей одним щелчком мыши.
  3. Verge3D для WordPress — плагин, используемый для размещения Verge3D-приложений в «Вордпрессе», самой популярной и простой в использовании системе управления контентом.

Кроме того, вы всегда можете использовать собственный веб-сервер, например Apache, Nginx, IIS, либо выбрать стороннюю хостинговую платформу, например «Яндекс Облако», Amazon AWS, Digital Ocean или GoDaddy.

Где я могу найти план разработки Verge3D?

Verge3D — это продукт ориентированный на клиентов, поэтому мы движемся в направлении их потребностей. В целом, наши основные приоритеты — электронная коммерция, электронное обучение и приложения виртуальной и дополненной реальности. Если у вас есть особая функция, которую вы хотели бы видеть в Verge3D, мы можем добавить ее на контрактной основе. Свяжитесь с нами, чтобы обсудить детали.

Требуется ли мне подключение к интернету для работы с Verge3D?

Инструментарий Verge3D устанавливается на ваш локальный компьютер и в общем случае не требует подключения к интернету. Единственная функция, для которой требуется интернет — публикация готовых приложений в Verge3D Network.

Кроме того, чтобы помочь пользователям с нестабильным подключением к интернету, мы встроили локальные версии «Руководства пользователя» и «Справочника разработчика» в дистрибутив Verge3D (ищите их в подпапке docs внутри установочной папки).

Мое приложение не загружается, когда я открываю его в Chrome, но оно работает при запуске из диспетчера приложений

Из-за политики безопасности браузеров, веб-приложения не могут получить доступ к данным, загруженным из другого домена, в том числе из локальной файловой системы. Следовательно, вы должны использовать диспетчер приложений (который поставляется с локальным сервером) для разработки, либо публиковать свои приложения на веб-сервере (в частности, с помощью Verge3D Network).

Если вам нужно сделать настольное или мобильное приложение, вы можете преобразовать имеющийся проект с помощью диспетчера приложений. Для этого вам потребуется Electron или Cordova).

Не удается загрузить приложение, когда я кликаю по файлу .html.

Ответ на этот вопрос смотрите здесь.

Могу ли я экспортировать свою сцену в HTML-файл?

Да, Verge3D предлагает опцию конвертации сцен в HTML-формат. Тем не менее мы рекомендуем преобразовывать приложения с помощью Electron.

Работают ли приложения Verge3D в Internet Explorer 11?

Отчасти да. Версии Verge3D до 4-ой включали в себя модуль совместимости с «Интернет Эксплорером», который активируется на панели создания приложения:

Включение поддержки браузера Интернет Эксплорер 11

Чтобы скачать нужную вам версию воспользуйтесь архивом закачек (англ.).

Можно ли запустить диспетчер приложений без Blender, 3ds Max или Maya?

Конечно, вы можете запустить диспетчер приложений в автономном режиме. Просто щелкните соответствующий значок Verge3D на рабочем столе или в меню «Пуск». Это откроет браузер, назначенный по умолчанию в системе, и автоматически перейдет в диспетчер приложений.

App Manager Launcher

Как скопировать пазлы в другой проект?

Для переноса пазлов воспользуйтесь библиотекой.

Не воспроизводятся звуки в iOS...

Как это исправить, смотрите здесь.

Мое приложение тормозит. Как мне увеличить его производительность?

Ознакомьтесь с руководством по обнаружению проблем с производительностью и руководством по оптимизации ресурсов.

Как открыть консоль браузера?

Google Chrome

Menu → More Tools → Developer Tools или

Клавиша F12 на Windows/Linux или Option + ⌘ + J для macOS.

В окне Developer Tools, выберите вкладку Console.

Firefox

Menu → More Tools → Browser Console or

Клавиша F12 на Windows/Linux или Shift + ⌘ + J для macOS.

Apple Safari

Включите Developer Menu в настройках (Advanced Tab), затем Develop → Show JavaScript Console или нажмите

Option + ⌘ + C shortcut.

Microsoft Edge

Menu → F12 Developer Tools или

Клавиша F12.

В окне Developer Tool выберите вкладку Console.

Chrome для Android
Непосредственно отобразить консоль браузера на устройстве Android нельзя. Вместо этого используйте функцию отладки по УСБ.
Safari на iOS и iPadOS
Непосредственно отобразить консоль браузера на устройствах с iOS и iPadOS невозможно. Вам потребуется система с macOS и веб-инспектор — специальный инструмент для доступа к содержимому консоли.
Microsoft Internet Explorer
Браузер устарел и больше не поддерживается в Verge3D.

Приложение отлично работает в диспетчере приложений, но не работает при загрузке на удаленный сервер (например, в Verge3D Network)

Среди возможных причин, вызывающих данную проблему:

  1. Локальная система нечувствительна к регистру файлов, а удаленная чувствительна.
  2. Вы неверно указали абсолютный путь к файлу .html или .gltf.

Пример первого случая: если вы используете Windows или macOS (обе используют файловые системы нечувствительные к регистру), вы можете случайно переименовать файлы при экспорте. Но поскольку большинство серверов работают на Linux (включая Verge3D Network), они используют файловые системы чувствительные к регистру, что может вызывать проблемы при получении файлов с сервера.

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

Мой Конфигуратор.blend (или Мой Конфигуратор.max или Мой Конфигуратор.mb) Мой Конфигуратор.html Мой Конфигуратор.js Мой Конфигуратор.css Мой Конфигуратор.gltf Мой Конфигуратор.bin

Предположим, вы открываете файл сцены в инструменте моделирования (в Windows или macOS) и экспортируете его как мой конфигуратор.gltf.

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

Мой Конфигуратор.blend (или Мой Конфигуратор.max или Мой Конфигуратор.mb) Мой Конфигуратор.html Мой Конфигуратор.js Мой Конфигуратор.css мой конфигуратор.gltf мой конфигуратор.bin

Если вы откроете основной JavaScript-файл вашего приложения (Мой Конфигуратор.js в нашем примере), вы увидите, что он пытается загрузить Мой Конфигуратор.gltf, а не мой конфигуратор.gltf. Это совершенно нормально для Windows или macOS, поскольку эти два имени представляют один и тот же файл! Однако, когда вы загрузите ваше приложение на сервер, оно не запустится.

Чтобы избежать этого, всегда сохраняйте и экспортируйте файлы в правильном регистре. Альтернативным решением будет переименовать файл в главном .js файле приложения.

Второй причиной данной ошибки может быть указание абсолютного пути к загружаемому ресурсу в вашем js-файле, например:

/applications/моё_приложение/моё_приложение.gltf

или

http://localhost:8668/applications/моё_приложение/моё_приложение.gltf

В таком случае укажите относительный путь, чтобы устранить проблему:

моё_приложение.gltf

или

./моё_приложение.gltf

Как правильно переименовать приложение?

Перейдите в папку с приложениями, найдите и переименуйте папку, содержащую ваше приложение (например, «моё_приложение» в «крутая_визуализация»).

Не путайте имя папки с названием, отображаемым в диспетчере приложений. Например, приложение «моё_приложение» получает заголовок «Моё Приложение». Этот заголовок генерируется автоматически путем замены символов подчеркивания пробелами и перевода начальных символов слов в верхний регистр.

Если вы также хотите переименовать файлы внутри вашего приложения, сделайте следующее:

  1. Перейдите в папку приложения.
  2. Назначьте новые имена всем ресурсам html/css/js/gltf/bin/blend/max/ma/mb (подробнее см. здесь). Не трогайте файлы v3d.js, visual_logic.xml и visual_logic.js!
  3. Откройте и переэкспортируйте сцены, чтобы обновить пути внутри экспортированных glTF-ресурсов.
  4. Откройте основной .html-файл (например, моё_приложение.html) и обновите следующие пути .js/.css: <script src="моё_приложение.js"></script> <link rel="stylesheet" type="text/css" href="моё_приложение.css"> Допустим, вы хотите переименовать «моё_приложение» в «крутая_визуализация». В этом случае пути становятся: <script src="крутая_визуализация.js"></script> <link rel="stylesheet" type="text/css" href="крутая_визуализация.css">
  5. Откройте основной .js-файл (например, моё_приложение.js) и обновите следующую строку, указав предпочтительное имя приложения: sceneURL: params.load || 'моё_приложение.gltf', Допустим, вы хотите переименовать моё_приложение в крутая_визуализация. В этом случае строка SceneURL будет выглядеть так: sceneURL: params.load || 'крутая_визуализация.gltf',
  6. Запустите приложение в диспетчере приложений. Если приложение не работает, откройте консоль браузера, чтобы проверить наличие ошибок.

Кроме того, не забудьте обновить метаданные в переименованном приложении. Информацию о том, как это сделать, смотрите здесь.

Моделирование и создание контента

Что такое glTF?

glTF (glTF, Graphics Language Transmission Format) - это универсальный формат файлов, используемый в интернете для хранения и обмена 3D-визуализацией. Данный формат используется в Verge3D и другом программном обеспечении для работы с графикой. Он может хранить не только модели, но и целые сцены, включая геометрические данные (меши), положение объектов, анимацию, данные камеры, источники света, материалы, текстуры и другую информацию.

Поскольку формат glTF определяет только базовый набор функций, мы дополнили его нашими собственными расширениями (имеют префикс S8S). Подмножество glTF Verge3D поддерживает не только основные PBR-материалы, но также материалы на основе нод Blender, 3ds Max или Maya, камеры, источники света, окружающую среду и другие вещи, что упрощает и повышает эффективность рабочих процессов.

В Verge3D мы используем версию 2.0 формата glTF. Старая версия стандарта 1.0 не поддерживается.

В каких случаях следует использовать материалы, совместимые с glTF?

Основные отличия glTF-совместимых материалов от штатных, основанных на нодах Blender, 3ds Max и Maya:

Главный недостаток glTF-материалов заключается в том, что вы не сможете использовать «родную» систему материалов, предоставляемую пакетом моделирования. Таким образом, вы не сможете получить тот же уровень контроля над разработкой материала, а следовательно достичь сопоставимого качества визуализации.

Ознакомьтесь со следующими руководствами для получения дополнительной информации:

Какой 3D-формат лучше, .gltf или .glb?

Это два варианта одного и того же формата glTF 2.0. Контейнер *.gltf более популярен и эффективен, поскольку он хранит только метаданные (параметры ваших сцен/объектов/материалов и т. д.). Все внешние данные, такие как геометрия, анимация и текстуры, хранятся отдельно (в файлах *.bin, *.jpeg, *.png).

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

Я ничего не вижу, когда экспортирую свою сцену в Verge3D.

Это может произойти по разным причинам:

Какие 3D-форматы можно использовать в Verge3D?

С помощью сторонних библиотек импорта Verge3D может загружать различные 3D-форматы. Тем не менее, предпочтительным способом создания трехмерного веб-контента является использование формата glTF 2.0, который поддерживается Verge3D-плагином для Blender, 3ds Max или Maya.

Также скрипт стандартного шаблона приложения основан на классе App, который поддерживает загрузку файлов исключительно в формате glTF.

Поддерживаются ли пакеты Maya LT и Maya Creative?

К сожалению нет. Урезанная версия Maya LT не позволяет запускать скрипты на Python, поэтому мы не можем реализовать программу экспорта для данного пакета моделирования.

То же самое относится к пакету Maya Creative, который вообще не имеет возможности запуска сторонних плагинов.

Есть ли планы по поддержке Maxon Cinema4D? Sketchup?

Смотрите ответ на этот вопрос на нашем форуме (англ.).

Как преобразовать модель SolidWorks в WebGL с помощью вашего программного обеспечения?

Начиная с версии 2016 года, 3ds Max поддерживает ресурсы SolidWorks. Просто импортируйте файл SolidWorks в 3ds Max, а затем экспортируйте в WebGL, как любую другую максовскую сцену.

Примечание. Обратите внимание на оптимизацию геометрии, так как САПР-модели довольно тяжелы для интернета. Настройте параметр Mesh Resolution в диалоговом окне Import Settings при импорте файлов. Вы также можете использовать модификаторы 3ds Max, чтобы уменьшить количество полигонов в ваших моделях.

Как создать интерактивную браузерную визуализацию на основе модели из Revit?

У вас есть два варианта:

  1. Экспортируйте модель Revit в формат FBX, а затем импортируйте в 3ds Max, Maya или Blender.
  2. Используйте импортер Revit, который изначально поддерживается в 3ds Max. Не забудьте активировать параметр Autodesk Revit Interoperability во время установки 3ds Max, чтобы включить эту функцию.

В любом случае сохраняйте оптимальную геометрию. Мы рекомендуем использовать 100-500 тысяч полигонов для всей сцены.

Электронная коммерция

Как мне сделать 3D-конфигуратор с помощью Verge3D, учитывая что мои навыки веб-разработки крайне ограничены?

В таком случае мы рекомендуем взять одну из демок, поставляемых с Verge3D, а затем изменить ее под свои нужды. Следующие три приложения в нашем магазине ассетов вообще не потребуют написания кода:

Кольцо
Самый простой пользовательский интерфейс, основанный на объектах, связанных с камерой.
Кресло
Поставляется с более продвинутым макетом на основе HTML-вёрстки, созданной в визуальном редакторе Webflow. Содержит рабочий прототип корзины типичного интернет-магазина.
Скутер
Самое продвинутое приложение, позволяющее настроить более миллиона разных комбинаций. Как и в случае с «Креслом», пользовательский интерфейс был создан с помощью редактора Webflow.

Кроме того, если на вашем сайте используется система управления контентом WordPress, обратите внимание на расширение WooCommerce Composite Products. С его помощью вы сможете создавать 3D-веб-конфигураторы максимально быстро.

Требуется создать 3D-интернет-магазин с минимальным бюджетом. Что посоветуете?

Сначала вам нужно создать 3D-визуализацию продуктов в Blender, 3ds Max или Maya. Далее есть 2 варианта:

Как мне сделать базовую систему CPQ (конфигурация, цена, предложение) с настраиваемыми продуктами, показываемыми в 3Д?

Мы рекомендуем следующий подход:

Имеется бюджет на разработку 3D-сайта, но нет соответствующих компетенций. Что можете предложить в этом случае?

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

Вы также можете разместить ваше предложение в соответствующем разделе нашего форума.

Я разработал платный Verge3D-плагин, как лучше организовать его продажи?

Супер! Для продажи плагина вы можете выбрать одну из следующих торговых площадок:

Программирование с помощью пазлов

Какие пазлы стоит изучить в первую очередь?

Список довольно короткий:

Данная функциональность используется в демо-приложении Simple Configurator (исходные файлы доступны в магазине ассетов).

Как защитить моё приложение паролем?

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

Защита приложения WebGL паролем

Измените «123456» на что-нибудь более безопасное.

Этот метод не является на 100% надежным и может быть легко взломан. Более правильным способом ограничения доступа к вашему приложению будет использование HTTP-аутентификацию, либо авторизации на сервере.

Как сделать управление от первого лица на мобильных устройствах?

По сути вам нужно создать дополнительные элементы, выровненные по экрану, которые будут элементами управления вашим персонажем. Минимальный набор таких элементов — вперед-назад (так как вращение осуществляется касанием/перетаскиванием экрана).

Таким образом, у вас есть два способа отрисовки элементов управления на мобильном устройстве:

  1. Используя элементы HTML, расположенные поверх 3D-сцены. Подробнее об этом методе можно узнать здесь.
  2. С помощью плоскостей или подобных 3D-объектов, связанных с камерой. Для этого вам нужно приперентить их к камере в пакете моделирования.

Создав элементы управления, используйте пазл change local transform, чтобы переместить камеру. Например, для перемещения вперед/назад вы можете использовать следующую логику:

Пазлы для перемещения вперед-назад

Чтобы реализовать боковое перемещение персонажа, используйте тот же пазл, но двигайтесь по оси X вместо Z.

Почему пазлы show/hide не работают для аннотаций?

Поскольку Verge3D перемещает и контролирует видимость объектов аннотаций самостоятельно, скрыть/показать их не получится.

Вместо этого вам следует использовать CSS-свойство display для элемента аннотации, на который ссылается его идентификатор. Например, чтобы скрыть/показать аннотацию с идентификатором элемента poi1, вы можете использовать следующие два пазлы:

Пазлы для отображения/скрытия аннотаций

По сути, установка display в none скрывает аннотацию, а установка display в block снова её показывает.

Можно ли отключить (скрыть) луч/прицел в режиме виртуальной реальности?

Используйте пазл get controller property, чтобы получить объект луча/прицела и hide для его сокрытия:

Пазлы для отображения/скрытия прицела луча [привязка:how_to_clone_objects_recursivity]

Как рекурсивно клонировать объекты?

Используйте следующую JavaScript-функцию:

Рекурсивное клонирование объектов с помощью визуальных блоков

Вопросы по программированию

Читайте ниже если имеете навыки работы с JavaScript.

Совместим ли Verge3D с фреймворком Three.js?

Verge3D предоставляет ограниченную совместимость с API фреймворка Three.js, что может существенно упростить портирование имеющегося кода. Тем не менее, подобный подход не является оптимальным. Вместо этого мы рекомендуем создавать большую часть контента в пакете 3D-моделирования и использовать пазлы.

Как рассчитать использование памяти текстурой?

Для хранения обычной (не HDR) текстуры в памяти графического процессора вам потребуется не менее

ширина x высота x 4 x 1.333 байт

Где ширина, высота - размеры текстуры в пикселях, 4 - количество байтов на пиксель, а 1,333 - дополнительная память, необходимая для отображения текстуры. Например, текстура размером 2048x2048 будет занимать примерно 22,4 Мб памяти графического процессора. Если вам нужно сохранить HDR-текстуру, умножьте это значение на 2.

Также, в зависимости от реализации WebGL, браузеры могут хранить по крайней мере одну копию текстуры в обычной (системной) памяти.

Окно моего приложения бесконечно растет на устройствах iOS. Как это исправить?

Если вы встраиваете приложение Verge3D в элемент iframe, вы можете столкнуться с определенной проблемой на устройствах iOS, из-за которой окна iframe будут постоянно увеличиваться в размере за пределами окна браузера. Это, в свою очередь, может привести к сбою WebGL.

Чтобы решить эту проблему, вы можете использовать код, который изменяет размер iframe в соответствии с телом страницы (body), предотвращая выход указанного iframe за его пределы.

<script> if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { var iframe = document.getElementById('myIframe'); function resize() { iframe.style.width = getComputedStyle(document.body).width; iframe.style.height = getComputedStyle(document.body).height; iframe.setAttribute('scrolling', 'no'); } iframe.addEventListener('resize', function(e) { resize(); }); resize(); } </script>

Элементы управления с клавиатуры не работают для приложения, встроенного в iframe.

Это происходит, когда в фокусе находится какой-то другой HTML на вашей странице. Чтобы решить проблему, попробуйте следующий код:

document.getElementById("my_iframe_id").focus();

Где my_iframe_id — ID нужного элемента iframe.

На пазлах этот же код будет выглядеть так:

Все еще есть вопросы?

Задавайте их на нашем форуме!