Shader with controller size

gistfile1.txt

private val runtimeShader = """
    uniform shader image;
    uniform float2 resolution;
    uniform float rectWidth;
    uniform float rectHeight;
    uniform float intensity;
    uniform int tonemap;

    half4 main(float2 coord) {
        float2 uv = coord.xy / resolution;
        uv = uv * 2.0 - 1.0;

        // 调整纵横比
        uv.x *= resolution.x / resolution.y;

        // 定义矩形的半宽和半高
        float2 halfSize = float2(rectWidth, rectHeight);

        // 计算到矩形边缘的距离（Signed Distance Function for Rectangle）
        float2 d = abs(uv) - halfSize;
        float outsideDist = length(max(d, 0.0));
        float insideDist = min(max(d.x, d.y), 0.0);
        float distance = outsideDist + insideDist;

        // 根据距离计算发光效果
        if (distance < 0.0) {
            return half4(1.0);
        }

        float glow = 0.1 / distance;
        half3 baseColor = half3(0.2, 0.2, 0.4);
        half3 color = baseColor * glow * intensity;

        return half4(color, 1.0);
    }
""".trimIndent()


@RequiresApi(Build.VERSION_CODES.TIRAMISU)
@Preview
@Composable
fun ShaderGlowRectangle() {
    val context = LocalContext.current
    val shader = remember { RuntimeShader(runtimeShader) }

    var rectWidth by remember { mutableStateOf(0.2f) }
    var rectHeight by remember { mutableStateOf(0.2f) }
    var intensity by remember { mutableStateOf(1.0f) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier
                .size(300.dp) // 固定大小，或者根据需要调整
                .onSizeChanged { size ->
                    shader.setFloatUniform(
                        "resolution", size.width.toFloat(), size.height.toFloat()
                    )
                }
                .graphicsLayer {
                    shader.setFloatUniform("rectWidth", rectWidth)
                    shader.setFloatUniform("rectHeight", rectHeight)
                    shader.setFloatUniform("intensity", intensity)
                    this.renderEffect = RenderEffect
                        .createRuntimeShaderEffect(
                            shader, "image"
                        )
                        .asComposeRenderEffect()
                }
                .background(Color.Red)
        )
        Spacer(modifier = Modifier.height(16.dp))

        // 控制矩形宽度的滑块
        Text(
            text = "Width: ${String.format("%.2f", rectWidth)}",
            color = Color.Black,
            fontWeight = FontWeight.Bold
        )
        Slider(
            value = rectWidth,
            onValueChange = { rectWidth = it },
            valueRange = 0.0f..1.0f,
            modifier = Modifier.padding(horizontal = 16.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))

        // 控制矩形高度的滑块
        Text(
            text = "Height: ${String.format("%.2f", rectHeight)}",
            color = Color.Black,
            fontWeight = FontWeight.Bold
        )
        Slider(
            value = rectHeight,
            onValueChange = { rectHeight = it },
            valueRange = 0.0f..1.0f,
            modifier = Modifier.padding(horizontal = 16.dp)
        )
        Spacer(modifier = Modifier.height(16.dp))

        // 控制发光强度的滑块
        Text(
            text = "Intensity: ${String.format("%.2f", intensity)}",
            color = Color.Black,
            fontWeight = FontWeight.Bold
        )
        Slider(
            value = intensity,
            onValueChange = { intensity = it },
            valueRange = 0.0f..5.0f,
            modifier = Modifier.padding(horizontal = 16.dp)
        )
    }
}