Black globe and sky during rendering

CesiumJS
1

Hi all,

I am trying to use the CesiumWidget with a custom render loop.

   renderLoop() {
        this.clock.tick();
        this.dataSourceDisplay.update(this.clock.currentTime);
        this.resize();
        //@ts-ignore
        this.scene.initializeFrame();
        this.scene.render(this.clock.currentTime);
        requestAnimationFrame(() => {
            this.renderLoop();
        });
    }

Curiously, I get a black globe and sky in some frames during rendering.

image
image1848×360 65.6 KB

image
image1760×327 69.4 KB

When I set

useDefaultRenderLoop: true

the problem does occur less often but still remains.

The clock object is configured like this

 clock: {
        currentTime: JulianDate.fromDate(new Date(Date.now())),
        multiplier: 1.0,
        clockStep: ClockStep.SYSTEM_CLOCK_MULTIPLIER,
        clockRange: ClockRange.UNBOUNDED,
        canAnimate: true,
        shouldAnimate: true,
    },```

Does anyone have an idea where this could be coming from?

Thanks in advance!
2

Hi @Hannes_N, I’m not an expert on this, but it sounds like a double-buffer issue. The scene is being rendered but the widget isn’t, maybe?

I think the problem is that, rather than calling this.scene.initializeFrame() and this.scene.render(...), which are private internal methods that you don’t want to mess with, you should be calling myWidget.render() with useDefaultRenderLoop set to false. Example sandcastle.

The above seems to work for me, but you may want / need to also experiment with explicit scene rendereing.

Hope that helps!