使用three.js 创建对象会被地图的fill-extrusion对象遮挡,并且fill-extrusion对象不透明

Tryflying commented 4 years ago

我遇到的问题

使用mapbox gl js过程中,我使用threejs创建了一个对象,这个对象是半透明的,在地图上有fill-extrusion对象,也是半透明的发现地图上fill-extrusion对象会遮挡threejs的对象,并且不透明,怎样做到fill-extrusion对象也透明呢

我遇到的问题截图

0191224081118

该问题的类别

web mapbox gl js

Tryflying commented 4 years ago

@dazhi1011

dazhi1011 commented 4 years ago

@Tryflying 图中打错号地方的暗红色对象未能通过深度测试，对应的像素会直接舍弃掉，也就根本不会渲染出来了。不知你有没有观察过官网的室内地图的例子：

indoor

图中红框部分的半透明灰墙遮挡住了后面的黄色地面，原因是一样的，黄色地面没有通过深度测试。类似的还有两个 fill-extrusion 的半透明图层相互也会有遮挡问题，有同学说调整两个图层顺序可以解决，也不完全对（除非你固定视角），在官网例子上又加了个图层，调整两个图层的前后顺序看一下

in1 in2

都存在问题，这是上图的例子，你也可以试一下。另一种方式是在绘制 fill-extrusion 时锁定深度缓冲区 depthMode，可是这又涉及到不同半透明对象的深度可能随视角调整而改变大小关系，但他们的绘制顺序却是固定的，效果也不理想，因为正确流程是应该由深到浅绘制半透明对象。所以，要不咱先别整这么多透明的了，护眼 :sweat_smile:

ps：平时忙工作，周末有时间认真答一下，欢迎指正

mapbox-developer-group / Mapbox-Tech-Q-A