如何在Mapbox GL JS自定义样式图层中使用u_time？添加后三角形不渲染

嘿，我来帮你搞定这个问题！你遇到的三角形不渲染的情况，是因为在Mapbox中使用自定义uniform变量时，仅仅在片段着色器里声明u_time是不够的——Mapbox的自定义着色器系统需要你明确注册这个uniform的类型，并且要主动在JavaScript代码中更新它的数值。下面是具体的解决步骤：

1. 声明uniform变量类型 #

在创建自定义图层的paint配置里，你需要通过uniforms字段告诉Mapbox这个u_time是一个float类型的变量。这样Mapbox才能正确地在GPU中为它分配内存：

map.addLayer({
  id: 'your-triangle-layer',
  type: 'custom',
  source: { /* 你的GeoJSON数据源 */ },
  paint: {
    'custom-shader': {
      type: 'fragment',
      // 关键：注册u_time的类型
      uniforms: {
        u_time: 'float'
      },
      source: `uniform float u_time; void main() { gl_FragColor = vec4(sin(u_time), 0.0, 1.0, 1.0); }`
    }
  }
});

2. 实时更新u_time的值 #

时间变量需要随着时间推移不断变化才能产生动态效果，同时如果uniform没有被赋值，GLSL会把它当作未定义的变量，导致渲染失败。我们可以用requestAnimationFrame创建一个循环，每帧更新u_time的数值：

function updateShaderTime() {
  // 将毫秒转换为秒，让sin函数的变化速度更自然
  const currentTime = performance.now() / 1000;
  // 通过setPaintProperty更新uniform的值
  map.setPaintProperty('your-triangle-layer', 'custom-shader.uniforms.u_time', currentTime);
  // 循环执行，保持时间更新
  requestAnimationFrame(updateShaderTime);
}

// 在图层加载完成后启动更新循环
map.on('load', () => {
  // 先添加图层...
  updateShaderTime();
});

完整示例代码 #

把两部分结合起来，完整的实现应该是这样的：

map.on('load', () => {
  // 添加三角形图层
  map.addLayer({
    id: 'triangle-layer',
    type: 'custom',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Polygon',
              coordinates: [
                [
                  [-122.483696, 37.833818],
                  [-122.483482, 37.833174],
                  [-122.483396, 37.833382],
                  [-122.483696, 37.833818]
                ]
              ]
            }
          }
        ]
      }
    },
    paint: {
      'custom-shader': {
        type: 'fragment',
        uniforms: {
          u_time: 'float'
        },
        source: `uniform float u_time; void main() { gl_FragColor = vec4(sin(u_time), 0.0, 1.0, 1.0); }`
      }
    }
  });

  // 启动时间更新循环
  function updateTime() {
    const timeInSeconds = performance.now() / 1000;
    map.setPaintProperty('triangle-layer', 'custom-shader.uniforms.u_time', timeInSeconds);
    requestAnimationFrame(updateTime);
  }
  updateTime();
});

关键注意点 #

• 确保setPaintProperty中的图层ID和你创建的图层ID完全一致，否则找不到对应的uniform
• 使用performance.now()而不是Date.now()，前者的精度更高，动画会更平滑
• 如果你的着色器里还有其他uniform变量，也需要用同样的方式注册和更新

这样修改后，你的三角形应该就能正常渲染，并且颜色会随着时间变化啦！

内容的提问来源于stack exchange，提问作者SERG