本系列文章是對(duì) http://metalkit.org 上面MetalKit內(nèi)容的全面翻譯和學(xué)習(xí).
可能大家已經(jīng)在WWDC2016上看過了,新的 Playground app for the iPad真是個(gè)震撼的產(chǎn)品!作為一個(gè)playground愛好者,我更是深感如此.現(xiàn)在我們可以輕易地在iPad上寫Swift代碼,只要點(diǎn)擊一個(gè)按鈕就能運(yùn)行.今天我們將要試試Metal Performance Shaders (MPS),因?yàn)樗谝苿?dòng)設(shè)備上很好用而我們以前又沒有討論過它.需要提醒的是,MPS框架只能在iOS和tvOS上工作.我們會(huì)用一個(gè)便捷的方法,在macOS設(shè)備的playground上編寫代碼然后通過iCloud Drive來分享到你的移動(dòng)設(shè)備上.還有,iPad的playground只能在iOS10以上運(yùn)行.
讓我們?cè)?code>Xcode中創(chuàng)建一個(gè)新的iOSplayground.你可以在Resources文件夾下添加任意圖片.我已經(jīng)添加了一張名為nature.jpg.下一步,在playground主頁面中寫幾行代碼,如下面截圖(代碼在文末Github)
讓我們看一下這些代碼.在以前的文章中我們已經(jīng)一遍遍寫過類似的代碼.你應(yīng)該立刻注意到新添加的代碼引起了一個(gè)錯(cuò)誤,這是因?yàn)?code>macOS不"認(rèn)識(shí)"MPS框架.一旦我們?cè)趇Pad中打開后,錯(cuò)誤就會(huì)消失:
import MetalPerformanceShaders
下一步,我們用MTKTextureLoader從先前添加圖片處創(chuàng)建一個(gè)新的紋理.現(xiàn)在最有意思的部分來了!一旦我們創(chuàng)建MTLCommandBuffer對(duì)象,我們將不會(huì)像以前做的那樣從這個(gè)命令緩沖器創(chuàng)建MTLCommandEncoder對(duì)象.相反,我們創(chuàng)建一個(gè)新的MPSImageGaussianBlur對(duì)象,如下面的代碼:
let shader = MPSImageGaussianBlur(device: view.device!, sigma: 5)
shader.encode(commandBuffer: commandBuffer, sourceTexture: texIn, destinationTexture: texOut)
MPS對(duì)象最棒的地方在于,它讓你可以將一個(gè)計(jì)算著色器(內(nèi)核函數(shù))應(yīng)用于輸入紋理,而無需配置任何狀態(tài),描述符,管線或?qū)憘€(gè)內(nèi)核函數(shù)!MPS對(duì)象會(huì)為我們處理好所有事情.當(dāng)然,用這個(gè)便捷方法的話,我們也只能采用預(yù)設(shè)的著色器,并只能更改這個(gè)特殊著色器的sigma之類的參數(shù).
目前為止還不錯(cuò)!我們已經(jīng)通過iCloud Drive把playground發(fā)送到了iPad上.打開Finder窗口,點(diǎn)擊iCloud Drive并把playground文件復(fù)制到這個(gè)文件夾:
我們終于開始用上iPad了!打開新的Playground應(yīng)用來到My Playgrounds.在屏幕左上角點(diǎn)擊+按鈕.可以看出來,你也可能在iPad上創(chuàng)建一個(gè)新的playground并可以輕易用其它方式共享輸出到你的macOS設(shè)備上.但是現(xiàn)在,我們點(diǎn)擊iCloud Drive如下圖:
當(dāng)iCloud Drive窗口彈出后,請(qǐng)注意我們已經(jīng)進(jìn)入了iPad為playground提供的私有文件夾,我們現(xiàn)在想要導(dǎo)入我們用到的MPS.playground,點(diǎn)擊它:
當(dāng)iPad加載守playground后,我們就開工了!現(xiàn)在你能在你的iPad上看到playground的主頁面了:
你所要做的就是點(diǎn)擊Run My Code,就能看到我們圖片已經(jīng)帶上了一個(gè)漂亮的模糊濾鏡:
你可能會(huì)說:"我怎么才能看到整個(gè)圖片呢?"答案就在下面的GIF圖片中.只要簡(jiǎn)單地在屏幕中間長按,直到出現(xiàn)屏幕分隔線.不要松手指,想看代碼或輸出圖片就左右拖動(dòng)分隔線(你可能想要重新載入這個(gè)頁面因?yàn)檫@個(gè)動(dòng)態(tài)GIF只會(huì)播放一次):
現(xiàn)在你能看到整個(gè)模糊過的圖片了!欣賞過圖片后,點(diǎn)擊屏幕左側(cè)的按鈕來返回分屏狀態(tài).在我們把它收起來之前,再來點(diǎn)牛逼效果.將下面這行:
let shader = MPSImageGaussianBlur(device: view.device!, sigma: 5)
替換為
let shader = MPSImageSobel(device: device)
查看輸出的新圖片:
我們只是改動(dòng)了一行代碼就產(chǎn)生如此不同的效果!還有幾十種不同的著色器來供你嘗試.查看 Metal Performance Shaders API來獲取更多信息.如果你對(duì)圖像處理有興趣,你也許會(huì)想要查看Simon Gladman的 Core Image for Swift這本書.如果你想要學(xué)更多MPS后端的Metal,可以查看Moore的 Metal by Example這本書.
源代碼source code 已發(fā)布在Github上.
下次見!
