[MetalKit]10-Ray-tracing-in-a-Swift-playground射線追蹤

蘋果API搬運工發表於2017-12-14
Swift

本系列文章是對 metalkit.org 上面MetalKit內容的全面翻譯和學習.

MetalKit系統文章目錄

今天我們從Peter Shirley’s mini book匯入ray tracer射線追蹤器到Swiftplayground中.我將不會解釋什麼是Ray Tracing射線追蹤及它是怎麼工作的,我會請你自己先去讀一讀這本書因為它對Kindle訂閱者是免費的.如果你不是訂閱者,只需要像我一樣購買這本書就行了.如果你對這個話題感興趣,那花費$2.99是絕對值得的.

我們要做的第一件事就是建立一個資料結構體來儲存畫素資訊.在playground中,在Sources資料夾下建立一個新檔案命名為pixel.swift.下一步,編寫Pixel結構體.它只是一個簡單結構體,各用一個變數來儲存 RGBA 通道.我們初始化alpha通道為255,這意味著在[0~255]範圍的完全不透明:

public struct Pixel {
    var r: UInt8
    var g: UInt8
    var b: UInt8
    var a: UInt8
    init(red: UInt8, green: UInt8, blue: UInt8) {
        r = red
        g = green
        b = blue
        a = 255
    }
}
複製程式碼

下一步,我們需要建立一個陣列來儲存螢幕上的畫素.為了計算每個畫素的顏色,我們只需要給所有畫素的Red設定為0,同時Green則從螢幕左下角的0(沒有任何綠色)漸變到螢幕右上角的255(純綠色).同樣,Blue顏色從螢幕頂部的0漸變到螢幕底部的255.

public func makePixelSet(width: Int, _ height: Int) -> ([Pixel], Int, Int) {
    var pixel = Pixel(red: 0, green: 0, blue: 0)
    var pixels = [Pixel](count: width * height, repeatedValue: pixel)
    for i in 0..<width {
        for j in 0..<height {
            pixel = Pixel(red: 0, green: UInt8(Double(i * 255 / width)), blue: UInt8(Double(j * 255 / height)))
            pixels[i + j * width] = pixel
        }
    }
    return (pixels, width, height)
}
複製程式碼

最後,我們需要一個方法來從畫素建立出一個可繪製的圖片.Core Image框架提供了CGImageCreate() 方法,它只需要幾個引數就可以渲染圖片:

public func imageFromPixels(pixels: ([Pixel], width: Int, height: Int)) -> CIImage {
    let bitsPerComponent = 8
    let bitsPerPixel = 32
    let rgbColorSpace = CGColorSpaceCreateDeviceRGB()
    let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.PremultipliedLast.rawValue) // alpha is last

    let providerRef = CGDataProviderCreateWithCFData(NSData(bytes: pixels.0, length: pixels.0.count * sizeof(Pixel)))
    let image = CGImageCreate(pixels.1, pixels.2, bitsPerComponent, bitsPerPixel, pixels.1 * sizeof(Pixel), rgbColorSpace, bitmapInfo, providerRef, nil, true, CGColorRenderingIntent.RenderingIntentDefault)
    return CIImage(CGImage: image!)
}
複製程式碼

下一步,在playground主頁中用給定的width和height建立一個視窗畫素的集合,並用這個集合來建立渲染出的圖片:

let width = 800
let height = 400
var pixelSet = makePixelSet(width, height)
var image = imageFromPixels(pixelSet)
image
複製程式碼

你應該能看到下面的圖面:

raytracing1.png

OK,你可能會好奇,但是ray tracing射線追蹤在哪裡呢?我們稍後再解釋這個.在Sources資料夾下面,讓我們建立一個便利的類命名為vec3.swift,在裡面放一些數學工具方法:

struct vec3 {
    var x = 0.0
    var y = 0.0
    var z = 0.0
}

func * (left: Double, right: vec3) -> vec3 {
    return vec3(x: left * right.x, y: left * right.y, z: left * right.z)
}

func + (left: vec3, right: vec3) -> vec3 {
    return vec3(x: left.x + right.x, y: left.y + right.y, z: left.z + right.z)
}

func - (left: vec3, right: vec3) -> vec3 {
    return vec3(x: left.x - right.x, y: left.y - right.y, z: left.z - right.z)
}

func dot (left: vec3, _ right: vec3) -> Double {
    return left.x * right.x + left.y * right.y + left.z * right.z
}

func unit_vector(v: vec3) -> vec3 {
    let length : Double = sqrt(dot(v, v))
    return vec3(x: v.x/length, y: v.y/length, z: v.z/length)
}
複製程式碼

下一步,我們需要建立一個ray射線結構體.它擁有一個origin原點成員,一個direction方向,還有一個方法可以計算任意給定引數的ray tracing方程式:

struct ray {
    var origin: vec3
    var direction: vec3
    func point_at_parameter(t: Double) -> vec3 {
        return origin + t * direction
    }
}
複製程式碼

然後我們需要計算顏色,基於ray射線是否接觸到我們在螢幕中間建立的sphere球體:

func color(r: ray) -> vec3 {
    let minusZ = vec3(x: 0, y: 0, z: -1.0)
    var t = hit_sphere(minusZ, 0.5, r)
    if t > 0.0 {
        let norm = unit_vector(r.point_at_parameter(t) - minusZ)
        return 0.5 * vec3(x: norm.x + 1.0, y: norm.y + 1.0, z: norm.z + 1.0)
    }
    let unit_direction = unit_vector(r.direction)
    t = 0.5 * (unit_direction.y + 1.0)
    return (1.0 - t) * vec3(x: 1.0, y: 1.0, z: 1.0) + t * vec3(x: 0.5, y: 0.7, z: 1.0)
}
複製程式碼

你注意到我們用到了另一個方法,叫hit_sphere(),來確定我們的射線是撞到了球體,或者沒有接觸球體:

func hit_sphere(center: vec3, _ radius: Double, _ r: ray) -> Double {
    let oc = r.origin - center
    let a = dot(r.direction, r.direction)
    let b = 2.0 * dot(oc, r.direction)
    let c = dot(oc, oc) - radius * radius
    let discriminant = b * b - 4 * a * c
    if discriminant < 0 {
        return -1.0
    } else {
        return (-b - sqrt(discriminant)) / (2.0 * a)
    }
}
複製程式碼

回到pixel.swift檔案,更改makePixelSet(:),使其在每個畫素被加入集合前,給每個畫素建立一個ray射線並計算它的color顏色:

public func makePixelSet(width: Int, _ height: Int) -> ([Pixel], Int, Int) {
    var pixel = Pixel(red: 0, green: 0, blue: 0)
    var pixels = [Pixel](count: width * height, repeatedValue: pixel)
    let lower_left_corner = vec3(x: -2.0, y: 1.0, z: -1.0)
    let horizontal = vec3(x: 4.0, y: 0, z: 0)
    let vertical = vec3(x: 0, y: -2.0, z: 0)
    let origin = vec3()
    for i in 0..<width {
        for j in 0..<height {
            let u = Double(i) / Double(width)
            let v = Double(j) / Double(height)
            let r = ray(origin: origin, direction: lower_left_corner + u * horizontal + v * vertical)
            let col = color(r)
            pixel = Pixel(red: UInt8(col.x * 255), green: UInt8(col.y * 255), blue: UInt8(col.z * 255))
            pixels[i + j * width] = pixel
        }
    }
    return (pixels, width, height)
}
複製程式碼

在playground的主頁面,看看產生的新影象:

raytracing2.png

敬請關注本文的第2部分,我們將會計算燈光和陰影,產生更真實的影象渲染.

原始碼source code 已釋出在Github上.

下次見!

相關文章