AGSLでAndroid UIを変換するCustom Shaders を簡単に

@Language("AGSL")
val gradientTextShader = """
  uniform float2 resolution; // Text size
  uniform float time;        // Time for animation
  uniform shader composable; // Input composable (text mask)

  half4 main(float2 coord) {
      // Normalize coordinates to [0, 1]
      float2 uv = coord / resolution;

      // Hardcoded gradient colors
      half4 startColor = half4(1.0, 0.65, 0.15, 1.0); // Orange
      half4 endColor = half4(0.26, 0.65, 0.96, 1.0);  // Blue

      // Linear gradient from startColor to endColor
      half4 gradientColor = mix(startColor, endColor, uv.x);

      // Optional: Add a subtle animation (gradient shifting)
      float shift = 0.5 + 0.5 * sin(time * 2.0);
      gradientColor = mix(startColor, endColor, uv.x + shift * 0.1);

      // Use the alpha from the input composable mask
      half4 textAlpha = composable.eval(coord);

      // Combine the gradient color with the composable alpha
      return gradientColor * textAlpha.a;
  }
""".trimIndent()

fun Modifier.gradientTextEffect(): Modifier = composed {
    val shader = remember { RuntimeShader(gradientTextShader) }
    var time by remember { mutableStateOf(0f) }

    // Increment animation time
    LaunchedEffect(Unit) {
        while (true) {
            time += 0.016f // Simulate 60 FPS
            delay(16)
        }
    }

    this.graphicsLayer {
        shader.setFloatUniform("resolution", size.width, size.height)
        shader.setFloatUniform("time", time)

        renderEffect = RenderEffect
            .createRuntimeShaderEffect(shader, "composable")
            .asComposeRenderEffect()
    }
}

@Composable
fun GradientTextDemo() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        contentAlignment = Alignment.Center
    ) {
        Text(
            text = "Gradient Text",
            fontSize = 36.sp,
            fontWeight = FontWeight.Bold,
            color = Color.White,
            modifier = Modifier.gradientTextEffect()
        )
    }
}

@Language("AGSL")
val glowButtonShader = """
  // Shader for a glowing rounded rectangle button

  uniform shader button;              // Input texture or color for the button
  uniform float2 size;                // Button size
  uniform float cornerRadius;         // Corner radius of the button
  uniform float glowRadius;           // Radius of the glow effect
  uniform float glowIntensity;        // Intensity of the glow
  layout(color) uniform half4 glowColor; // Color of the glow

  // Signed Distance Function (SDF) for a rounded rectangle
  float calculateRoundedRectSDF(vec2 position, vec2 rectSize, float radius) {
      vec2 adjustedPosition = abs(position) - rectSize + radius; // Adjust for rounded corners
      return min(max(adjustedPosition.x, adjustedPosition.y), 0.0) 
             + length(max(adjustedPosition, 0.0)) - radius;
  }

  // Function to calculate glow intensity based on distance
  float calculateGlow(float distance, float radius, float intensity) {
      return pow(radius / distance, intensity); // Glow falls off as distance increases
  }

  half4 main(float2 coord) {
      // Normalize coordinates and aspect ratio
      float aspectRatio = size.y / size.x;
      float2 normalizedPosition = coord.xy / size;
      normalizedPosition.y *= aspectRatio;

      // Define normalized rectangle size and center
      float2 normalizedRect = float2(1.0, aspectRatio);
      float2 normalizedRectCenter = normalizedRect / 2.0;
      normalizedPosition -= normalizedRectCenter;

      // Calculate normalized corner radius and distance
      float normalizedRadius = aspectRatio / 2.0;
      float distanceToRect = calculateRoundedRectSDF(normalizedPosition, normalizedRectCenter, normalizedRadius);

      // Get the button's color
      half4 buttonColor = button.eval(coord);

      // Inside the rounded rectangle, return the button's original color
      if (distanceToRect < 0.0) {
        return buttonColor;
      }

      // Outside the rectangle, calculate glow effect
      float glow = calculateGlow(distanceToRect, glowRadius, glowIntensity);
      half4 glowEffect = glow * glowColor;

      // Apply tone mapping to the glow for a natural look
      glowEffect = 1.0 - exp(-glowEffect);

      return glowEffect;
  }
""".trimIndent()

@Language("AGSL")
val rippleShader = """
    // Uniform variables: inputs provided from the outside
    uniform float2 size;       // The size of the canvas in pixels (width, height)
    uniform float time;        // The elapsed time for animating the ripple effect
    uniform shader composable; // The shader applied to the composable content being rendered
    
    // Main function: calculates the final color at a given fragment (pixel) coordinate
    half4 main(float2 fragCoord) {
        // Scale factor based on the canvas width for normalization
        float scale = 1 / size.x;
        
        // Normalize fragment coordinates
        float2 scaledCoord = fragCoord * scale;
        
        // Calculate the center of the canvas in normalized coordinates
        float2 center = size * 0.5 * scale;
        
        // Calculate the distance from the current fragment to the center
        float dist = distance(scaledCoord, center);
        
        // Calculate the direction vector from the center to the fragment
        float2 dir = scaledCoord - center;
        
        // Apply a sinusoidal wave based on the distance and time
        float sin = sin(dist * 70 - time * 6.28);
        
        // Offset coordinates by applying the wave effect in the direction of the fragment
        float2 offset = dir * sin;
        
        // Calculate the texture coordinates with the ripple effect applied
        float2 textCoord = scaledCoord + offset / 30;
        
        // Sample the composable shader using the adjusted texture coordinates
        return composable.eval(textCoord / scale);
    }
""".trimIndent()

@Language("AGSL")
val lightBallShader = """
    uniform float2 size;       // The size of the canvas in pixels (width, height)
    uniform float time;        // The elapsed time for animating the light effect
    uniform shader composable; // Shader for the composable content
    
    half4 main(float2 fragCoord){
        // Initialize output color
        float4 o = float4(0.0);
        
        // Normalize coordinates relative to the canvas center
        float2 u = fragCoord.xy * 2.0 - size.xy;
        float2 s = u / size.y;

        //ライトボールエフェクトを計算するループ
        for (float i = 0.0; i < 180.0; i++) {
            float a = i / 90.0 - 1.0;                       // Calculate a normalized angle
            float sqrtTerm = sqrt(1.0 - a * a);            // Circular boundary constraint
            float2 p = cos(i * 2.4 + time + float2(0.0, 11.0)) * sqrtTerm; // Oscillation term
            
            // Compute position and adjust with distortion
            float2 c = s + float2(p.x, a) / (p.y + 2.0);
            
            // Calculate the distance factor (denominator)
            float denom = dot(c, c);
            
            // Add light intensity with color variation
            float4 cosTerm = cos(i + float4(0.0, 2.0, 4.0, 0.0)) + 1.0;
            o += cosTerm / denom * (1.0 - p.y) / 30000.0;
        }

        // Return final color with an alpha of 1.0
        return half4(o.rgb, 1.0);
    }
""".trimIndent()

@Language("AGSL")
val rainShader = """
    uniform float time;        // The elapsed time for animating the rain
    uniform float2 size;       // The size of the canvas in pixels (width, height)
    uniform shader composable; // Shader for the composable content

    // Generate a pseudo-random number based on input
    float random(float st) {
        return fract(sin(st * 12.9898) * 43758.5453123);
    }

    half4 main(float2 fragCoord) {
        // Normalize fragment coordinates to the [0, 1] range
        float2 uv = fragCoord / size;

        // Rain parameters
        float speed = 1.0;             // Speed of raindrops
        float t = time * speed;        // Time-adjusted factor for animation
        float density = 200.0;         // Number of rain "drops" per unit area
        float length = 0.1;            // Length of a raindrop
        float angle = radians(30.0);   // Angle of the rain (in degrees)
        float slope = tan(angle);      // Slope of the rain's trajectory

        // Compute grid position and animated raindrop position
        float gridPosX = floor(uv.x * density);
        float2 pos = -float2(uv.x * density + t * slope, fract(uv.y - t));

        // Calculate the raindrop visibility at this fragment
        float drop = smoothstep(length, 0.0, fract(pos.y + random(gridPosX)));

        // Background and rain colors
        half4 bgColor = half4(0.0, 0.0, 0.0, 0.0);  // Black transparent background
        half4 rainColor = half4(0.8, 0.8, 1.0, 1.0); // Light blue raindrop color

        // Blend the background and raindrop color based on drop visibility
        half4 color = mix(bgColor, rainColor, drop);

        return color; // Output the final color for the fragment
    }
""".trimIndent()