Впечатляющие примеры WebGL

    Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них just for fun, но некоторые могут быть уже сегодня использоваться на живых сайтах. В этом топике собраны наиболее интересные примеры использования WebGL, спасибо двум постам Дэвида Уолша (David Walsh) и сайту WebGL Experiments.

    Google Maps Cube


    Необычная игра, где нужно гонять шарик по лабиринту из улиц Google Maps, доставляя метку в определенные места на карте. И все это расположено на кубе. Осторожно, можно залипнуть надолго!

    image

    Nucleal


    Красивый эффект слайдшоу, который может применим на практике, например для перехода между фотографиями в галерее.

    image

    Interactive Globe


    Еще один полезный пример — очень эффектная инфографика, показывающая динамику импорта и экспорта вооружения разных стран с 1982 по 2010 годы.

    image

    Cube Slam


    Аэрохоккей с медведем. И добавить тут нечего.

    image

    Roll It


    Игра из Chrome Experiments, где с помощью акселерометра телефона можно управлять шариком, бросая его в мишени.

    image

    Ironbane MMO


    Небольшая трехмерная MMO игра с забавным персонажем.

    image

    Blossom


    Очень красивый эффект падающих с дерева листьев. Автор Yi-Wen Lin.

    image

    WebGL water


    Удивительно реалистичный эффект воды, можно управлять шариком внутри бассейна, а также вращать всю сцену. Автор Evan Wallace.

    image

    Pearl Boy


    Реалистичная вода и закат.

    image

    Teach Me to Fly


    Симуляция полета странного персонажа между небоскребами.

    image

    Fizzy Cam


    Можно управлять летящими квадратиками с помощью веб-камеры. Автор Tim Holman.

    image

    PS Поддержка WebGL браузерами на сайте Can I Use.
    Поделиться публикацией

    Похожие публикации

    Комментарии 23

      +4
      Очень качественный аэрохокей с бонусами!
        +1
        Правда больше это походит на пинг-понг
        0
        Внезапно вопрос: кто-нибудь располагает информацией о переводе книги «WebGL: Up and Running» (ISBN:978-1-4493-2357-8)?
          –1
          3Д-сайт — замечательно. Но делать на этом игры — затея странная. Сегодня уже только ленивый не выкатил в браузер свой 3Д-движок для создания игр. Конкурировать с ними? Удачи…
            +7
            На мой взгляд, 3D сайт — это ужасно, хуже, чем сайт на флеше. 3D в браузере подходит только для виджетов и приложений, которые завязаны на 3D — просмотрщик реальных объектов, конструкторы, карты и интерьеры с FPV, библиотеки 3D моделей и т.д. Игры будут отставать от 2D, в браузере нет хардкорных игроков (вернее они есть, но не для того, что бы играть), тут рулит казуальщина — ей 3D и боком не надо, разве что если совсем «бесплатно» достанется (3D будут поддерживать все целевые устройства, а в штате будет уже куча тридешников и аниматоров достаточного уровня)
              +1
              ИМХО они рассчитывают на будущее. Суть не в самом 3D сайте пока что, а в проявлении возможностей. Что мол можно натворить такое в браузере. Да и почему бы на сайте авто, допустим не размещать 3D модели автомобилей на том же 3D — шном фоне, да еще и чтобы повертеть самому можно было. В общем применение найдется и я думаю оно будет грамотным. А пока просто демонстрация, да и в общем возможность смотреть в этом направлении.
            +1
            Много других демо: threejs.org/ и threejs.org/examples/
              +2
              Отличная библиотека, использую для своих проектов (правда там красивости не нужны).
              +3
              Симуляция полета странного персонажа между небоскребами.

              Обычный пингвин, летающий на дельтаплане.
                +1
                Это не обычный пингвин! Это маскот linux'а — Tux.
                0
                Все эти примеры — детский сад по сравнению с новым Google Maps, который использует для отрисовки векторной карты WebGL.
                  0
                  Кто-нибудь располагает информацией по движку www.gooengine.com? Отправил запрос на инвайт, уж больно сильно вкусно выглядит.
                    0
                    подвис на аэрохоккее :) а вообще из реальных применений, как уже написали выше, это новый Google Maps — шустро, красиво, юзабельно
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        Я думаю пользователи 486-го думали также.
                          0
                          Да, мы действительно этого хотим. А компьютер вам пора поменять, если хотите пользоваться новыми технологиями.
                          0
                          Это? Впечатляюще?

                          Вот тут вот есть демка uningine на webgl: crypt-webgl.unigine.com/game.html
                            0
                            «Unigine», ошибся.
                            +5
                            Не знаю уж, насколько мой пример будет «впечатляющим». Делаю для души, как могу.
                            В общем, небольшое приложение, где можно вырастить свой цветок (рандомный, многопараметрический).
                            Через three.js использую WebGL если это возможно, если нет — рендерится библиотекой по canvas-у.

                            В результате получается, например, вот такое:

                              +2
                              Задам ожидаемый вопрос — нет ли у вас публичной демки? Может даже есть репозиторий на гитхабе.
                              0
                              Показывал 3д-модели ювелирки заказчику. Очень удобно: можно покрутить, приблизить, просмотреть детали.
                                0
                                qiao.github.io/euphony/#106 — интересная визуализация классической музыки

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

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