Java, UX, HTML, CSS, WEB-design

30 потрясающих примеров и демонстраций WebGL

Краткое описание по статье 30 потрясающих примеров и демонстраций WebGL

Название: 30 потрясающих примеров и демонстраций WebGL . Краткое описание: ⭐ WebGL (библиотека веб-графики) была выпущена пару . Дата публикации: 19.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


WebGL (библиотека веб-графики) была выпущена пару лет назад. Его способность использовать элементы HTML5 Canvas для динамического создания графики упростила веб-дизайнерам и разработчикам создание плавных 2D- и 3D-эффектов. Вот несколько примеров и демонстраций WebGL, на которые стоит обратить внимание.
WebGL — это ответвление OpenGL, основанное на встроенных системах OpenGL (ES). Это API JavaScript для рисования 2D- и 3D-графики в совместимом веб-браузере с холстом HTML5 без использования плагинов.

Ваш набор инструментов веб-дизайнера
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна



Этот Javascript API управляется консорциумом некоммерческой технологии Khronos Group и работает вместе с Mozilla Foundation. С начала 2009 года они разрабатывают прототипы и внедряют такие технологии.

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

Так что устройтесь поудобнее и расслабьтесь, запустите свой последний браузер и посмотрите эти потрясающие демонстрации WebGL.

Аквариум

аквариум

Создан Греггманом и Human Engines. Аквариум почти полностью работает по часам. Это означает, что положение камеры и каждой рыбы будет одинаковым на всех машинах, если их часы синхронизированы. В сетевом режиме каждая машина синхронизирует свои часы, периодически запрашивая у сервера текущее время.

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

Рим

Полуинтерактивный фильм, созданный Крисом Милком. Он был создан с использованием технологии, разработанной Google. Он работает с Chrome, смешивая 2D и 3D компьютерную графику, демонстрируя песню «Black» Danger Mouse и Дэниела Луппи с Норой Джонс и Джеком Уайтом.

куб

куб

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

Полет штурмана

полет

Неинтерактивное музыкальное видео, визуализируемое в режиме реального времени с помощью JavaScript и WebGL с интеграцией Flickr и Twitter, разработанное командой Mozilla Audio API.

Злые птицы

злые птицы

Веб-версия Angry Birds, созданная Rovio. Это версия с низким разрешением (SD), основанная на 2D-холстовой игре без аппаратного ускорения.

Чемдудл

молграббер

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

Хрисаора

Хрисаора

Динамическая демонстрация Jellyfish WebGL, созданная с помощью матричной библиотеки Владимира Вукичевича mjs. Он демонстрирует смоделированные скелеты, частичную симуляцию на стороне сервера и синхронизацию с WebSocket, камеру, обращенную к системе частиц, и объемный световой эффект.

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

книги

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

Просто рефлектор

отражатель

Just a Reflektor — это группа, музыкальное видео Arcade Fire, созданное совместно с Google. Используя мышь, вы можете настроить различные фильтры и эффекты в реальном времени. Для этого WebGL потребуется веб-камера или просто мышь.

WebGL Земля

webgl-земля

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

3Dолово

3дтин

3Dtin — это простой в использовании инструмент для создания фигур с естественным воксельно-ориентированным 3D-пиксельным подходом с функцией экспорта вашего проекта в сервисы 3D-печати.

Биоцифровой человек

биоцифровой

BioDigital Human — это виртуальное трехмерное тело, которое воплощает в жизнь тысячи точных с медицинской точки зрения анатомических объектов и состояний здоровья на интерактивной веб-платформе.

Кубик Рубика WebGL

Рубикс

Апплеты кубика Рубика от Java до WebGL, разработанные Вернером Рандельсхофером. Части кода взяты из демо-репозитория WebGL. Коды, используемые в этом WebGL, защищены авторским правом Apple Inc. и Google Inc. и используются с их разрешения.

ВидеоFX

видеоэффект

Разработано Дэниелом Паттерсоном с использованием кода Google. Это позволяет вам играть с цветом видео, таким как контраст и оттенок.

ГЛГЭ

блеск

Разработанная Полом Брантом и используемая в качестве основы для создания WebGL, это библиотека JavaScript, предназначенная для упрощения использования WebGL, позволяющая использовать аппаратно ускоренные 2D/3D-приложения без необходимости загружать плагины.

Ctrl+[P]апер

Ctrl

Цифровая студия Grouek разработала этот веб-сайт Web GL, который позволяет любому создать бумажную игрушку за 3 простых шага. Когда вы закончите, распечатайте PDF-файл, вырежьте, сложите и склейте, следуя инструкциям. За меньшее время, чем вы думаете, красивая, уникальная бумажная игрушка, сделанная своими руками, будет гордо стоять на вашем рабочем столе.

Праздничное сообщение

праздничное сообщение

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

новая неопределенность

новеллевагу

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

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

измененная квалия

С помощью этого WebGL вы можете просматривать 3D-облики Bugatti Veyron, Lamhini Gallardo, Ferrari F50 и Chevrolet Camaro в своем браузере. Выберите свою поездку и наслаждайтесь видом. Угадайте, что вы даже можете выбрать их цвета.

Художник по предметам коллекционирования

Коллекционные предметы

Collectibles Painter — это конструктор коллекционных фигурок на основе WebGL, который позволяет вам создавать свои собственные коллекционные игрушки с красками, наклейками и материалами. Затем вы можете поделиться своим любимым творением с друзьями. Выбирайте из 10 различных оттенков кожи, лиц, причесок и тому подобного. К графическим эффектам относятся:

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

Землетрясение 3

трясти

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

Фильтр изображений WebGL

Фильтр изображений

Графический редактор WebGL от Эвана Вондрасека с плавным и быстрым интерфейсом. Вы можете поиграть с эффектами фильтра, такими как яркость и контрастность, похожими на функции, которые вы видите в Photoshop.

Из пыли

из пыли

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

Акко.нет

акко

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

Рельеф WebGL

WebGL-местность

Демонстрация WebGL с динамическим процедурным ландшафтом с использованием 3D-симплексного шума. В нем представлены птицы из ro.me, а фоновый звук написал Кевин Маклид.

Песни Диридума

Песни Диридума

Эта демонстрация WebGL предлагает настоящий опыт веб-джаза в стиле hi-fi в трехмерном волшебном воксельном мире с WebGL и WebAudio. Используйте клавиши WASD, наиболее распространенную комбинацию клавиш со стрелками для навигации. Используйте панель управления, чтобы сделать ремикс джаз-бэнда. Он был разработан Goo Technologies.

Фейерверк

фейерверк

Простой фейерверк с использованием WebGL и Web Audio API, разработанный Яакко Ринта-Филиппула.

Вода WebGL

webgl-вода

Эксперимент Эвана Уоллеса, который представляет собой интерактивную сцену с мячом в бассейне с повторными отражениями и преломлениями, аналитическим эмбиентным затенением, каустикой и мягкими тенями.

Редактор рельефа WebGL

местность

WebGL Terrain Editor, созданный Робом Чедвиком, представляет собой удивительный WebGL с техническими функциями, которые позволяют создавать собственные ландшафты в режиме реального времени. Он имеет некоторые потрясающие эффекты, такие как мягкие и объемные тени с трассировкой лучей.

привет гонщик

хеллорасер

WebGL, созданный HelloEnjoy, представляет собой интерактивную игрушечную 3D-машину, на которой вы можете ездить по экрану. Вы можете наклонять, чтобы управлять, коснуться вправо, чтобы ускориться, и влево, чтобы дать задний ход. Проведите пальцем вправо или влево, чтобы перезапустить, если вы заблудились.

Подведение итогов

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

Есть много предложений от Mozilla и Google по усилению безопасности, которые могут помочь в будущем развитии этой технологии.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 30 потрясающих примеров и демонстраций WebGL

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»