[교육] VR/AR 콘텐츠 제작 소프트웨어과정

교육명 : [교육] VR/AR 콘텐츠 제작 소프트웨어과정

교육기간 : 2018.06.09(토) ~ 2018.06.30(토) - 매주 토요일 09:30 ~ 17:30

교육장소 : 서울시 강남구 역삼동 819-3 삼오빌딩 3층 1강의장

 

■ 2018.06.09(토)

 ▷ VR/AR 이란??

 - VR(가상현실) = 가상공간 = 게임(3D)

  - 기기발전(HMD(Head Mounted Device) - 오큘러스 => 현실도입

 - AR(증강현실) = 현실공간 + 가상 = 포켓몬고 : 현실감 문제

  - 구글글라스 

 - PC(게임기 포함) + HMD

   - HMD의 가격 고가화로 저변화가 힘듬.

  - 스마트폰 + HMD (삼성 기어VR)

  - 카드 박스 (구글)

 - MR(혼합현실)

 - XR(확장현실)

※ HMD의 문제점

 - 무조건 기기를 장착해야 한다.

   - PC/스마트폰 가상현실 - 파노라마 뷰  (기기 장착이 불필요!)  

    https://developers.google.com/vr/develop/web/vrview-web

    https://googlevr.github.io/vrview/examples/hotspots/index.html

    https://aframe.io/examples/showcase/360-image-gallery/  - 일반/HMD 겸용으로 제작추세!

 

▷ VR/AR 제작 시 필요사항

  - 1. 컨텐츠 생산

     - 3D 구현 디자이너 (3D MAX, MAYA, Blender...)

     - 360도 카메라 사진 / 드론 (방송,영화 제작)

  - 2. 제공 플랫폼 개발 (개발자) - 온/오프, 과금(SI))

     - PC 개발자

     - 게임기 개발자

     - 스마트폰 개발자

       - Android(*)

          - 1. Crome (삼성브라우저) - html, css, javescript

            - javascript 3D 구현엔진 >> WebGL >> three.js(3D) >> a-frame(VR)

              + unity

              - 개발환경 구성

                 1. javascript 언어 => 최신 2016 버전

                     - html, css => webpage 구성하는 언어

                     - html 웹 언어에 포함되어서 브라우저(IE, Chrome)에서 해석되는 프로그램 언어

                     => 서버상에 공개를 하려는 목적으로 구성

                     => 서버를 구성

                         - jdk + tomcat + html => webpage

                         

                      ▷ 자바스크립트(모든) 언어 구성

                       - 자료 - 자료구조

                            - 자료형 (문자열 / 숫자 / 불(진리 값) / NULL(없음) / 함수 / 객체

                            - 변수 / 상수 (값의 저장소 - 메모리)

                              1. 변수명 지정 (식별자)

                              2. 값의 할당 (대입)

                              3. 사용

                       - (흐름)제어 - 알고리즘

                        ※ 편리하게 쓰는 방법 (API)

 

                            ● jdk (jave development kit) - 안드로이드 개발 / 무료

                                www.oracle.com

                               1. jdk-8u172-windows-x64 다운로드

                               2. 다운받은 파일 설치 (Default)

                               3. Path설정

                                 - 시스템 - 고급 시스템 설정 - 고급 - 환경변수(N) - 시스템 변수(S) 의 새로 만들기(W)

                                 - 변수 이름(N) : JAVA_HOME, 변수값(V) : C:\Program Files\Java\jdk1.8.0_172

 

                            ● apache-tomcat

                                www.tomcat.apache.org

                                1. apache-tomcat-8.5.31-windows-x64 다운로드

                                2. C:\javascript 폴더 생성

                                3.  C:\javascript 폴더에 다운받은 파일 압축풀기

                                4. C:\javascript\apache-tomcat-8.5.31\bin\startup.bat 클릭하여 시작

                 

                             ● 소스 편집기 설치

                              1. 비주얼 스튜디오 코드

                               www.visualstuio.com

                                 VSCodeSetup-x64-1.24.0

 

▷ tomcat + html 정상 개발환경 테스트

                              1. html 문서 - tomcat서버에 실행되는 위치 확인

                              2. VISUAL STUDIO CODE 로 서버 테스트 소스 작성

                              3. 파일 - 다른 이름으로 저장-"C:\javascript\apache-tomcat-8.5.31\webapps\ROOT"경로에

"ex01.html" 파일명으로 저장

                              4. 브라우저 : http://ip:8080/ex01.html

                              5. 정상 실행여부 확인

 

                 2. WebGL

                 3. three.js

                 4. a-frame

                 5. unity - WebGL - web

            - PC - >> OpenGL >> 언어 라이브러리

 

          - 2. native webview (직접 브라우저 구현) - java

          - 3. Unity(*) - c#

          - 4. Unreal - c++

       - iPhone

▶ 가상현실 개발환경 설정

▶ Unity 엔진 소개

▶ Unity 엔진 기본기능

▶ 3D 모델 임포드

▶ 다양한 이펙트 구현

 

■ 2018.06.16(토)

 - 해외에서는 UnReal (C언어 기반) 방향으로 가는 추세!!

   유니티는 사용하기 가 좋고,, 성능면에서는 UnReal이 좋았으나.,, UnReal도 사용하기 편한 방향으로 가는 중!!

■ 안드로이드 기기에서 VR 표현하는 기법

 1. 웹(WebGL)

    Google에서 "22-experimental-webgl" 검색

      https://www.awwwards.com/22-experimental-webgl-demo-examples.html

    html발전 -- html5 버전 - Canvas => 2d / 3d (이 전에는 플래시만으로만 개발 가능했음)

      - www.html5test.com - html5를 지원하는 비율 확인 사이트

   ※ 별도의 플레이어를 설치할 필요가 없다.. (플래시, 유니티는 설치 필요!!)

   - javascript...

     - DOM (Document Object Model)

           javascript -> 동적 html 생성/수정/삭제

           html 문서에 내용을 찾는 메서드

           Document 포함되어진 메서드

           1. getElementById()

           2. querySelector()

     - Event

 - 이벤트 + 함수 동작

 

https://www.w3schools.com

https://www.w3schools.com/graphics/canvas_clock.asp        -- 시계예제

■ 스마트폰

 - 안드로이드

- AndroidStudio (개발도구)

- 안드로이드 버전 별 SDK - 6.0 마시멜로

- 설치시간이 오래걸림.

https://developer.android.com/

https://developer.android.com/studio/write/layout-editor

android - ( java -> kotlin )

 - 아이폰

 2. 플래시

 3. 유니티

▶ 유한상태머신 구현

▶ 레이캐스트 활용

▶ LOD 및 UGUI 기능

▶ 모바일 플랫폼 최적화 기법

▶ 이펙트 및 써드파티 플러그인

 

■ 2018.06.23(토)

https://threejs.org/

https://threejs.org/examples/#webgl_geometries

Mesh - 그물망 (와이어 프레임)

Mesh = Geometry + Material

- Geometry - 도형

- Material (질감(재질))

조명

 - 방향광 DirectionLight (태양빛)

 - 점광    PointLight      (집중광 - 여러방향으로)

 - 집중광 SportLight      (한방향)

 - 주변광 AmbientLight  (외부광)

 = > 좀더 프로그램 적으로 처리된 조명 : Lambert / Phong

＊ GPU

   - 계산

 - 행렬계산법

 => BlockChain Minning

Shadow(그림자)

 1. 렌더러

shadowMapEnabled

 2. 조명

castShadow

 3. Mesh

caseShadow

receiveShadow

Textures

  2d- 3d

  uv map

https://webvr.info/

https://webvr.info/samples

▶ 가상현실 구동원리와 종류

▶ Unity에서 가상현실 구현하기 위한 설정

▶ 가상현실 SDK 설치 및 데모 앱 구동

▶ 가상현실 콘텐츠 제작

▶ 가상현실 UI 제작 실습

 

■ 2018.06.30(토)

webpage

webgl

-> webvr

1. android chrome vr 허용

or

1. android chrome vr finger print

Crome실행 후,, 주소창에 "chrome://flags/#enable-wet - "WebVR" => Enabled 로 설정

https://docs.google.com/forms/d/e/1FAIpQLSfO0_ptFl8r8G0UFhT0xhV17eabG-erUWBDiKSRDTqEZ_9ULQ/viewform

vr

three.js    - 3D

webvr.js    - vr

=> a-frame 

- https://aframe.io/

- https://github.com/aframevr/aframe/

vr    - 3D

WEBGL 사용가능한 브라우저 확인

https://caniuse.com/#feat=webgl

Unity

-> Android VR

■ 개발 준비사항

1. Android SDK (jdk(1.8.x 권장) + Android Studio)

2. phone test (mobizen mirroring)

3. Unity 설치 (https://unity3d.com/kr)

4. 

GVR 다운로드

 - https://developers.google.com/vr/

 - "GoogleVRForUnity_1.130.1.unitypackage" 다운로드

▶ 가상현실 프로그램 제작 실습 (롤러코스터, 가상공간)

▶ 가상현실 소프트웨어 개발 실무 Project 진행