Дополненная реальность как сделать самому бесплатно пошаговая инструкция

AR.js — библиотека для создания дополненной реальности. Она объединена с фреймворком A-Frame, который предназначен для разработки VR в вебе. Главный плюс AR.js — очень простой процесс создания AR-приложений. Достаточно импортировать библиотеку и добавить объекты, которые будет видеть пользователь при выполнении заданных условий — например, наведении камеры на маркер или нахождении в указанном месте.

Все ссылки на документацию будут в конце статьи, а пока посмотрим самое интересное — как это работает на практике. Результат будет примерно такой:

Как создать дополненную реальность, написав 12 строк кода 1

Картинка с сайта: tproger.ru

Слева — метка, справа — AR-объект, который появляется при наведении камеры / Источник: medium.com/@jerome_etienne

Важно: чтобы посмотреть примеры AR-контента, нужно второе устройство с камерой — например, смартфон. В тексте есть ссылки на CodePen. Откройте их на устройстве с камерой и разрешите браузеру доступ.

Как создать AR-приложение за несколько минут

Импортируем в HTML-код A-Frame и AR.js:

Затем внутри <body> создадим сцену, которая будет охватывать все необходимые нам элементы: маркер, камеру, AR-объект.

Следующий шаг — добавление маркера. Пока используем preset Hiro. Это дефолтный маркер AR.js, его изображение вы найдёте ниже:

Добавим AR-объект внутри <a-marker>. Попробуем один из примитивов, которые предлагает фреймворк A-Frame:

Напоследок добавляем камеру. Одна должна быть за пределами маркера. Это нужно для того, чтобы AR-объект появлялся только при наведении камеры на маркер. Если в объективе нет маркера, дополнительный контент не отображается на экране.

Вот полный код:

Чтобы проверить работоспособность:

  1. Откройте в браузере на смартфоне это приложение на CodePen.
  2. Разрешите доступ к камере.
  3. Наведите камеру на маркер Hiro, который размещён ниже.

Как создать дополненную реальность, написав 12 строк кода 2

Картинка с сайта: tproger.ru

Наводим камеру — появляется объект дополненной реальности. Убираем камеру — объект исчезает.

Вместо геометрической фигуры можно вставить другую 3D-модель. Рекомендуемый формат — glTF. Вот полный код:

Как создать дополненную реальность, написав 12 строк кода 3

Картинка с сайта: tproger.ru

Дополненная реальность работает в браузере

Ещё одна интересная возможность — вставка AR-текста на английском языке. Его свойствами можно управлять с помощью атрибутов, подробно описанных в документации. Полный код:

Держите ещё несколько инструментов для создания дополненной реальности.

Как создать свой маркер для AR-объекта

В примерах выше используется стандартный маркер Hiro. Но мы можем создать другое изображение с помощью онлайн-инструмента AR.js Marker Training. Правда, оно должно отвечать целому ряду требований.

  • максимальное разрешение маркера — 16*16 пикселей;
  • квадратная форма;
  • используется только чёрный или светло-серый цвет (например, #F0F0F0);
  • нет прозрачных областей;
  • содержит простой текст — букву или цифру.

Также нужно помнить о контрасте. Если у маркера чёрный фон, то окружающая среда должна быть светлой. В противном случае распознавание не сработает.

В качестве маркера также можно использовать штрих-код. Подробнее об этом можно узнать из статьи разработчика AR.js Николо Карпиньоли (Nicolo Carpignoli).

Что ещё можно сделать с помощью AR.js

Отслеживание маркеров — лишь один из типов дополненной реальности. Библиотеку можно также использовать для создания следующих интерактивов:

  • Отслеживание изображений — при наведении камеры на 2D-изображение пользователь видит поверх него или рядом с ним AR-контент. Это может быть другое 2D-изображение, GIF, 3D-модель, видео.
  • Дополненная реальность на основе местоположения. Пользователь видит AR-контент в заданных локациях.

Подробное описание применения и примеры кода можно найти в документации AR.js и A-Frame.

Если дополненной реальности мало, посмотрите, как создать простое VR-приложение под Android с помощью Unity.

Источник

Время на прочтение9 мин

Количество просмотров73K

Как создать приложение дополненной реальности с помощью ARCore

Картинка с сайта: habr.com

В этом гайде вы узнаете, как добавить 3D-модели в реальный мир. Библиотека ARCore от Google позволяет добавлять на 2D-изображение (картинка или видео) полноценные 3D-модели.

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

Прежде чем погрузиться в этот туториал, вам стоит ознакомиться с предыдущими двумя статьями на эту тему, которые познакомят вас с основными AR-терминами:

  • Что такое ARCore? Всё, что вам нужно знать
  • Создание вашего первого ARCore-приложения

Что такое изображения дополненной реальности?

Согласно документации для разработчиков, изображения дополненной реальности в ARCore позволяют создавать приложения дополненной реальности, которые могут «оживлять» 2D-изображения, например, плакаты или упаковки продуктов.

Вы загружаете в ARCore какие-то опорные изображения, а он вам затем сообщает об их обнаружении во время AR-сессии, например во время съёмки видео. И эта информация используется для расположения 3D-модели на 2D-изображении.

Ограничения использования изображений дополненной реальности

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

  • ARCore может обрабатывать только до 20 опорных изображений одновременно.
  • Физическая плоскость в реальном мире должна быть плоской, а её площадь должна быть больше, чем 15 см х 15 см.
  • ARCore не может отслеживать движущиеся изображения и объекты.

Выбор подходящего опорного изображения

Вот несколько советов для выбора хорошего опорного изображения для ARCore:

  • Изображения дополненной реальности поддерживают форматы PNG, JPEG и JPG.
  • Неважно, цветное будет изображение или чёрно-белое, главное, чтобы оно было высокой контрастности.
  • Разрешение изображения должно быть не менее 300 х 300 пикселей.
  • Использование изображений с высоким разрешением не означает улучшение производительности.
  • Следует избегать изображений с повторяющимися паттернами (например, узорами или горошком).
  • Используйте инструмент arcoreimg, чтобы оценить, насколько подходит ваше изображение для работы. Рекомендуется оценка не менее 75 баллов.

Как использовать инструмент arcoreimg:

  • Загрузите ARCore SDK для Android по этой ссылке.
  • Распакуйте zip-содержимое файла в любое место.
  • В извлеченной папке перейдите по пути tools > arcoreimg > windows (даже если у вас Linux или macOS).
  • Откройте командную строку в этой директории.
  • И введите эту команду:

arcoreimg.exe eval-img --input_image_path=dog.png

Замените dog.png на полный путь к вашему изображению.

Начало работы с приложением дополненной реальности

Теперь, когда вы ознакомились с ARCore и выбрали хорошее изображение с оценкой 75+, пришло время приступить к написанию кода приложения.

Создание фрагмента

Мы создадим фрагмент и добавим его в нашу Activity. Создаём класс с именем CustomArFragment и наследуем его от ArFragment. Вот код для CustomArFragment:

package com.ayusch.augmentedimages;

import android.util.Log;

import com.google.ar.core.Config;
import com.google.ar.core.Session;
import com.google.ar.sceneform.ux.ArFragment;

public class CustomArFragment extends ArFragment {

    @Override
    protected Config getSessionConfiguration(Session session) {
        getPlaneDiscoveryController().setInstructionView(null);
        Config config = new Config(session);
        config.setUpdateMode(Config.UpdateMode.LATEST_CAMERA_IMAGE);
        session.configure(config);
        getArSceneView().setupSession(session);

        return config;
    }
}

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

Затем мы устанавливаем режим обновления для сессии LATEST_CAMERA_IMAGE. Это гарантирует, что мы будем узнавать об обновлениях изображения всякий раз, когда обновится кадр камеры.

Настройка базы данных изображений

Добавьте выбранное опорное изображение (которое вы хотите обнаружить в физическом мире) в папку assets (создайте её, если её ещё нет). Теперь мы можем добавлять изображения в нашу базу данных.

Мы создадим эту базу данных, как только будет создан фрагмент. В логи мы выведем результат этой операции:

if ((((MainActivity) getActivity()).setupAugmentedImagesDb(config, session))) {
    Log.d("SetupAugImgDb", "Success");
} else {
    Log.e("SetupAugImgDb","Faliure setting up db");
}

Вот как будет выглядеть CustomArFragment:

package com.ayusch.augmentedimages;

import android.util.Log;

import com.google.ar.core.Config;
import com.google.ar.core.Session;
import com.google.ar.sceneform.ux.ArFragment;

public class CustomArFragment extends ArFragment {

    @Override
    protected Config getSessionConfiguration(Session session) {
        getPlaneDiscoveryController().setInstructionView(null);
        Config config = new Config(session);
        config.setUpdateMode(Config.UpdateMode.LATEST_CAMERA_IMAGE);
        session.configure(config);
        getArSceneView().setupSession(session);

        if ((((MainActivity) getActivity()).setupAugmentedImagesDb(config, session))) {
            Log.d("SetupAugImgDb", "Success");
        } else {
            Log.e("SetupAugImgDb","Faliure setting up db");
        }

        return config;
    }
}

Вскоре мы добавим метод setupAugmentedImagesDb в MainActivity. Теперь давайте добавим CustomArFragment в наш activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/sceneform_fragment"
        android:name="com.ayusch.augmentedimages.CustomArFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

Добавление изображения в базу данных

Сейчас мы настроим нашу базу данных изображений, обнаружим опорное изображение в реальном мире и добавим 3D-модель на изображение.

Давайте начнём с настройки нашей базы данных. Создайте публичный метод setupAugmentedImagesDb в классе MainActivity:

public boolean setupAugmentedImagesDb(Config config, Session session) {
    AugmentedImageDatabase augmentedImageDatabase;
    Bitmap bitmap = loadAugmentedImage();
    if (bitmap == null) {
        return false;
    }

    augmentedImageDatabase = new AugmentedImageDatabase(session);
    augmentedImageDatabase.addImage("tiger", bitmap);
    config.setAugmentedImageDatabase(augmentedImageDatabase);
    return true;
}

private Bitmap loadAugmentedImage() {

    try (InputStream is = getAssets().open("blanket.jpeg")) {
        return BitmapFactory.decodeStream(is);
    } catch (IOException e) {
        Log.e("ImageLoad", "IO Exception", e);
    }

    return null;
}

Мы также создали метод loadAugmentedImage, который загружает изображение из папки ресурсов и возвращает растровое изображение.

В setupAugmentedImagesDb мы сначала инициализируем нашу базу данных для текущей сессии, а затем добавляем изображение в эту базу данных. Мы назвали наше изображение tiger. Затем мы устанавливаем эту базу данных в конфиг и возвращаем true, сообщая о том, что изображение успешно добавлено.

Обнаружение опорных изображений в реальном мире

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

Добавьте эту строку в метод onCreate() в MainActivity:

arFragment.getArSceneView().getScene().addOnUpdateListener(this::onUpdateFrame);

Теперь добавьте метод onUpdateFrame в MainActivity:

@RequiresApi(api = Build.VERSION_CODES.N)
private void onUpdateFrame(FrameTime frameTime) {
    Frame frame = arFragment.getArSceneView().getArFrame();

    Collection<AugmentedImage> augmentedImages = frame.getUpdatedTrackables(AugmentedImage.class);
    for (AugmentedImage augmentedImage : augmentedImages) {
        if (augmentedImage.getTrackingState() == TrackingState.TRACKING) {
            if (augmentedImage.getName().equals("tiger") && shouldAddModel) {
                placeObject(arFragment, augmentedImage.createAnchor(augmentedImage.getCenterPose()), Uri.parse("Mesh_BengalTiger.sfb"));
                shouldAddModel = false;
            }
        }
    }
}

В первой строке мы получаем сам кадр. Кадр можно представить, как обычный скриншот из видео. Если вы знакомы с тем, как работает видео, вы знаете, что это просто набор изображений, которые очень быстро сменяют друг друга, создавая впечатление чего-то движущегося. Мы просто берём одну из этих картинок.

После того, как мы получили кадр, мы анализируем его на предмет наличия на нём нашего опорного изображения. Мы берём список всех элементов, отслеженных ARCore, используя frame.getUpdatedTrackables. Затем мы перебираем её и проверяем, присутствует ли в кадре наше изображение tiger.

Если совпадение найдено, то мы просто берём и размещаем 3D-модель поверх обнаруженного изображения.

Примечание. Флаг shouldAddModel используется для того, чтобы мы добавляли 3D-модель только один раз.

Размещение 3D-модели над опорным изображением

Теперь, когда мы нашли наше опорное изображение в реальном мире, мы можем добавлять 3D-модель поверх него. Добавим методы placeObject и addNodeToScene:

  • placeObject: этот метод используется для построения отрендеренного объекта по заданному Uri. Как только рендеринг завершён, объект передаётся в метод addNodeToScene, где объект прикрепляется к узлу, и этот узел помещается на сцену.
  • addNodeToScene: этот метод создаёт узел из полученного якоря, создаёт другой узел, к которому присоединяется визуализируемый объект, затем добавляет этот узел в якорный узел и помещает его на сцену.

Вот так теперь выглядит MainActivity:

package com.ayusch.augmentedimages;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.google.ar.core.Anchor;
import com.google.ar.core.AugmentedImage;
import com.google.ar.core.AugmentedImageDatabase;
import com.google.ar.core.Config;
import com.google.ar.core.Frame;
import com.google.ar.core.Session;
import com.google.ar.core.TrackingState;
import com.google.ar.sceneform.AnchorNode;
import com.google.ar.sceneform.FrameTime;
import com.google.ar.sceneform.rendering.ModelRenderable;
import com.google.ar.sceneform.rendering.Renderable;
import com.google.ar.sceneform.ux.ArFragment;
import com.google.ar.sceneform.ux.TransformableNode;

import java.io.IOException;
import java.io.InputStream;
import java.util.Collection;

public class MainActivity extends AppCompatActivity {
    ArFragment arFragment;
    boolean shouldAddModel = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        arFragment = (CustomArFragment) getSupportFragmentManager().findFragmentById(R.id.sceneform_fragment);
        arFragment.getPlaneDiscoveryController().hide();

        arFragment.getArSceneView().getScene().addOnUpdateListener(this::onUpdateFrame);
    }

    @RequiresApi(api = Build.VERSION_CODES.N)
    private void placeObject(ArFragment arFragment, Anchor anchor, Uri uri) {
        ModelRenderable.builder()
                .setSource(arFragment.getContext(), uri)
                .build()
                .thenAccept(modelRenderable -> addNodeToScene(arFragment, anchor, modelRenderable))
                .exceptionally(throwable -> {
                            Toast.makeText(arFragment.getContext(), "Error:" + throwable.getMessage(), Toast.LENGTH_LONG).show();
                            return null;
                        }
                );
    }

    @RequiresApi(api = Build.VERSION_CODES.N)
    private void onUpdateFrame(FrameTime frameTime) {
        Frame frame = arFragment.getArSceneView().getArFrame();

        Collection<AugmentedImage> augmentedImages = frame.getUpdatedTrackables(AugmentedImage.class);
        for (AugmentedImage augmentedImage : augmentedImages) {
            if (augmentedImage.getTrackingState() == TrackingState.TRACKING) {
                if (augmentedImage.getName().equals("tiger") && shouldAddModel) {
                    placeObject(arFragment, augmentedImage.createAnchor(augmentedImage.getCenterPose()), Uri.parse("Mesh_BengalTiger.sfb"));
                    shouldAddModel = false;
                }
            }
        }
    }

    public boolean setupAugmentedImagesDb(Config config, Session session) {
        AugmentedImageDatabase augmentedImageDatabase;
        Bitmap bitmap = loadAugmentedImage();
        if (bitmap == null) {
            return false;
        }

        augmentedImageDatabase = new AugmentedImageDatabase(session);
        augmentedImageDatabase.addImage("tiger", bitmap);
        config.setAugmentedImageDatabase(augmentedImageDatabase);
        return true;
    }

    private Bitmap loadAugmentedImage() {
        try (InputStream is = getAssets().open("blanket.jpeg")) {
            return BitmapFactory.decodeStream(is);
        } catch (IOException e) {
            Log.e("ImageLoad", "IO Exception", e);
        }

        return null;
    }

    private void addNodeToScene(ArFragment arFragment, Anchor anchor, Renderable renderable) {
        AnchorNode anchorNode = new AnchorNode(anchor);
        TransformableNode node = new TransformableNode(arFragment.getTransformationSystem());
        node.setRenderable(renderable);
        node.setParent(anchorNode);
        arFragment.getArSceneView().getScene().addChild(anchorNode);
        node.select();
    }
}

Теперь запустите ваше приложение. Вы должны увидеть экран, как показано ниже. Подвигайте телефон немного над опорным объектом. И как только ARCore обнаружит опорное изображение в реальном мире, добавит на него вашу 3D-модель.

Результат

Картинка с сайта: habr.com

Читайте также: Создание вашего первого ARCore-приложения

Источник

Благодаря совместным стараниям многих крутых компаний технология дополненной реальности плотно вошла в нашу жизнь и сегодня простым AR приложением никого не удивить.

Несмотря на столь большое распространение для многих данная тема до сих пор является очень страшной и непонятной.

AR программа

Итак, наша программа будет достаточно простой. Мы будем наводить смартфон на некую ровную поверхность и далее на ней будет появляться объект. Данным объектом можно будет управлять за счет пользовательского интерфейса в приложении.

Разработка приложения

Первое что нужно сделать, так это скачать Unity. Заходим на официальный сайт, нажимаем на «Get Started» и скачиваем Unity версии «Personal». Как ни странно, вместо Unity у нас скачается Unity Hub, через который вы как раз и можете установить саму программу Unity. Здесь главное не забудьте указать поддержку Android и iOS устройств, чтобы будущее приложение можно было скомпилировать под эти платформы.

Картинка с сайта: itproger.com

Далее через тот же Unity Hub создаем новый проект, при чём название, расположение, а также формат проекта — это всё нам не особо важно.

Технология Vuforia

После создания проекта нам необходимо подключить в него технологию Vuforia. 

Не знаете что такое Vuforia? Vuforia — это отдельная библиотека, которая обеспечивает полную работу с дополненной реальностью. Чтобы её установить необходимо в Unity зайти в Window -> Package Manager. В нём прописываем Vuforia и нажимаем на Install. 

Картинка с сайта: itproger.com

Создание программы

Следующий этап, удаляем основную камеру на сцене и вместо неё добавляем AR камеру. Такая камера идет от библиотеки Vuforia и она позволяет обрабатывать различные поверхности для расположения на них объектов.

Чтобы всё работало нужно в AR камере нажать на «Open Vuforia configuration» и далее в поле «Add licence key» нужно установить ключ. 

Картинка с сайта: itproger.com

Его можно получить на официальном сайте Vuforia. На сайте сперва регистрируемся. Далее в кабинете пользователя нажимаем на «Get Development Key», придумываем название для программы, можно любое, ставим галочку внизу и нажимаем «Confirm». Создается новое приложение, в котором как раз и есть нужный ключ. Копируем его и вставляем в Unity.

Картинка с сайта: itproger.com

Теперь добавим на сцену объекты «Plane Finder», а также «Ground Plane Stage». За счёт «Plane Finder» Vuforia сможет определить ровную поверхность, а за счёт «Ground Plane Stage» она сможет расположить на этой поверхности различные объекты. 

Картинка с сайта: itproger.com

Также не забудьте перенести ссылку на объект «Ground Plane Stage» в объект «Plane Finder». Это нужно чтобы «Plane Finder» понимал с чем требуется работать. 

Картинка с сайта: itproger.com

Расположение объектов

Зайдите в Asset Store, это официальный магазин Unity, и в нём найдите какую-либо модель, которую мы будем располагать в AR приложении. Скачиваем модель и импортируем в Unity.

Далее выбираем объект и перетаскиваем внутрь «Ground Plane Stage». Уменьшаем размеры если необходимо, а также отодвигаем камеру, чтобы объекты не находились в одном месте.

Картинка с сайта: itproger.com

Компиляция проекта

Теперь всё готово и остается лишь скомпилировать проект и запустить на устройстве. Для этого заходим в Build Settings, добавляем открытую сцену, а также выполняем перекомпиляцию проекта под iOS или Андроид в зависимости от того какое устройство у вас есть под рукой.

Далее заходим в Player Settings и прописываем некоторые основные настройки. К примеру: название игры, идентификатор, иконки для приложения, если хотите и по сути на этом всё. Кстати, если компилируете под Андроид, то там ещё не забудьте подключить SDK к Unity, а также не забудьте создать ключ приложения всё в тех же Player Settings.

Перед компиляцией обязательно установите XR плагин. Именно он контролирует большинство вещей в вашем приложении с дополненной реальностью. Без него ничего работать не будет.

Картинка с сайта: itproger.com

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

Видеоурок по AR

Для более детального ознакомления предлагаем просмотреть небольшой урок на эту тему:

Дополнительный курс

На нашем сайте также есть углубленный курс по изучению игрового движка Unity. В ходе огромной программы вы изучите не только движок Unity, но также научитесь писать консольные и интерфейсные программы на языке C#. Также вы изучите сам движок Unity, включая создание 2D и 3D игр, а также игр и приложений с дополненной реальностью.

Картинка с сайта: itproger.com

Источник

Сервис Аrgin — русскоязычный. Он позволяет накладывать на изображение реальность в виде фотографий, слайд-шоу, видео, аудио, текста или 3D-объектов. Дополненная реальность создается в сервисе. Но чтобы читатели могли ее увидеть, им придется установить на смартфон приложение Аrgin.

Открывайте сервис Аrgin. Зарегистрируйтесь через электронную почту. Подтвердите регистрацию по ссылке, которая придет на указанную электронку.

Авторизовавшись на сервисе, вы попадете в личный кабинет.

Нажимайте на кнопку «Создать маркер» в верхней части экрана и загрузите изображение, на которое будете накладывать дополненную реальность.

На сервисе рекомендуют загружать файл в формате PNG и JPG до 2 MB без прозрачного фона. Плохо распознаются фотографии с обилием монотонного цвета и размытые.

Когда фото загрузится, оно отобразится на сцене. Изображение можно перемещать, приближать и отдалять. Сцена «поделена» на три области:

  • зеленая — самая рекомендуемая для размещения контента;
  • желтая — допустимая, но маркер будет плохо распознаваться;
  • красная — лучше избегать для размещения.

Картинка с сайта: sdelano.media

Теперь размещайте на изображении контент. Редакторская панель находится в сцене в колонке справа. Виды контента (снизу вверх): фотография, слайд-шоу, видео, аудио, 3D-объект, текст, таймер.

Кликните на нужный значок. В появившемся окне в выпадающем списке выберите способ добавления контента: создать новый, выбрать существующий, внешний сервис.

Новый контент — тот, который вы загружаете на сервис. Выбрать существующий — загруженный на сервис ранее. Внешний сервис — вставить ссылку на контент. На сервисе сказано, что поддерживается три внешних контента: погода (изображение/текст), валютный курс (изображение/текст), дата и время (текст).

Ссылкой сервис позволяет загрузить фотографию со стороннего сайта. Но вот видео с Ютуба ссылкой добавить не получится. Контент, который сервис «считывает», после загрузки будет отображаться на сцене.

Картинка с сайта: sdelano.media

Размер контента можно изменить, потянув за точки выделенного объекта.

Когда маркер с дополненной реальностью будет готов, нажимайте «Настройки». Дождитесь, когда маркер проверят модераторы и его статус изменится на «Ожидает монет». Период активности маркера зависит от количества вложенных монет. 1 монеты хватает на 1 день. При регистрации вы получаете 5 монет и по 3 монеты добавляются каждую неделю, при условии использования сервиса. Дополнительные монеты придется докупить. Цена одной монеты 4,9 рубля.

Картинка с сайта: sdelano.media

Скачайте активированный маркер, теперь вы можете опубликовать его в газете, на афише, в объявлении и т. д.

Напишите инструкцию для читателей. Чтобы они могли увидеть дополненную реальность, им нужно скачать и установить на смартфон приложение Аrgin. Затем открыть его и навести на изображение, в котором «зашита» дополненная реальность.

Через это же приложении можно сделать снимок экрана или записать видео. Для этого надо кликнуть на эмблему приложения. Если маркер недостаточно освещен, включите подсветку (кнопка «фонарик» в меню).

Картинка с сайта: sdelano.media

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

На сайте размещена подробная инструкция по созданию маркеров и добавлении контента.

Источник

В современном мире технологии дополненной реальности (AR) становятся всё более доступными. Многие пользователи смартфонов уже могут создать свои собственные AR-приложения прямо с помощью своего телефона, не обладая глубокими знаниями в программировании. В этой статье мы расскажем о том, как легко и быстро можно создать AR-контент, используя простые инструменты и приложения. Мы рассмотрим основные шаги, необходимые для создания AR-эффектов, а также предоставим полезные советы для новичков.

Как отметили авторы статьи: «Создание AR-контента на смартфоне доступно каждому — просто следуйте нашим пошаговым инструкциям и вы увидите, как ваше видение становится реальностью».

Дополненная реальность (AR) — это технология, которая объединяет реальные объекты с виртуальными элементами. Она открывает новые горизонты в таких областях, как образование, развлечения, маркетинг и дизайн. Если вы хотите создать AR-контент с помощью своего смартфона, эта статья даст вам полное руководство по всем этапам процесса, от выбора инструментов до публикации вашего проекта.

1. Что такое дополненная реальность?

Дополненная реальность (AR) — это технология, которая накладывает виртуальную информацию на реальный мир. Это может происходить через камеры смартфонов, Smart Glasses и другие устройства. Пользователи могут взаимодействовать с виртуальными объектами, которые появляются в их реальной окружающей среде.

2. Зачем создавать AR-контент?

Твоей компании еще нет в рейтинге?

Причины, по которым стоит создавать контент с использованием дополненной реальности, многообразны. Среди них:

  • Увеличение вовлеченности: AR позволяет пользователям взаимодействовать с контентом уникальным способом.
  • Улучшение восприятия: визуализация информации в реальном времени позволяет лучше понять и оценить продукт или идею.
  • Расширение возможностей маркетинга: бренды могут использовать AR для создания уникальных и запоминающихся рекламных кампаний.

3. Инструменты для создания AR

Перед началом работы вам понадобятся определённые инструменты. Иногда для создания AR достаточно лишь смартфона, но для более сложных проектов могут потребоваться специализированные приложения и программное обеспечение.

3.1. Приложения для создания AR

Существует множество приложений, которые позволяют создавать AR-контент прямо с телефона. Вот некоторые из них:

  • Spark AR Studio — популярный инструмент от Facebook для создания эффектов AR для Instagram и Facebook.
  • Adobe Aero — приложение, позволяющее легко создавать интерактивные AR-опыты без программирования.
  • Unity с Vuforia — мощный инструмент для разработки игр и приложений с поддержкой AR.
  • Blippar — платформа для создания AR с возможностью взаимодействия с реальным миром.

4. Шаги по созданию AR-контента на телефоне

Теперь, когда вы знаете, какие инструменты вам понадобятся, давайте пройдёмся по основным шагам создания AR-контента.

Шаг 1: Определите цель своего проекта

Перед тем, как начать создание AR, нужно четко определить, какую цель вы хотите достичь. Будет ли это рекламная кампания, образовательный проект или игра? Понимание цели поможет вам сформировать концепцию и выбрать подходящие инструменты.

Шаг 2: Выберите приложение

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

Шаг 3: Создайте моделирование

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

Шаг 4: Настройте сцены

В большинстве приложений вы сможете создавать различные сцены. Определите, как виртуальные объекты будут взаимодействовать с реальным миром. Настройте их позицию, размеры и поведение в зависимости от сценария использования.

Шаг 5: Протестируйте вашу работу

Обязательно протестируйте ваш проект на разных устройствах и в разных условиях освещения, чтобы убедиться, что AR-контент работает корректно и стабильно. Исправление ошибок на этом этапе значительно упростит дальнейшую работу.

Шаг 6: Опубликуйте ваш AR-контент

После завершения всех тестов вы готовы к публикации. В зависимости от вашего приложения, вы можете создать ссылку на ваш AR-опыт или загрузить его непосредственно в социальные сети.

5. Советы по созданию увлекательного AR-контента

Чтобы ваш AR-контент был максимально интересным и полезным, следуйте этим рекомендациям:

  • Фокус на взаимодействии: Создавайте контент, который требует активного участия пользователей.
  • Поддерживайте монтаж: Оптимизируйте качество графики и избегайте слишком сложных 3D-моделей, которые могут замедлить работу приложения.
  • Обратите внимание на освещение: Реалистичное освещение сделает ваш AR-контент более привлекательным.

6. Примеры успешного AR-контента

Давайте рассмотрим несколько примеров успешного использования AR-контента:

Пример 1: IKEA Place

Приложение IKEA Place позволяет пользователям визуализировать мебель в своем помещении с помощью AR. Они могут «размещать» предметы интерьера в реальной среде и оценивать, как они будут выглядеть в их доме.

Пример 2: Pokémon GO

Pokemon GO является отличным примером использования AR в играх. Игроки ловят покемонов в реальном мире, что сделало игру популярной во всем мире.

7. Будущее AR-технологий

#

Картинка с сайта: rating-gamedev.ru

Читайте также

5 удивительных видов воронок: кто они и где обитают?

16 февраля 2024

AR-технологии продолжают развиваться, и мы можем ожидать множество новых возможностей в ближайшие годы. С ростом интернет-вещей (IoT) и 5G-технологий AR будет становиться более доступной и интерактивной, позволяя пользователям взаимодействовать с миром вокруг них на совершенно новом уровне.

Заключение

Создание AR-контента с помощью телефона стало доступным для каждого желающего. С помощью подходящих инструментов и четко определенных шагов, даже без опыта программирования, вы сможете создавать уникальные и захватывающие AR-опыты. Помните, что успешный AR-проект требует творческого подхода, персонализированного контента и постоянной обратной связи от пользователей. Начните создавать прямо сейчас и откройте для себя увлекательный мир дополненной реальности!

«Технологии должны быть простыми и доступными, чтобы каждый мог создавать свои собственные миры.» Стив Джобс

Шаг Описание Полезные советы
1 Убедитесь, что ваше устройство поддерживает AR. Проверьте характеристики телефона: наличие датчиков (гироскоп, акселерометр) и поддержка ARCore (Android) или ARKit (iOS).
2 Установите приложение для AR. Поиск приложений в Google Play или App Store. Попробуйте такие приложения, как IKEA Place или Pokemon GO для начала.
3 Настройте пространство для использования AR. Убедитесь, что в комнате достаточно света и гармоничного пространства для отображения 3D-объектов.

Основные проблемы по теме «Создать ar с телефона»

Ограниченные ресурсы устройства

Создание дополненной реальности (AR) на мобильных устройствах нередко сталкивается с проблемами, связанными с ограниченностью аппаратных ресурсов. Современные смартфоны могут иметь достаточно мощные процессоры и графические карты, однако они не всегда способны обеспечить необходимую производительность для сложных AR-приложений. Это приводит к низкому качеству отображения, задержкам и зависаниям. Многие устройства имеют ограниченное количество оперативной памяти, что также негативно сказывается на производительности. Сложные алгоритмы обработки изображений и отображения трехмерных объектов требуют значительных вычислительных ресурсов. Это делает процесс создания AR-контента менее эффективным и увеличивает вероятность ошибок во время работы.

Совместимость с платформами

Еще одной серьезной проблемой является совместимость AR-приложений с различными мобильными платформами, такими как iOS и Android. Разработчики должны учитывать различия в архитектуре, системных библиотеках и фреймворках, что усложняет процесс создания универсальных приложений. Например, использование специфичных функций одного устройства может стать препятствием для его работы на другом. Кроме того, версия операционной системы устройства может оказывать значительное влияние на функционал AR-приложений. Это создает дополнительные трудности при тестировании и поддержке приложений, увеличивая временные и финансовые затраты разработчиков.

Проблемы с пользовательским опытом

Пользовательский опыт (UX) является ключевым аспектом для успешного применения AR-технологий. Многие пользователи сталкиваются с проблемами в взаимодействии с AR-контентом, такими как недостаточная точность отслеживания объектов или медленная реакция системы. Эти факторы могут негативно повлиять на общее впечатление от приложения и даже отпугнуть потенциальных пользователей. Недостаток интуитивных интерфейсов и сложность навигации в AR-приложениях также могут привести к тому, что пользователи не захотят их использовать. Это подчеркивает важность продуманного дизайна и тестирования, чтобы предоставить пользователям максимально комфортный и увлекательный опыт взаимодействия.

Вот пример HTML-кода с тремя вопросами и ответами на тему «Технологические аспекты и платформы»:

Вопрос 1: Какие платформы используются для разработки веб-приложений?

Существует множество платформ для разработки веб-приложений, включая популярные фреймворки, такие как React, Angular и Vue.js для фронтенда, а также сервера, такие как Node.js, Django и Ruby on Rails для бэкенда.

Вопрос 2: Какой язык программирования лучше всего подходит для машинного обучения?

На данный момент Python является самым популярным языком программирования для машинного обучения, благодаря своим мощным библиотекам, таким как TensorFlow, Keras и Scikit-learn, а также простоте использования.

Вопрос 3: Что такое облачные технологии и как они влияют на бизнес?

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

Вы можете использовать этот код в вашем HTML-документе для отображения информации по данной теме.

Источник

Понравилась статья? Поделить с друзьями:
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
  • Швабра бабочка с отжимом инструкция по применению
  • Redmond rm m1002 инструкция
  • Lipidro creme gehwol инструкция
  • Олимп 005 инструкция по ремонту
  • Липидомарин инструкция по применению