Globe sometimes has glow enabled despite me disabling it

[haveamission]

I've got this option set:

enableGlobeGlow: false,

However occasionally the glow will pop up - especially when it takes a second or two for the globe to populate.

I don't want the glow, so this is a little frustrating. There seems to be no way to totally disable it.

[chrisrzhou]

Hi @haveamission, are you using v5.0.2? I believe prior v5* versions have this bug and v5.0.2 fixed it. Let me know if that's the case for you. I was able to test/confirm in the Playground editor here: https://react-globe.netlify.app/usage/globe#glow

If there is still a bug, can you spin up a Codesandbox instance and pass that to me?

Lastly, let me know if there are any other pains/confusion with the package so I can make improvements in the future. The goal is to try to allow building globe visualizations with simple configurations, so if it's not doing that the project isn't very meaningful!

[chrisrzhou]

If you are using v5.0.2 and there is a light halo before the globe loads, this is more related to this bug that I plan to address soon: #37

The issue is the whole viz should render after all assets are loaded, or it should at least load the globe before the background, so it doesn't appear to have an empty globe against a specified background. While technically you can control this in your app through the onGlobe*TextureLoaded callbacks (throw up a controlled loading screen), I think the library can do this slightly better internally.

Let me know if this is the issue you're facing so I can better address any other bugs that I'm not aware of.

[haveamission]

The bug is intermittent - I cannot replicate it in each and every occasion. I am using v5.0.2. It seems the light halo sticks around after the loading process. Let's maybe see if your bug fix fixes the issue first.

[haveamission]

I have confirmed I am using v5.0.2. The glow still happens intermittently. Usually when the globe takes a longer time to load

[haveamission]

For example here's my code:

                           <ReactGlobe
                                markers={markers}
                                globeBackgroundTexture={null}
                                height="70vh"
                                options={{
                                    cameraAutoRotateSpeed: 0,
                                    enableGlobeGlow: false,
                                    pointLightColor: 'white',
                                    pointLightIntensity: 1,
                                    pointLightPositionRadiusScales: [2, 0, -1],
                                    enableMarkerTooltip: true,
                                    markerEnterAnimationDuration: 3000,
                                    markerEnterEasingFunction: ['Bounce', 'InOut'],
                                    markerExitAnimationDuration: 3000,
                                    markerExitEasingFunction: ['Cubic', 'Out'],
                                    markerTooltipRenderer: marker =>
                                        `${marker.city} ${calculatePop(marker.value)}`,
                                    markerType: 'bar',
                                    markerRadiusScaleRange: [0.03, 1],
                                }}
                            />

And the output:

[chrisrzhou]

Sorry for the late reply! I'll take a look this weekend, and try to make improvements to loading texture assets.

[tdrdimov]

Please share if anything comes up as a fix for this bug, I'm also experiencing it in the exact same way.

[chrisrzhou]

Has it really been two weeks since I last checked back? :O Time flies. I'll get to it this weekend as things have finally settled down a bit at work.

[mattography]

Hi @chrisrzhou - any update on a fix for the inconsistent glow? Thanks!

[PeterMain]

Any updates on this? Getting temperamental glow on safari.

I was thinking I could clip the circle with the parent div border radius, but the glow is built into the 'width' of the globe.

[mattography]

Any updates on this? Getting temperamental glow on safari.

I was thinking I could clip the circle with the parent div border radius, but the glow is built into the 'width' of the globe.

@PeterMain - I discovered moving the options object to the <ReactGlobe/> component fixed the issue. Also using React v17.0.2 seemed to help.

<ReactGlobe
          height="100vh"
          globeBackgroundTexture={null}
          pointLightPositionRadiusScales={10}
          initialCameraDistanceRadiusScale={4}
          initialCoordinates={initialCoordinates}
          globeTexture={globeImage}
          markers={markers}
          options={{
            markerTooltipRenderer,
            pointLightPositionRadiusScales:[-110, 70, -5],
            pointLightIntensity:"2",
            pointLightColor: "grey",
            cameraAutoRotateSpeed: 0.1,
            enableCameraAutoRotate: true,
            enableCameraRotate: true,
            enableCameraZoom: false,
            enableMarkerTooltip: true,
            enableMarkerGlow: false,
            cameraDistanceRadiusScale: 3,
            focusDistanceRadiusScale: 2.8,
            enableGlobeGlow: false
          }}
          width="1000px"
          onClickMarker={onClickMarker}
          onDefocus={onDefocus}
          onGlobeTextureLoaded={() => setGlobeLoaded(true)}
          onGlobeCloudsTextureLoaded={() => setCloudsLoaded(true)}
        />