by abduzeedo
Explore real-time glass shader on Android with AGSL and Jetpack Compose. Dive into interactive refraction and optical properties.
As designers, I'm always looking for new ways to push the boundaries of visual expression. Sometimes, the most exciting breakthroughs come from unexpected places—like diving into code. While I'm not a professional developer, the advent of AI has opened up entirely new avenues for creative exploration.
For a long time, shaders felt like a distant, complex world. The idea of creating stunning visual effects in real time was fascinating, but the technical hurdle seemed too high for me. Yet, the curiosity that drives me as a designer also fosters a "what if" mentality. This resilience, this willingness to experiment through trial and error, is what ultimately helps me unlock new possibilities.
The Rise of Vibe-Coding
The game changed dramatically with the emergence of GenAI. Suddenly, complex tasks became approachable. The concept of vibe-coding, where you simply articulate your creative vision to an AI and it helps generate the underlying code, has truly transformed the landscape. It's like having a brilliant co-conspirator for my wildest visual ideas.
Initially, I found myself translating shaders from platforms like Shadertoy.com to Android using Jetpack Compose. This process, driven by AI assistance, became a playful learning experience. Starting with basic shapes and image loading, I gradually moved towards more intricate concepts. The ultimate "what if" moment arrived when I wondered: could I create a real-time glass effect, similar to the captivating visuals seen in Apple's Liquid Glass?
Unlocking the Glass Shader on Android
This exploration led to a fascinating project: a real-time glass shader effect implemented on Android using Jetpack Compose and AGSL (Android Graphics Shading Language). This project isn't just about rendering a static image; it's about creating an interactive experience where users can manipulate various optical properties of glass in real time.
Imagine a draggable circular lens on your screen. As you move it, the content behind it distorts, mimicking the refraction of light through glass. You can adjust parameters like the Index of Refraction (IOR), controlling how much light bends, or tweak the Highlight Strength for those subtle specular reflections. Other adjustable properties include Radius, Bevel Width, Thickness, and Shadow Intensity, offering a comprehensive playground for understanding glass optics.
How the Magic Happens
At its core, the application uses a RuntimeShader to apply custom AGSL code to a graphicsLayer in Jetpack Compose. The AGSL shader is the brains behind the visual effect. It calculates distances, simulates refraction by offsetting texture coordinates based on the IOR, and adds realistic touches like specular highlights and a bevel effect. It even subtly hints at chromatic aberration and frosted glass effects, demonstrating the potential for even greater realism.
The Compose UI, built entirely with Jetpack Compose, manages all the interactive elements. Sliders for each parameter and a pointerInput with detectDragGestures for moving the lens provide a seamless user experience. Every adjustment you make updates the shader's uniforms in real time, allowing for instant visual feedback.
This project is a testament to how accessible advanced visual effects have become. If you're curious to explore this further, I encourage you to find the complete project and dive into the code yourself. It’s a great way to understand the interplay between design vision and technical execution, all made more approachable with modern tools.
This interactive glass shader on Android isn't just a technical demo; it's a creative tool. What will you create when you start experimenting with real-time effects?
Explore the project on GitHub github.com/abduzeedo/SolidGlassShader/ or check out the demo on Youtube.
