[关闭]
@ltlovezh 2020-11-26T14:06:16.000000Z 字数 2610 阅读 226

分屏特效

shader


VS Code安装Shader Toy插件后,可以实时预览glsl效果,开发shader特效很有意思。

相关知识点:

横向二分屏

  1. // 加载纹理
  2. #iChannel0 "file://demo.jpg"
  3. #iChannel0::WrapMode "Clamp"
  4. void main() {
  5. // 纹理坐标
  6. vec2 fragcoord = vec2(gl_FragCoord.xy / iResolution.xy);
  7. vec2 textureCoordinateToUse = fragcoord;
  8. // X轴2份分割
  9. int row = int(fragcoord.x * 2.0);
  10. // X轴归一化,(0, 0.5)归一化到(0, 1),(0.5, 1.0)归一化到(0, 1),0~1是X轴上的完整纹理
  11. textureCoordinateToUse.x = (fragcoord.x - float(row) / 2.0) * 2.0;
  12. // 采样
  13. gl_FragColor = texture(iChannel0, textureCoordinateToUse);
  14. }

横向二分屏

竖向二分屏

  1. // 加载纹理
  2. #iChannel0 "file://demo.jpg"
  3. #iChannel0::WrapMode "Clamp"
  4. void main() {
  5. // 纹理坐标
  6. vec2 fragcoord = vec2(gl_FragCoord.xy / iResolution.xy);
  7. vec2 textureCoordinateToUse = fragcoord;
  8. // Y轴2份分割
  9. int column = int(fragcoord.y * 2.0);
  10. // Y轴归一化,(0, 0.5)归一化到(0, 1),(0.5, 1.0)归一化到(0, 1),0~1是Y轴上的完整纹理
  11. textureCoordinateToUse.y = (fragcoord.y - float(column) / 2.0) * 2.0;
  12. // 采样
  13. gl_FragColor = texture(iChannel0, textureCoordinateToUse);
  14. }

竖向二分屏

四分屏

  1. // 加载纹理
  2. #iChannel0 "file://demo.jpg"
  3. #iChannel0::WrapMode "Clamp"
  4. void main() {
  5. // 纹理坐标
  6. vec2 fragcoord = vec2(gl_FragCoord.xy / iResolution.xy);
  7. vec2 textureCoordinateToUse = fragcoord;
  8. // X轴2份分割
  9. int row = int(fragcoord.x * 2.0);
  10. // Y轴2份分割
  11. int column = int(fragcoord.y * 2.0);
  12. // X轴归一化,(0, 0.5)归一化到(0, 1),(0.5, 1.0)归一化到(0, 1),0~1是X轴上的完整纹理
  13. textureCoordinateToUse.x = (fragcoord.x - float(row) / 2.0) * 2.0;
  14. // Y轴归一化,(0, 0.5)归一化到(0, 1),(0.5, 1.0)归一化到(0, 1),0~1是Y轴上的完整纹理
  15. textureCoordinateToUse.y = (fragcoord.y - float(column) / 2.0) * 2.0;
  16. gl_FragColor = texture(iChannel0, textureCoordinateToUse);
  17. }

四分屏

六分屏

  1. // 加载纹理
  2. #iChannel0 "file://demo.jpg"
  3. #iChannel0::WrapMode "Clamp"
  4. void main() {
  5. // 纹理坐标
  6. vec2 fragcoord = vec2(gl_FragCoord.xy / iResolution.xy);
  7. vec2 textureCoordinateToUse = fragcoord;
  8. // X轴3份分割
  9. int row = int(fragcoord.x * 3.0);
  10. // Y轴2份分割
  11. int column = int(fragcoord.y * 2.0);
  12. // X轴归一化,(0, 0.333)归一化到(0, 1),(0.333, 0.666)归一化到(0, 1),(0.666, 0.999)归一化到(0, 1),0~1是X轴上的完整纹理
  13. textureCoordinateToUse.x = (fragcoord.x - float(row) / 3.0) * 3.0;
  14. // Y轴归一化,(0, 0.5)归一化到(0, 1),(0.5, 1.0)归一化到(0, 1),0~1是Y轴上的完整纹理
  15. textureCoordinateToUse.y = (fragcoord.y - float(column) / 2.0) * 2.0;
  16. gl_FragColor = texture(iChannel0, textureCoordinateToUse);
  17. }

六分屏

九分屏

  1. // 加载纹理
  2. #iChannel0 "file://demo.jpg"
  3. #iChannel0::WrapMode "Clamp"
  4. void main() {
  5. // 纹理坐标
  6. vec2 fragcoord = vec2(gl_FragCoord.xy / iResolution.xy);
  7. vec2 textureCoordinateToUse = fragcoord;
  8. // X轴3份分割
  9. int row = int(fragcoord.x * 3.0);
  10. // Y轴3份分割
  11. int column = int(fragcoord.y * 3.0);
  12. // X轴归一化,(0, 0.333)归一化到(0, 1),(0.333, 0.666)归一化到(0, 1),(0.666, 0.999)归一化到(0, 1),0~1是X轴上的完整纹理
  13. textureCoordinateToUse.x = (fragcoord.x - float(row) / 3.0) * 3.0;
  14. // Y轴归一化,(0, 0.333)归一化到(0, 1),(0.333, 0.666)归一化到(0, 1),(0.666, 0.999)归一化到(0, 1),0~1是Y轴上的完整纹理
  15. textureCoordinateToUse.y = (fragcoord.y - float(column) / 3.0) * 3.0;
  16. gl_FragColor = texture(iChannel0, textureCoordinateToUse);
  17. }

九分屏

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注