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

Questions
,
1

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()
document.body.appendChild(stats.domElement)

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)
scene.add(point_light)

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

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)
scene.add(map_plane)

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)
scene.add(cube)

const webgl_renderer = new THREE.WebGLRenderer({antialias:true, logarithmicDepthBuffer: true})
webgl_renderer.domElement.style.position = 'absolute'
webgl_renderer.domElement.style.top = '0px'
webgl_renderer.setSize(1280, 720)
webgl_renderer.setClearColor('rgb(64,64,64)', 1.0)
document.body.appendChild(webgl_renderer.domElement)

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


function render() {
    requestAnimationFrame(render)

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


export default class App {
    constructor() {
        render()
    }
}

geo-three_flicker_test.zip (2.5 KB)
Usage:

npm install .
npm run start

Some footages about the problem:



Any idea about the solution?

Thanks for your effort!

Best,
Edward Chen