Is there any way of making the map plane semi-transparent?

Hi, first of all, Great Project here! Thank you guys!
This is easy to use and easily extendable.

One questions though, I want to make the map plane transparent.
So I've thought of modifying the Three Materials with { transparent: true, opacity: 0.5 }.

geo-three/build/geo-three.module.js

Line 294 in 9a688ee

    
           super(parentNode, mapView, location, level, x, y, MapPlaneNode.geometry, new MeshBasicMaterial({ wireframe: false }));

But it ended up with severe flickering, maybe the planes are racing along z-depth.
I don't know too much about the implementation details of this project so I can't sort it out.

Any suggestion on making the map plane semi-transparent and display correctly?

Thanks in advance.

Best,
Edward Chen

Hello

This might require some changes since during load the map tiles might overlap for a while.

I have to verify bit it might be possible to do some changes to the tile loader to avoid the overlapping and then you should be appled to correctly apply transparency.

Thanks a lot!

Hello

This might require some changes since during load the map tiles might overlap for a while.

I have to verify bit it might be possible to do some changes to the tile loader to avoid the overlapping and then you should be appled to correctly apply transparency.

Thanks a lot!

Thanks for your fast reply!
One observation here, If I make the map plane DoubleSided, the back side of the map plane doesn't flickinger, even when transparent!
But then the road name on the map would be flipped, so not really that useful.
Thanks for your effort of looking into it. Hope there is good news soon!

Best,
Edward Chen

Hi @tentone,

I've encountered some problem which maybe related to the original issue.
The problem is about when a transparent object is between the map plane 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.
Here I've made an 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, 1e-1, 1e12)
camera.position.set(0, 0, 1e6)
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(1e6, 1e6, 1e6)
scene.add(point_light)

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

const provider = new Geo.BingMapsProvider()
const map_plane = new Geo.MapView(Geo.MapView.PLANAR, provider, 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(1e5, 1e5, 1e5),
    new THREE.MeshPhongMaterial(
        {transparent: true, opacity: 0.6, color: 0xff0000, depthWrite: true, depthTest: true}
    )
)
cube.position.set(0, 0, 1e5)
scene.add(cube)

const webgl_renderer = new THREE.WebGLRenderer({antialias: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()
    }
}

(source file)
geo-three_flicker_test.zip
npm install .
npm run start

(Screen recording preview)
https://user-images.githubusercontent.com/3971434/158149414-b5668b1a-52d4-4f9c-bc0e-2bd46e9892ca.mp4

(And the problem appears in my another project)
https://user-images.githubusercontent.com/3971434/158151236-6a686b49-12a0-461d-aa3c-b6972f2d6b4c.mp4
You can see the transparent point clouds (those colorful boxes in the air) are flickering in front of the map plane.
And the Truck model is fully opaque, so no flickering.

"dependencies": {
    "express": "^4.17.1",
    "geo-three": "^0.0.16",
    "three": "^0.138.0"
  }

Any idea about the solution?

Thanks for your effort!

Best,
Edward Chen

Hi @tentone,

I've encountered some problem which maybe related to the original issue. The problem is about when a transparent object is between the map plane 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. Here I've made an 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, 1e-1, 1e12)
camera.position.set(0, 0, 1e6)
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(1e6, 1e6, 1e6)
scene.add(point_light)

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

const provider = new Geo.BingMapsProvider()
const map_plane = new Geo.MapView(Geo.MapView.PLANAR, provider, 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(1e5, 1e5, 1e5),
    new THREE.MeshPhongMaterial(
        {transparent: true, opacity: 0.6, color: 0xff0000, depthWrite: true, depthTest: true}
    )
)
cube.position.set(0, 0, 1e5)
scene.add(cube)

const webgl_renderer = new THREE.WebGLRenderer({antialias: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()
    }
}
(source file) geo-three_flicker_test.zip npm install . npm run start

(Screen recording preview) https://user-images.githubusercontent.com/3971434/158149414-b5668b1a-52d4-4f9c-bc0e-2bd46e9892ca.mp4

(And the problem appears in my another project) https://user-images.githubusercontent.com/3971434/158151236-6a686b49-12a0-461d-aa3c-b6972f2d6b4c.mp4 You can see the transparent point clouds (those colorful boxes in the air) are flickering in front of the map plane. And the Truck model is fully opaque, so no flickering.
"dependencies": {
    "express": "^4.17.1",
    "geo-three": "^0.0.16",
    "three": "^0.138.0"
  }
Any idea about the solution?

Thanks for your effort!

Best, Edward Chen

did anyone ever find a solution for this?