Letsee WebAR SDK 를 이용하여 AR contents 를 제작하는 것은 일반적인 웹 페이지를 제작하는 것과 같습니다. 다만, AR 환경을 위한 몇가지 제약이 있으며, 이 제약 범위를 준수하는 선에서 WebAR contents 의 제작이 가능합니다.

WebAR contents의 아주 간단한 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Example</title>
		<script src="<https://developer.letsee.io/api/webar?key=**[AUTHENTICATION_KEY_OF_YOUR_PROJECT]**>"></script>
</head>
<body>
<div id="container">
    Hello, world!
</div>
<script>
    letsee.ready(() => {
      letsee.start();
      letsee.addTarget('**<https://developer.letsee.io/api-tm/target-manager/target-uid/609ca3af398942b60ead2d06**>')
        .then(entity => {
            let xrElement = letsee.createXRElement(document.getElementById('container'));
            letsee.bindXRElement(xrElement, entity);
        });
    });
    letsee.init({trackerType: 'image'});
</script>
</body>
</html>

letsee/webar-tutorials-example

위의 간단한 예제를 보면서 AR contents 를 제작하는데 필요한 rule에 대해 설명하겠습니다.

  1. SDK 스크립트의 로드 방법

    /* 방법 1 */
<script src="<https://developer.letsee.io/api/webar?key=**[AUTHENTICATION_KEY_OF_YOUR_PROJECT]**>"></script>

    SDK 를 사용하는 방법은 일반 다른 javascript library 를 사용하는 것과 다르지 않습니다. 단, SDK library를 요청할 때, 반드시 Letsee for Developers 에서 발급받은 authentication key 를 사용해야 합니다.

    발급된 인증키를 복사한 후, 상기 스크립트의 [AUTHENTICATION_KEY_OF_YOUR_PROJECT] 항목에 붙여넣습니다.

  2. ready callback 함수의 등록

    letsee.ready(() => {
   letsee.start();
   ...
});

    엔진의 기동 준비가 완료되었을 때, 실행시키기 위한 callback 함수를 인자로 전달합니다.

    이때, callback 함수에는 반드시 letsee.start(); 가 포함되어 있어야 하며, 만약 함수내에 기술되어 있지 않으면 엔진의 기동 준비가 완료되었더라도 바로 엔진이 시작되지 않습니다.

    그 외, 타겟을 등록하거나 3D model 을 생성 또는 로드하거나, DomElement 를 생성하는 등의 액션을 ready callback 함수에 함께 기술하면, 엔진의 기동 준비가 완료되는 대로 해당 함수의 내용을 실행합니다.

  3. Target 의 등록

    위의 예제에서는 addTarget() 함수를 이용하여 인식대상 (target) 을 등록하였습니다. 타겟을 생성하는 방법에 관하여는 인식대상 (엔터티)의 관리 페이지를 참조하시기 바랍니다.

  4. initialize

    ready callback 함수를 등록한 이후에는 반드시 letsee.init() 함수를 실행하여 엔진이 초기화 될 수 있도록 합니다. 초기화 옵션으로 반드시 trackerType 을 명시해 줘야 하며, 명시된 trackerType 을 이용하여 동작될 수 있도록 엔진은 기동 준비가 됩니다.

    letsee.init({trackerType: 'image'});

이를 통해 알 수 있는 SDK engine 이 시작되는 과정은 아래와 같습니다.

<aside> 💡 SDK 스크립트 로드 → ready callback 함수 등록 → initialize → ready callback 함수 실행 → 엔진 스타트 → 타겟 등록 → 증강 대상체 구성

</aside>