30 експериментів WebGL, які просто Wow!
Ось, бо велике знаряддя з великими обітницями приходить на ваші очі. Це швидко і гладко. Він відтворює 3D, і з інтеграцією він оживляє, здогадайтеся, що це таке? HTML5? CSS3? Ні, це називається WebGL, бібліотека програмного забезпечення, яка розширює можливості JavaScript для створення інтерактивної 3D-графіки, і так, без будь-яких плагінів!
У цій вітрині ми не хочемо показувати вам звичайні речі. Ми хочемо показати вам 30 Експеримент WebGLЇх ретельно розробляють професійні розробники для того, щоб ви могли бачити справжню міць WebGL, яка не тільки надихає, але й дає вам змогу побачити, як може виглядати майбутнє Інтернету. Перехід у майбутнє після клацання!
Настійно рекомендується переглянути ці демонстрації за допомогою останньої версії Google Chrome для розробника. Більшість демонстрацій підтримують останню версію Firefox, Google Chrome і Safari.
3 Мрії про чорний
Автор Dreams of Black, створений командою Google Data Arts, вводить 3 світів мрії, побудованих за допомогою поєднання багатих 2D малюнків і анімацій, переплетених з інтерактивними 3D-послідовностями. Перевірте чудеса для чудового досвіду!
Анімовані частки обсягу
Це дійсно художнє - анімовані тварини, побудовані за допомогою 3D-частинок, які використовують флоат-текстури та буферизуючі об'єкти. Більше сюрприз, якщо перемістити мишу!
Акваріум
Моделювати підводне середовище? Це не є проблемою для WebGL. Демо демонструє 3D-моделі з високоякісними текстурами, анімацією сцени, анімацією піксельних шейдерів, відображеннями, рефракцією і каустикою, все, що потрібно для реалістичної підводної сцени!
Азатіоприн
Ймовірно, це найбільш епічне демо WebGL. Капелюх підказка автору Йохану Вільгельмі.
Подорож аттракціонів
Якщо ви хочете відчути 3D, це найкраща демонстрація для вас, а також подумайте про величезну красу графіки, створеної WebGL, використовуючи формулу Мартіна Хопалонг..
Медузи
“Процедурне моделювання здійснюється з Side FX Гудіні. Експортується з експортером Python у формат json. Текстура пофарбована за допомогою Autodesk Mudbox. Анімовані за допомогою вершинного шейдера.”
Chrysaora
Це не регулярна анімаційна демонстрація, але вона містить динамічно модельовані скелети, часткове моделювання і синхронізацію на стороні сервера з WebSocket, систему частинок, що стоять перед камерою, об'ємний світловий ефект і бібліотеку mjs матриці Vladimir Vukićević. Коротше кажучи, дивовижний експеримент зі складними роботами.
HelloRacer
Представляємо високоякісний інтерактивний автомобільний симулятор, принесений Вам виключно HelloEnjoy.
Матеріали: Автомобілі
Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 і Chevrolet Camaro у вашому браузері. Виберіть свою поїздку і насолоджуйтеся видом. Чорт, ви навіть можете вибрати їх кольори.
Автомобілі WebGL
Майбутнє серії Need For Speed буде показано у веб-браузері. Занадто амбітні? Звичайно, якщо ви відвідали ці автомобілі, які надані динамічними картами кубів, тіньовими картами та ефектами постобробки.
Мій робот нації
Ну а якщо фігура не ваша улюблена, то спробуйте побудувати крутого і чарівного робота і покажіть своєму другові! Ви навіть можете витратити свої гроші, щоб зробити це реальною угодою.
Pacmaze
Як щодо 3D ігри Pac-Man? Графіка і геймплей приємні, а головне це весело!
Червоний капот зйомки
Тепер ось милий ... або кривавий. Це не що інше, як цікава гра, щоб показати вам можливості WebGL, коли вона розроблена в грі зверху вниз. Забавно і весело.
TankWorld
Ви здогадуєтеся, приємна танка шутер з зброєю для використання і карти для вивчення, і в деяких рівнях ви навіть можете отримати вертоліт для вивчення світу! Це дійсно більше, ніж просто звичайна гра, а графіка виглядає зручно!
Pulpo
Кращий приклад того, як проста графіка та анімація можуть вразити людей, коли вони зроблені правильно.
Поверхня
Ознайомтеся з елегантним і надихаючим експериментом Surface, зробленим Полом Льюїсом. Ви можете не тільки змінювати величину, еластичність, автоматичну орбіту, каркас і краплі дощу в демонстраційній версії, але й перетягувати свої власні зображення, щоб відчути ефект по-різному.
Фоточастинки
Просто перетягніть улюблене зображення в цю демонстрацію і насолоджуйтеся тим, як вона вибухає в тонну частинок і взаємодіє з певною формою магнетизму. Експеримент - це комбінація чотирьох технологій: перетягування HTML5, API файлів, полотна і WebGL.
Rutt-Etra-Izer
Rutt-Etra-Izer - емуляція WebGL класичного відео синтезатора Rutt-Etra. Демо дозволяє розмістити власні зображення всередині і маніпулювати ними. За допомогою цього матеріалу 2D-зображення може навіть виглядати як 3D-зображення!
Танець гойдання
Просте, але вражаюче демо, яке показує, наскільки рідким може бути WebGL, з анізотропним світловим шейдером і деформацією вертексних коливань.
Ультраніор
Ще один великий експеримент, який демонструє потенціал WebGL. Nouvelle Vague пропонує поетичний та інтерактивний 3D-досвід у реальному часі, заснований на Twitter, і ви побачите, що це твіти, які виконуються з різними літаючими об'єктами. Звичайно, це художній спосіб насолоджуватися твітами.
Мавпа хвиляста
“На цей раз я просто хотів зробити тест, щоб побачити, скільки вершинних позицій і нормалів я міг би оновлювати безпосередньо в JavaScript. Виявляється, 2000 просто чудово :) Я також додав в трохи відображення навколишнього середовища. І дивно. Завжди додайте дивацтва.”
Відео FX
Вражаюче додаток зроблено Даніелем Петтерсоном, що дозволяє застосовувати декілька одночасних ефектів постобробки до трейлера Happy Feet 2. \ t Спробуйте і отримуйте задоволення!
Рідина Voxels
3D представлення класичного алгоритму 2D ефекту води також показує, як є інтерактивний WebGL.
Книжкова шафа WebGL
Ознайомтеся з більш ніж 10 000 обкладинок книг за допомогою цієї книжкової шафи WebGL, розробленої командою Google Data Arts. Ви також можете здійснювати пошук за тематикою, відкривати 3D-модель кожного з них, натискаючи на нього, і завантажувати книги на свій телефон за допомогою QR-коду.
WebGL Globe
Хороший експеримент команди Google, який фактично змушує вас відчувати себе в майбутньому своєю красивою, елегантною та футуристичною візуалізацією даних.
Світові рейси
Інший візуально-привабливий додаток візуалізації даних, який візуалізує основні рейси авіалінії, виглядає багатообіцяючим!
Фільтр зображень WebGL
Програма графічного редактора з WebGL? Це ніколи неможливо. Краще за все, це швидко і гладко!
WebGL Вода
“Басейн води, що подається з відображенням, заломленням, каустикою та зовнішньою оклюзією. Басейн моделюється висотою і містить сферу, яка може взаємодіяти з поверхнею води.”
Відображення
Найбільшою проблемою, з якою зіткнувся WebGL, є, можливо, його безпека. Згідно з Вікіпедією, команда з американської комп'ютерної готовності (US-CERT) висловила попередження, що WebGL містить декілька можливих проблем безпеки, які можуть призвести до довільного виконання коду, відмови в обслуговуванні і навіть міждоменних атак. Це означає дуже і дуже багато власнику сайту.
Тим не менш, група Khronos, яка включає Mozilla і Google, пропонувала можливі рішення і майбутній підхід до розробки для зміцнення безпеки від можливих загроз безпеці. Сподіваємося, що проблеми можуть бути зменшені та навіть вирішені в майбутньому, оскільки WebGL має так багато можливостей, які демонструють талановиті та професійні розробники!
Дайте нам знати, який експеримент дивує вас найбільше, і, звичайно, показувати нам, якщо ви отримали один!
Інші відповідні публікації:
- Веб-сайт HTML5: 48 Потенційні демо-версії Flash-Killing
- Веб-сайт HTML5: 15 додаткових експериментів
- Надихаючі CSS3 Анімація Демо
