How to show the Path layer on one side?

[moranno]

Hi, I combined Hollow Globe & Submarine Cables, but I just want to show the path layer on one(front) side? How can I do that?

The Polygons Layer covers(obscures) the path layer, which looks weird.

My code here: https://codepen.io/moranno/pen/YzQOzoa Thanks!

[vasturiano]

@moranno thanks for reaching out.

I don't think you can make the path lines visible only from one side, because lines don't have faces and that's what the ThreeJs side property refers to when set in the material.

As for the polygon layer obscuring the lines, perhaps that's related to how the polygonCapMaterial is setup, and there's a way to make the back side transparent.

[moranno]

@moranno thanks for reaching out.

I don't think you can make the path lines visible only from one side, because lines don't have faces and that's what the ThreeJs side property refers to when set in the material.

As for the polygon layer obscuring the lines, perhaps that's related to how the polygonCapMaterial is setup, and there's a way to make the back side transparent.

Thanks for the tip, any idea how to setup "polygonCapMaterial"? I already set .polygonSideColor(() => 'rgba(0,0,0,0)') transparent. And I found a strange phenomenon: if the path layer loaded BEFORE the polygons layer, the polygons layer would not cover the path layer. but which layer loaded first, seems random...

[moranno]

I'm now using Hexed Polygons Layer instead of Polygons Layer which the problem on longer exist... One more question: Can I set path layer color transparent? The color code is .pathColor(path => path.properties.color) How to write code to do that? Thanks!

[vasturiano]

Can I set path layer color transparent? The color code is .pathColor(path => path.properties.color)

You could use a transparentize function, f.e. from polished to transform the color and change its opacity, inside the pathColor method.

[moranno]

Can I set path layer color transparent? The color code is .pathColor(path => path.properties.color)

You could use a transparentize function, f.e. from polished to transform the color and change its opacity, inside the pathColor method.

Thanks.. but still have no idea how to write code, Could you give me more guidance?

More problem found:

I'm trying to use land-110m.json to replace ne_110m_admin_0_countries.geojson fetch('https://cdn.jsdelivr.net/npm/world-atlas/land-110m.json').then(res => res.json()).then(landTopo => { globe.hexPolygonsData(topojson.feature(landTopo, landTopo.objects.land).features)

But the result is incorrect:

Code here: https://codepen.io/moranno/pen/YzQOzoa

[vasturiano]

Thanks.. but still have no idea how to write code, Could you give me more guidance?

Something like

.pathColor(path => transparentize(0.25, path.properties.color))

I would recommend not using the land geojson, and prefer the country, or at the most continent level specification. The reason being that one of the polygon geometries in the land object is so large that it spans more than half of the globe. This confuses the hex algorithm because it doesn't know which part is the inside and which part is the outside of the polygon, leading into the "reverse filling" issue seen in your screenshot. This doesn't happen if all the polygons are keep at sizes less than half of the globe, like continents for instance.

[moranno]

Thanks.. but still have no idea how to write code, Could you give me more guidance?

Something like

.pathColor(path => transparentize(0.25, path.properties.color))

Thanks for the guidance! The code is here

<script src="https://cdn.jsdelivr.net/npm/polished@3.5.2/dist/polished.min.js"></script>
.pathColor(path => polished.transparentize(0.7, path.properties.color))