OpenGL Shader實現(xiàn)光照發(fā)光體特效
內發(fā)光原理
內發(fā)光原理簡單概況是:采樣周邊像素alpha取平均值疊加效果。概括來說似乎好像特別簡單,但需要一定的理解和消化。發(fā)光物體可以當做是一個圓形對象,去采集圓形對象周邊像素值。例如已知圓形半徑是R
,角度是Angle
,然后根據半徑和角度推導算出當前像素坐標位置,用當前像素坐標位置得到透明度再去做計算。
但其實在陰影遮罩效果中似乎已經介紹過了同樣能夠通過。不同點在于陰影遮蓋是利用圓形繪制向外部暈染而內發(fā)光效果是作用于內部。
發(fā)光體實現(xiàn)
首先采用繪制圓的方法實現(xiàn)RGB
疊加??梢钥吹街行奈恢美L制圓的位置顏色較深,向外擴散顏色逐漸暗淡。效果雖然不對但已經知道下一步該怎么實現(xiàn)了。
void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; uv -= 0.5; uv.x *= iResolution.x/iResolution.y; vec3 color = vec3(0.); float glow = length(uv); color += glow; gl_FragColor = vec4(color,1.); }
通過取反操作,可用一個數除以length(uv)
再相乘一個小數來稍微減小值的大小。從最終結果可以看到所期望的效果。對比之前效果展示相除相當于對原結果取反,原先內部是數值最小,相除之后內部數值變成最大。
void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; uv -= 0.5; uv.x *= iResolution.x/iResolution.y; vec3 color = vec3(0.); float glow = 0.05 * 3./length(uv); color += glow; gl_FragColor = vec4(color,1.); }
但過渡效果泛白范圍似乎過大了一些繼續(xù)對原算法進行優(yōu)化。增加pow
方法將數值變得更小一些。
float getGlow(float dist, float radius, float intensity){ return pow(radius/dist, intensity); } void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; uv -= 0.5; uv.x *= iResolution.x/iResolution.y; vec3 color = vec3(0.); float glow = 0.05 * getGlow(length(uv), 1., 2.); color += glow; gl_FragColor = vec4(color,1.); }
擴展效果
小太陽
改變發(fā)光位置和發(fā)光顏色模擬實現(xiàn)太陽光照的效果。
float getGlow(float dist, float radius, float intensity){ return radius/dist; } void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = vec3(0.); vec2 uv2 = uv; uv2 -=1.0; float glow = 0.09 * 3./length(uv2); color += (5.0 * vec3(0.02 * glow) + vec3(0.9686, 0.6941, 0.0) * glow); gl_FragColor = vec4(color,1.); }
光源移動效果
float getGlow(float dist, float radius, float intensity){ return radius/dist; } void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = texture(iChannel1,uv).rgb; float position = sin(iTime) / 2.; vec2 uv2 = uv; uv2 -=0.5; uv2.x *= iResolution.x/iResolution.y; uv2 += position; float glow = 0.09 * 3./length(uv2); color += (5.0 * vec3(0.02 * glow)); gl_FragColor = vec4(color,1.); }
以上就是OpenGL Shader實現(xiàn)光照發(fā)光體特效的詳細內容,更多關于OpenGL Shader光照發(fā)光體的資料請關注腳本之家其它相關文章!
相關文章
詳解Android?Flutter如何使用相機實現(xiàn)拍攝照片
在app中使用相機肯定是再平常不過的一項事情了,相機肯定涉及到了底層原生代碼的調用,那么在flutter中如何快速簡單的使用上相機的功能呢?一起來看看吧2023-04-04Android使用ViewPager實現(xiàn)翻頁效果
這篇文章主要為大家詳細介紹了Android使用ViewPager實現(xiàn)翻頁效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05Android自動編輯文本框(AutoCompleteTextView)使用方法詳解
這篇文章主要為大家詳細介紹了Android自動編輯文本框AutoCompleteTextView的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02sqlite查詢結果在listview中展示的實現(xiàn)
下面小編就為大家?guī)硪黄猻qlite查詢結果在listview中展示的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04Android實現(xiàn)將一個Activity設置成窗口樣式的方法
這篇文章主要介紹了Android實現(xiàn)將一個Activity設置成窗口樣式的方法,涉及Android的窗口樣式設置與布局技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-02-02