대가는 결과를 만든다

A-Frame 기본 리서치 본문

개발/VR

A-Frame 기본 리서치

yunzema 2018. 12. 4. 15:11
반응형

A-Frame이란?


링크 : https://aframe.io/docs/0.8.0/introduction/#off-you-go


VR 구현을 위해 Mozilla에서 개발된 Web Framework,

HTML 기반,

three.js에 확장 가능한 구조를 제공하는 프레임 워크.


Vive, Rift, Windows MR, Dayadream, GearVR, Cardboard 대부분 VR 헤드셋 지원, AR 사용 가능



주요특징


- Cross-Platform VR : Vive, Rift, Windows Mixed Reality, Daydream, GearVR, and Cardboard 와 모든 콘트롤러를 지원하는 VR App 구현 가능. 헤드셋과 컨트롤러가 없는 일반 데스크톱과 스마트폰에도 작동

 

- Entity-Component Architecture : 강력한 three.js 프레임워크, 재사용가능한 entity-component structure를 제공


- Performance : WebVR을 기반으로 최적화, A-Frame은 DOM을 사용하지만 그 element들은 브라우저 레이아웃 엔진을 건들이진 않는다. 3D 오브젝트 업데이트는 한번의 requestAnimationFrame() 호출을 통해 모두 메모리상에서 적은 오버헤드로 처리된다. (90fps 이상 지원)


- Tool Agnostic : 대부분의 라이브러리, 프레임워크, 툴 like React, Preact, Vue.js, d3.js, Ember.js, jQuery.js와 호환


- Visual Inspector : visual 3D inspector를 제공 : ctrl + alt + i


- Components : geometries, materials, lights, animations, models, raycasters, shadows, positional audio, text, and Vive / Touch / Windows Motion / Daydream / GearVR / Cardboard controls 같은 컴포넌트와 함께 동작이 가능



A-Frame지원


1. A-Frame 지원 VR Headset

  • HTC Vive with controllers and trackers
  • Oculus Rift with Touch controllers
  • Google Daydream with controller
  • Samsung GearVR with controller
  • Google Cardboard
  - 하드웨어 권장 사항


2. A-Frame 지원 브라우저


WebVR 지원하는 브라우저 정보 https://webvr.rocks/

A-Frame은 WebVR spec을 구현한 모든 브라우저에서 지워된다.


-PC


-Mobile : WebVR지원이 없는 모바일 브라우저에 A-frame은 WebVR Polyfil을 지원하고 그것을 사용한다. 따라서 수준에 대해 한계가 존재.


  • Safari for iOS
  • Chrome for Android
  • Firefox for iOS
  • Samsung Internet
  • UC Browser
- flat/plain 3D 화면 지원은 WebGL지원을 포함하는 모든 브라우저에 지원한다 : Firefox, Chrome, Safari.. (three.js 기반이니까 당연히?)




*entity-component structure

링크 : https://aframe.io/docs/0.8.0/introduction/entity-component-system.html


1) Entity : Component들이 붙여질 수 있는(연결되는) 컨테이너 object. 장면의 모든 Object들의 기초이다.

    Scene안에 모든 Element들 <a-box>, <a-entity>....

   Entity Docs - https://aframe.io/docs/0.8.0/core/entity.html

   ex) <a-entity></a-entity>




1-1) Properties


   - javascript를 이용한 Entity 접근 : 


< a-entity  id = "mario" > </ a-entity >
var el = document .querySelector ( '#mario' );

  

var camera = document.querySelector('a-entity[camera]').components.camera.camera;
var material = document.querySelector('a-entity[material]').components.material.material;

   - components : Entity의 components에 접근

   - hasLoaded : Entity의 모든 Components가 초기화되고 연결되었는지 여부

   - isPlaying : Entity가 활성화되 있고 플레이 중인지 여부

   - object3D : Entity의 three.js Object3D의 참조가능. THREE.Group 객체이다.

   - object3DMap : THREE.Object3D Component가 설정한 여러 유형(camera, mesh,. sound)에 대한 접근 제공

** setObject3D, removeObject3D로 THREE.Object3D들로 구성된 Entity set 관리가 가능하다**

   - sceneEL : scene에 대한 접근




1-2) Methods


- addState(stateName)

- emit(name, detail, bubbles)

- flushToDOM(recursive)

-......................



2) Component : Entity에 외관, 행동, 기능을 제공하는 재사용 가능한 모듈 혹은 데이터 컨테이너이다. 모든 로직은

 Component를 통해 구현된다.

   https://aframe.io/docs/0.8.0/core/component.html

   ex) position, rotation, scale, geometry, material, light 등...

  

<a-entity geometry="primitive: box" material="color: red"
          light="type: point; intensity: 2.0">



- Component를 따로 정의하여 등록이 가능함.

  AFRAME.registerComponent(name, definition);

  name: Component 이름

  definition : Component 정의



3) System : Component의 클래스를 위한 scope, management, service 제공




*A-Frame 샘플 코드 보기

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Hello, WebVR! • A-Frame</title>

    <meta name="description" content="Hello, WebVR! • A-Frame">

    <!--A-Frame 라이브러리 참조-->

    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

  </head>

  <body>

    <!--장면-->

    <a-scene background="color: #ECECEC">


 <!--기본 물체들 Entity 선언 및 속성 설정-->

      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>

      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>

      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>


    </a-scene>

  </body>

</html>



*추가 라이브러리

A-Fream extras : https://github.com/donmccurdy/aframe-extras



*A-Frame과 DOM

:A-Frame은 component 데이터를 메모리에 저장한다. DOM을 update하는 것은 component 데이터를 문자열로 변환하는데 CPU 처리시간이 소요되기 때문에 성능상의이유로. debug Component를 Scene에 연결하여 debug용도로 볼 수 있다.

--flushTODOM() 메서드 참고--

<a-entity geometry material position rotation></a-entity>

기본적으로 DOM tree에서 이런식으로 표시되지 않음.

저작자표시 비영리 변경금지

'개발 > VR' 카테고리의 다른 글

A-Frame Tracker 지원 여부 리서치  (0) 2018.12.12
A-Frame Primitives  (0) 2018.12.05
WebXR Spec 관련 블로그 번역 (2/2)  (0) 2018.12.04
WebXR Spec 관련 블로그 번역 (1/2)  (0) 2018.12.04
Sketchfab VR 스펙 내용  (0) 2018.11.29
'개발/VR' Related Articles more
Comments