Битва за лучшие фреймворки WebGL: история, которую я рассказал
Возможно, вы изучали slack и Github и просмотрели длинный список плюсов и минусов, но вы все еще не можете сказать наверняка, что подойдет вам.
Тогда вы просто выберете один. Во многих случаях это, вероятно, не имеет большого значения. Ведь все дороги ведут в Рим, верно?
Так я и поступил. Я имел смелость взять в руки новый инструмент разработки до истечения крайнего срока проекта визуализации пути миграции птиц.
Как выбрать
Если вы согласны, это решение не основано на точной информации.
Просто очень краткая справка по теории принятия решений. Шахматы - это игра с идеальной информацией; Техасский холдем - это не карты, которые вы не показываете другим игрокам, поскольку в нем есть скрытая информация.
Когда ситуация сложная, вам нужно будет решить, что для вас наиболее важно, на основе собранной вами несовершенной информации. Это означает, что принятое вами решение может быть не самым лучшим; тем не менее, чем больше вы знаете, тем правильнее может быть ваше решение.
Первые впечатления
Для меня этот сайт произвел на меня первое впечатление. Целевая страница threejs.org чистая и демонстрирует некоторые очень впечатляющие проекты; сайт babylonjs.com выполнен в минималистском стиле, демонстрируя лучшие возможности рендеринга в реальном времени, но не сразу привлекателен.
Документация
Если вы серьезно относитесь к своему проекту, вам следует обратить внимание на документацию программных инструментов. Фактически, и у three.js, и у babylon.js очень хорошая документация, после того, как вы найдете то, что ищете.
Three.js организует документы ожидаемым образом, как и любое другое программное обеспечение; В babylon.js есть несколько новаторских идей, особенно когда он сильно переплетается с Playground в качестве примеров для документации, но вам нелегко ориентироваться. Попробуйте, если вы хотите использовать CatmullRom, вы можете сравнить, насколько легко найти его на three.js и насколько запутанной может быть система документации babylon.js.
Начиная
В Babylon.js есть то, чего не предлагает three.js, - Playground. Он предлагает вам быстрый старт, чтобы увидеть, что программа может делать, но одна вещь не сразу ясна - как преобразовать Playground в ваше собственное приложение. Цель разработчика - создать собственное.
Похоже, что Babylon.js предлагает несколько способов обучения, но нелинейным образом. Вы должны постоянно выбирать, что читать дальше, но новичку нелегко даже знать, что ему / ей следует выучить.
Three.js предлагает обычные шаги в обучении. Это кажется простым для человека с разумным опытом программирования.
Глава первая: Three.js
По всем указанным выше причинам я выбрал three.js.
У меня был дедлайн, поэтому я сразу приступил к работе над своим проектом. Я очень кратко опишу проект, а затем вернусь к обсуждению three.js.
Я хотел создать интерактивную трехмерную карту, показывающую путь полета птиц, по данным спутникового трекера. 3D-модель ландшафта очень тяжелая, поэтому я хочу использовать контуры как стилизованную презентацию ландшафта.
Работая с three.js, я обнаружил, что следующие вещи не идеальны.
- Это требует много шагов настройки. Кроме того, кажется, что новый проект должен пройти через эти шаги, чтобы получить наилучшие индивидуальные настройки; вероятно, поэтому люди проходят через эти шаги снова и снова. Один довольно полезный учебник создан красным степлером, и в его серии из three.js каждый раз используется новая установка.
- Он демонстрирует ненужную основную техническую сложность. WebGL является базовой поддержкой three.js, но он не должен обременять разработчика дополнительной работой или пониманием деталей цикла рендеринга OpenGL.
- Довольно сложно разработать свой класс и написать чистый код. Хотя вы не должны (полностью) винить в этом three.js, но я думаю, что это как-то связано со структурой three.js.
Взгляните на эту последовательность, которая типична и часто встречается в three.js. Логично, что в этом нет ничего плохого, но это утомительно и скучно, когда ваш день включает в себя такие многословные распорядки.
// https://discoverthreejs.com/book/first-steps/first-scene/ // create a geometry const geometry = new THREE.BoxBufferGeometry( 2, 2, 2 ); // create a default (white) Basic material const material = new THREE.MeshBasicMaterial(); // create a Mesh containing the geometry and material const mesh = new THREE.Mesh( geometry, material ); // add the mesh to the scene scene.add( mesh ); // create the renderer const renderer = new THREE.WebGLRenderer(); renderer.setSize( container.clientWidth, container.clientHeight ); renderer.setPixelRatio( window.devicePixelRatio ); // add the automatically created <canvas> element to the page container.appendChild( renderer.domElement ); // render, or 'create a still image', of the scene renderer.render( scene, camera );
- Отладка не всегда проста. Вероятно, это вообще проблема JavaScript. Будучи языком, в основном используемым для Интернета, JavaScript хотел бы быть максимально надежным, поэтому иногда он обрабатывает ошибки, игнорируя их. Опыт работы с three.js основан на JavaScript.
Я знаю, что мне следует перестать жаловаться на JavaScript, поскольку этого невозможно избежать. На самом деле мой любимый язык программирования - Python. Было бы действительно сложно влюбиться в JavaScript, когда вы знаете, как что-то может быть сделано на Python.
При этом можно работать с three.js, и я смог создать трехмерную иллюстрацию траектории полета птицы, но мой прогресс был медленнее, чем я ожидал. Более важно то, что мне не нравится этот опыт, он казался грязным.
Глава вторая: Babylon.js
Я решил еще раз взглянуть на babylon.js, пытаясь понять философию его дизайна.
То, что проект Microsoft - это неблагоприятный имидж для сообщества разработчиков ПО с открытым исходным кодом, даже Microsoft с годами стала намного дружелюбнее. Забавная история, рассказанная Дэвидом Катюэ, основателем Babylon.js, заключалась в том, что Microsoft не знала, что Babylon.js был разработан людьми из ее собственной компании в качестве хобби-проекта.
Babylon.js написан на TypeScript. Вы можете прочитать этот блог, написанный в 2014 году, в котором объясняется решение Babylon.js принять TypeScript.
Философия дизайна
Это одна из вещей, которые я делаю: прежде чем использовать библиотеку с открытым исходным кодом, я выясняю, кто написал этот инструмент. Знание человека, стоящего за проектом, может придать вам уверенности и иногда передумать искать что-то еще.
Я уже видел эту презентацию Рикардо Кабельо раньше, она произвела впечатление. Вот история создания three.js, созданного его изобретателем.
Babylon.js был изобретен Дэвидом Катюэ и Дэйвом Руссе с помощью художника Мишеля Руссо.
Затем я прочитал это Дэвидом Руссе в его блоге Dans ma Bulle, он написал по-французски (у меня есть английский перевод ниже):
Мы склонны полагать, что все мы живем на одной планете, но мне кажется, что на самом деле все мы живем в пузыре, размещенном в одном и том же месте. Эти пузыри иногда могут запутываться или содержаться друг в друге, а иногда, к счастью или к сожалению, полностью изолированы от других. Это почти как если бы мы живем в параллельных вселенных. Некоторых мы могли видеть вдалеке, немного размытыми, не вступая с ними в контакт.
Этот блог был датирован 5 апреля 2019 года, до пандемии Covid-19. Это была его личная история, ничего особенного, но она меня глубоко тронула.
Машинопись
Был момент, когда Babylon.js решил переписать свою кодовую базу на TypeScript. Вы все еще можете использовать JavaScript для разработки Babylon.js, но стоит узнать, когда Babylon.js сделал такой шаг.
TypeScript был изобретен Андерсом Хейлсбергом. Тип в названии может вызвать некоторые болезненные ощущения по поводу строго обязательных типов данных в компьютерном программировании (вы помните, сколько бит в unsigned long), но TypeScript на самом деле много лучше. Это строго типизированное программирование, выполненное правильно.
Возможно, наиболее ответственные программисты на JavaScript слышали о JavaScript: хорошие части Дугласа Крокфорда, книга - классическое чтение.
В JavaScript есть красивый, элегантный, очень выразительный язык, похороненный под дымящейся грудой благих намерений и промахов.
TypeScript - это надмножество JavaScript, и он построен на хороших частях. JavaScript может быть довольно хаотичным, если с ним не обращаться должным образом. Даже если он немного улучшился, при программировании нужно обращать внимание на сам язык.
Не уверен, сколько людей проголосуют за JavaScript как любимый. Я подозреваю, что JavaScript - это выбор, но не результат других вариантов. Теперь TypeScript предлагает вам альтернативу. Вы попробуете?
Хорошая новость в том, что вам не нужно беспокоиться об этом. Вы можете изучить TypeScript и Babylon.js вместе. Это должно быть предложение, от которого нельзя отказаться.
Полезно иметь некоторое представление о TypeScript, возможно, просто краткое введение. Если вы пережили JavaScript, это ничто по сравнению с этим.
Затем вы можете настроить среду для разработки Babylon.js на TypeScript.
После этого попробуйте несколько примеров на детской площадке. Babylon.js предлагает версии JavaScript и TypeScript для каждого примера бок о бок на игровой площадке.
График сцены
Для компьютерной графики кажется естественным заимствовать термины у киностудий, поскольку люди уже понимают концепции камеры, освещения и материала. 3D-сцены могут быть очень сложными, вы можете убедиться в этом, взглянув на интерфейс программного обеспечения для анимации.
Обработка для создания окончательного изображения обычно называется render. Трехмерная сцена описывается графиком сцен. Создание сцены - важная часть создания вашего проекта. По сравнению с Three.js, Babylon.js делает некоторые дополнительные шаги, чтобы помочь вам создать вашу сцену.
Сначала взгляните на Three.js. Three.js предоставляет вам все необходимые средства для программирования, но именно это он и сделал. От любого, кто знаком с OpenGL / WebGL, можно ожидать знакомства. Хотя рабочий процесс программирования 3D для корректировки чисел может быть медленным.
Babylong.js действительно пытался помочь вам. Он предлагает набор инструментов и другие способы работы с Babylon.js. Несмотря на все добрые намерения, это может сбить с толку тех, кто впервые начинает с Babylon.js.
- Игровая площадка - это место, где вы можете писать код в реальном времени. Он имеет встроенную систему контроля версий и, кажется, сохраняет все, что когда-либо было создано. Не забывайте добавлять теги при сохранении игровой площадки, иначе вы можете ее никогда не найти.
- Песочница - это место, где вы можете исследовать свои 3D-модели, если вам нужно загрузить модели из программного обеспечения, такого как Maya или Blender.
- NME (редактор материалов узла) действительно хорош, когда вы уже хорошо разбираетесь в Babylon.js. Это инструмент визуального программирования производственного качества для разработки шейдеров, аналогичный Shading Networks в Maya.
- Экспортеры позволяют экспортировать в другое программное обеспечение.
- Spector.js - это инструмент проверки WebGL.
Когда вы начинаете, вероятно, вы проводите время на игровой площадке, и документация babylon.js также использует игровую площадку в качестве примеров.
Синтаксис оптимизирован для графа сцены
Сравните с three.js, для той же задачи babylon.js требует меньше кода.
Вот как вы создаете цилиндр в three.js.
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
Это шаг за шагом. В этом нет ничего плохого.
В babylon.js цилиндр рассматривается как конус с равными размерами верха и низа.
var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);
В babylon.js синтаксис организован аналогичным образом. Первый параметр - это название объекта, второй - его детали, а последний - сцена. Это дает вам очень четкое представление о том, что вы создаете, а также дает вам представление о том, где это находится на графике сцены. Я думаю, это просто имеет больший смысл.
Заключение
Каждое сравнение требует заключения.
Но это действительно зависит от того, чем вы хотите заниматься. Некоторым проектам требуется только оболочка WebGL. Для этого это не имеет значения. Не стесняйтесь использовать three.js или babylon.js.
Проект Littlest Tokyo - это пример на three.js. Моделирование и анимация выполняются с помощью внешнего программного обеспечения, а three.js только загружает и представляет его.
Если вы хотите хорошо программировать для создания своей сцены, я бы порекомендовал babylon.js вместо three.js. Программировать babylon.js на TypeScript приятно, если вы знаете, как пользоваться babylon.js.
В самом начале babylon.js кажется чуждым. Может, это французский. Вы можете почувствовать себя немного потерянным, но все быстро становится намного проще. Программировать быстрее, чем three.js, вы пишете несколько строк кода более аккуратно.
Эпилог
Одним добрым солнечным днем (до или после Covid-19) я сидел за столом, когда кто-то зашел и начал спрашивать о WebGL. Я рассказал всю эту историю и почувствовал, что кто-то меня понял.
Ваше здоровье.
(Пожалуйста, поделитесь своим опытом, особенно если вы оказались программистом. Я хочу, чтобы программисты говорили.)
