GLSL 着色器编程
从零到 Android 实战

#version 300 es
precision mediump float;

// 输出变量：这个像素最终的颜色
out vec4 fragColor;

void main() {
    // vec4(R, G, B, A)  每个分量范围是 0.0 ~ 1.0
    fragColor = vec4(1.0, 0.4, 0.2, 1.0);
}

#version 300 es
precision mediump float;

uniform vec2 uResolution; // 屏幕分辨率，由 CPU 端传入
out vec4 fragColor;

void main() {
    // 归一化坐标：把像素坐标映射到 0.0 ~ 1.0
    vec2 uv = gl_FragCoord.xy / uResolution;

    // 用坐标作为颜色：左下角黑色，右上角黄色
    fragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}

// 居中归一化：中心为 (0,0)，范围 -0.5 ~ 0.5
vec2 uv = (gl_FragCoord.xy - uResolution * 0.5) / uResolution.y;
// 除以 .y 而非 uResolution 确保 x 和 y 的比例一致（圆不会被拉成椭圆）

vec4 color = vec4(1.0, 0.5, 0.2, 1.0);

color.rgb   // vec3(1.0, 0.5, 0.2)  — 取前三个分量
color.xy    // vec2(1.0, 0.5)       — 也可以用 .xy 别名
color.rrr   // vec3(1.0, 1.0, 1.0)  — 重复同一分量
color.bgr   // vec3(0.2, 0.5, 1.0)  — 重新排列

// .xyzw、.rgba、.stpq 三套别名完全等价
// 用哪套取决于语义：坐标用 .xy，颜色用 .rgb，纹理坐标用 .st

vec3 a = vec3(1.0, 2.0, 3.0);
vec3 b = vec3(4.0, 5.0, 6.0);

a + b    // vec3(5.0, 7.0, 9.0)   — 对应分量相加
a * b    // vec3(4.0, 10.0, 18.0) — 对应分量相乘（不是点积！）
a * 2.0  // vec3(2.0, 4.0, 6.0)   — 标量会广播到每个分量

dot(a, b)    // 32.0    — 点积要用内置函数
cross(a, b)  // vec3(…) — 叉积
length(a)    // 3.74…  — 向量长度
normalize(a) // 单位向量

abs(x)          // 绝对值
sign(x)         // 返回 -1.0, 0.0, 或 1.0
floor(x)        // 向下取整
ceil(x)         // 向上取整
fract(x)        // 小数部分 = x - floor(x)  ⬅ 做重复图案的神器
mod(x, y)       // 取模 = x - y * floor(x/y)
min(a, b)       // 取最小值
max(a, b)       // 取最大值
clamp(x, lo, hi) // 限制在 [lo, hi] 范围内

// ── mix(a, b, t) ──
// 线性插值：返回 a*(1-t) + b*t
// t=0.0 → 返回 a　　t=1.0 → 返回 b　　t=0.5 → 返回 a 和 b 的中间值
vec3 blended = mix(colorA, colorB, 0.5); // 两种颜色等量混合

// ── step(edge, x) ──
// 阶跃函数：x < edge → 0.0，x >= edge → 1.0
// 可以理解为"硬边界判断"
float mask = step(0.5, uv.x); // 左半边=0 右半边=1

// ── smoothstep(edge0, edge1, x) ──
// 平滑阶跃：在 edge0~edge1 之间做平滑过渡（Hermite 插值）
// x < edge0 → 0.0　　x > edge1 → 1.0　　之间 → 平滑曲线
float soft = smoothstep(0.4, 0.6, uv.x); // 在 0.4~0.6 之间平滑渐变

#version 300 es
precision mediump float;
uniform vec2 uResolution;
out vec4 fragColor;

// 圆的 SDF：到圆心的距离 - 半径
float sdCircle(vec2 p, float r) {
    return length(p) - r;
}

void main() {
    // 居中归一化坐标
    vec2 uv = (gl_FragCoord.xy - uResolution * 0.5) / uResolution.y;

    // 计算距离：半径 0.3 的圆
    float d = sdCircle(uv, 0.3);

    // 方法1：硬边缘（step）
    // float circle = step(0.0, -d);  // 圆内=1 圆外=0

    // 方法2：平滑边缘（推荐）
    float circle = smoothstep(0.005, 0.0, d);

    vec3 color = mix(
        vec3(0.1),           // 背景色
        vec3(0.4, 0.3, 0.9), // 圆的颜色
        circle
    );
    fragColor = vec4(color, 1.0);
}

// 矩形 SDF（以原点为中心，半尺寸为 b）
float sdBox(vec2 p, vec2 b) {
    vec2 d = abs(p) - b;
    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
}

// 圆角矩形
float sdRoundBox(vec2 p, vec2 b, float r) {
    return sdBox(p, b - r) - r;
}

// 线段
float sdSegment(vec2 p, vec2 a, vec2 b) {
    vec2 pa = p - a, ba = b - a;
    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
    return length(pa - ba * h);
}

// 组合操作
min(d1, d2)    // 并集（Union）
max(d1, d2)    // 交集（Intersection）
max(d1, -d2)   // 差集（Subtraction）

// 用 fract 把坐标空间重复切割成格子
vec2 grid = fract(uv * 5.0);        // 5×5 的重复网格
vec2 cell = grid - 0.5;              // 每个格子中心为 (0,0)
float d = sdCircle(cell, 0.2);      // 每个格子画一个圆
float dots = smoothstep(0.005, 0.0, d);

// 结果：5×5 的圆点阵列！

uniform float uTime;       // 累计时间（秒），每帧更新
uniform vec2  uResolution; // 画面分辨率 (width, height)
uniform vec2  uTouch;      // 触摸/鼠标位置（Android 中特别有用）

#version 300 es
precision mediump float;
uniform vec2 uResolution;
uniform float uTime;
out vec4 fragColor;

void main() {
    vec2 uv = (gl_FragCoord.xy - uResolution * 0.5) / uResolution.y;

    // 圆的半径随时间呼吸式脉动
    float radius = 0.25 + 0.05 * sin(uTime * 3.0);
    float d = length(uv) - radius;

    // 彩虹色随时间旋转
    vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4));

    float mask = smoothstep(0.005, 0.0, d);
    fragColor = vec4(col * mask, 1.0);
}

#version 300 es
precision mediump float;
uniform sampler2D uTexture;  // 纹理采样器
uniform vec2 uResolution;
out vec4 fragColor;

void main() {
    vec2 uv = gl_FragCoord.xy / uResolution;
    // 注意：纹理坐标也叫 UV，范围 0~1
    // (0,0) 是左下角，(1,1) 是右上角

    vec4 texColor = texture(uTexture, uv);
    fragColor = texColor;
}

// 简单漩涡扭曲效果
vec2 center = vec2(0.5);
vec2 delta = uv - center;
float angle = length(delta) * 5.0;  // 距离越远旋转越多
float s = sin(angle), c = cos(angle);
vec2 rotated = vec2(
    delta.x * c - delta.y * s,
    delta.x * s + delta.y * c
) + center;
vec4 texColor = texture(uTexture, rotated);

class ShaderSurfaceView(context: Context) : GLSurfaceView(context) {
    init {
        // 指定 OpenGL ES 3.0
        setEGLContextClientVersion(3)
        // 设置你的 Renderer
        setRenderer(ShaderRenderer())
        // 持续渲染模式（每帧都调用 onDrawFrame）
        renderMode = RENDERMODE_CONTINUOUSLY
    }
}

class ShaderRenderer : GLSurfaceView.Renderer {
    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        // 初始化：编译 Shader、创建 Program、准备顶点数据
    }
    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        // 窗口尺寸变化：更新视口
        GLES30.glViewport(0, 0, width, height)
    }
    override fun onDrawFrame(gl: GL10?) {
        // 每帧调用：清屏 → 传 Uniform → 画全屏四边形
    }
}

object ShaderUtil {

    /**
     * 编译单个 Shader（顶点或片元）
     * @param type  GLES30.GL_VERTEX_SHADER 或 GL_FRAGMENT_SHADER
     * @param code  GLSL 源码字符串
     * @return shader ID，失败返回 0
     */
    fun compileShader(type: Int, code: String): Int {
        val shader = GLES30.glCreateShader(type)
        GLES30.glShaderSource(shader, code)
        GLES30.glCompileShader(shader)

        // 检查编译是否成功
        val status = IntArray(1)
        GLES30.glGetShaderiv(shader, GLES30.GL_COMPILE_STATUS, status, 0)
        if (status[0] == 0) {
            val log = GLES30.glGetShaderInfoLog(shader)
            Log.e("Shader", "编译失败: $log")
            GLES30.glDeleteShader(shader)
            return 0
        }
        return shader
    }

    /**
     * 链接顶点和片元 Shader 为一个 Program
     */
    fun createProgram(vertCode: String, fragCode: String): Int {
        val vert = compileShader(GLES30.GL_VERTEX_SHADER, vertCode)
        val frag = compileShader(GLES30.GL_FRAGMENT_SHADER, fragCode)

        val program = GLES30.glCreateProgram()
        GLES30.glAttachShader(program, vert)
        GLES30.glAttachShader(program, frag)
        GLES30.glLinkProgram(program)

        // 检查链接状态
        val status = IntArray(1)
        GLES30.glGetProgramiv(program, GLES30.GL_LINK_STATUS, status, 0)
        if (status[0] == 0) {
            Log.e("Shader", "链接失败: ${GLES30.glGetProgramInfoLog(program)}")
            GLES30.glDeleteProgram(program)
            return 0
        }

        // 编译链接成功后，shader 对象可以释放
        GLES30.glDeleteShader(vert)
        GLES30.glDeleteShader(frag)
        return program
    }
}

#version 300 es
// 输入：顶点位置（由 CPU 端传入）
in vec4 aPosition;

void main() {
    // 直接输出位置，不做任何变换
    gl_Position = aPosition;
}

class ShaderRenderer : GLSurfaceView.Renderer {
    private var program = 0
    private var vao = 0
    private var startTime = 0L
    private var width = 0
    private var height = 0

    // 全屏四边形：两个三角形组成
    // 坐标范围 -1 ~ 1（NDC 标准化设备坐标）
    private val quadVertices = floatArrayOf(
        -1f, -1f,   // 左下
         1f, -1f,   // 右下
        -1f,  1f,   // 左上
         1f,  1f,   // 右上
    )

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        // 1. 编译链接 Shader Program
        program = ShaderUtil.createProgram(VERT_CODE, FRAG_CODE)
        startTime = System.nanoTime()

        // 2. 创建 VAO（顶点数组对象）— 记录顶点属性配置
        val vaos = IntArray(1)
        GLES30.glGenVertexArrays(1, vaos, 0)
        vao = vaos[0]
        GLES30.glBindVertexArray(vao)

        // 3. 创建 VBO（顶点缓冲对象）— 存放顶点数据
        val vbos = IntArray(1)
        GLES30.glGenBuffers(1, vbos, 0)
        GLES30.glBindBuffer(GLES30.GL_ARRAY_BUFFER, vbos[0])

        // 4. 上传顶点数据到 GPU
        val buffer = ByteBuffer
            .allocateDirect(quadVertices.size * 4)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer()
            .put(quadVertices)
            .apply { position(0) }

        GLES30.glBufferData(
            GLES30.GL_ARRAY_BUFFER,
            quadVertices.size * 4,
            buffer,
            GLES30.GL_STATIC_DRAW
        )

        // 5. 配置顶点属性
        val posLoc = GLES30.glGetAttribLocation(program, "aPosition")
        GLES30.glEnableVertexAttribArray(posLoc)
        GLES30.glVertexAttribPointer(
            posLoc,        // attribute 位置
            2,             // 每个顶点 2 个分量 (x, y)
            GLES30.GL_FLOAT,
            false,
            0,             // stride（紧密排列所以为 0）
            0              // offset
        )

        GLES30.glBindVertexArray(0)
    }

    override fun onSurfaceChanged(gl: GL10?, w: Int, h: Int) {
        width = w; height = h
        GLES30.glViewport(0, 0, w, h)
    }

    override fun onDrawFrame(gl: GL10?) {
        // 计算时间
        val time = (System.nanoTime() - startTime) / 1_000_000_000f

        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        GLES30.glUseProgram(program)

        // 传递 Uniform
        val resLoc = GLES30.glGetUniformLocation(program, "uResolution")
        GLES30.glUniform2f(resLoc, width.toFloat(), height.toFloat())
        val timeLoc = GLES30.glGetUniformLocation(program, "uTime")
        GLES30.glUniform1f(timeLoc, time)

        // 绘制全屏四边形
        GLES30.glBindVertexArray(vao)
        GLES30.glDrawArrays(GLES30.GL_TRIANGLE_STRIP, 0, 4)
        GLES30.glBindVertexArray(0)
    }
}

// 在 onSurfaceCreated 中缓存 location（避免每帧查找）
private var uTimeLoc = 0
private var uResolutionLoc = 0
private var uTouchLoc = 0

// 在 program 创建成功后：
uTimeLoc = GLES30.glGetUniformLocation(program, "uTime")
uResolutionLoc = GLES30.glGetUniformLocation(program, "uResolution")
uTouchLoc = GLES30.glGetUniformLocation(program, "uTouch")

// 然后在 onDrawFrame 中直接用：
GLES30.glUniform1f(uTimeLoc, time)
GLES30.glUniform2f(uResolutionLoc, width.toFloat(), height.toFloat())

fun loadTexture(context: Context, resId: Int): Int {
    val texIds = IntArray(1)
    GLES30.glGenTextures(1, texIds, 0)
    val texId = texIds[0]

    GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texId)

    // 设置纹理参数
    GLES30.glTexParameteri(
        GLES30.GL_TEXTURE_2D,
        GLES30.GL_TEXTURE_MIN_FILTER, // 缩小时的过滤方式
        GLES30.GL_LINEAR              // 线性插值（平滑）
    )
    GLES30.glTexParameteri(
        GLES30.GL_TEXTURE_2D,
        GLES30.GL_TEXTURE_MAG_FILTER, // 放大时的过滤方式
        GLES30.GL_LINEAR
    )
    GLES30.glTexParameteri(
        GLES30.GL_TEXTURE_2D,
        GLES30.GL_TEXTURE_WRAP_S,     // 水平方向超出范围时
        GLES30.GL_CLAMP_TO_EDGE       // 拉伸边缘像素
    )
    GLES30.glTexParameteri(
        GLES30.GL_TEXTURE_2D,
        GLES30.GL_TEXTURE_WRAP_T,     // 垂直方向
        GLES30.GL_CLAMP_TO_EDGE
    )

    // 加载 Bitmap 并上传到 GPU
    val options = BitmapFactory.Options().apply {
        inScaled = false  // 不缩放，保持原始尺寸
    }
    val bitmap = BitmapFactory.decodeResource(
        context.resources, resId, options
    )
    GLUtils.texImage2D(GLES30.GL_TEXTURE_2D, 0, bitmap, 0)
    bitmap.recycle()  // 上传后释放 CPU 端内存

    return texId
}

// ── 在 onDrawFrame 中使用纹理 ──
// 激活纹理单元 0
GLES30.glActiveTexture(GLES30.GL_TEXTURE0)
// 绑定纹理
GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, textureId)
// 告诉 Shader：uTexture 使用纹理单元 0
GLES30.glUniform1i(uTextureLoc, 0)

@Composable
fun ShaderView(
    modifier: Modifier = Modifier
) {
    var rendererRef by remember {
        mutableStateOf<ShaderRenderer?>(null)
    }

    AndroidView(
        modifier = modifier.fillMaxSize(),
        factory = { ctx ->
            GLSurfaceView(ctx).apply {
                setEGLContextClientVersion(3)
                // 如果需要透明背景
                setEGLConfigChooser(8, 8, 8, 8, 16, 0)
                holder.setFormat(PixelFormat.TRANSLUCENT)

                val renderer = ShaderRenderer()
                rendererRef = renderer
                setRenderer(renderer)
                renderMode = GLSurfaceView.RENDERMODE_CONTINUOUSLY
            }
        },
        onRelease = { glView ->
            // 清理 GL 资源（可选，GLSurfaceView 会在 destroy 时处理）
        }
    )
}

// ── 在 Screen 中使用 ──
@Composable
fun ShaderScreen() {
    Box(modifier = Modifier.fillMaxSize()) {
        ShaderView()
        // Compose UI 可以叠加在 Shader 上面
        Text(
            text = "GLSL Effect",
            modifier = Modifier.align(Alignment.Center),
            color = Color.White
        )
    }
}

// 在 Renderer 中添加触摸位置属性
class ShaderRenderer : GLSurfaceView.Renderer {
    @Volatile var touchX = 0f
    @Volatile var touchY = 0f
    // … onDrawFrame 中传递：
    // glUniform2f(uTouchLoc, touchX, height - touchY)
    // 注意 y 翻转：Android 触摸 y 是从上到下，GL 坐标系是从下到上
}

// 在 AndroidView 的 factory 中设置触摸监听
setOnTouchListener { _, event ->
    renderer.touchX = event.x
    renderer.touchY = event.y
    true
}

#version 300 es
precision mediump float;

uniform sampler2D uTexFrom;   // 原页面截图
uniform sampler2D uTexTo;     // 目标页面截图
uniform float     uProgress;  // 动画进度 0.0 ~ 1.0
uniform vec2      uResolution;
out vec4 fragColor;

void main() {
    vec2 uv = gl_FragCoord.xy / uResolution;

    // 居中坐标，保持宽高比
    vec2 center = (gl_FragCoord.xy - uResolution * 0.5) / uResolution.y;

    // 圆的半径随进度扩大
    // sqrt(2.0) 确保圆能完全覆盖屏幕对角线
    float maxRadius = sqrt(2.0) * max(
        uResolution.x / uResolution.y, 1.0
    );
    float radius = uProgress * maxRadius;

    // 当前像素到中心的距离
    float dist = length(center);

    // 在圆边缘添加平滑过渡（宽度约 2 像素）
    float edge = 2.0 / uResolution.y;
    float mask = smoothstep(radius - edge, radius + edge, dist);

    // mask=0 → 圆内 → 新页面，mask=1 → 圆外 → 旧页面
    vec4 colFrom = texture(uTexFrom, uv);
    vec4 colTo   = texture(uTexTo, uv);

    fragColor = mix(colTo, colFrom, mask);
}

class TransitionRenderer(
    private val context: Context
) : GLSurfaceView.Renderer {
    private var program = 0
    private var texFrom = 0
    private var texTo = 0
    @Volatile var progress = 0f  // 由 Compose 的动画驱动

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        program = ShaderUtil.createProgram(VERT, FRAG)
        texFrom = loadTexture(context, R.drawable.page_from)
        texTo   = loadTexture(context, R.drawable.page_to)
        // … 设置 VAO/VBO（与上一章相同）
    }

    override fun onDrawFrame(gl: GL10?) {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT)
        GLES30.glUseProgram(program)

        // 绑定两个纹理到不同的纹理单元
        GLES30.glActiveTexture(GLES30.GL_TEXTURE0)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texFrom)
        GLES30.glUniform1i(
            GLES30.glGetUniformLocation(program, "uTexFrom"), 0
        )

        GLES30.glActiveTexture(GLES30.GL_TEXTURE1)
        GLES30.glBindTexture(GLES30.GL_TEXTURE_2D, texTo)
        GLES30.glUniform1i(
            GLES30.glGetUniformLocation(program, "uTexTo"), 1
        )

        // 传递进度和分辨率
        GLES30.glUniform1f(
            GLES30.glGetUniformLocation(program, "uProgress"),
            progress
        )
        // … resolution, 然后 glDrawArrays
    }
}

@Composable
fun TransitionScreen() {
    var trigger by remember { mutableStateOf(false) }
    val progress by animateFloatAsState(
        targetValue = if (trigger) 1f else 0f,
        animationSpec = tween(durationMillis = 800, easing = FastOutSlowInEasing),
        label = "transition"
    )

    var rendererRef by remember {
        mutableStateOf<TransitionRenderer?>(null)
    }

    // 每帧更新 progress
    LaunchedEffect(progress) {
        rendererRef?.progress = progress
    }

    Box(modifier = Modifier.fillMaxSize()) {
        AndroidView(
            factory = { ctx ->
                GLSurfaceView(ctx).apply {
                    setEGLContextClientVersion(3)
                    val r = TransitionRenderer(ctx)
                    rendererRef = r
                    setRenderer(r)
                    renderMode = GLSurfaceView.RENDERMODE_CONTINUOUSLY
                }
            },
            modifier = Modifier.fillMaxSize()
        )

        Button(
            onClick = { trigger = !trigger },
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(32.dp)
        ) {
            Text(if (trigger) "返回" else "切换")
        }
    }
}