OpenGL Shader实现光照发光体特效
作者:JulyYu 时间:2022-03-16 18:51:50
内发光原理
内发光原理简单概况是:采样周边像素alpha取平均值叠加效果。概括来说似乎好像特别简单,但需要一定的理解和消化。发光物体可以当做是一个圆形对象,去采集圆形对象周边像素值。例如已知圆形半径是R
,角度是Angle
,然后根据半径和角度推导算出当前像素坐标位置,用当前像素坐标位置得到透明度再去做计算。
但其实在阴影遮罩效果中似乎已经介绍过了同样能够通过。不同点在于阴影遮盖是利用圆形绘制向外部晕染而内发光效果是作用于内部。
发光体实现
首先采用绘制圆的方法实现RGB
叠加。可以看到中心位置绘制圆的位置颜色较深,向外扩散颜色逐渐暗淡。效果虽然不对但已经知道下一步该怎么实现了。
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.);
}
但过渡效果泛白范围似乎过大了一些继续对原算法进行优化。增加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.);
}
扩展效果
小太阳
改变发光位置和发光颜色模拟实现太阳光照的效果。
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.);
}
来源:https://juejin.cn/post/7063261134811299870
标签:OpenGL,Shader,光照,发光
0
投稿
猜你喜欢
spring声明式事务 @Transactional 不回滚的多种情况以及解决方案
2023-07-06 10:50:33
java的io操作(将字符串写入到txt文件中)
2022-05-28 22:59:23
C# 参数按照ASCII码从小到大排序(字典序)
2023-03-14 22:14:11
spring cloud 配置中心客户端启动遇到的问题
2023-03-23 16:30:34
Android使用Retrofit上传文件功能
2022-08-28 08:42:38
SpringBoot核心@SpringBootApplication使用介绍
2023-11-25 08:33:59
flutter日期选择器 flutter时间选择器
2023-09-22 04:50:15
ElasticSearch学习之ES Mapping实战示例
2023-11-25 06:12:25
深入理解java三种工厂模式
2022-03-11 06:09:53
java中Scanner输入用法实例
2023-09-03 18:25:36
es(elasticsearch)整合SpringCloud(SpringBoot)搭建教程详解
2023-12-06 07:34:14
Java数据机构中关于并查集的详解
2022-09-05 13:23:53
解决mybatis批量更新出现SQL报错问题
2023-11-29 04:12:47
java文件重命名(文件批量重命名)实例程序代码分享
2023-07-20 06:45:06
使用自定义注解实现redisson分布式锁
2021-09-30 18:31:22
web打印 window.print()介绍
2022-10-22 23:50:59
Android GestureDetector用户手势检测实例讲解
2022-12-28 17:24:46
SpringMVC 限流的示例代码
2022-08-21 09:48:51
Java基于websocket协议与netty实时视频弹幕交互实现
2023-08-16 11:55:46
Java设计模式的事件模型详解
2023-11-29 04:47:08