GLSL着色器像素循环在移动设备上出现异常行为

问题背景 #

开发GLSL着色器时，使用while循环遍历像素为纹理区域添加特效，相同代码在桌面设备运行正常，但Android和iOS移动设备上输出效果不一致：桌面端能正确识别纹理边缘并渲染对应颜色，移动端部分区域颜色显示异常或未触发预期的颜色变化。

核心问题分析 #

• 未初始化变量：片段着色器中finalX和finalY未赋初始值，当循环未触发break时，变量值为未定义状态。桌面GPU和移动GPU对未定义变量的处理逻辑不同，直接导致输出差异。
• GPU循环限制：移动GPU对循环迭代次数有严格限制，代码中pixelStep=0.001意味着最多执行1000次循环，部分移动GPU可能提前终止循环，导致结果异常。
• 精度与采样差异：移动设备浮点精度普遍低于桌面，固定步长的UV计算易出现偏差；同时纹理默认的过滤和包裹模式，也会导致移动设备采样结果与桌面不一致。

修复方案 #

1. 强制初始化变量 #

确保所有变量在使用前有明确初始值，消除未定义行为的影响。

2. 替换循环实现逻辑 #

GPU对分支和循环的优化能力弱，改用基于纹理实际尺寸的精确步长，同时限制循环迭代次数，避免触发移动GPU的循环限制。

3. 统一纹理采样参数 #

设置纹理的包裹模式为ClampToEdgeWrapping，关闭纹理过滤，确保采样精确到单个像素，消除跨设备的采样差异。

修改后的完整代码 #

JavaScript部分（调整纹理参数） #

(function() {
  "use strict";
  var scene;
  var renderer;
  var camera;
  var uniforms;
  var material;

  const screenSize = {
    desk: {
      w: 640,
      h: 480
    },
    mob: {
      w: 240,
      h: 320
    },
  };
  async function loadTexture(url) {
    return new Promise((resolve, reject) => {
      const loader = new THREE.TextureLoader();
      loader.load(
        url,
        (texture) => resolve(texture),
        undefined,
        (error) => reject(error)
      );
    });
  }

  async function init() {
    var canvas = document.getElementById("three-canvas");
    renderer = new THREE.WebGLRenderer({
      canvas
    });
    const size = screen.width < 600 ? screenSize.mob : screenSize.desk;
    renderer.setSize(size.w, size.h);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(
      45,
      size.w / size.h,
      1,
      100
    );
    camera.position.z = 10;

    var light = new THREE.PointLight(0xffffff);
    light.position.set(0, 0, 500);
    scene.add(light);

    var vertShader = document.getElementById("vertexShader").innerHTML;
    var fragShader = document.getElementById("fragmentShader").innerHTML;

    const geometry = new THREE.PlaneGeometry(8, 8);
    const texture = await loadTexture("https://camweara-customers.s3.ap-south-1.amazonaws.com/Teststore/test.png");
    // 统一纹理采样参数
    texture.wrapS = THREE.ClampToEdgeWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.NearestFilter;

    uniforms = {
      texture1: {
        type: "t",
        value: texture
      }
    };

    material = new THREE.ShaderMaterial({
      vertexShader: vertShader,
      fragmentShader: fragShader,
      uniforms: uniforms,
      transparent: true,
    });

    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
  }

  function animate() {
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }

  window.onload = function() {
    init();
    animate();
  };
})();

HTML与着色器部分（修复变量初始化+优化循环） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js">
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 100%;
      overflow: hidden;
      background: #1d1d1d;
    }
    canvas {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <canvas id="three-canvas"></canvas>
  <script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
  </script>
  <script id="fragmentShader" type="x-shader/x-fragment">
    precision highp float;
    uniform sampler2D texture1;
    varying vec2 vUv;

    void main() {
        vec4 bg_clr = texture2D(texture1, vUv);
        vec4 finalClr = vec4(0.0, 0.0, 1.0, 1.0);

        // 初始化变量，避免未定义行为
        vec4 finalX = vec4(0.0,0.0,0.0,1.0);
        vec4 finalY = vec4(0.0,0.0,0.0,1.0);

        if(bg_clr.w > 0.2){
            float maxDist = 1.0;
            // 基于纹理实际宽度计算精确步长
            float stepX = 1.0 / textureSize(texture1, 0).x;
            for(float i=0.0; i<maxDist; i+=stepX){
                vec2 pos = vUv - vec2(i, 0.0);
                vec4 xColor = texture2D(texture1, pos);
                if(xColor.w < 0.01){
                    finalX = vec4(1.0,0.0,0.0,1.0);
                    break;
                }
            }

            // 基于纹理实际高度计算精确步长
            float stepY = 1.0 / textureSize(texture1, 0).y;
            for(float i=0.0; i<maxDist; i+=stepY){
                vec2 pos = vUv + vec2(0.0, i);
                vec4 yColor = texture2D(texture1, pos);
                if(yColor.w < 0.1){
                    finalY = vec4(0.0,1.0,0.0,1.0);
                    break;
                }
            }
            finalClr = mix(finalX,finalY,0.5);
        }
        gl_FragColor = finalClr;
    }
  </script>
</body>
</html>

额外优化建议 #

• 避免在片段着色器中使用while循环，改用for循环并限制最大迭代次数，符合GPU并行计算特性。
• 使用textureSize获取纹理实际尺寸，计算精确的像素步长，避免固定步长导致的设备适配问题。
• 移动设备上尽量减少纹理采样次数，可通过预计算纹理边缘信息进一步提升渲染性能。

内容的提问来源于stack exchange，提问作者R K Gnanesh