Mapbox使用Three.js自定义层时autoClear配置原理疑问

问题背景 #

我在Mapbox接入Three.js自定义层时遇到autoClear配置相关的疑问。我通过Mapbox自定义层规则在地图空间内成功渲染了立方体，需求是初始状态显示底图图层，在特定时机切换底图可见性，我采用了如下实现方式：

onAdd方法内代码 #

this.map = map;
this.canvas = map.getCanvas()

this.renderer = new THREE.WebGLRenderer({
    canvas: map.getCanvas(),
    context: gl,
    antialias: true
});

this.renderer.autoClear = false;

render方法内代码 #

frameCount += 0.1
if(frameCount>10 && frameCount<11){
    this.renderer.autoClear = true;
}

我偶然实现了预期效果，但不清楚背后的运行逻辑。Three.js官方文档对autoClear的说明为：.autoClear : Boolean 定义渲染器是否在渲染每一帧之前自动清空其输出。
按我的理解，设置autoClear为true应当清空场景内所有内容，看不到任何元素，但实际开启该配置后仅地图瓦片消失，我添加的网格模型和地图标签都正常保留，相关效果如下：

• autoClear设为true后的效果
  
• autoClear为false的初始默认状态效果
  

现象成因解答 #

这个现象是Mapbox自定义层的渲染时序和Three.js autoClear的作用逻辑共同决定的，具体如下：

1. Mapbox的帧渲染顺序固定：每一帧按图层优先级先渲染底图瓦片层，再渲染所有自定义层，最后渲染文字、POI符号等标签层。你的Three.js自定义层默认插入在底图层和标签层之间。
2. 你初始化Three.js渲染器时直接复用了Mapbox的WebGL上下文和Canvas实例，两个库共用同一个绘图缓冲区，没有独立的渲染目标。
3. autoClear的实际作用表现：
   • 初始状态autoClear设为false时：Three.js执行渲染前不会清空缓冲区，Mapbox已经渲染好的底图瓦片会完整保留，叠加Three.js立方体后，后续标签层正常绘制在最上层，就是你看到的默认效果。
   • 当autoClear设为true时：Three.js在执行自身渲染逻辑前，会先清空当前绑定的GL缓冲区，此时缓冲区里之前Mapbox渲染好的底图瓦片会被全部清除；之后Three.js会把场景内的立方体重新渲染到缓冲区；最后Mapbox还会执行标签层的渲染逻辑，把文字、符号等内容绘制到缓冲区，所以最终呈现底图消失、立方体和标签都保留的效果。
4. 你对autoClear的理解存在误区：autoClear清空的是渲染器绑定的GL输出缓冲区内容，不会删除Three.js场景内的对象，只要Three.js后续执行渲染逻辑，场景内的网格模型会重新绘制到清屏后的缓冲区。

补充建议：你当前的实现依赖渲染时序的黑盒逻辑，稳定性较差，建议直接调用Mapbox官方的setLayoutProperty方法控制底图层的visibility属性实现显隐切换，逻辑更可控。

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