[Это началось с очень длинного ответа в Facebook, который я написал неисчерпаемо превосходной Еве Хёрт, которая спросила:

Это не учебное пособие или исчерпывающее подробное техническое руководство - многие из них уже существуют, - а скорее способ подумать о WebVR и познакомиться с тем, что это такое, и как лучше всего к нему подойти. с нуля. Если вы какое-то время занимались WebVR или 3D-программированием, эта статья определенно не для вас. Если вам это интересно и вы хотите узнать, как присоединиться к вечеринке - читайте дальше!]

Вот что я написал Еве, немного отредактированное для ясности, грамматики и трёбов:

WebVR сильно отличается от Unity, но также доступен и имеет несколько дополнительных преимуществ с точки зрения обучения работе в нем. Вот один из возможных (и популярных) подходов:

1: Детские шаги

Первая часть WebVR - это ВЕБ.
Это HTML.
Это, в большей степени, Javascript.
Подружиться с обоими - существует огромное количество отличных бесплатных и платных ресурсов - обязательное условие. Но это не больно! В частности, HTML - довольно простой и снисходительный путь к программированию, а (современный) Javascript - прекрасный первый язык программирования.

2: Ходьба

Экосистема WebVR в настоящее время находится в очень удобном для новичков месте - есть слои над слоями абстракции и упрощения, которые делают жизнь новичков * проще, чем это было бы всего несколько лет назад.

НАЧНИТЕ С НАЧАЛА ВНИЗ

(psst: или не надо! См. последнюю сноску)

То есть с А-образной рамой.
Пока не беспокойтесь о том, что такое A-Frame . вы узнаете достаточно скоро. Следуйте простому руководству. Это будет легко и вдохновляет, и вам даже не понадобится Javascript (пока). Не пытайтесь копать слишком глубоко под капотом, когда вы только начинаете - это становится невероятно сложным довольно быстро, а лежащие в основе технологии действительно бездонны; именно это и делает A-Frame восхитительной игрушкой. Просто сосредоточьтесь на том, чтобы получать удовольствие и создавать крутые вещи.
Потратьте несколько недель (по крайней мере) на изучение основ, на то, как работает трехмерное пространство, на перемещение вещей, на изучение Entity-Component Architecture (особенно если вы пришли из ООП фон).

Поймите, что A-frame расширяемый, отзывчивый, модульный и замечательный: вы можете просматривать один и тот же контент на экране компьютера, Google Cardboard, HTC Vive и почти на любом другом устройстве VR.

Попытайтесь сделать это.

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

Поймите, что есть активное, замечательное сообщество людей, работающих над A-Frame и с ним - это означает, что если вы ищете какую-то конкретную функцию или компонент, кто-то уже сделал это, поэтому вам не нужно. Посмотрите Awesome-Aframe на GitHub; это рог изобилия удивительных вещей. Присоединяйтесь к Slack. Присоединяйтесь к списку рассылки. Может быть, сабреддит.

Осознай, что ты сейчас в сети, детка! Вы можете посмотреть исходный код ЛЮБОГО опыта виртуальной реальности, потому что здесь все работает именно так. Никаких черных ящиков, никаких секретов! Вы видите то, что вам нравится? Откройте его, посмотрите, как это сделано, сделайте сами. Некоторые пытаются скрыть свою работу, но эти попытки практически всегда бесполезны.

Поймите, что ОБМЕН - огромная часть красоты WebVR: он по своей сути социальный - такой же социальный, как и сама сеть! Делать вещи. Разместите их в Интернете, чтобы другие могли их увидеть. Если вы чувствуете себя смелым, попробуйте некоторые из социальных компонентов и пригласите друзей присоединиться! Добавьте ресурсы из Tilt Brush, из Blocks. Создавайте произведения искусства в A-Painter и осознайте, что теперь вы можете создавать произведения искусства в Интернете, а затем использовать их в других местах в Интернете!

3. Бег (или очень быстрая ходьба)

Спустя недели / (что более вероятно) месяцы / (очень возможно) годы - если вы все еще увлечены, все еще хотите узнать больше, все еще хотите увидеть, насколько глубока кроличья нора - раскопайтесь в основе A-Frame: Three.js .

Теперь вы в стране Javascript. Вы играете с большими детьми. Вы раскрываете истинный потенциал 3D-технологий в Интернете с помощью довольно хорошо абстрагированного WebGL, и вы понимаете, что WebGL, WebVR, WebAudio - все это части в огромной головоломке изумительных инструментов для создания иммерсивного контента, которые доступны вам бесплатно. Поймите, что React VR построен на этом фреймворке; как и экспорт Unity WebGL; как и бесчисленное множество других событий, с которыми вы уже знакомы. 3D-сеть БУДЕТ РАБОТАТЬ на three.js, почти без заметных исключений. И как только вы овладеете тремя - ваши силы безграничны. Вы можете делать что угодно и все. Вы можете создавать новые компоненты A-Frame, которые являются единорогами MR, которые сделают вам AR-блины на завтрак с помощью настраиваемых шейдеров радуги, основанных на вашем типе личности. Но подождите, это еще не все.

4. Парящий по небу, словно чумовой феникс, возродившийся из пепла, чтобы править WebVR, графическое программирование и сама Валгалла

Если вы зашли так далеко, вы сошли с ума, но есть и другие, подобные вам. Вы, вероятно, программист графики, и пора вам это осознать. А теперь пора углубиться в сам металл - WebGL, OpenGL, шейдинг, конвейер графического процессора… Те самые атомы, которые строят нашу трехмерную метавселенную. Это ШАГОВЫЙ подъем (я сам не так уж высок), но он очень полезен. Это магия. Вы думали, что threejs мощный инструмент? WebGL (openGL) - это само Темное искусство. Вы узнаете о Shadertoy.com, GLSL и HLSL и полностью переосмыслите такие вещи, как линейное программирование и потоки управления, потому что в графических процессорах все происходит одновременно повсюду. Внезапно, в стиле дзен, вы поймете, что в конце дня * все * сводится к окрашиванию каждого пикселя в определенный красный, зеленый, синий цвет и прозрачность, и что под капотом все графические процессоры говорят на очень похожих диалектах действительно универсальный кроссплатформенный язык. Ваш ум будет взорваться каждый день. Вы будете изучать продвинутую векторную математику (о которой вы уже кое-что знаете, только если зашли так далеко), матричные преобразования и модели освещения, а также научитесь играть с самим пространством и временем - я вас не шучу - способами, которые исказят ваш мозг к Матрице и обратно, создавая великолепные, кажущиеся невероятно ошеломляющими визуальные эффекты из самого кода (опять же, проверьте Shadertoy. Это визуальное чудо кода - это то, к чему я обычно отправляю людей в первую очередь.)

Тогда, вероятно, получите хорошую работу в любом количестве ведущих технологических компаний, потому что графическое программирование - это НЕОБХОДИМЫЙ набор навыков, лет - и очень, очень мало людей, которые действительно овладели им.

Но да, обязательно начните с А-образной рамки :)

— -

Пара важных примечаний, которых не было в исходном посте:

  1. Этот бессвязный список начинался как ориентированный на WebVR и постепенно перешел к прямому графическому программированию. Именно так это работает IRL; как только вы погрузитесь достаточно глубоко, вы начнете видеть закономерности. Вы понимаете, что WebVR - это просто особый словарь на очень большом языке. Чем глубже копаешь, тем больше все начинает соединяться. Подумайте об изучении саксофона и теории музыки.
  2. Многие являются сторонниками обратного восходящего подхода; начиная с основных краеугольных камней программирования и графики и наращивая свой путь, вместо того, чтобы смотреть на всю картину, прежде чем увеличивать масштаб. Лично, как учитель, так и как ученик, я сразу тяготею к первому - но чем больше я преподаю, и чем больше я общаюсь со сверстниками / студентами / наставниками, которые не являются мной, тем больше я уважаю то, как другие подходы могут помочь определенным типам учащихся, гораздо больше, чем тот, который я защищаю здесь. Если это звучит так, как будто это может вам понравиться, лучший общий ресурс, который я знаю на данный момент, - это не книга, учебное пособие или веб-сайт, а человек: Стефани Херлбурт, программист графики, супер успешный владелец стартапа по сжатию текстур, будущий мировой господин и один из самых гостеприимных, проницательных и вдохновляющих экспертов по графике, которых вы встретите в сети. Просмотрите ее ленту в Твиттере и веб-сайт, и вы найдете множество ресурсов, с которых можно начать. Обратитесь к ней или к любому количеству экспертов, которых она регулярно поощряет для наставничества. Фактически, делайте это независимо от того, какой подход вы хотите использовать. Поговорите с людьми. Это делает все менее пугающим.

Спасибо превосходному Даниэлю Кардозо за то, что он надрал мне задницу и заставил меня превратить мгновенно потерянный пост в Facebook в более долгоживущий пост Medium.