Текущее состояние интерфейса под Метавселенной

внешний интерфейс WebGL Дополненная реальность
Текущее состояние интерфейса под Метавселенной

Заглавные горячие слова: Метавселенная

  • 28 июля Цукерберг сообщил, что компания формирует команду разработчиков для работы над Метавселенной. «Превратите Facebook из социальной сети в метавселенную в течение следующих пяти лет».
  • Nvidia показала в документальном фильме: «Пресс-конференция в апреле этого года была полностью искусственной».
  • В начале марта этого года Roblox, американское многопользовательское онлайн-творческое 3D-сообщество «Metaverse First Share», было размещено на Нью-Йоркской фондовой бирже, и в тот день цена его акций взлетела на 54,4%.
    • Tencent выиграла агента Roblox в Китае
    • В декабре 2020 года генеральный директор Tencent Ма Хуатенг заявил, что эра мобильного интернета прошла, а эра полноценного интернета — это будущее.
  • Игровая компания Epic Games в апреле получила 1 миллиард долларов на создание метавселенной
  • Внутри страны MeteApp, который утверждает, что строит мир метавселенной для всех возрастов, получил финансирование серии C в размере 100 миллионов долларов во главе с SIG Haina Asia Capital после того, как Roblox стал публичным.
  • ByteDance был разоблачен в апреле и инвестировал почти 100 миллионов юаней в код Qiankun «китайской версии Roblox».
  • Момо Вангли заявил, что в будущем, с дальнейшим развитием виртуальной реальности, непрерывной зрелостью оборудования VR/AR к популяризации домохозяйств и изменением режима взаимодействия человека с компьютером, неизбежно появятся новые возможности, то есть своего рода жизни, которая напрямую связывает людей за их спинами.
  • В центре внимания направления интерактивных технологий комитета Ali Front-end также находятся «виртуальные персонажи» и «AR / VR».

можно увидеть:«Интернет-будущее, нацеленное на Interactive Entertainment Capital - Metaverse»

Что такое метавселенная

  • Первое появление: В фантастическом романе Нила Стефенсона 1992 года "Лавина" в этом романе рассказано много сцен про виртуальные аватары, киберпанк и т.д.

  • Википедия: виртуальное трехмерное пространство с характеристиками восприятия связи и совместного использования, основанное на будущем Интернете, которое представляет характеристики конвергенции и физического постоянства через виртуальную дополненную физическую реальность.

    • Проще говоря: мы один на один переписываемся с новой личностью в виртуальном мире и «живем» без перерыва.

  • RobloxПредполагая, что настоящий продукт метавселенной должен состоять из восьми элементов, легко напомнить фильм «Первому игроку приготовиться»:

    • Идентичность: наличие виртуальной личности, независимо от того, связана она с реальной личностью или нет.

    • Друзья: Имейте друзей в метавселенной, общайтесь, знаете ли вы друг друга в реальности или нет.

    • Погружение: возможность погрузиться в опыт метавселенной и игнорировать все остальное.

    • Низкая задержка: все в Метавселенной происходит синхронно, без асинхронности или задержки.

    • Разнообразие: Metaverse предоставляет разнообразный богатый контент, включая игровой процесс, реквизит, художественные материалы и т. д.

    • Везде: войдите в Метавселенную с любого устройства и погрузитесь в нее в любое время и в любом месте.

    • Экономическая система: Как и в любой сложной крупной игре, у Метавселенной должна быть своя собственная экономическая система.

    • Цивилизация: Метавселенная должна быть виртуальной цивилизацией.

Как «окончательная форма Интернета» у всех на слуху, он требует зрелости программных и аппаратных технологий, таких как AR, VR, 5G, облачные вычисления и блокчейн. Только тогда мы сможем построить мир, который децентрализован, не контролируется кем-то одним, устойчив и никогда не закончится.

Упомянутые выше технологии, которые тесно связаны с текущим интерфейсом, — это AR и VR.

Состояние АР

Ощущение старого вина в новой бутылке, было 17-18 лет, когда была популярна концепция VR и AR. В течение нескольких лет дополненная реальность использовалась для создания виртуальных туров по местам, проектирования и совместной работы над 3D-моделями, игр, развлечений, покупок, маркетинга, обучения, визуализации и многого другого. От юзабилити до простоты использования и обновлений опыта — это главное инновационное предложение последнего раунда пользовательского опыта UX.Новый раунд революции пользовательского опыта будет сосредоточен на том, как действительно обеспечить ценность опыта. Это именно то, что AR сейчас играет в нашей жизни.

Случай:

  • AR + путешествия: навигация, советы по магазинам, реклама, советы по продвижению и многое другое
    • image.png
  • Покупки: примерка обуви, примерка одежды, примерка макияжа.
  • игра:

WebXR

WebXR — это стандарт и концепция, которая относится к возможности реализации виртуальной и дополненной реальности на основе Интернета.

На самом деле, это API для разработки приложений AR (дополненной реальности) и VR (виртуальная реальность) в Интернете, а «X» обозначает что угодно в иммерсивном опыте.

API

  • Эволюция API: в основном продвигается Google, от стандарта WebVR, предложенного в 2016 году, до отсутствия дополненной реальности, измененной на 2018 год.WebXR
    • Связанные примеры API:immersive — Web.GitHub.IO/Web Судя по всему — Сэм побежал…
    • Последнее обновление: 13 апреля 2021 г. В Chrome версии 90 добавлен новый WebXR API:
      • WebXR Depth API: получите расстояние между устройством пользователя и объектами в реальной среде.
      • Оценка освещения WebXR AR: получите освещение окружающей среды
  • Образец кода:
async function activateXR() {
  // 创建 WebGL 上下文
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const gl = canvas.getContext("webgl", { xrCompatible: true });

  // 初始化three.js
  const scene = new THREE.Scene();

  // 创建一个有不同颜色面的立方体
  const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }),
    new THREE.MeshBasicMaterial({ color: 0x0000ff }),
    new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
    new THREE.MeshBasicMaterial({ color: 0xff00ff }),
    new THREE.MeshBasicMaterial({ color: 0x00ffff }),
    new THREE.MeshBasicMaterial({ color: 0xffff00 })
  ];

  // 将立方体添加到场景中
  const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
  cube.position.set(1, 1, 1);
  scene.add(cube);

  // 使用three.js设置渲染：创建渲染器、挂载相机
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    preserveDrawingBuffer: true,
    canvas: canvas,
    context: gl
  });
  renderer.autoClear = false;

  // API 直接更新相机矩阵
  // 禁用矩阵自动更新
  const camera = new THREE.PerspectiveCamera();
  camera.matrixAutoUpdate = false;


  // 使用“immersive-ar”初始化 WebXR 会话
  const session = await navigator.xr.requestSession("immersive-ar");
  session.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  const referenceSpace = await session.requestReferenceSpace('local');

  // 创建一个渲染循环，允许我们在 AR 视图上绘图
  const onXRFrame = (time, frame) => {
    session.requestAnimationFrame(onXRFrame);

    // 将图形帧缓冲区绑定到 baseLayer 的帧缓冲区
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)

    // 检索设备的姿态
    // XRFrame.getViewerPose 可以在会话尝试建立跟踪时返回 null
    const pose = frame.getViewerPose(referenceSpace);
    if (pose) {
      // 在移动端 AR 中，只有一个视图
      const view = pose.views[0];

      const viewport = session.renderState.baseLayer.getViewport(view);
      renderer.setSize(viewport.width, viewport.height)

      // 使用视图的变换矩阵和投影矩阵来配置 THREE.camera
      camera.matrix.fromArray(view.transform.matrix)
      camera.projectionMatrix.fromArray(view.projectionMatrix);
      camera.updateMatrixWorld(true);

      // 使用 THREE.WebGLRenderer 渲染场景
      renderer.render(scene, camera)
    }
  }
  session.requestAnimationFrame(onXRFrame);
}
  • Совместимость. Как передовой стандарт W3C, Chrome в настоящее время совершенствуется. В целом поддержка WebXR браузерами на рынке слабая, и соответствующие совместимые библиотеки и готовые решения будут представлены позже.

Наблюдатель модели:model-viewer

  • Веб-компонент, реализованный Google, который можно использовать для просмотра и взаимодействия с 3D-моделями в Интернете.
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
  alt="A 3D model of an astronaut"
  ar
  auto-rotate
  camera-controls></model-viewer>
  • фактический эффект:

Unity

В качестве известного движка 3D-игр также имеется соответствующая библиотека поддержки WebWR.

Экология сообщества

  • XR Swim: Предоставляет разработчикам единую платформу для публикации контента WebXR, которая эквивалентна платформе Steam в области приложений AR/VR в Интернете.

испытание

  • Как поддерживать высокоточные сцены с малой задержкой и возможность быстрой обработки данных для рендеринга и анимации.
  • Традиционные способы связи недостаточно быстры. Просмотр большого количества данных из сцены может превысить пределы рендеринга.

WebAR

Преимущества и недостатки

Имеет те же плюсы и минусы, что и WebXR.

  • Преимущества: кроссплатформенность, простота распространения (формат распространения URL)
  • недостаток:
    • Различные стандарты браузера
    • 3D-контент загружается медленно и не может реализовать сложный контент
    • низкое качество рендеринга
    • Невозможно добиться сложных взаимодействий (ограничено традиционным взаимодействием с браузером)

Фреймворк WebAr и ключевые принципы

  • Внедрение дополненной реальности требует:Идентифицируйте, отслеживайте и визуализируйте
  • AR SDK: Команда дополненной реальности Google (Google AR) предоставляет WebARonARKit, WebARonARCore. Все функции включают отслеживание движения, осведомленность об окружающей среде и определение освещенности.
  • Основные AR-фреймворки: В настоящее время обслуживание и использование болееAR.js, и некоторые другие:
  • AR.js: Он имеет вышеупомянутые возможности от сбора информации до обработки, рендеринга и рисования.
    • В основном инкапсулированные:
      • WebRTC: получение видеопотока (наиболее важным методом API является getUserMedia() , который получает видеопоток с камеры в режиме реального времени)
      • JSARToolKit: В основном обеспечивает функцию идентификации и отслеживания маркеров. (выпущен в 1999 году и обновлен до настоящего времени)
      • Three.js, Babylon.js, A-Frame (это все библиотеки рендеринга на основе WebGL)
    • AR в десяти строках HTML:
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden;'>
	<a-scene embedded arjs='sourceType: webcam;'>
		<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
		<a-marker-camera preset='hiro'></a-marker-camera>
	</a-scene>
</body>

  • Эффект следующий:кодовый адрес,Определить адрес изображения

  • Также существуют фреймворки для независимых функций:

    • Определить и отследить: Tracking.js, JSFeat, ConvNetJS, deeplearn.js, keras.js.После получения видеопотока задача состоит в том, чтобы идентифицировать и отслеживать.不管是对于 native AR 还是 WebAR，目前的识别算法与框架已经非常成熟，难就难在识别之后如何跟踪，如何更好更稳定更高质量的跟踪。
      • Способ 1. Непосредственная обработка видеопотока во внешнем интерфейсе. Обработка изображений непосредственно на интерфейсе, вы можете использовать Tracking.js и JSFeat. Эти две библиотеки похожи тем, что обе они выполняют компьютерное зрение на переднем крае, включая извлечение характерных точек, распознавание лиц и т. д.
      • Способ 2: фронтенд передает видеопоток на бэкенд, а бэкенд возвращает результат на фронтенд после обработки (так обстоит дело с некоторыми облачными сервисами распознавания).
    • Рендеринг и взаимодействие:A-Frame, Three.js, Babylon.js, Pixi.js, WebGL
      • A-Frame: платформа с открытым исходным кодом, основанная на Three.js, которая может напрямую настраивать сцену в HTML, подходит для простого построения 3D-сцены.

  • Принцип реализации библиотеки фреймворка: Принципы реализации упомянутой выше структуры AR в основном показаны на следующем рисунке:

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

  • Переместите чисто вычислительный код в шейдеры WebGL или Web Workers.
    • WebGL вызывает ускорение графического процессора
      • Шейдеры можно использовать для ускорения кода, связанного только с рендерингом (перерисовкой), а помещение в шейдер кода, не имеющего ничего общего с рендерингом, вызовет повторные вычисления
    • Web Worker
      • Подходит для кода, который не требует предварительного расчета или требований в реальном времени, таких как алгоритмы компоновки
  • WebAssembly
  • gpu.js
    • Преобразуйте простые функции JavaScript в язык шейдеров и скомпилируйте их, чтобы они работали на вашем графическом процессоре. Если графический процессор недоступен, функция все равно будет работать в обычном JavaScript.
  • Используйте алгоритмы фильтрации (например, фильтрацию Калмана), чтобы уменьшить заикание в меньшей степени, чтобы визуальный опыт пользователя казался более плавным.

рыночное решение

  • Кивикуб:www.kivicube.com/
  • EasyAR:www.easyar.cn/
    • Поддерживает WebAR, Mini Program AR, возможности отслеживания Sense, а также предоставляет облачное распознавание, услуги распознавания жестов / жестов.
  • 8-я стена:www.8thwall.com/
    • Универсальная платформа для создания, совместной работы и публикации проектов дополненной реальности, не требующая стороннего программного обеспечения, настройки сервера или внешних инструментов, просто войдите в систему, введите код и нажмите «Опубликовать».
    • Создал комплексное облачное решение для создания, совместной работы и мгновенной публикации проектов WebAR на основе браузера.
    • Пример:GitHub.com/8 хорош ва-ля-ля/Веб…
  • Быстрый просмотр Apple AR:У-у-у, но я vi cube.com/AR-quick-slightly…
    • Предоставляет разработчикам удобный инструмент для предварительного просмотра и публикации 3D-моделей.
    • Встройте представление Quick Look в приложение или веб-сайт для iPhone и iPad, чтобы отобразить файл виртуальных объектов USDZ в 3D или AR.

расширять

  • Enterprise AR: 7 практических вариантов использования на 2021 год:AR VR travel.com/enterprise-…
    • Основные области: удаленная помощь, медицинская диагностика, продажи, обучение, логистика, производство, прототипирование.

Релевантная информация

Категории