SceneKit Practice - juniverse1103/ARKitStudy GitHub Wiki

SceneKit Practice

1. Scene Preparation

프로젝트 시작하기

SceneKit을 사용하기 위해서 우선 새로운 Swift Project를 열어줍니다.

위에 보이는 Application Template 중 Game 을 선택하면 기본적인 SceneKit이 적용된 템플렛 프로젝트가 나오지만, 이번 목표는 빈 프로젝트에서 Game Template를 그대로 구현해 보는것입니다.

Single View App 템플렛을 선택해 주세요.
Single View App 템플렛을 선택하면 위와 같이 빈 프로젝트 화면이 나타나게 됩니다.

SceneKit을 사용하기 위해서 고려해야 할 사항은 크게 세가지 입니다.
1. View Controller
2. Asset
3. StoryBoard
이 중 코드를 작성하는 대부분의 작업은 뷰 컨트롤러에서 이루어지며, Asset에는 애플리케이션 내에서 사용할 scn파일과 텍스쳐 파일을 넣어주고, 스토리보드에는 작성한 3D Scene을 렌더링해서 보여주기 위한 SCNView 객체를 띄워주는 작업을 수행해 주어야 합니다.
SceneKit Catalog 추가하기

기존 빈 프로젝트에 생성된 Asset 폴더는 Xcode에서 사용되는 이미지들을 보관하기 위한 xcassets 카탈로그입니다. 우리에게 필요한 것은 SceneKit에 사용될 .scn 파일을 보관할 scnassets 카탈로그이므로, 상단의 메뉴 바에서 File 탭을 클릭한 후 New -> File -> SceneKit Catalog 를 클릭해 scnassets 카탈로그를 클릭하여 추가해 줍니다.
Scene File 추가하기

생성된 scnassets 폴더로 이동한 후 상단의 메뉴바에서 새로운 파일을 열어주거나, command + N 키를 눌러주면 scnassets 폴더 내에 새로운 .scn 파일이 생성됩니다.
Scene object 추가하기

Scene에 오브젝트를 추가하기 위해서는 추가할 오브젝트가 있어야 합니다. Apple에서 ARKit에 적용하기 위해 새롭게 공개한 파일 포맷인 usdz 포맷 파일을 받아 와서 SceneKit에 올려보도록 하겠습니다.

https://developer.apple.com/arkit/gallery/ 에 들어가서 마음에 드는 usdz 파일을 받아옵니다. 저는 레트로 TV와 일렉 기타 두가지 파일을 받아오도록 하겠습니다.

command + O 키를 눌러 다운로드 폴더에서 파일을 열어 .scnassets 폴더에 넣어줍니다. 저는 .scnassets 폴더에 practice.scn 파일을 만들어 주었습니다. 우선 레트로 TV 파일 만을 practice.scn 폴더에 추가해 주도록 하겠습니다.

2. Storyboard Preparation

Scene을 렌더링해서 표시해줄 SCNView 를 만들어주기 위해 Interface Builder를 사용하여 스토리보드에 SCNView를 추가해준 후 constraint를 safe area 에 맞춰서 넣어줍니다.

이번에는 ARKit를 사용하지 않고 SceneKit View를 연습해볼 계획이기에 SceneKit View를 추가해줍니다.

Constraint 를 Safe Area에 대하여 각각 0씩 넣어줍니다.

스토리보드 준비가 끝났습니다.

3. View Controller

Framework Import

import SceneKit 코드를 통해 SceneKit Framework를 import 해 줍니다.
import QuartzCore 코드를 통해 QuartzCore Framework를 import 해 줍니다.
- QuartzCore는 이미지 프로세싱과 비디오 이미지 조작을 지원하는 Objective - C 프레임워크입니다.
- Core Animation Framework 와 동의어입니다.

viewDidLoad 에서 코드를 통한 Scene 구성

scene 생성하기: SCNScene 타입 객체인 scene을 선언해 줍니다. 이 때, 이니셜라이저에 다음과 같이 앞에서 생성해 주었던 scnassets 폴더에 있는 scn 파일을 포함하여 줍니다.
```
//create a new scene
let scene = SCNScene(named: "art.scnassets/[scene을 구성하고자 하는 scn 파일 이름]")
```
camera 생성하기: 카메라를 붙일 node를 만들기 위해서 SCNNode 타입 객체인 cameraNode를 생성해 줍니다.

그 후, cameraNode의 .camera 프로퍼티에 SCNCamera()를 사용하여 카메라를 붙여줍니다.

scene의 rootNode에 생성해준 cameraNode를 ChildNode로서 추가해 줍니다.
```
//create and add a camera to see the scene
let cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
scene.rootNode.addChildNode(cameraNode)
```
카메라 위치시키기: cameraNode는 현재 rootNode의 ChildNode이기 때문에, rootNode를 기준으로 하는 공간벡터를 통해 위치정보를 수정해 줄 수 있습니다.

cameraNode의 위치를 적절하게 수정해 줍니다.
```
//place the camera
cameraNode.position = SCNVector3(x:0,y:0,z:15)
```
조명 생성하기: 조명을 붙일 node 를 만들기 위해서 SCNNode 타입 객체인 lightNode를 생성해 줍니다.

그 후, lightNode의 .light 프로퍼티에 SCNLight()를 사용하여 조명을 붙여줍니다.

ligntNode.light의 .type 프로퍼티를 이용해 조명의 타입을 지정해 줍니다.
- 조명의 타입은 ambient, directional, IES, probe, spot, omni등이 있습니다.
  - Ambient: A light that illuminates all objects in the scene from all directions.
    - scene 내의 모든 객체를 모든 방향으로 비추는 조명입니다.
  - Directional: A light source with a uniform direction and constant intensity.
    - 일정한 채도와 정해진 방향을 갖는 광원입니다.
  - IES: A light source whose shape, direction, and intensity of illumination is determined by a photometric profile.
    - Photometric profile에 의해 모양, 방향, 그리고 채도가 정해지는 광원입니다.
  - Probe: A sample of the environment around a point in a scene to be used in environment-based lighting.
    - Environment-based lighting에 사용되기 위한 scene 내의 한 점을 둘러싸는 샘플 환경입니다.
  - Spot: A light source that illuminates a cone-shaped area.
    - 원뿔 모양의 영역을 비추는 광원입니다.
  - Omni: An omnidirectional light, also known as a point light.
    - 모든 방향으로 빛을 비추는 조명입니다. 점광원이라고도 불립니다.
```
// create and add a light to the scene
let lightNode = SCNNode()
lightNode.light = SCNLight()
lightNode.light!.type = .omni
lightNode.position = SCNVector3(x:0,y:10,z:10)
scene.rootNode.addChildNode(lightNode)
```

같은 방식으로 ambient light 역시 추가해줍니다.

// create and add an ambient light to the scene
let ambientLightNode = SCNNode()
ambientLightNode.light = SCNLight()
ambientLightNode.light!.type = .ambient
ambientLightNode.light!.color = UIColor.darkGray
scene.rootNode.addChildNode(ambientLightNode)

오브젝트 노드 추가해주기: 현재 우리가 다루고 있는 scene 변수는 .scnassets 폴더 내의 practice.scn 파일을 나타내는 SCNScene 입니다. practice.scn 파일 내의 retrotv 오브젝트를 scene 변수의 rootNode의 childNode에 추가하는 코드를 작성하도록 하겠습니다.
```
// retrieve the retrotv node
let retrotv = scene.rootNode.childNode(withName: "retrotv", recursively: true)!
```
오브젝트 노드에 애니메이션 추가하기: 오브젝트 노드의 runAction 메소드를 사용하면 노드에 애니메이션을 추가할 수 있습니다. 우리는 y축을 기준으로 반복되는 회전 애니메이션을 추가하는 코드를 작성하도록 하겠습니다.
```
// animate the 3D object
retrotv.runAction(SCNAction.repeatForever(SCNAction.rotateBy(x:0, y:50,z:0,duration:1)))
```
Scene 렌더링하기: 우리가 만들어 준 scene을 디바이스 화면에 표시하기 위한 SCNView 프로퍼티를 만들어 주어 위에서 선언한 scene을 할당해 줍니다.
```
// retrieve the SCNView
let scnView = self.view as! SCNView

// set the scene to the view
scnView.scene = scene
```

Camera control, Statistics, Background color 등의 설정을 설정해줍니다.

// allows the user to manipulate the camera
scnView.allowsCameraControl = true

// show statistics such as fps and timing information
scnView.showStatistics = true

// configure the view
scnView.backgroundColor = UIColor.black

마지막으로, TapGestureRecognizer를 추가해 줍니다.

let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
scnView.addGestureRecognizer(tapGesture)