30 экспериментов WebGL, которые просто вау!

Вот, великий инструмент с большими обещаниями приближается к твоим глазам. Это быстро и гладко. Он визуализирует 3D, и с интеграцией он оживляет, угадайте, что это такое? HTML5? CSS3? Нет, она называется WebGL, программная библиотека, которая расширяет возможности JavaScript для создания интерактивной 3D-графики, и да, без каких-либо плагинов.!

В этой витрине мы не хотим показывать вам обычные вещи. Мы хотим продемонстрировать вам 30 эксперимент WebGLОни тщательно разработаны профессиональными разработчиками, чтобы вы могли убедиться в истинной силе WebGL, которая не только вдохновляет, но и позволяет взглянуть на то, как может выглядеть будущее сети. Прыгай в будущее после клика!

Настоятельно рекомендуется просмотреть эти демонстрации, используя последнюю версию Google Chrome для разработчиков. Большинство демонстраций поддерживают последнюю версию Firefox, Google Chrome и Safari, хотя.

3 мечты о черном

Созданная командой разработчиков Google Data Arts, 3 Dreams of Black объединяет в себе 3 мира снов, построенных с помощью комбинации богатых 2D-рисунков и анимаций, переплетенных с интерактивными 3D-последовательностями. Проверьте чудеса для прекрасного опыта!

Частицы анимированных томов

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

Аквариум

Имитировать подводную среду? Это не проблема для WebGL. Демонстрация включает в себя 3D-модели с высококачественными текстурами, анимацией сцены, анимацией пиксельного шейдера, отражениями, преломлением и каустикой - все, что нужно для создания реалистичной подводной сцены.!

азатиоприн

Наверное, самая эпическая демоверсия WebGL. Шляпный наконечник автору Jochen Wilhelmy.

Поездка аттракторов

Если вы хотите испытать 3D, это лучшая демонстрация для вас, а также медитируйте с огромной красотой графики, генерируемой WebGL, используя формулу Мартина Хопалонга.

медуза

“Процедурное моделирование выполнено с помощью Side FX Houdini. Экспортируется с экспортером Python в формат json. Текстура окрашена с помощью Autodesk Mudbox. Анимированные с помощью вершинного шейдера.”

Chrysaora

Это не обычная анимационная демонстрация, но в ней представлены динамически смоделированные скелеты, частичное моделирование на стороне сервера и синхронизация с WebSocket, система частиц, обращенная к камере, эффект объемного света и матричная библиотека mjs Владимира Вукичевича. Короче, удивительный эксперимент со сложными работами.

HelloRacer

Представляем высокопроизводительный интерактивный симулятор автомобиля, представленный эксклюзивно компанией HelloEnjoy.

Материалы: Автомобили

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 и Chevrolet Camaro в вашем браузере. Выберите свою поездку и наслаждайтесь видом. Черт, вы даже можете выбрать их цвета.

Автомобили WebGL

Будущее серии Need For Speed ​​будет в веб-браузере. Слишком амбициозный? Конечно, нет, если вы посетили эти машины, которые отображаются с динамическими кубическими картами, теневыми картами и эффектами постобработки.

Мой робот нации

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

Pacmaze

Как насчет 3D-игры Pac-Man? Графика и геймплей хороши, а главное, это весело!

Красная стрельба

Теперь вот милый ... или кровавый. Это всего лишь интересная игра, демонстрирующая возможности WebGL, когда она превращается в шутер сверху вниз. Весело и забавно наверняка.

TankWorld

Вы угадаете, это приятная игра-танк-шутер с оружием и картами для исследования, а на некоторых уровнях вы даже можете получить вертолет, чтобы исследовать мир! Это действительно больше, чем обычная игра, и графика выглядит комфортно!

Pulpo

Лучший пример того, как простая графика и анимация могут произвести впечатление на людей, когда они сделаны правильно.

поверхность

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

Фото частицы

Просто поместите ваш любимый образ в эту демонстрацию и наслаждайтесь, наблюдая, как он взрывается в кучу частиц и взаимодействует с какой-то формой магнетизма. Эксперимент представляет собой сочетание четырех технологий: перетаскивание HTML5, File API, Canvas и WebGL..

Rutt-Etra-Izer

Rutt-Etra-Izer - эмуляция WebGL классического видео-синтезатора Rutt-Etra. Демо-версия позволяет вам размещать свои собственные изображения внутри и манипулировать ими. С этим материалом, 2D изображение может даже выглядеть как 3D!

Бродячий танец

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

Ultranoir

Еще один замечательный эксперимент, демонстрирующий потенциал WebGL. Nouvelle Vague предлагает поэтическую и интерактивную 3D-игру в реальном времени на основе Twitter, и вы увидите твиты, которые выполняются с различными летающими объектами. Конечно, художественный способ наслаждаться твитами.

Волнистая Обезьяна

“На этот раз я просто хотел сделать тест, чтобы увидеть, сколько позиций вершин и нормалей я могу обновить непосредственно в JavaScript. Оказывается, 2000 просто отлично :) Я также добавил немного картографирования окружающей среды. И странность. Всегда добавляй странности.”

Видео FX

Впечатляющее приложение от Daniel Pettersson, позволяющее вам применять несколько эффектов одновременной постобработки к трейлеру Happy Feet 2. Попробуй и повеселись!

Voxels Liquid

Трехмерное представление классического алгоритма 2D-эффекта воды, также показывает, насколько интерактивен WebGL.

Книжный шкаф WebGL

Просмотрите более 10 000 обложек книг с помощью этого книжного шкафа WebGL, разработанного командой Google Data Arts. Вы также можете выполнить поиск по теме, открыть 3D-модель каждой из них, щелкнув по ней, и загрузить книги на свой телефон с помощью QR-кода..

WebGL Globe

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

Полеты мира

Еще одно перспективное приложение для визуализации данных, которое визуализирует маршруты полетов основных авиакомпаний, выглядит многообещающе!

WebGL Image Filter

Приложение графического редактора с WebGL? Это никогда невозможно. Лучше всего, это быстро и гладко!

WebGL Water

“Бассейн воды с отражением, преломлением, едкостью и окклюзией окружающей среды. Бассейн моделируется полем высоты и содержит сферу, которая может взаимодействовать с поверхностью воды..”

отражение

Самая большая проблема, с которой столкнулся WebGL, - это, пожалуй, ее безопасность. Согласно Википедии, группа по готовности к компьютерным чрезвычайным ситуациям в США (US-CERT) выпустила предупреждение о том, что WebGL содержит множество возможных проблем безопасности, которые могут привести к выполнению произвольного кода, отказу в обслуживании и даже междоменным атакам. Это очень много значит для владельца сайта.

Тем не менее, группа Khronos, в которую входят Mozilla и Google, предлагает возможные решения и подход к будущему развитию для усиления защиты от возможных угроз безопасности. Надеемся, что проблемы могут быть уменьшены и даже решены в будущем, поскольку у WebGL столько возможностей, что продемонстрировали талантливые и профессиональные разработчики.!

Дайте нам знать, какой эксперимент поражает вас больше всего, и, конечно же, покажитесь нам, если вы его получили!

Больше похожих постов:

• Веб-сайт HTML5: 48 потенциальных демонстрационных роликов
• Веб-сайт HTML5: еще 15 экспериментов
• Вдохновляющие демонстрации анимации CSS3