Created
April 20, 2023 10:43
-
-
Save jmadaminov/d80e16dd6cfcc38e4e4a827630e3bfa7 to your computer and use it in GitHub Desktop.
Liquid like AGSL shader effect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import android.graphics.Bitmap | |
| import android.graphics.BitmapShader | |
| import android.graphics.RuntimeShader | |
| import android.graphics.Shader | |
| import android.os.Build | |
| import androidx.compose.animation.core.withInfiniteAnimationFrameMillis | |
| import androidx.compose.foundation.shape.RoundedCornerShape | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.produceState | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.composed | |
| import androidx.compose.ui.draw.clip | |
| import androidx.compose.ui.draw.drawWithCache | |
| import androidx.compose.ui.geometry.CornerRadius | |
| import androidx.compose.ui.graphics.ShaderBrush | |
| import androidx.compose.ui.graphics.asImageBitmap | |
| import androidx.compose.ui.platform.LocalDensity | |
| import androidx.compose.ui.unit.dp | |
| import org.intellij.lang.annotations.Language | |
| fun Modifier.blurBgShader(imageBitmap: Bitmap): Modifier = this.composed { | |
| if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { | |
| val cornerRadius = with(LocalDensity.current) { 15.dp.toPx() } | |
| // produce updating time in seconds variable to pass into shader | |
| val time by produceState(0f) { | |
| while (true) { | |
| withInfiniteAnimationFrameMillis { | |
| value = it / 1000f | |
| } | |
| } | |
| } | |
| Modifier.drawWithCache { | |
| val shader = RuntimeShader(PERLIN_NOISE) | |
| val shaderBrush = ShaderBrush(shader) | |
| shader.setFloatUniform("iResolution", size.width, size.height) | |
| shader.setFloatUniform("iTime", time) | |
| shader.setInputBuffer( | |
| "background", BitmapShader( | |
| imageBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR | |
| ) | |
| ) | |
| onDrawBehind { | |
| drawRoundRect(shaderBrush, cornerRadius = CornerRadius(cornerRadius)) | |
| } | |
| } | |
| } else { | |
| Modifier | |
| .drawWithCache { | |
| onDrawBehind { | |
| drawImage(imageBitmap.asImageBitmap()) | |
| } | |
| } | |
| .clip(RoundedCornerShape(15.dp)) | |
| } | |
| } | |
| @Language("AGSL") | |
| val PERLIN_NOISE = """ | |
| uniform float2 iResolution; | |
| uniform float iTime; | |
| uniform shader background; | |
| // | |
| // Description : Array and textureless GLSL 2D/3D/4D simplex | |
| // noise functions. | |
| // Author : Ian McEwan, Ashima Arts. | |
| // Maintainer : stegu | |
| // Lastmod : 20201014 (stegu) | |
| // License : Copyright (C) 2011 Ashima Arts. All rights reserved. | |
| // Distributed under the MIT License. See LICENSE file. | |
| // https://github.com/ashima/webgl-noise | |
| // https://github.com/stegu/webgl-noise | |
| // | |
| vec3 mod289(vec3 x) { | |
| return x - floor(x * (1.0 / 289.0)) * 289.0; | |
| } | |
| vec4 mod289(vec4 x) { | |
| return x - floor(x * (1.0 / 289.0)) * 289.0; | |
| } | |
| vec4 permute(vec4 x) { | |
| return mod289(((x*34.0)+10.0)*x); | |
| } | |
| float snoise(vec3 v) | |
| { | |
| const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; | |
| const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); | |
| // First corner | |
| vec3 i = floor(v + dot(v, C.yyy) ); | |
| vec3 x0 = v - i + dot(i, C.xxx) ; | |
| // Other corners | |
| vec3 g = step(x0.yzx, x0.xyz); | |
| vec3 l = 1.0 - g; | |
| vec3 i1 = min( g.xyz, l.zxy ); | |
| vec3 i2 = max( g.xyz, l.zxy ); | |
| // x0 = x0 - 0.0 + 0.0 * C.xxx; | |
| // x1 = x0 - i1 + 1.0 * C.xxx; | |
| // x2 = x0 - i2 + 2.0 * C.xxx; | |
| // x3 = x0 - 1.0 + 3.0 * C.xxx; | |
| vec3 x1 = x0 - i1 + C.xxx; | |
| vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y | |
| vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y | |
| // Permutations | |
| i = mod289(i); | |
| vec4 p = permute( permute( permute( | |
| i.z + vec4(0.0, i1.z, i2.z, 1.0 )) | |
| + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) | |
| + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); | |
| // Gradients: 7x7 points over a square, mapped onto an octahedron. | |
| // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294) | |
| float n_ = 0.142857142857; // 1.0/7.0 | |
| vec3 ns = n_ * D.wyz - D.xzx; | |
| vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7) | |
| vec4 x_ = floor(j * ns.z); | |
| vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) | |
| vec4 x = x_ *ns.x + ns.yyyy; | |
| vec4 y = y_ *ns.x + ns.yyyy; | |
| vec4 h = 1.0 - abs(x) - abs(y); | |
| vec4 b0 = vec4( x.xy, y.xy ); | |
| vec4 b1 = vec4( x.zw, y.zw ); | |
| vec4 s0 = floor(b0)*2.0 + 1.0; | |
| vec4 s1 = floor(b1)*2.0 + 1.0; | |
| vec4 sh = -step(h, vec4(0.0)); | |
| vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ; | |
| vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ; | |
| vec3 p0 = vec3(a0.xy,h.x); | |
| vec3 p1 = vec3(a0.zw,h.y); | |
| vec3 p2 = vec3(a1.xy,h.z); | |
| vec3 p3 = vec3(a1.zw,h.w); | |
| //Normalise gradients | |
| vec4 norm = inversesqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); | |
| p0 *= norm.x; | |
| p1 *= norm.y; | |
| p2 *= norm.z; | |
| p3 *= norm.w; | |
| // Mix final noise value | |
| vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); | |
| m = m * m; | |
| return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), | |
| dot(p2,x2), dot(p3,x3) ) ); | |
| } | |
| half4 main(in vec2 fragCoord) { | |
| vec2 uv = (fragCoord.xy / iResolution.xy); | |
| float noise = snoise(vec3(uv.x * 6, uv.y * 6, iTime * 0.5)) * 2; | |
| noise *= exp(-length(abs(uv * 1.5))); | |
| vec2 offset1 = vec2(noise * 0.02); | |
| vec2 offset2 = vec2(0.02) / iResolution.xy; | |
| uv += offset1 - offset2; | |
| return background.eval(uv * iResolution.xy); | |
| } | |
| """.trimIndent() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment