목차 01. 스스로만들어보는 VR/AR 콘텐츠 02. 가상현실에코딩접목하기 03. 3D 슈팅게임만들어보기 04. 분자운동모형및가상교실환경만들기 05. 태양계모형만들어보기 06. 관절및회전장치만들기 07. 롤링볼장치설계및구현하기 08. 충돌감지및거리측정기능활용하기 09.

Size: px

Start display at page:

Download "목차 01. 스스로만들어보는 VR/AR 콘텐츠 02. 가상현실에코딩접목하기 03. 3D 슈팅게임만들어보기 04. 분자운동모형및가상교실환경만들기 05. 태양계모형만들어보기 06. 관절및회전장치만들기 07. 롤링볼장치설계및구현하기 08. 충돌감지및거리측정기능활용하기 09."

예솔 수
5 years ago
Views:

1 가상현실 (VR) 코딩체험북 v2.0 헬로앱스

2 목차 01. 스스로만들어보는 VR/AR 콘텐츠 02. 가상현실에코딩접목하기 03. 3D 슈팅게임만들어보기 04. 분자운동모형및가상교실환경만들기 05. 태양계모형만들어보기 06. 관절및회전장치만들기 07. 롤링볼장치설계및구현하기 08. 충돌감지및거리측정기능활용하기 09. 나만의가상공간기획및설계하기 ( 자료수집 ) 10. 나만의가상공간창작및발표하기

3 01 스스로만들어보는 VR/AR 콘텐츠 학습목표 VR( 가상현실 ) 및 AR( 증강현실 ) 콘텐츠의구성원리를이해할수있다. 간단한 VR/AR 콘텐츠를스스로작성할수있다. 실습개요 3D 공모양을추가해본다. VR 및 AR 전환기능을실습해본다. 공의옵션을추가하는방법을실습해본다. 특수효과와재질을활용하여콘텐츠의내용을다양하게변화시켜본다. 무중력옵션을이용하여나만의재미있는콘텐츠를창작해본다.

4 준비물 VR 코딩앱 ( 안드로이드용또는 PC 용, 설치과정참조 ) 스마트폰 ( 안드로이드기기 ) 또는 PC ( 윈도우 OS) VR 디바이스 ( 옵션사항임, 스마트폰장착형 ) VR 코딩앱 VR 디바이스 ( 카드보드종류 )

1.1 가상현실 (VR) 과증강현실 (AR) 최근들어글로벌 IT 기업들이많은종류의

체험방등이생기고있는등일상생활에서 VR 기기들이점화대중화되어가고있는추세이다.

5 1.1 가상현실 (VR) 과증강현실 (AR) 최근들어글로벌 IT 기업들이많은종류의 VR 디바이스들을출시하고있고, 또한우리주변에서도 VR 체험방등이생기고있는등일상생활에서 VR 기기들이점화대중화되어가고있는추세이다. 본단원에서는최근관심을끌고있는 VR 및 AR 기술을간략히소개하고간단한콘텐츠들을직접만들어봄으로써해당기술의차이점을이해할수있도록할예정이다. 가상현실 (VR: Virtual Reality) VR 기술은원래 3D 기술로만든가상의세계또는공간을의미하지만최 근들어서는공간몰입기능이있는디바이스와관련된기술을의미하는 형태로많이사용되고있다. HTC 바이브오큘러스리프트구글카드보드 < 주변에서자주볼수있는 VR 디바이스 > 롤러코스터 비행조종게임 입체영화 <VR 콘텐츠사례 >

6 VR 콘텐츠의특징 VR 콘텐츠는눈에보이는공간전체가모두가상으로만들어진다. 공간몰입기능이제공되어 360 도각도로영상을보거나가상의 3D 공간 속에들어가주변을둘러볼수있다. 가상현실디바이스 가상현실디바이스는 HMD (Head Mounted Display) 또는 VR 헤드셋이 라고불리며, PC 에연결되어모니터역할을하는기기와스마트폰을장착 하는기기 2 가지가있다. PC 에연결되는방식 스마트폰을장착하는방식 가상현실콘텐츠 가상현실콘텐츠는양안영상 (Side By Side) 형식으로이루어져있으며, 왼쪽눈에비추어지는영상과오른쪽눈에비추어지는영상 2 가지가서로 붙어있는형식으로구성되어있다. VR 에서사용되는양안영상 (Side By Side)

7 실습 VR 디바이스또는콘텐츠를체험한사례에대해발표해본다. 증강현실 (AR: Augmented Reality) AR 기술은가상현실기술과달리실제의영상정보를배경으로한다. 대부 분카메라영상위에추가적인정보를표시하는기술을의미한다. 증강현실콘텐츠사례 실습 VR 콘텐츠사례와 AR 콘텐츠사례에대해각각발표해본다.

8 1.2 VR 코딩프로그램준비하기 VR 코딩은스마트폰또는 PC 에서실습이가능하며, 둘중에하나의기기 만있어도실습이가능하다. PC 용 VR 코딩프로그램설치하기 웹브라우저를실행한후, 아래의경로로접속하여 PC 용 VR 코딩프로그램 을다운로드받는다. 다운로드페이지 : zip 파일로되어있는압축파일을다운로드받은후, 압축을풀면실행할 수있는 exe 파일을볼수있다. 이파일을실행하면 VR 코딩프로그램이 실행된다. 주의사항 ) 반드시압축을해제한후, 압축해제된폴더에있는 exe 를실행 한다.

9 제품키를입력하는화면에서제품키를입력하여프로그램을활성화시킨 다. PC 용제품키와스마트폰용앱제품키를동일하게사용할수있다. 코딩시작하기버튼을클릭한다.

10 스마트폰용 VR 코딩프로그램설치하기 구글 Play 스토어에서 helloapps 3d 로검색을한다. 검색결과에서 VR 코딩앱에있는설치버튼을클릭한다. 설치과정이끝나고나면열기버튼을클릭한다.

11 권한허용버튼을 3 번에걸쳐클릭해준다. 제품키를입력하는화면에서제품키를입력하여프로그램을활성화시킨 다. PC 용제품키와스마트폰용앱제품키를동일하게사용할수있다.

12 코딩시작하기버튼을클릭한다.

13 1.3 3D 공모양추가하기 새로운파일생성하기 스크립트목록화면에서오른쪽아래에있는새로만들기버튼을클릭한 다. 기본 VR 콘텐츠만들기버튼을클릭한다.

14 새로운편집기화면이표시되면왼쪽의명령어목록에서스크롤바를움직 여명령어들을확인한다. 로직명령어 3D 오브젝트환경명령어도구명령어

15 공모양추가하기 3D 오브젝트명령어에서공모양추가하기명령어를클릭한다. sphere1 이름을가지는공모양추가하기명령어가추가되었으며, 오른쪽위쪽창에는공모양추가하기명령어가선택되었을때사용할수있는옵션들이표시된다. 오른쪽아래에는공의이름을변경할수있는속성창이표시된다.

16 코드실행하기 오른쪽화면아래에있는실행버튼을클릭하면현재작성된코드를실행 시킬수있다. 왼쪽조이스틱버튼은카메라의방향을회전시키는기능을수행한다.

17 오른쪽조이스틱버튼은카메라를앞뒤로이동시키는기능을수행한다. 오른쪽위의 VR 버튼은 VR 모드로변환시켜주는기능을수행한다. 원래 되로돌아오려면키보드에서 Esc 키또는스마트폰에서뒤로가기버튼을 클릭한다. 원래의코드편집기화면으로돌아오려면키보드에서 Esc 키또는스마트 폰에서뒤로가기버튼을클릭한다.

18 3 차원좌표계 VR 코딩에서는 3 차원공간상에물체를표시한다. 따라서 3 차원좌표계에 대해서이해를충분히하고있어야원하는위치에물체를표시하고원하는 형태로크기를변경할수있다. 3 차원좌표계에서각축의방향은다음과같다. 공의위치를위쪽으로옮기려면 Y 축의값을증가시켜주면된다.

19 공의위치변경하기 공의위치를위쪽으로옮기려면옵션에서위치옵션을클릭한다. 위치옵션이선택된상태에서오른쪽아래의속성창에서 Y 축의 + 버튼을 클릭하여값이 4.0 으로증가시켜준다.

20 실행버튼을클릭하여공의위치를확인해본다.

21 1.4 통통튀는공만들기 떨어지는공 이전활동에서만든공은 3D 모양으로보이긴하지만현재허공에떠있는 형태로서아래로떨어지지않고고정되어있다. 이공을떨어지게하려면 공에질량옵션을추가해주어야한다.

22 질량은 kg 단위로서기본값이 1.0kg으로주어진다. VR 코딩에서는표준단위를사용하며, 거리는 m, 질량은 kg, 힘은 N 단위를사용한다. 코드를실행하면공이아래로떨어지는것을볼수있을것이다.

23 바닥판추가하기 떨어지는공이끝없이떨어지지않도록바닥판을추가해보자. 3D 오브젝 트명령어목록에서바닥판추가하기명령어를클릭하여바닥판을추가해 본다.

24 작성된코드를실행하면바닥판이추가되고공이바닥판위로떨어지는 것을볼수있다. 공에탄성추가하기 이전활동의결과를보면공이튀기지않고바닥에그냥붙어버리는것을볼수있는데, 이는공과바닥에탄성이없이때문이다. 먼저공모양추가하기명령어를선택한후, 옵션에서탄성옵션을찾아서공에추가해준다.

25 탄성값은 0.0 ~ 1.0 사이의값을가지며, 0 은탄성이없는상태이고, 1.0 은탄성이가장큰상태이다. 바닥판에도탄성옵션을추가해준다. 위의코드를실행해보면예상과달리바닥판이공과함께떨어지는것을 볼수있다. 이는탄성이적용되면질량이같이적용되기때문이다.

26 바닥판위치고정시키기 바닥판추가하기명령어를선택한상태에서오른쪽옵션목록을보면중 간에위치고정옵션을볼수있다. 바닥판추가하기명령어에위치고정옵 션을추가해준다. 코드를실행하면공이통통튀는것을볼수있을것이다.

27 1.5 공의모양변경하기 크기옵션 공은위치옵션과마찬가지로크기옵션도 3 차원좌표축을기준으로비율 을지정해줄수있다. 공의크기를별도로지정하지않으면공의크기비율은기본적으로 X, Y Z 축에대해각각 1, 1, 1 의비율이적용된다. 만약 X 축으로크기를 3 배키우려면다음과같이크기옵션을추가한후, X 축의값을 3.0 으로수정해준다.

28 X 축으로크기가 3 배늘어난결과는다음과같다. 실습 공의크기를다양한형태로변경시켜본다.

29 1.6 바닥판과공에사진입히기 재질옵션 3D 오브젝트에재질옵션을추가하면 3D 모양의외부에사진이나그림을 입힐수있다. 먼저, 바닥판추가하기명령어를선택하고, 옵션목록에서재질을추가해 준다. 벽돌모양의재질이기본값으로설정되어있으며, 재질속성에서다른그 림으로변경할수있다. 일단코드를실행하여벽돌그림이어떻게적용되는지확인해본다.

30 다른재질을선택하여결과가어떻게달라지는지관찰해본다.

31 사진입히기 오른쪽재질속성창맨아래에는카메라로사진찍기버튼이있다. 이버 튼을클릭하면사진을촬영하게되고, 촬영된사진이재질로선택되게된 다. 실습 공과바닥판에친구들의얼굴사진이나옷사진을입혀본다.

32 1.7 증강현실모드적용하기 증강현실모드 로직명령어맨위에있는증강현실모드명령어를추가한후코드를실 행시켜본다. 카메라영상위에 3D 콘텐츠가표시되는것을볼수있을것이다.

33 1.8 특수효과추가하기 특수효과추가하기 로직명령어아래쪽에있는도구명령어그룹으로이동해보면특수효과 추가하기명령어를볼수있다. 이명령어를클릭하여추가해준다. 옵션에서효과파일을추가해준다.

34 효과파일의기본값에는비눗방울이선택되어있다. 실행버튼을클릭하여 결과를확인해본다. 물효과 효과파일목록에서맨위에있는 Daylight Water 효과를선택한후, 코 드를실행시켜본다.

35 실습 다음과같이비가오는효과를추가하려면어떠한효과를선택해야하는 지찾아보고결과를비교해본다.

36 1.9 무중력설정하기 새로운파일만들기 편집기왼쪽아래에있는뒤로가기버튼을눌러서목록으로이동한다. 오른쪽아래에있는새로만들기버튼을눌러서새로운코드를생성한다. 박스모양추가하기 3D 오브젝트명령어에서박스모양추가하기를클릭하여새로운박스모양 을추가한다. 아래그림과같이옵션을추가해준다. 박스모양에는무중력이적용되어있어박스가공간에중력을적용받지 않고떠있는상태가된다.

37 공과충돌시키기 무중력상태로떠있는박스가공과충돌하였을때, 어떻게움직이는지를 관찰하기위해아래와같이떨어지는공을추가한후실행해본다. 공이박스와충돌한후, 박스가회전하면서공간을이동하는것을볼수 있을것이다.

38 실습 공간상에다양한위치에여러 3D 물체를생성한후무중력으로설정한다. 공이나다른물체를생성된물체들과충돌시켜무중력공간상에서물체가 어떻게운동하는지를관찰한다.

01 3 차원가상공간의이해 학습목표 3 차원가상공간의구성원리를이해할수있다. 3 차원가상공간상에물체를스스로추가할수있다. 실습개요 3D 박스모양을추가해본다. 3차원위치개념을실습해본다. 모양의옵션을추가하는방법을실습해본다. 특수효과와재질을활용하여콘텐츠의내용을다양하게변화시켜본다

드론코딩체험북 v1.0 헬로앱스 http://www.helloapps.co.kr 01 3 차원가상공간의이해 학습목표 3 차원가상공간의구성원리를이해할수있다. 3 차원가상공간상에물체를스스로추가할수있다. 실습개요 3D 박스모양을추가해본다. 3차원위치개념을실습해본다. 모양의옵션을추가하는방법을실습해본다. 특수효과와재질을활용하여콘텐츠의내용을다양하게변화시켜본다. 준비물