Decentraland Software Development Kit(SDK) 2.0 버전

2018.08.02
Virtualgraph Lab
한국VR/AR산업협회 책임연구원
박지섭
Decentraland Software Development Kit(SDK)
Introduction
Version 2.0

WHAT IS DECENTRALAND?
• Decentraland는 Ethereum 블록 체인을 기반으로하는 가상 현실 플랫폼임. Decentraland 플랫폼에서 사용자는 콘
텐츠 및 응용 프로그램을 만들고 경험하고 수익을 창출 할 수 있음.
• Decentraland 내의 3D 가상 공간은 Ethereum 스마트 계약에서 유지 관리되며 유한하고 이동 가능함. 여기서는 비
대체 가능 디지털 자산(non-fungible digital asset)을 LAND라고 표현함. LAND는 좌표 (x, y)로 식별되는 Parcel 로 나
뉨. 이 Parcel은 커뮤니티 구성원이 영구적으로 소유하며 Decentraland의 cryptocurrency 토큰 인 MANA를 사용하
여 구매함. 사용자는 자신이 만든 환경과 응용 프로그램을 제어 할 수 있음. 이러한 3D 콘텐츠는 응용 프로그램
부터 게임까지 매우 다양할 수 있음.
• 일부 Parcel는 주제별 공동체 또는 District로 구성됨. Parcel를 District으로 구성함으로써 공동체는 공동 관심사를
토대로 공유 공간을 만들 수 있음. 각 District의 프로젝트 설명은 GitHub 에서 확인할 수 있음.
• Decentraland를 구성하는 컨텐츠는 IPFS 네트워크를 통해 저장되고 배포되며(토렌트 비슷한 방식) 소유권과 트
랜잭션은 Ethereum 블록 체인에서 유효성이 검사됨.
Introduction

BUILDING SCENES
Installation Guide
• Decentraland의 Scenes을 만드려면 CLI (Command Line Interface)를 설치해야함.
• CLI를 사용하면 "off chain"개발 환경에서 장면을 컴파일하고 미리 볼 수 있음. 로컬에서 테스트한 후 CLI를 사용
하여 컨텐츠를 IPFS에 업로드하고 LAND와 링크할 수 있음.
• 참고 : Decentraland CLI는 npm을 통해 배포되며 Decentraland SDK는 TypeScript만 지원함
Before you Begin
• Node.js (version 8) - https://github.com/decentraland/cli#nodejs-installation
• IPFS - https://dist.ipfs.io/#go-ipfs
• Python 2.7.x - https://www.python.org/downloads/
• Visual Studio Code - https://code.visualstudio.com/

BUILDING SCENES
To install the CLI on Mac OS
To install the CLI on Windows
npm install -g decentraland
1. Install windows-build-tools by running 2. Install the CLI by running
Update the CLI on any platform
npm update -g decentraland

BUILDING SCENES
Introduction
• LAND에 전개하는 컨텐츠를 Scene 이라고 함. Scene 은 콘텐츠를 렌더링하는 인터렉티브 프로그램을 말하며
게임, 비디오 화면, 아트 갤러리등이 될 수 있음.
• 안전성과 성능면을 위해 3D엔진과 다른 컨텍스트에서 Scene을 실행시키기 때문에 개발자가 3D엔진 내부에
개입하거나 3D엔진 내부에 무엇이 있는지 알아야 할 필요도 없음.
How do scenes run?
• Decoupling으로 실행됨. Scene은 3D엔진과 동일한 컨텍스트로 실행되지 않으며 3D엔진과 동일한 컴퓨
터에서 실행되지 않을 수도 있음. 3D렌더링 엔진과 완전히 분리된 방식으로 SDK를 개발했음. RPC 프로
토콜로 작동하며,이 프로토콜은 장면의 일부만 렌더링하고 이벤트를 제어하기 위해 클라이언트의 작은
부분만을 할당함
• 또한 통신 프로토콜을 추상화하여 WebWorker에서는 로컬로, WebSocket을 통해서는 Node.js 서버에서
원격으로 장면을 실행할 수 있음.

BUILDING SCENES
Entities and Components
• Entity는 Scene에서의 구축을 위한 가장 기본적인 단
위이며 Decentrand에 있는 모든 3차원 장면은 Entity-
Component모델에 기반을 두고 있음.
• Entity는 다른 Entity를 자식으로 가질 수 있으며, 이
들은 상위 요소를 상속할 수 도 있음. 상위 Entity가
위치, 크기 조정, 회전 된 경우 하위 Entity에도 영향
을 받음.
Why do we use Typescript?
• TypeScript는 JavaScript의 상위 집합이며 Object-
riented Programming 및 Type Declaration을 사용
할 수 있음. 자동 완성과 유형 검사 기능을 사용하면
개발 시간이 단축되고 견고한 코드베이스를 만들 수
있음. 무엇보다 개발자가 이해하기 쉬움.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="rain" particle-system="preset: rain; color: #24CAFF; particleCount: 5000"></a-entity>
<a-entity id="sphere" geometry="primitive: sphere"
material="color: #EFEFEF; shader: flat"
position="0 0.15 -5"
light="type: point; intensity: 5"
animation="property: position; easing: easeInOutQuad; dir: alternate; dur: 1000; to: 0 -0.10 -5; loop: true"></a-entity>
<a-entity id="ocean" ocean="density: 20; width: 50; depth: 50; speed: 4"
material="color: #9CE3F9; opacity: 0.75; metalness: 0; roughness: 1"
rotation="-90 0 0"></a-entity>
<a-entity id="sky" geometry="primitive: sphere; radius: 5000"
material="shader: gradient; topColor: 235 235 245; bottomColor: 185 185 210"
scale="-1 1 1"></a-entity>
<a-entity id="light" light="type: ambient; color: #888"></a-entity>
</a-scene>
</body>
</html>
A-Frame
*모두의 연구소 Babylon.js 발표(출처: 맹동호, 2018.06.01, Entity Component System)

BUILDING SCENES
Taking Inspiration from React
jQuery way: tell the system how to handle entities, create, mutate and try to reach a desired state.
let scene = metaverse.createScene()
let objModel = metaverse.createObjModel()
let sphere = metaverse.createSphere()
objModel.setAttribute('src', 'models/a.gltf’)
objModel.appendTo(scene)
sphere.setAttribute('position', {x: 10, y: 10, z: 10})
sphere.appendTo(scene)
EntityController.render(scene)
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI
/ 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light1 = new BABYLON.HemisphericLight("light1", new
BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new
BABYLON.Vector3(0, 1, -1), scene);
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {},
scene);
return scene;
};
Babylon.js
vs

BUILDING SCENES
Taking Inspiration from React
the React way: tell the system the desired
state and let it figure out how to get there.
const scene =
<scene>
<obj-model src="models/a.gltf" />
<sphere position={ {x: 10, y: 10, z: 10} } />
</scene>
EntityController.render(scene)
Babylon.jsDecentraland SDK
*모두의 연구소 Babylon.js 발표(출처: 맹동호, 2018.07.13, Discover Basic Elements)
vs

BUILDING SCENES
Creating the file structure
dcl init
The dcl init command creates a Decentraland project in your current working directory containing a scene.

BUILDING SCENES
Creating the file structure

BUILDING SCENES
Preview your scene
dcl preview
• --no-browser 미리보기가 새 브라우저 탭을 열지 못하도록 함
• --port 특정 포트를 지정하여 장면을 실행함. 그렇지 않으면 사용할 수있는 포트를 사용함
• --skip 확인 프롬프트를 건너뜀
W, A, S, D 방향키, 마우스 커서 POINT 방향 <C> 키보드 키 <B> 키보드 키
View bounding boxesView collision meshes
1. 기본 parcel 수정: scene.json
2. console.log() - View > Developer > JavaScript console

BUILDING SCENES
Publishing the scene
• Scene이 Ethereum 네트워크 트랜잭션을 사용하는 경우 (예 : MANA를 지불하면 문을 열리게 하고 싶은 경우)
• Ethereum Ropsten 테스트 네트워크를 사용하고 테스트용 MANA를 대신 전송 해야 함. 테스트 네트워크를 사
용하려면 Metamask 에서 Ropsten 테스트 네트워크를 설정하고 Ropsten blockchain에서 MANA를 소유하고 있
어야 함. 이 테스트 MANA는 Decentraland에서 무료로 얻을 수 있음.
• 테스트 네트워크 DEBUG를 사용하여 Scene을 미리 보려면 브라우저의 장면 미리보기에 액세스 할 때 사용하
는 URL에 속성을 추가해야 함 . 예를 들어 http://127.0.0.1:8000/?position=0%2C-1 일 경우 URL을
http://127.0.0.1:8000/?DEBUG&position=0%2C-1 로 설정함.

BUILDING SCENES
Before you begin
• scene.json파일에 Metamask 공개 주소 및 장면을 업로드하려는 LAND 정보가 입력되어 있어야 함
• Scene 리미테이션을 넘으면 안 됨. Scene의 미리보기를 실행할 때마다 유효성이 검사됨
• IPFS가 설치되어 있어야 함.
• Metamask의 Parcel과 LAND정보가 계정에 있어야 하며 계정에는 거래 수수료를 지불하기 위해 최소량의 GAS
가 있어야 함.
To publish the scene
• 최신 변경 사항으로 Scene이 로컬로 빌드되었는지 확인한 npm run build 로 실행함
• Parcel과 동일한 공개 주소로 Metamask 계정에 로그인 함
• IPFS 데몬을 시작함.
• dcl deploy 을 해당 폴더에서 실행함 * IPFS (Inter-Planetary File System)는 파일 배포를 위한 하이퍼 미디어 프로토콜 및 P2P 네트
워크임. BitTorrent와 비슷한 방식으로 모든 장면 컨텐츠를 호스트 및 배포하여 Decentraland
네트워크를 분산 유지함.
https://docs.decentraland.org/documentation/scene-limitations/
Scene limitations

SDK REFERENCE
SDK Overview
Scene Content Guide
Event Handling
Scene State
Entity Reference
Scriptable Scene Object
Scene Limitations
Blockchain Operations
TypeScript Coding Guide

SDK REFERENCE
• Primitive라고 하는 여러 기본 모양이 미리 정의 된 엔티티 유형을 Scene에 추가 할 수 있음. 이미 특정 구성
요소(예 : 모양)가 정의되었으며 다른 요소(회전 및 색상 등)등을 설정할 수 있음.
Scene Content Guide
The following types of entities are available:
<Box />
<Sphere />
<Plane />
<Cylinder />
<Cone />
<box position={vector} color="#ff00aa" scale={2} />
https://www.w3schools.com/colors/colors_picker.asp
{ x: 0, y: 0, z: 0 }
https://docs.decentraland.org/sdk-reference/entity-interfaces/
Entity reference
Colors Picker

SCENE CONTENT GUIDE
Entity positioning
• 모든 엔티티는 위치, 회전 및 크기를 가질 수 있음.

SCENE CONTENT GUIDE
Entity positioning
• 보이지 않는 기본 엔터티를 포함하여 다른 엔터티 집합을
래핑하고 해당 엔터티를 그룹으로 정의 할 수 있음

SCENE CONTENT GUIDE
• 아래 예제는 부드럽게 회전하도록 구성된 상자 엔티티의
예제임
• 엔티티 속성에 아래의 전환을 추가 할 수 있음.
position, rotation, scale, color, lookAt
Transitions

SCENE CONTENT GUIDE
• 각 속성의 전환은 별도로 구성될 수 있음
Transitions

SCENE CONTENT GUIDE
Turn to face the avatar
<box color={currentColor} billboard={7} />
이 설정에는 다음 모드 중 하나를 선택하는 번호를 제공해야함
• 0 : 어느 축에서도 움직임 없음
• 1 : X 축 에서만 이동하고 다른 축에서는 회전이 고정됨
• 2 : Y 축 에서만 이동하면 다른 축의 회전이 고정됨
• 4 : Z 축 에서만 이동하면 다른 축의 회전이 고정됨
• 7 : 모든 축을 회전하여 사용자를 추적함

SCENE CONTENT GUIDE
Turn to face a position
• lookAt 를 사용하면 Scene의 특정 위치를 향하도록 엔티티를 설정할
수 있음. 이 방법은 각도를 사용하지 않고 엔티티의 회전을 설정하는
방법임

SCENE CONTENT GUIDE
Color
https://www.w3schools.com/colors/colors_picker.asp
• 엔티티의 색을 설정하려면 해당 color에 해당하는
16 진수 값으로 설정함

SCENE CONTENT GUIDE
Materials
• 재질을 포함하는 glTF 모델을 임포트할 때 재질은 Scene에 임포트되므
로 <material />선언된 엔티티가 없어도 됨.
atlas.png

SCENE CONTENT GUIDE
Texture mapping
• 재질을 사용하는 엔티티는 텍스처의 특정 영역을 해당 엔티티에 매핑
할 수 있음. 엔티티의 정점에 해당하는 텍스처 2D 이미지에서 u 와 v 좌
표를 설정해야함. 엔티티가 가지는 정점이 많을수록 uv 좌표를 텍스처
에 정의해야 할 필요도 늘어남. 예를 들어 평면에는 총 8 개의 uv 점이
정의되어야 함. 앞, 뒤 두개의 면 각각에 대해 4개의 uv가 정의되어야함.

SCENE CONTENT GUIDE
Transparent materials
• 재질을 투명하게 만들려면 텍스처에 사용하는 이미지에 알
파 채널을 추가해야함. material은 기본적으로 텍스처 이미지
의 알파 채널을 무시함.

SCENE CONTENT GUIDE
Basic materials
• <material />엔터티 대신 엔터티를 통해 재질을 정의 할 수 있
음. <basic-material />. 이렇게 하면 쉐이드가 없고 빛의 영향
을받지 않는 재질이 생성됨.
• 밝기가 일정해야하는 사용자 인터페이스를 만드는 데 유용
하며, 장면을 좀 더 미니멀 한 모양으로 제공하는 데에도 사
용할 수 있음.

SCENE CONTENT GUIDE
Import 3D models
https://sketchfab.com/models/ccccb7481cb9401e9408770aabd8d421
• glTF 모델은 자체 텍스쳐와 애니메이션도 포함 할 수 있음. 모
든 모델, 쉐이더 및 텍스처는 Scene Limitation을 고려해야 함.

SCENE CONTENT GUIDE
Animations
• shark_skeleton 안에 포함 된 두 개의 애니메이션을 설정함
(bite, swim)
• loop속성 은 애니메이션을 계속 반복되도록 설정할 수 있음.
이 경우 loop:false 로 설정하면 애니메이션은 한 번만 호출됨.

SCENE CONTENT GUIDE
Sound
• 지원되는 사운드 형식은 브라우저에 따라 다를 수 있지만,
mp3, .accc하고 .ogg. .wav파일을 사용하는 것이 안전함

SCENE CONTENT GUIDE
Video
• 지원되는 비디오 형식은 브라우저에 따라 다르지만 .mp4를
사용하는 것이 안전함
https://www.ssyoutube.com/watch?v=11FNXZW1dkA[TIP] 유튜브에서 mp4형식으로 다운로드 가능

SDK REFERENCE
Entity collision
• 모든 엔티티는 기본적으로 충돌이 비활성화 되어 있음. 엔티티 유형에 따라 충돌은 다음과 같이 활성화됨.
- boxs, spheres, planes 과 같은 기본 엔티티의 ignoreCollisions 옵션을 false로 설정하여 충돌을 가능케 함
- glTF 모델에서 충돌을 가능하게하려면 다음의 방법을 사용함
1) 충돌이 허용된 보이지 않은 엔티티를 일반 엔티티와 겹침
2) collider mesh가 엔티티에 포함되도록 Blender와 같은 3D저작 도구에서 이름을 수정함. collider mesh의
이름을 x_collider 로 하며 여기서 x는 모델의 이름임. 예를 들어 house 라는 모델이 있을경우 collider mesh
의 이름을 house_collider로 이름을 수정함.
• Decentraland에는 현재 물리 엔진이 없으므로 엔티티가 떨어지거나 충돌하거나 튀어 나오게하려면이 동작을
장면에 코딩해야함
- Preview 화면에서 <C>키보드 버튼을 눌러서 충돌체들을 확인할 수 있음

SDK REFERENCE
Event Handling
• Scene에 이벤트를 응답하게 하는 방법은 sceneDidMount() 메서드를 설정하는 것임

EVENT HANDLING
The click event
일반 클릭 이벤트는 유효한 항목에서 수행 된 모든 클릭을 나타냄. 이벤트에는 두 개의 매개 변수가 있음.
• elementId: the id of the entity that was clicked.
• pointerId: the id for the user who performed the click.
box1 box2

EVENT HANDLING
Entity-specific click events
하나의 엔티티에서 이루어진 클릭을 처리하는 더 간단한 방법은 해당 엔티티에 특정한 클릭 이벤트를 수신하는
것임.

EVENT HANDLING
Pointer down and pointer up
사용자가 입력 컨트롤을 눌렀거나 놓을 때마다 포인터 아래로 및 포인터 위로 이벤트가 발생함. 마우스, 터치
스크린, VR 컨트롤러 또는 다른 종류의 컨트롤러 일 수 있음. 사용자의 아바타가 가리키는 위치는 중요하지
않으며, 이벤트는 매번 트리거됨.
버튼을 누르고 있을때 버튼을 놓았을때

EVENT HANDLING
Position change
positionChanged 이벤트는 변경 될 때마다 사용자의 위치를 보냄
• position : 장면의 기본 구획을 기준으로 사용자의 위치를 나타내는 Vector3Component.
• cameraPosition : 세계에 상대적인 사용자의 절대 위치를 갖는 Vector3Component.
• playerHeight : 사용자의 눈 높이 (미터).

EVENT HANDLING
Rotation change
rotationChanged 이벤트는 사용자가 변경 될 때마다 찾고있는 각도를 보냄.
• Rotation : 사용자 회전이있는 Vector3Component
• quaternion : 쿼터니온으로 표현 된 사용자의 순환.

SDK REFERENCE
Scene State
• Scene 상태는 시간이 지남에 따라 변하는 일련의 변수로 구성됨. 상태는 Scene의 이벤트가 발생하면 변경됨.
상태가 변경되면 새 상태 값을 사용하여 Scene의 렌더링을 다시 트리거함.

SCENE STATE
Set the State
• 장면 개체의 모든 메서드에서 상태 변수의 값을 설정할 수 있음. this.setState 를 사용함.
Reference the state
• this.state.<variable name>

SCENE STATE
Scene State
• 각 상태 변수에는 장면이 처음 렌더링 될 때의 초기 값이 제공되어야함. 사용자 정의 인터페이스를 선언하여
상태 객체의 유형을 정의 할 수 있음.

Decentraland Software Development Kit(SDK) 2.0 버전

Recommended

Recommended

More Related Content

Similar to Decentraland Software Development Kit(SDK) 2.0 버전

Similar to Decentraland Software Development Kit(SDK) 2.0 버전 (20)

Decentraland Software Development Kit(SDK) 2.0 버전