使用ShaderToy來處理VR畸變

2019-11-06 09:52:34

字體：大中小

來源：轉載

供稿：網友

ShaderToy

因為前兩周一直在尋找處理VR反畸變的方法,發現了這個工具,它是一個調試渲染很棒的工具,直接在線輸入代碼,即時顯示你的渲染效果,一直沒來得及記錄下來,畸變已經處理差不多了,現在來把這個工具的處理畸變的方法記錄下來. ShaderToy是一個計算機圖形方面的在線的學習,交流平臺.在這個平臺上使用GLSL語言(語法跟C很像,如果你學習過C語言,操作它基本沒什么問題)就能畫出很漂亮的渲染效果.你可以在官網上看到人分享的鏈接(包含源碼). 這里分享兩個ShaderToy上調試可能需要的鏈接:

GLSL4.5的語法規范ShaderToy使用教程(我最初也是看這個教程,來學習的)

VR畸變算法

至于為什么會產生畸變?畸變是什么?如果修正畸變?這些問題查看之前發的幾篇關于畸變的文章吧. 這里直接上反畸變主要算法:

//這里假設畸變中心的坐標是(0.5,0.5).//計算的公式來自這個視頻:https://www.youtube.com/watch?v=B7qrgrrHry0&feature=youtu.be和Wikipedia的畸變校正算法:https://en.wikipedia.org/wiki/Distortion_(optics)#Software_correctionrr = sqrt((fU - 0.5f)*(fU - 0.5f) + (fV - 0.5f)*(fV - 0.5f));r2 = rr * (1 + K1*(rr*rr) + K2*(rr*rr*rr*rr));theta = atan2(fU-0.5f, fV-0.5f);//圖像經過畸變后會明顯的變小,需要在這里乘以放大系數,來充滿整個屏幕.hX = sin(theta)*r2*1.0;hY = cos(theta)*r2*1.0;

使用ShaderToy處理畸變

渲染效果,已經上傳ShaderToy上:barrel&pincushion distortion 代碼如下:

void mainImage( out vec4 fragColor, in vec2 fragCoord ) { //If you have any questions, you can send me Email:helenhololens@Gmail.com //get source_uv vec2 source_uv = fragCoord.xy / iResolution.xy; //assume your distortion center coordinate is (0.5,0.5),you can use your distortion center instead. vec2 distortion_center = vec2(0.5,0.5); //Define algorithm dependent variables float distortion_x,distortion_y,rr,r2,theta; //define distortion coefficient K1 and K2 ,In most cases we can only adjust K1. then K2 parameters can be adjusted more perfect Effect //iGlobalTime is used for Real-time change. //K1 < 0 is pincushion distortion //K1 >=0 is barrel distortion float distortion_k1 = 1.0 * sin(iGlobalTime*0.5),distortion_k2 = 0.5; vec2 dest_uv; //--------------------------Algorithm Start---------------------------------------- //The formula is derived from this video:https://www.youtube.com/watch?v=B7qrgrrHry0&feature=youtu.be //and Distortion correction algorithm for Wikipedia:https://en.wikipedia.org/wiki/Distortion_(optics)#Software_correction rr = sqrt((source_uv.x - distortion_center.x)*(source_uv.x - distortion_center.x) + (source_uv.y - distortion_center.y)*(source_uv.y - distortion_center.y)); r2 = rr * (1.0 + distortion_k1*(rr*rr) + distortion_k2*(rr*rr*rr*rr)); theta = atan(source_uv.x - distortion_center.x, source_uv.y - distortion_center.y); distortion_x = sin(theta) * r2 * 1.0;//1.0 is scale factor distortion_y = cos(theta) * r2 * 1.0;//1.0 is scale factor dest_uv.x = distortion_x + 0.5; dest_uv.y = distortion_y + 0.5; //--------------------------Algorithm End------------------------------------------ //Get texture from Channel0,and set dest_uv. fragColor = vec4( texture( iChannel0, dest_uv).r, texture( iChannel0,dest_uv).g,texture( iChannel0,dest_uv).b, 1. );}

上面的代碼中畸變參數K1,K2是畸變調節的參數,想要效果好就根據畸變算法所示那樣,疊加到Kn,多數情況下調整K1是能夠滿足需求的.”float distortion_k1 = 1.0 * sin(iGlobalTime*0.5)”這里的”iGlobalTime”是一個全局的時間變量,是為了讓畫面有動態效果,如果只想要做反畸變,可以把K1直接設置為0.5(這個值在項目中是要根據光學鏡片的畸變來調整de,有一些輔助工具可以幫助獲得這個值),就能看到”桶”型的反畸變效果: 這里寫圖片描述原圖如下: 代碼其他部分,已經添加注釋了,如果項目中需要用到反畸變,可以將上面的代碼移植到自己所在的平臺上,我這里在openVR上調試后,效果還是可以的.