간단하고 무료로 제작되는 WebAR 응용 프로그램

15845 단어 ARAR.jsFirebaseA-Frame

입문


AR 앱의 제작 방법은 다양하지만 브라우저 기반의 WebAR라면 전용 앱을 설치하지 않아도 AR의 즐거움을 누릴 수 있다.
사용자에게 AR 액세스가 빠르다는 의미입니다.또한 QR코드를 사용하여 사용자의 실제 AR을 신속하게 실현하는 응용 프로그램을 시범적으로 제작했다.
이번에 우리는 Firebase를 위탁 관리로 사용하고 AR.js+A-Frame을 프레임워크로 하며 Windows10 표준에 첨부된 3D Builder를 모델링으로 하여 간단하게 자신이 만든 모델의 구성을 무료로 제작하였다.

Firebase란 무엇입니까?


구글 MBaaS, 모바일 앱의 백엔드 클라우드 서비스.
매우 높은 기능이지만 이번에 사용한 것은 그중의 호스팅 서비스일 뿐이다.
사용 방법은 매우 간단하다.(참조 기사: Firebase에서 사이트를 무료로 공개합니다.
Hosting의 무료 프레임워크는 총 업로드 및 총 다운로드 용량에 따라 결정됩니다.
업로드 용량도 과거 업로드 버전의 양이 누적되기 때문에 필요하지 않은 버전은 적당히 삭제하는 것이 좋다.

A-Frame이란


WebGL 등의 기술을 사용하여 브라우저에 3D 모델의 구조를 표시하는데 주로 HTML 라벨로만 이루어진 프레임워크입니다.개발상은 모질라입니다.

AR.js


브라우저를 기반으로 AR을 구현할 수 있는 라이브러리입니다.A-Frame과 조합하여 HTML 태그만 기술하면 간단한 AR 응용 프로그램을 만들 수 있습니다.
AR.js는 ARToolkit을 사용합니다.검은색 상자를 식별하고 카메라와 상대적인 위치, 자세를 계산하여 CG를 표시한다.
오리지널 디자인 표지도 제작할 수 있다.
태그에 넣을 이미지를 준비해서 전용 페이지에 올리면 식별용 파일(pattern-marker.patt)과 이미지 파일(marker.png)을 다운로드할 수 있습니다.
또한 검은색 상자 안의 도안과 일치하여 여러 개의 표식을 구분할 수 있다.
자세한 내용은 뒤에 설명된 HTML 설명에 나와 있습니다.

예제 응용 프로그램


태그 준비


오리지널 디자인의 표지로서 다음 두 가지를 적절하게 제작한다.

객체 만들기


3D 빌더에서 두 객체를 작성하고 OBJ 형식으로 저장합니다.
그것들은 각각'grass.obj,grass.mtl','signpanel.obj,signpanel.mtl,oak.jpg'라는 파일로 구성되어 있다.
적절한 폴더에 놓고 나중에 HTML로 읽습니다.

모양은 특별한 의미가 없어요. 이 근처가 좋아요.

HTML 준비


A-Frame+AR.js 코드를 사용합니다. 만약 AR.js 샘플의 minimal입니다.html 이라면 8줄밖에 없습니다.
반투명 입방체의 내용을 미리 입력 태그에 표시합니다.
minimal.html
<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js --> 
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="../build/aframe-ar.min.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>
이번
  • 보드 객체에 문자 표시
  • 문자의 내용은 표기에 따라 달라진다
  • 풀 회전 애니메이션
    • 이런 내용이라 조금 길지만 어렵지 않아요.
    index.html
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!-- A-Frame ライブラリの読み込み -->
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

        <!-- AR.js ライブラリの読み込み -->
        <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>

        <title>WebAR Demo</title>
    </head>

    <body style='margin : 0px; overflow: hidden; font-family: Monospace;'>

        <!-- 3Dオブジェクトの読み込み -->
        <!-- OBJファイルはモデル形状、MTLファイルはテクスチャ情報 -->
        <!-- ここで指定したIDを呼び出し時に使う -->
        <a-assets>
            <a-asset-item id="signpanel_mtl" src="static/models/signpanel/signpanel.mtl"></a-asset-item>
            <a-asset-item id="signpanel_obj" src="static/models/signpanel/signpanel.obj"></a-asset-item>
        </a-assets>

        <a-assets>
            <a-asset-item id="grass_obj" src="static/models/grass/grass.obj"></a-asset-item>
            <a-asset-item id="grass_mtl" src="static/models/grass/grass.mtl"></a-asset-item>
        </a-assets>

        <!-- ARオブジェクトを描画するシーンの定義 -->
        <a-scene stats embedded arjs='debugUIEnabled: false; sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>
            <!-- ARマーカに対する描画オブジェクト -->
            <a-marker preset="custom" type="pattern" url="static/marker/pattern.patt">
                <!-- オブジェクト1つめの配置 -->
                <a-obj-model src="#signpanel_obj" mtl="#signpanel_mtl" position="0 0 0" rotation="-100 0 0" scale="0.05 0.05 0.05" visible="true"></a-obj-model>

                <!-- a-entityタグでオブジェクトやアニメーションの定義をまとめる -->
                <a-entity>
                    <a-obj-model src="#grass_obj" mtl="#grass_mtl" position="-0.3 0 0" rotation="-90 0 0" scale="0.03 0.03 0.03" visible="true"></a-obj-model>
                    <!-- アニメーションもHTMLタグで定義可能 -->
                    <a-animation attribute="rotation" dur="5000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
                </a-entity>

                <!-- テキストも描画可能 -->
                <a-text value="Augmented" position='-0.8 1.9 -0.1' rotation="0 0 0" scale="1.5 1.5 1.5" color="#111111"></a-text>
                <a-text value="Reality" position='-0.3 1.3 -0.1' rotation="0 0 0" scale="1.5 1.5 1.5" color="#111111"></a-text>
            </a-marker>

            <!-- マルチマーカの場合はa-markerタグを複数書く -->
            <a-marker preset="custom" type="pattern" url="static/marker/pattern2.patt">
                <a-obj-model src="#signpanel_obj" mtl="#signpanel_mtl" position="0 0 0" rotation="-100 0 0" scale="0.05 0.05 0.05" visible="true"></a-obj-model>
                <a-entity>
                    <a-obj-model src="#grass_obj" mtl="#grass_mtl" position="-0.3 0 0" rotation="-90 0 0" scale="0.03 0.03 0.03" visible="true"></a-obj-model>
                    <a-animation attribute="rotation" dur="5000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
                </a-entity>
                <a-text value="Multi Marker" position='-0.7 1.7 -0.1' rotation="0 0 0" scale="1.2 1.2 1.2" color="#111111"></a-text>
            </a-marker>

            <!-- カメラオブジェクトの配置 -->
            <a-camera-static/>
        </a-scene>
    </body>
</html>
    Firebase Hosting 기능을 배포하고 URL을 연결하기만 하면 됩니다!

    아, 간단하죠?

    지원


    지원되는 운영 체제 브라우저


    이동 단말기의 동작은 AR.js의 제한으로 인해 다음과 같은 환경이 필요합니다.
  • Android5.1 이상의 Chrome
  • iOS11 이상의 Safari
    • 또한 이동 단말기의 브라우저를 보면 태그 식별 처리 근처에서 멈추는 경우도 있다.(원인 불명)

    카메라 라이센스 및 HTTPS 연결


    HTML 액세스는 HTTPS여야 합니다.카메라를 사용해야 하기 때문에 브라우저가 HTTPS가 아니면 API가 유효하지 않습니다.로컬 시도 여부도 브라우저에 따라 다릅니다.(Edge, Chrome은 로컬에서 사진을 찍을 수 있다고 생각합니다.)
    참고로 Firebase의 Hosting은 기본적으로 HTTPS 연결을 제공합니다.대단하다

    3D 객체 준비 정보


    만약 A-Frame이 대응하는 형식이라면 어떻게 하든지 어디에서 가져올 수 있다.Unity의 AssetStore 등이 충분하다면 가장 간단합니다.
    이번에는 그냥 혼자 하는 건데 최대한 간단하게 이런 개념으로 3D Builder를 사용하고 있어요.입방체와 원통 등 기본체의 조합은 단색, 나무무늬, 대리석 정도의 무늬만으로도 충분하다.

    QR코드 생성 정보


    QR코드 제작에는 무료 사이트가 많으니 구글 선생님께 물어보면 바로 찾을 수 있겠지요.
    QR코드를 만든 후 마크업 용지에 AR 마크업과 함께 QR코드를 인쇄하면 완성!
    또한 AR 태그 내부의 빈 부분의 QR코드를 인쇄해도 식별할 수 있기 때문에 태그 단일체로 완성하면 된다.
    https://jeromeetienne.github.io/AR.js/three.js/examples/arcode.html
    https://medium.com/arjs/ar-code-a-fast-path-to-augmented-reality-60e51be3cbdf
    그러나 다중 태그에서 사용할 때 구분 태그의 처리 정밀도가 떨어질 수 있으므로 주의하십시오.(검증되지 않음)

    각종 주의사항


    AR.js


    다중 표기에 푹 빠졌다.
  • 전혀 몰랐을 때
    태그의 이미지 선이 너무 가늘면 식별할 수 없습니다.문자는 굵은 문자, 도안은 명확한 모양의 물건(아이콘 등)이다.
  • 오인
    태그 내의 이미지 공백이 비슷한 위치에 있으면 잘못 식별되기 쉽습니다.
    또한 표기의 특성 때문에 점대칭 이미지를 사용하면 방향을 정확하게 계산하지 못해 오인식을 초래할 수 있다.
    효과적인 처리 방법으로 아이콘 같은 이미지를 표시 사각 어딘가에 놓는 것이 좋습니다.

    • A-Frame


    a-obj-model 탭의 rotation 속성의 Z 좌표 회전에 오류가 있습니다... Z 축에 값을 입력하면 Y 축이 회전합니다.Y축에 값을 입력해도 Y축이 회전합니다.뭘 잘못 설명했는지 모르겠지만..

    끝내다


    이번에 소개한 것은 표기에 3D 대상의 수준을 표시하는 것이지만 ARcore와 ARkit은 표기할 필요가 없다.(A-Frame도 ARcore와 협력할 수 있을 것 같다.참고문
    실제로 AR이라는 단어의 범위가 매우 넓고 극단적이면 화면에 현실 물체를 따르는 것이 나타나면 AR 같은 곳도 있다.
    그러나 낮은 수준으로 여겨지는 콘텐츠라도 간단하게 실현된다면 새로운 경험을 제공할 수 있는 사람이 늘어나 세상을 바꿀 수 있다.그래서 간단하게 할 수 있는 게 중요해요.
    (10년 전만 해도 이번 샘플을 만드는 데 C++로 코드를 많이 작성해야 했는데...웹 응용 프로그램도 아니었어요.)
    생각이 있는 사람이 끊임없이 형성되기를 바랍니다!

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage