Transparent mesh flickers when used in conjunction with geo-three map implementation

Hi everyone,

The problem is about when a transparent object is between the map plane (geo-three.js) and the camera, the rendered image (of the transparent object) is flickering (and fragmented) at some angle and distance. I’m not sure about what the cause is.
I’ve thought of z-buffer racing or z-buffer resolution problems, but I altered the code accordingly (modifying the range of camera and add “logarithmicDepthBuffer: true”) and the problem still exists.

Here I’ve put together a small test project about the problem.

import * as THREE from 'three'
import * as Geo from 'geo-three'
import { OrbitControls } from '/three/jsm/controls/OrbitControls.js'
import Stats from '/three/jsm/libs/stats.module.js'

const stats = Stats()

const camera = new THREE.PerspectiveCamera(77.552, 1280 / 720, 1e0, 1e8)
camera.position.set(0, 0, 80)
camera.up.set(0, 1, 0)
camera.lookAt(0, 0, 0)

const scene = new THREE.Scene()

const point_light = new THREE.PointLight(0xffffff)
point_light.position.set(1e3, 1e3, 1e3)

const point_light_2 = new THREE.PointLight(0xffffff)
point_light_2.position.set(1e3, -1e3, 1e3)

const provider = new Geo.DebugProvider()  // new Geo.BingMapsProvider()
const h_provider = new Geo.HeightDebugProvider(provider)
const map_plane = new Geo.MapView(Geo.MapView.PLANAR, provider, h_provider)
map_plane.up.set(0, 0, 1)
map_plane.lookAt(-1, 0, 0)

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(10, 10, 10),
    new THREE.MeshPhongMaterial(
        {transparent: true, opacity: 0.8, color: 0x0000ff}
cube.position.set(0, 0, 10)

const webgl_renderer = new THREE.WebGLRenderer({antialias:true, logarithmicDepthBuffer: true}) = 'absolute' = '0px'
webgl_renderer.setSize(1280, 720)
webgl_renderer.setClearColor('rgb(64,64,64)', 1.0)

const controls = new OrbitControls(camera, webgl_renderer.domElement) = cube.position

function render() {

    cube.rotation.x += 0.01
    cube.rotation.y += 0.013
    webgl_renderer.render(scene, camera)

export default class App {
    constructor() {
} (2.5 KB)

npm install .
npm run start

Some footages about the problem:

Any idea about the solution?

Thanks for your effort!

Edward Chen