Swift[第6單元] AR擴增實境與空間運算

1. 每個場景有個唯一的「根節點」，其屬性（變數）名稱為 rootNode。
   
2. 每個場景有一個或多個「鏡頭節點」，代表使用者的視角（也就是螢幕所看到的角度），其屬性名稱為 cameraNode。注意這裡的「鏡頭(camera)」是虛擬鏡頭，並非真實設備。
   
3. 每個場景會有一個或多個「燈光節點」，可透過屬性名稱 lightNode 來設定。這裡的「燈光」也是虛擬的，並非實物。

1. 用Apple內建或官方製作的3D模型
   
2. 用3D繪圖軟體手工製作，免費軟體包括 TinkerCAD, Blender, Houdini, SketchUp (學生免費)
   
3. 用3D掃描軟體掃描，硬體用iPhone/iPad即可
   
4. 網路3D模型商城免費下載或購買，如 Sketchfab, 3D Warehouse, GrabCAD
   
5. 用生成式AI自動產出（要先經過大量機器學習，故通常只能產出特定類型，如人體、家具、建築、動植物、水果…等）

// 6-1a 3D幾何模型
// Created by Heman, 2024/02/29
import SceneKit
import SwiftUI

struct 顯示幾何模型: View {
    let 幾何場景 = SCNScene()
    var body: some View {
        SceneView(scene: 幾何場景, options: [.autoenablesDefaultLighting, .allowsCameraControl])
            .onAppear {
                // 以下長、寬、高單位：公尺
                let 三角錐 = SCNPyramid(width: 1.0, height: 0.618, length: 1.0)
                let 三角錐節點 = SCNNode(geometry: 三角錐)
                // 以Y軸為軸心旋轉60°
                三角錐節點.rotation = SCNVector4(x: 0.0, y: 1.0, z: 0.0, w: .pi/3)

                let 球體 = SCNSphere(radius: 0.1)
                let 球體節點 = SCNNode(geometry: 球體)
                球體節點.position.y = 0.618 + 0.1

                幾何場景.rootNode.addChildNode(三角錐節點)
                幾何場景.rootNode.addChildNode(球體節點)
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(顯示幾何模型())

SceneView(scene: 幾何場景, options: [.autoenablesDefaultLighting, .allowsCameraControl])

☝ options 參數都是可以省略的，可以動手將兩個選項分別刪除，看看顯示的畫面有何不同。

幾何場景.rootNode.addChildNode(三角錐節點)
幾何場景.rootNode.addChildNode(球體節點)

// 以下長、寬、高單位：公尺
let 三角錐 = SCNPyramid(width: 1.0, height: 0.618, length: 1.0)
let 三角錐節點 = SCNNode(geometry: 三角錐)
// 以Y軸為軸心旋轉60°
三角錐節點.rotation = SCNVector4(x: 0.0, y: 1.0, z: 0.0, w: .pi/3)

let 球體 = SCNSphere(radius: 0.1)
let 球體節點 = SCNNode(geometry: 球體)
球體節點.position.y = 0.618 + 0.1

1. 相對於 SceneKit 用來開發3D遊戲，Apple 原廠還有開發2D遊戲的 SpriteKit，SpriteKit + ARKit 也可開發 AR 應用，但不在本單元討論範圍。
   
2. 至於RealityKit，雖然與SwiftUI一起於2019年發布，且功能可取代 SceneKit，但並未提供SwiftUI 可用的視圖，其中的 ARView 還是遵循 UIKit 語法。本單元下半部介紹 RealityKit 時，會將 ARView 透過 UIViewRepresentable 轉譯為 SwiftUI 可用的物件類型，以便在 iPad/iPhone 上執行。
   
3. RealityKit 在2023年新增 RealityView/Model3D 物件終於採行 SwiftUI 語法，但目前只支援 visionOS，iPadOS/iOS 暫時無法使用，有點可惜。
   
4. Scene 中文是「場景」，在 SceneKit 或 RealityKit 套件中，場景代表多個虛擬物件組成的可視空間，透過不同視角，可以看到空間感的立體畫面。而 ARKit 則負責控制實體鏡頭與感測器，加上AI解析實體空間，因此 SceneKit + ARKit 就能虛實融合，達到AR的效果。
   
5. 場景圖的參考資料：https://developer.apple.com/documentation/scenekit/scnscene
   
6. SceneKit 的場景中，所有節點會形成一個樹狀結構，有點類似第2單元2-4c提到的視圖階層。樹狀結構通常會畫成倒立的樹，根(root)在上，葉(leaf)在下。
   
7. 【作業】若將場景中的節點移到（樹狀結構的）不同位置，會顯示同樣結果嗎？例如，原來這兩行程式碼，三角錐節點與球體節點均位在根節點之下：
   

       幾何場景.rootNode.addChildNode(三角錐節點)
       幾何場景.rootNode.addChildNode(球體節點)

   
   若將三角錐節點移到球體節點之下，顯示畫面會一樣嗎？
   

       球體節點.addChildNode(三角錐節點)
       幾何場景.rootNode.addChildNode(球體節點)

   
   這個結果可能會出乎很多人意料之外，而且與後續課程有關，請動手試試看！

// 6-1b SceneKit內建12種幾何模型
// Created by Heman, 2024/03/03
import SceneKit
import SwiftUI

struct 內建幾何模型: View {
    let 幾何場景 = SCNScene()
    var body: some View {
        SceneView(scene: 幾何場景, options: [.autoenablesDefaultLighting, .allowsCameraControl])
            .onAppear {
                let 總數 = 12
                var 節點: [SCNNode] = []
                for i in 0 ..< 總數 {        // 產出12個空節點，放入陣列中
                    節點.append(SCNNode())
                }
                // (1) 立體文字
                節點[0].geometry = SCNText(string: "↙文字起點", extrusionDepth: 1.0)
                節點[0].scale = SCNVector3(x: 0.05, y: 0.05, z: 0.05)
                節點[0].position = SCNVector3(-2, 0, 2)
                // (2) 3D形狀，以UIBezierPath()繪製形狀
                let 外框 = CGRect(x: -0.5, y: -0.5, width: 1.0, height: 1.0)
                let 形狀 = UIBezierPath(roundedRect: 外框, cornerRadius: 0.1)
                節點[1].geometry = SCNShape(path: 形狀, extrusionDepth: 0.2)
                節點[1].position = SCNVector3(-2, 2, 0)
                // (3) 地板、地面
                let 地板 = SCNFloor()
                地板.width = 2.0
                地板.length = 2.0
                節點[2].geometry = 地板
                // (4) 立方體
                節點[3].geometry = SCNBox(width: 1.0, height: 1.0, length: 1.0, chamferRadius: 0.05)
                節點[3].position = SCNVector3(0, 0, 0)
                // (5) 膠囊體
                節點[4].geometry = SCNCapsule(capRadius: 0.2, height: 1.0)
                節點[4].position = SCNVector3(2, 2, 0)
                // (6) 圓錐體
                節點[5].geometry = SCNCone(topRadius: 0.1, bottomRadius: 0.5, height: 0.618)
                節點[5].position = SCNVector3(-2, 0, 0)
                // (7) 圓柱體
                節點[6].geometry = SCNCylinder(radius: 0.5, height: 1.0)
                節點[6].position = SCNVector3(-2, -2, 0)
                // (8) 平面、牆面（單面、無厚度）
                節點[7].geometry = SCNPlane(width: 4.0, height: 4.0)
                // (9) 三角錐/金字塔
                節點[8].geometry = SCNPyramid(width: 1.0, height: 0.618, length: 1.0)
                節點[8].position = SCNVector3(2, -2, 0)
                // (10)圓球體
                節點[9].geometry = SCNSphere(radius: 0.5)
                節點[9].position = SCNVector3(0, -2, 0)
                // (11) 甜甜圈
                節點[10].geometry = SCNTorus(ringRadius: 0.4, pipeRadius: 0.2)
                節點[10].position = SCNVector3(0, 2, 0)
                // (12)中空圓管
                節點[11].geometry = SCNTube(innerRadius: 0.4, outerRadius: 0.5, height: 1.0)
                節點[11].position = SCNVector3(2, 0, 0)
                
                for i in 0 ..< 總數 {
                    幾何場景.rootNode.addChildNode(節點[i])
                }

                幾何場景.background.contents = UIColor.green
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(內建幾何模型())

// (2) 2D形狀轉立體，以UIBezierPath()繪製形狀
let 外框 = CGRect(x: -0.5, y: -0.5, width: 1.0, height: 1.0)
let 形狀 = UIBezierPath(roundedRect: 外框, cornerRadius: 0.1)
節點[1].geometry = SCNShape(path: 形狀, extrusionDepth: 0.2)
節點[1].position = SCNVector3(-2, 2, 0)

// (11) 甜甜圈
節點[10].geometry = SCNTorus(ringRadius: 0.4, pipeRadius: 0.2)
節點[10].position = SCNVector3(0, 2, 0)

1. 類似 torus 環面的還有克萊因瓶(Klein bottle)，是空間中的特殊平面。
   
2. 若有做上一節6-1a作業的話，會知道物件的預設位置並不一定是原點(0, 0, 0)，而是由上一層節點（參考6-1a「場景概念圖」）所決定。本範例所有物件的上層節點均為根節點，故預設位置為場景空間的原點。
   
3. 仔細觀察程式執行結果，會發現牆面SCNPlane是單面（背面透明）的，而地面SCNFloor則是雙面，而且預設會反光（產生倒影）。可以更改嗎？
   
4. 用這12種基本的3D幾何模型，能夠做出什麼3D作品呢？將這些幾何模型加以組合、變形，也能做出令人驚訝的作品。網路上有不少教學影片可參考，例如：
   
5. 與甜甜圈類似的食物還有油條或麻花，有吃過嗎？就是將甜甜圈麵團扭轉幾圈再油炸，其幾何結構相當類似，即一個圓在空間沿著8字型(∞)走的軌跡。這種幾何模型做得出來嗎？請用關鍵字 “twisted torus” 到Google搜尋看看。

stonetein wrote:
老師你好，請問目前想...(恕刪)

stonetein wrote:
請問目前想學習關於AR開發，因為沒有MAC OS
初步可以買一台二手的，2018 MacBook Pro ，來當發開機使用，請問這3年內，這規格建議嗎？謝謝

// 6-1c 材質(SCNMaterial)與燈光(SCNLight)
// Created by Heman, 2024/03/05
import SceneKit
import SwiftUI

struct 材質與燈光: View {
    let 幾何場景 = SCNScene()
    var body: some View {
        SceneView(scene: 幾何場景, options: [.allowsCameraControl])
            .onAppear {
                let 甜甜圈 = SCNTorus(ringRadius: 1.0, pipeRadius: 0.4)
                let 甜甜圈節點 = SCNNode(geometry: 甜甜圈)
                甜甜圈節點.rotation = SCNVector4(x: 1.0, y: 0.0, z: 1.0, w: .pi/3)
                
                let 大理石材質 = SCNMaterial()
                大理石材質.diffuse.contents = UIImage(named: "大理石紋")
                大理石材質.specular.contents = UIColor.white
                甜甜圈.materials = [大理石材質]
                
                let 光源 = SCNLight()
                let 燈光節點 = SCNNode()
                燈光節點.light = 光源
                燈光節點.position = SCNVector3(x: 0, y: 10, z: 0)
                
                幾何場景.rootNode.addChildNode(甜甜圈節點)
                幾何場景.rootNode.addChildNode(燈光節點)
                幾何場景.background.contents = UIColor.green
            }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(材質與燈光())

let 大理石材質 = SCNMaterial()
大理石材質.diffuse.contents = UIImage(named: "大理石紋")
大理石材質.specular.contents = UIColor.white
甜甜圈.materials = [大理石材質]

let 光源 = SCNLight()
let 燈光節點 = SCNNode()
燈光節點.light = 光源
燈光節點.position = SCNVector3(x: 0, y: 10, z: 0)

1. 3D模型的貼皮(texture mapping)技術相當多樣，本節示範最基本的漫射貼圖(diffuse map)，SceneKit 還支援其他多種貼皮方式，包括法線貼圖(normal map)、環境光貼圖(ambient map)、發光貼圖(emission map)…等十幾種。
   
2. 附帶一提，SceneKit 內部物件大多以 class 寫成，並配合 UIKit 為主，所以這裡必須用 UIColor 以及 UIImage()。
   
3. UIKit (class) 與 SwiftUI (struct) 有何區別呢？UIKit 主要是命令式語法，在物件操作上，都是先產出一個基本（空白）物件，再變更物件屬性；而 SwiftUI 則是宣告式語法，在視圖物件產出後，只能透過視圖修飾語(modifier)來改變屬性，不能用指定句直接更改屬性值。
   
4. 本節範例也是 SwiftUI 物件與 UIKit 物件混用的例子，在第5單元、第6單元經常需要混用 class 與 struct 兩種物件，兩者觀念不同，務必區分清楚。
   
5. 記得在第5單元第9課說明過 class 與 struct 異同，這對第6單元仍是非常重要的觀念。從本節範例可以觀察到，SceneKit 物件產出時都是用 let 指定給常數，但後面卻又變更物件屬性，如果是 struct 物件，這是不允許的，但對 class 物件而言卻是正常操作。

1. 有吃過黑胡椒口味的甜甜圈嗎？請在網路上找到合適的貼圖素材，做出你最喜歡的甜甜圈口味。
   
2. 執行程式時，請將甜甜圈隨意翻轉，觀察光影明暗的變化。
   
3. 有沒有注意到，如果翻轉到一個角度，會看到幾乎全黑的物體，請問是為什麼（燈在動還是甜甜圈在動）？
   
4. 試試將大理石材質改為金屬光澤，對模型外觀會有什麼影響？
   

       let 大理石材質 = SCNMaterial()
       大理石材質.lightingModel = .physicallyBased
       大理石材質.metalness.contents = UIImage(named: "大理石紋")
       甜甜圈.materials = [大理石材質]

   
   
5. 能否設計多盞燈光，讓甜甜圈以任意角度翻轉時，任何部位都不會太黑（看得出紋理）。各盞燈光放在什麼位置最好？
   
6. 參考上一節6-1b，在甜甜圈下方，加一個水平地面，觀察是否在地面上形成影子（而不是倒影）。
   
7. 【有難度】請加入一個SwiftUI Slider （滑竿，之前沒教過，請自行研究），控制燈光的強度(.intensity)；或是一個 SwiftUI Button（按鈕），當作燈光的開關。

// 6-1d 光照模型(lightingModel)
// Created by Heman, 2024/03/09
import SceneKit
import SwiftUI

struct 顯示光照: View {
    let 幾何場景 = SCNScene()
    var 模型: SCNMaterial.LightingModel = .blinn   // default
    var 提示 = ""
    
    var body: some View {
        SceneView(scene: 幾何場景, options: [.allowsCameraControl, .autoenablesDefaultLighting])
            .overlay(alignment: .top) {
                Text(提示)
                    .font(.title2)
                    .padding(5)
            }
            .onAppear {
                let 甜甜圈 = SCNTorus(ringRadius: 1.0, pipeRadius: 0.4)
                let 甜甜圈節點 = SCNNode(geometry: 甜甜圈)
                甜甜圈節點.rotation = SCNVector4(x: 1.0, y: 0.0, z: 1.0, w: .pi / 4.0)
                
                let 大理石材質 = SCNMaterial()
                大理石材質.lightingModel = 模型
                if 模型 == .physicallyBased {
                    大理石材質.metalness.contents = UIImage(named: "大理石紋")
                } else if 模型 == .shadowOnly {
                    let 地面節點 = SCNNode(geometry: SCNFloor())
                    地面節點.position.y = -2
                    幾何場景.rootNode.addChildNode(地面節點)
                } else {
                    大理石材質.diffuse.contents = UIImage(named: "大理石紋")
                    大理石材質.specular.contents = UIColor.white
                }
                甜甜圈.materials = [大理石材質]
                
                幾何場景.rootNode.addChildNode(甜甜圈節點)
                幾何場景.background.contents = UIColor.green
            }
    }
}

struct 光照模型比較: View {
    var body: some View {
        HStack {
            顯示光照(模型: .constant, 提示: ".constant\n無死角平行光")
            顯示光照(模型: .shadowOnly, 提示: ".shadowOnly\n只顯示陰影")
        }
        HStack {
            顯示光照(模型: .lambert, 提示: ".lambert\nLambert模型(霧面)")
            顯示光照(模型: .phong, 提示: ".phong\n裴祥風(Bui Tuong Phong)標準光照模型")
        }
        HStack {
            顯示光照(模型: .blinn, 提示: ".blinn\nBlinn-Phong改良模型(預設模型)")
            顯示光照(模型: .physicallyBased, 提示: ".physicallyBased\nPBR金屬光澤(物理渲染模型)")
        }
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(光照模型比較())

if 模型 == .physicallyBased {
    大理石材質.metalness.contents = UIImage(named: "大理石紋")
} else if 模型 == .shadowOnly {
    let 地面節點 = SCNNode(geometry: SCNFloor())
    地面節點.position.y = -2
    幾何場景.rootNode.addChildNode(地面節點)
} else {
    大理石材質.diffuse.contents = UIImage(named: "大理石紋")
    大理石材質.specular.contents = UIColor.white
}

1. 裴祥風(Bui Tuong Phong, 1942-1975)出生於法國殖民時期的越南，31歲取得猶他大學電腦博士學位，是早期電腦3D繪圖的開創人物之一，可惜33歲英年早逝，令人扼腕。他的博士指導教授是被尊稱為計算機圖學之父的伊凡·蘇澤蘭(Ivan Sutherland)。
   
2. 當時(1970年代)在美國鹽湖城的猶他大學是計算機圖學的發源地之一，最早的一批數位3D模型就是在猶他大學製作，流傳至今，例如猶他壺(Utah Teapot)與猶他金龜車(Utah VW Bug)。
   
3. Phong Lighting Model 有些人音譯為馮氏光照模型，並不恰當，應稱為裴氏光照才對。
   
4. Jim Blinn 也是伊凡·蘇澤蘭在猶他大學指導的博士生，小裴祥風7歲，後來成為計算機圖學的領軍人物。
   
5. .physicallyBased 光照模型又稱為物理渲染模型（Physically Based Rendering, 簡寫為PBR），在本單元後半的 RealityKit 會再次用到此光照模型。