Compose Multiplatform で GLSL

maxfie1d 1ヶ月前に更新

GLSL とは

GLSL は OpenGL のシェーディング言語
3D や 2D のグラフィックスを作ることができる

https://ja.wikipedia.org/wiki/GLSL

maxfie1d 1ヶ月前

GLSL で作れるものの例

出典: https://wgld.org/d/glsl/g001.html

maxfie1d 1ヶ月前に更新

Android 13以降では GLSL とほぼ同一の AGSL をサポートしていて比較的簡単にシェーダーを組み込むことができる。

maxfie1d 1ヶ月前

もちろん Jetpack Compose にも対応している。ShaderBrush と RuntimeShader を使用するのがポイント。

private const val COLOR_SHADER_SRC =
    """uniform float2 iResolution;
   half4 main(float2 fragCoord) {
   float2 scaled = fragCoord/iResolution.xy;
   return half4(scaled, 0, 1);
}"""

// created as top level constants
val colorShader = RuntimeShader(COLOR_SHADER_SRC)
val shaderBrush = ShaderBrush(colorShader)

Canvas(
   modifier = Modifier.fillMaxSize()
) {
   colorShader.setFloatUniform("iResolution",
   size.width, size.height)
   drawCircle(brush = shaderBrush)
}