• Создаем базовую сцену в A-Frame

    • Перевод
    • Tutorial


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

    Давайте сделаем базовую сцену в A-Frame, чтобы понять как фреймворк работает. Нам потребуется начальное понимание HTML. В ходе этого урока мы выучим:

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

    Поиграть с кодом можно тут
    Читать дальше →
  • Обзорная статья по A-Frame



    A-Frame — это веб-фреймворк позволяющий создавать различные приложения, игры, сцены в виртуальной реальности (ВР). Все вышеописанное будет доступно прямо из браузера вашего шлема ВР. Этот инструмент будет полезен как тем кто хочет заниматься разработкой ВР игр в браузере, так и например, может пригодится в качестве платформы для создания веб ВР приложений, сайтов, посадочных страниц. Сферы использования веб ВР ограничены лишь вашим воображением. Навскидку могу привести пару сфер деятельности человека где ВР может быть полезен: образование, медицина, спорт, продажи, отдых.
    Читать дальше →
    • +16
    • 2,4k
    • 1
  • Объёмный рендеринг в WebGL

    • Перевод

    Рисунок 1. Пример объёмных рендеров, выполненных описанным в посте рендерером WebGL. Слева: симуляция пространственного распределения вероятностей электронов в высокопотенциальной молекуле белка. Справа: томограмма дерева бонсай. Оба набора данных взяты из репозитория Open SciVis Datasets.

    В научной визуализации объёмный рендеринг широко используется для визуализации трёхмерных скалярных полей. Эти скалярные поля часто являются однородными сетками значений, представляющими, например, плотность заряда вокруг молекулы, скан МРИ или КТ, поток огибающего самолёт воздуха, и т.д. Объёмный рендеринг — это концептуально простой метод превращения таких данных в изображения: сэмплируя данные вдоль пущенных из глаза лучей, и назначив каждому сэмплу цвет и прозрачность, мы можем создавать полезные и красивые изображения таких скалярных полей (см. Рисунок 1). В GPU-рендерере такие трёхмерные скалярные поля хранятся как 3D-текстуры; однако в WebGL1 3D-текстуры не поддерживаются, поэтому для их эмуляции в объёмном рендеринге требуются дополнительные хаки. Недавно в WebGL2 появилась поддержка 3D-текстур, позволяющая реализовать браузере элегантный и быстрый объёмный рендерер. В этом посте мы обсудим математические основы объёмного рендеринга и расскажем о том, как реализовать его на WebGL2, чтобы создать интерактивный объёмный рендерер, полностью работающий в браузере! Прежде чем начать, вы можете протестировать описанный в этом посте объёмный рендерер онлайн.
    Читать дальше →
  • Продвинутый Three.js: шейдерные материалы и постобработка

    • Tutorial


    В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.

    Читать дальше →
    • +17
    • 3,9k
    • 2
  • Three.js — делаем controls для космосима или планетария

    Разрабатывая свой проект на тему космоса, столкнулся с тем что в three.js почему-то нет готового и удобного инструмента управления камерой, подходящего под такие задачи. Конечно я допускаю что просто плохо искал… Но, довольно продолжительный поиск результатов не дал.

    OrbitControls — традиционный любимец примеров three.js, не умеет переворачивать камеру вверх ногами, и много разного другого нужного, тоже не умеет.

    TrackballControls — замечателен тем, что камера вращается вокруг объекта как угодно, и вверх ногами тоже, но не умеет при этом поворачиваться на оси зрения, не умеет двигаться вперед-назад не меняя масштаб, нет удобной регулировки скорости движений и поворотов.

    FlyControls — напротив, позволяет делать «бочку» и менять скорость, но… куда же делось вращение камеры вокруг рассматриваемого объекта.

    Можно было, конечно, выкрутиться с помощью всяческих костылей, но как-то это не комильфо. Убедившись, что готового решения для моих целей нет, я решил создать его сам. Кто заинтересовался, прошу под кат.
    Читать дальше →
    • +13
    • 2,4k
    • 5
  • Очередное незавоевание теней в Phaser, или польза велосипедов

      Два года назад я уже экспериментировал с веществами тенями в Phaser 2D. На последнем Ludum Dare мы внезапно решили сделать хоррор, а какой же хоррор без теней и света! Хрустнул я костяшками пальцев…

      … и ни черта не успел за LD. В игре конечно есть немного света и теней, но это жалкое подобие того, что должно было быть на самом деле.

      Вернувшись домой уже после отправки игры на конкурс, я решил все-таки “закрыть гештальт” и доделать эти несчастные тени. Что получилось — можно пощупать в игре, поиграться в демке, посмотреть на картинке, и почитать в статье.

      Читать дальше →
      • +12
      • 2,3k
      • 7
    • Трехмерные презентации товаров на Three.js для самых маленьких

      • Tutorial


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

      Читать дальше →
      • +17
      • 10,4k
      • 7
    • WebGL-ветер и программирование GPU. Лекция на FrontTalks 2018

        Для отрисовки сложной графики на веб-страницах существует библиотека Web Graphics Library, сокращенно WebGL. Разработчик интерфейсов Дмитрий Васильев рассказал о программировании GPU с точки зрения верстальщика, о том, что из себя представляет WebGL и как мы с помощью этой технологии решили проблему визуализации больших погодных данных.


        — Я занимаюсь разработкой интерфейсов в екатеринбургском офисе Яндекса. Начинал я в группе Спорт. Мы занимались разработкой спортивных спецпроектов, когда были Чемпионаты мира по хоккею, футболу, Олимпиады, Паралимпиады и прочие классные события. Также я занимался разработкой специальной поисковой выдачи, которая была посвящена новой сочинской трассе.

        Читать дальше →
        • +30
        • 7,2k
        • 4
      • Как я попробовал сделать статический анализатор GLSL (и что пошло не так)

          Однажды я готовился к Ludum Dare и сделал простую игру, где использовал пиксельные шейдеры (других в движок Phaser не завезли).


          Что такое шейдеры?

          Шейдеры — это программы на си-подобном языке GLSL, которые выполняются на видеокарте. Есть два вида шейдеров, в этой статье речь идет про пиксельные (они же “фрагментные”, fragment shaders), которые очень грубо можно представить в таком виде:


          color = pixelShader(x, y, ...other attributes)

          Т.е. шейдер выполняется для каждого пикселя выводимого изображения, определяя или уточняя его цвет.
          Вводную можно почитать на другой статье на хабре — https://habr.com/post/333002/


          Потестировав, кинул ссылку другу, и получил от него вот такой скриншот с вопросом "а это нормально?"



          Нет, это было ненормально. Посмотрев внимательно код шейдера, я обнаружил ошибку в вычислениях:


          if (t < M) {
              realColor = mix(color1,color2, pow(1. - t / R1, 0.5));
          }

          Т.к. константа R1 была меньше чем M, то в некоторых случаях в первом аргументе pow получалось число меньше нуля. Квадратный корень из отрицательного числа — штука загадочная, по крайней мере для стандарта GLSL. Мою видеокарту ничего не смутило, и она как-то выпуталась из этого положения (похоже, вернув из pow 0), а вот у друга она оказалась более разборчивой.


          И тут я задумался: а могу ли я избежать таких проблем в будущем? От ошибок никто не застрахован, особенно таких, которые не воспроизводятся локально. Юнит-тесты на GLSL не напишешь. В то же время преобразования внутри шейдера довольно простые — умножения, деления, синусы, косинусы… Неужели нельзя отследить значения каждой переменной и убедиться, что ни при каких условиях не происходит выхода за допустимые границы значений?


          Так я решил попробовать сделать статический анализ для GLSL. Что из этого получилось — можно прочитать под катом.


          Сразу предупрежу: какого-то законченного продукта получить не удалось, только учебный прототип.

          Читать дальше →
        • 3D анимация — видео или интерактив?

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

            Вот пример качественно сделанной трёхмерной анимации. Как все могли догадаться, это презентация нового iPhone XS.

            image
            Читать дальше →

          Самое читаемое