• Создание шейдера дыма на GLSL

    • Перевод
    • Tutorial
    image
    [Дым на КДПВ несколько сложнее получаемого в туториале.]

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

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

    В этом туториале я подробно расскажу о создании шейдера дыма с нуля и научу вас некоторым полезным техникам разработки шейдеров, чтобы вы могли расширить свой арсенал и создавать собственные эффекты.
    Читать дальше →
    • +33
    • 6,8k
    • 8
  • Создание шейдеров

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

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


    Сцена из Minecraft, до и после добавления нескольких шейдеров.

    Задача этого туториала


    Иногда программирование шейдеров представляется загадочной чёрной магией и его часто понимают неправильно. Существует множество примеров кода, демонстрирующих создание невероятных эффектов, но в которых практически нет объяснений. В своём руководстве я хочу восполнить этот пробел. Я сосредоточусь в основном на базовых принципах создания и понимания кода шейдеров, чтобы вы смогли с лёгкостью настраивать, сочетать или писать свои собственные шейдеры с нуля!
    Читать дальше →
  • Рисование толстых линий в WebGL

    Готовые примеры


    Примеры подготовлены на базе движка OpenGlobus, который в данном случае используется как обертка над чистым Javascript WebGL.
     
    Пример для 2D случая
    Пример для 3D случая (используйте клавиши W,S,A,D,Q,E и курсор для перемещения)

    Вступление


    В процессе работы над картографической библиотекой мне потребовался инструмент позволяющий рисовать линии разной толщины. Конечно в WebGL есть механизм рисования линий, но задавать толщину линии к сожалению нельзя. Поэтому линии приходится рисовать полигонами, лучше сказать треугольниками.
    Читать дальше →
  • Производительность WebGL-приложений



      Кирилл Дмитренко (Яндекс)


      Всем привет! Меня зовут Кирилл Дмитренко, последние 4,5 года я работаю в Яндексе фронтенд-разработчиком. И все это время меня преследуют панорамы. Когда я пришел в компанию, я делал внутренние сервисы для панорам, после этого я решал задачи по панорамам на больших Яндекс.картах, а недавно сделал веб-плеер панорам на Canvas 2D, HTML и WebGL. Сегодня я хочу поговорить с вами о производительности WebGL-приложений.
      Читать дальше →
      • +29
      • 7,2k
      • 3
    • Методология VR-разработки

      • Перевод
      Данная статья является последней в цикле про качественную разработку VR-проектов. Ранее мы уже изучили принципы подбора контента для наших проектов в статье «VR Design: содержимое сцен». Ссылки на другие материалы можно найти в обзорной статье.

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

      Как соответствовать таким требованиям, чтобы разрабатывать хорошие VR-проекты, мы узнаем в этой статье.

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

      Также мы разберем, почему ты не всегда можешь доверять себе и что означает понятие «VR legs».

      You have to be super experimental and be willing to accept that a lot of the old ways of doing things just do not work at all anymore.

      Joel Green из Cloudhead Games, Группа разработки The Gallery


      Итеративный процесс разработки



      image
      Читать дальше →
    • Отчет и презентации с Moscow JS в офисе Superjob

        В офисе Superjob состоялась встреча JavaScript-разработчиков MoscowJS. Рассказываем, что обсуждали участники, и делимся презентациями.



        Александр Савин, Superjob

        Трудно переоценить важность тестирования в процессе разработки. Тестирование интерфейсов скриншотами — один из подходов, который не только вовремя сигнализирует о регрессии в CSS, но и позволяет проводить рефакторинг шаблонов и стилей, не меняя тесты, упрощает процесс ревью.
        Читать дальше →
      • Трехмерная графика в вебе

          Веб-технологии прочно вошли в нашу повседневную жизнь. Мы проводим во всемирной паутине достаточно большое количество времени — смотрим новости, совершаем покупки, общаемся и работаем. Индустрия услуг и развлечений в сети Интернет стремительно развивается, ведущие разработчики программного обеспечения улучшают поддержку трехмерной графики в своих продуктах. Традиционно ее поддержка ограничивалась высокопроизводительными компьютерами или специализированными игровыми консолями, а программирование требовало применения сложных алгоритмов. Однако благодаря росту производительности персональных компьютеров и расширению возможностей браузеров стало возможным создание и отображение трехмерной графики с применением веб-технологий.

          В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL — приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.

          image
          Читать дальше →
        • Создание вашей первой игры на Phaser. Часть 3 — Создание игрового мира

          • Tutorial

          Phaser


          Оглавление


          0. Подготовка к работе
          1. Введение
          2. Загрузка ресурсов
          3. Создание игрового мира [Вы тут]
          4. (wip) Группы
          5. (wip) Мир физики
          6. (wip) Управление
          7. (wip) Добавление целей
          8. (wip) Последние штрихи


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


          Не забывайте читать комментарии в коде, они важны!


          Весь код, как и в прошлый раз, лежит в Github репозитории с тегом part-3.

          Читать дальше →
          • +21
          • 6,8k
          • 6
        • VR Design: содержимое сцен

          • Перевод
          Данная статья является пятой в цикле про качественную разработку VR-проектов. Ранее мы уже изучили принципы VR-дизайна в статье «VR-Design: User Interface». Ссылки на другие материалы можно найти в обзорной статье.

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

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

          Что стоит показывать, а что нет, какой посыл несет наша работа и как мы хотим общаться с пользователем. При разработке VR-проектов необходимо придерживаться определенных рамок.

          Глубокое погружение дает нам большое влияние на эмоции пользователей. С этой большой ответственностью нужно обходиться очень осторожно.
          image
          Читать дальше →
        Самое читаемое