Godot Broken Glass Shader Tutorial

How to make a screen-space broken glass effect in Godot's shading language (GLSL).

⏱️ Timestamps: 0:00 Intro 0:28 Preparing the scene and shader 1:52 Simulating broken glass refraction 6:22 Avoiding if statements in the shader 7:05 Simulating broken glass reflection

📻 Addendum: This would be the equivalent branchless shader: // Current pixel colour in texture vec4 pixelColour = texture(TEXTURE, UV); // Colour of neighbouring pixel in texture vec4 nextColour = texture(TEXTURE, UV + TEXTURE_PIXEL_SIZE * reflectionOffset); // Colour of screen-space refraction effect vec4 refractionColour = texture(SCREEN_TEXTURE, SCREEN_UV + SCREEN_PIXEL_SIZE * refractionOffset); // If the adjacent colour is transparent, use reflection, else use refraction vec4 colour = mix(reflectionColour, refractionColour, nextColour.a); // Now only display this shader if the current texture pixel is not transparent COLOR = colour * pixelColour.a;

As discussed in the video, I'm not sure how much of a speed benefit this will provide, if any. GPU branching is a more complex topic than CPU branching. In addition, the number of instructions within this shader is low enough that it may make no difference between the number of clock cycles for a branched vs branchless case.

🎶 Music tracks from:

• Juliàn - Eternal Youth
• Provided by Lofi Girl
• Watch: https://www.youtube.com/watch?v=MqMM1dDbVVc
• Listen: https://open.spotify.com/album/4vo2EWVexbkJcxXnLoC83d

You can also visit me at: WEBSITE 🌏 https://polysthetic.com INSTAGRAM 📸 https://www.instagram.com/polysthetic/ THREADLESS 🕶️ https://polysthetic.threadless.com DRIBBBLE 🏀 https://dribbble.com/polysthetic YOUTUBE 🎥 https://youtube.com/c/polysthetic AUDIOMACK 🎼 https://audiomack.com/polysthetic TWITTER 🐦 https://twitter.com/polysthetic LINKEDIN 📇 https://www.linkedin.com/company/polysthetic ... https://www.youtube.com/watch?v=KlTUaB7aa88