// 1번 arDisplay 모듈 가져오고 init함수 실행 

THREE.ARUtils.getARDisplay().then(function (display) {
  if (display) {
    vrDisplay = display;
    init();
  } else {
    THREE.ARUtils.displayUnsupportedMessage();
  }
});

Three.arutils.getARDisplay ->는 promise로 display를 가지고 온다 
이를 vrdisplay에 저장하고 init함수 실행 

// 2번 arDisplay 모듈 가져오고 init함수 실행 

// 중요한 것 세가지 씬, 카메라 , 렌더러
// 처음에 렌더러 부터 세팅을 한다. threeJs와 마찬가지로 webglRender 인스턴스를 생성해서 render에 적용 

// 디버깅 세팅 

 // threeJs에서 perspectiveCamera라는 첫번쨰 속성은 시야각 , 두번째는 가로/세로 apspectRatio 나머지 두가지 속성은 clipping plane의 near /far값인데 ArPerspectiveCamera에는 vrDisplay가 첫번쨰 인자로 나머지는 같은 값을 받고 마지막 2인자는 vrDisplay의 near, far값을 갖는다.
// THREE.ARPerspectiveCamera ( vrDisplay, 60,window.innerWidth / window.innerHeight,vrDisplay.depthNear vrDisplay.depthFar) 이런 값들이 들어온다. 

function init() { 
  // Setup the three.js rendering environment
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.autoClear = false;
  canvas = renderer.domElement;
  document.body.appendChild(canvas);
  scene = new THREE.Scene();

  // Turn on the debugging panel
  var arDebug = new THREE.ARDebug(vrDisplay, scene, {
    showLastHit: false,
    showPoseStatus: false,
    showPlanes: true,
  });
  document.body.appendChild(arDebug.getElement());

  // Creating the ARView, which is the object that handles
  // the rendering of the camera stream behind the three.js
  // scene
  arView = new THREE.ARView(vrDisplay, renderer);

  // The ARPerspectiveCamera is very similar to THREE.PerspectiveCamera,
  // except when using an AR-capable browser, the camera uses
  // the projection matrix provided from the device, so that the
  // perspective camera's depth planes and field of view matches
  // the physical camera on the device.
  camera = new THREE.ARPerspectiveCamera(
    vrDisplay,
    60,
    window.innerWidth / window.innerHeight,
    vrDisplay.depthNear,
    vrDisplay.depthFar
  );

  // VRControls is a utility from three.js that applies the device's
  // orientation/position to the perspective camera, keeping our
  // real world and virtual world in sync.
  vrControls = new THREE.VRControls(camera);

  // Bind our event handlers
  window.addEventListener('resize', onWindowResize, false);

  // Kick off the render loop!
  update();
}