Программист, микроинвестор, папа
0,0
рейтинг
12 октября 2011 в 22:50

Разработка → Наиболее впечатляющие приложения HTML5 для демонстрации WebGL

HTML*
Что такое WebGL? Это новая современная библиотека, которая расширяет язык JavaScript, которая позволяет генерировать 3D графику прямо в браузере. WebGL, поддерживается многими современными веб-браузерами, такими как Google Chrome, Mozilla Firefox начиная с v4.0), Safari. Под катом несколько интересных приложений HTML5, сделанных с WebGL.

1. Демонстрация освещения головы


3D голова в отличном качестве


2. Демонстрация динамического освещения


По коридору ходит человек и рядом с ним летает светящаяся сфера


3. Главное не сбивать кубики


Небольшая браузерная игра. Вы управляете шаром, который постоянно катится вперед и можно его двигать только влево-вправо, объезжая кубики. Если врезались, то игра заканчивается.


4. Змейка


По пустыне ползет питон. Прямо как на Nokia, только собирать ничего не нужно. Тем более можно только наблюдать за ней.


5. Симуляция водной поверхности


Есть бассейн с водой и шар, который можно перемещать. В результате перемещений шара по бассейну возникают волны. Очень красиво смотрится.


6. Бесконечный лес


Летим по бесконечному ночному лесу.


7. Кубики


Даются 25 кубиков, которые собраны в стену. Теперь можно разбить всё, как в детстве.


8. Гуляющие волны


Очень интересная визуализация.


9. Колебания головы обезьяны


Голова обезьяны меняет свой вид.
Михаил Лямин @BusteR27
карма
17,0
рейтинг 0,0
Программист, микроинвестор, папа
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (59)

  • +39
    Меня больше впечатлило это.
    • 0
      Да, впечатляет!
      • 0
        Машинки — рулят!
    • +7
      Если машинки, то вот это:
      helloracer.com/webgl/
    • +2
      Вы сделали меня застывшим в легком трепете на минуту где-то…
    • +4
      А я так надеялся их столкнуть…
    • 0
      Интересно…
      а почему так медленно? Фпс совсем не впечатляет. У меня всего 12 FPS?

      Я тут смотрел демки альтернативы
      www.alternativaplatform.com/ru/demos/crash/
      www.alternativaplatform.com/ru/demos/maxracer/

      тут с фпс все в порядке, если отключить сглаживание. 30-33.
      Да и картинка у альтернативы получше…

      Это как то обусловленно платформой и технологией? Или демки не достаточно оптимизированны?

      • 0
        Когда я игрался с этой демкой, у меня всё было быстро и плавно. Сейчас почему-то мне говорят, что моя видеокарта не поддерживает WebGL.
        И это на ноутбуке двухгодичной давности с начинкой в GF 103M, Intel Pentium Dual Core T3400 2.16GHz, 3Gb RAM.
  • +6
    А мне с водой и шариком в бассейне очень понравилось, выглядит крайне реалистично. Спасибо автору!
    • 0
      Единственное, что у меня не заработало :(
  • +8
    А какое отношение WebGL имеет к HTML5? И WebGL это уж точно не библиотека, это одобреный WHATWG контекст для элемента Canvas.
  • +3
    Включил шарик в воде, браузер FF7 долго-долго думал, пару раз предложил остановить сценарий, потом черный экран, ошибка драйверов видеокарты, опять черный экран. В итоге синий экран смерти и ребут :(

    «41 Kernel-Power — Критический — 12.10.2011 23:32:05»
    • +1
      Убить Билла за это!
      • 0
        Может не Билла, а видеокарту, ИМХО
        • +1
          У меня не видеокарта, а «набор микросхем» Intel GMA 965 :(
    • 0
      Opera 12 тоже отказывается запускать, «This demo requires the OES_texture_float extension»… И голова обезьянки то ли не грузится, то ли не рендерится.
      А так, все остальное — шикарно! Наконец-то операфилы могут воспользоваться всеми благами современного интернета.
      • 0
        Но только с сегодняшнего дня.
      • 0
        Думаю, что это связано с видеокартой и драйвером. Или в других браузерах у вас всё ок?
        • 0
          В Firefoxe все нормально отображается. При этом opera:gpu показывает, что необходимые м-м… компоненты присутствуют.
  • +14
    Я просто оставлю это здесь: temp.roxik.com/datas/perform/index.html
    flash. 2007 год.
    • +13
      Я бы на вашем месте оставил здесь это:
      Unreal Engine 3 на FP11
      Движок Alternativa3D

      Не холивара ради, а так, для сравнения.
      • +6
        Да я хотел написать что-то типа то Roxik — 2007 а Alternativa3D — сегодня, Unreal Engine 3 — завтра. Там ещё крайтек обещает что-то. Но решил что и этого достаточно.
        • –2
          Кстате, а можно ссылку на какую-то штуку, в которую можно поиграться в 3Д из браузера при помощи моего установненного флеш плеера 11?
          А то для Unreal Engine я только видео видел. Альтернатива — вообще не стоит рядом даже с Unity. Да и вообще, современным движком ее называть грех.
          • –2
            я не тролю и без сарказма. Можно какую-то живую ссылку на что-то годное сделанное на одном из этих движков?
            • +3
              А что непонятного было? Вот конкретная ссылка на конкретную демку.
              alternativaplatform.com/ru/demos/crash/
              У меня 40-60 FPS выдает без проблем.
              • +3
                На маке плагин сожрат 100% и умер. В то время как игры на Unit3d спокойно играются и игрались год назад. Flash не нужен. Альтернатива3d это очень редкая форма копрофилии.
                • +1
                  Дело во Flash Player, он пока не очень стабильно работает на отличных от Windows платформах и Molehill не все видеокарты поддерживает, но это временно.
                  • 0
                    Оно временно уже столько же времени, сколько флэш существует.
                    • 0
                      Ну почему же, вот даже стабильную поддержку x86_64 выкатили! В октябре 2011 года, лол. Через несколько лет может и Alternativa заработает.
    • –2
      лол. А уверени что и зачем здесь эта штука на спрайтах? Там от 3Д только ощущение
    • +1
      Так это не 3d, сферы — картинки
      • 0
        Присмотритесь внимательнее, у сфер внутри пузырёк воздуха, и он крутится.Да это не совсем то 3D, но его тоже не получится повторить сейчас без флеша.
    • +1
      есть один маленький недостаток ;)
  • +3
    Смотрел демки и параллельно на индикатор загрузки цп, впечатляет!)
  • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Пока больше всего впечатлений от ro.me.
    • –1
      круто!
    • +1
      Это очень здорово!
      Я верю, что когда-нибудь такой интерактив придет и в обычные фильмы.
  • +1
    Гуляющие волны я бы скринсейвером поставил. Знать бы способ
  • +3
    Делал когда то подборку для статьи, но запостить не было возможности.
    Поэтому вот часть действительно интересных демок.

    Движки:
    glge.org/demos/
    www.ambiera.com/copperlicht/ — Flash и WebGL

    Рендер уровней iOS RAGE:
    www.youtube.com/watch?v=d0S2dsuSxHw
    Team Fortress 2:
    www.youtube.com/watch?v=DQrC5YLKFUY

    Рендер minecraft карт:
    www.youtube.com/watch?v=2Moe24BzPdU

    Игры:
    www.playtankworld.com/
    www.tubagames.net/
    cycleblob.com/
    RPG:
    nicolas-bonnel.github.com/WARPG/index.html

    Платформа удаленного рендеринга:
    cloudmach.com/
    cloudmach.com/vizerra/demo/

    И просто красивая демка:
    plopbyte.net/webgl-particles-demo/
  • +1
    Нет слов. Я живу в прекрасное время)
  • +4
    Примеры действительно потрясающие, но до сих пор, даже на новом железе и сильном видео WebGL подтупливает через каждые несколько секунд (хоть все примеры и показывают постоянные 60fps). В сравнении с любыми даже самыми навороченными 3D приложениями на том же Flash — производительность у него не ахти, что весьма странно…
    • 0
      Это сильно разниться в зависимости от браузера, ОС, производителя железа и версии драйверов.
      Molehill же работает поверх API (на Windows это Direct3D), поэтому этот API всегда будет работать чуть более гладко.
      • +1
        ОС/ПО:
        Windows 7 x64 SP1, Chrome

        Железо (ноутбук):
        Intel Core i7 2630QM, DDR3 1333 MHz SDRAM, NVIDIA GeForce GTX 460QM (3GB GDDR5 VRAM)

        Версии драйверов последние (всегда стараюсь держать их в актуальном состоянии).

        Весьма странно что ни с Flash, ни с одним 3D приложением или даже самой современной игрой никаких проблем не возникает даже на высоких настройках, а банальный (даже самый простой) WebGL canvas подтормаживает (по идее он и без Hardware-ускорения должен летать на этом железе).

        Хотя это даже не тормоза, а скорее какой-то внутренний процесс, происходящий каждые 2-3 секунды и успешно подвешивающий канвас на долю секунды. Происходит это во всех примерах с использованием WebGL, так что вряд ли это косяки отдельных реализаций. В общем что-то странное. Но так как для меня подобные возможности браузеров некритичны (да и толком они нигде на данный момент не применяются) — особо не парился с поиском корня проблемы. Вероятно через год-два когда технологию доведут до ума…

        P.S. В хроме…
        Canvas: Hardware accelerated
        3D CSS: Hardware accelerated
        Compositing: Hardware accelerated
        WebGL: Hardware accelerated
        WebGL multisampling: Hardware accelerated
        • –1
          Ну значит это проблема сочетания софта/железа x64 лично у вас.
          У меня на куда более старом железе никаких лагов нет, ни в одном браузере.
          • 0
            Завтра попробую на абсолютно другом железе/ОС — посмотрю как там будет.
  • +1
    в примере №4 с змейкой музыка очень атмосферная, слушаю уже 3-й круг, благо она зациклена
  • +1
    Еще некоторые примеры описаны здесь
    webrowser.ru/rasshireniya/14-prekrasnyx-primerov-ispolzovaniya-webgl.html

    П.С. Возможно, сегодня выйдет сборка Opera Next с поддержкой ускорения и WebGL 3D. Все эти примеры можно будет попробовать в ней.
  • –1
    Мое мнение — WebGL мертвая технология, тк JavaScript слишком тормозной для написания чего-нибудь ресурсоемкого. Будущее за такими технологиями как Unity3d ( например www.facebook.com/apps/application.php?id=207689995920190 ), NativeClient и тд
    • 0
      >WebGL мертвая технология, тк JavaScript слишком тормозной для написания чего-нибудь ресурсоемкого

      «Ваш порш — говно, на нем тонну картошки не увезешь»
      • 0
        Если действие происходит в селе, где у автомобиля основная функция возить картошку и тп, то да, порш — говно :)
        • 0
          действие происходит в интернете, а интернет — не только для игр. WebGL — отличный инструмент для своего круга задач, писать crysis в браузере никто пока не предлагает
  • 0
    Ждем 3d движок для браузеров работающий без каких-либо плагинов
    • 0
      А для WebGL нужен плагин?
      • 0
        ждем движок, основанный на WebGL получается…
        • 0
          Есть же three.js! Примеры со змейкой и головой сделаны на нем, как и ROME. По первой ссылке есть много других интересных примеров.
  • 0
    Если скрестить 3 и 6, то выйдет Dead Runner

    image
    • 0
      Шарика не хватает =)
  • +1
    Странно, но почему то почти все примеры говорят, что WebGL не установлен, но шарик упорно работает нормально.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.