Stars missing in Atmosphere vanilla JS example

[xawill]

Hi,

First, thank you for this awesome library! I am using it with 3DTilesRenderer (vanilla JS; post-process lighting) and it works great.

I noticed however that the stars are missing and this is the same on your Atmosphere vanilla JS example. Is it linked to #28?

Am I missing something ? Because it looks like it works fine in r3f examples.

Thank you for the support. Cheers, Xavier

[shotamatsuda]

I occasionally receive requests for me to show the example codes in vanilla Three.js, but from a maintenance perspective, I don't want to have duplicated codes for demonstrating the same thing. As for the stars, it's just a Points object with SkyMaterial and SkyGeometry, and an example setup can be found in Stars.tsx. Please follow it if you want to implement it in vanilla Three.js.

[xawill]

Yes, I saw that and I totally understand code duplication concerns.

However, I don't think there are currently any working example of stars in native three.js. So let's consider this as a "feature" request. Maybe, if I can manage to make it work, I can submit a PR to extend an existing native three.js example with the stars.

Anyway, for now, I still have issues to make it work. I basically see no stars. The are adding to the scene, but playing with intensity, scaling, etc., I haven't managed to see the stars :) Here is what I currently have:

private async initStars(): Promise<void> {
		const starsLoader = new ArrayBufferLoader();
		const starsBufferData = await starsLoader.loadAsync(DEFAULT_STARS_DATA_URL);

		this.stars = new Points(
			new StarsGeometry(starsBufferData),
			new StarsMaterial({
				intensity: 5,
				background: false,
				depthTest: true,
				depthWrite: false,
			})
		);
		this.stars.scale.setScalar(WGS84_RADIUS * 2);
		this.stars.frustumCulled = false;
		this.stars.renderOrder = SKY_RENDER_ORDER + 1;

                // Following is what I already successfully use with the atmosphere.
		this.stars.material.ellipsoidMatrix.copy(this.earth.matrixWorld).setPosition(0, 0, 0);
		const inverseEllipsoidMatrix = REUSABLE_MATRIX4.copy(this.stars.material.ellipsoidMatrix).invert();
		this.stars.material.ellipsoidCenter
			.setFromMatrixPosition(this.earth.matrixWorld)
			.applyMatrix4(inverseEllipsoidMatrix);
		this.stars.material.needsUpdate = true;

		this.earth.add(this.stars);
		this.renderingNeedsUpdate = true;
	}

private render(): void {
		requestAnimationFrame((_timestamp: DOMHighResTimeStamp) => {
			this.render();
		});

		if (this.renderingNeedsUpdate) {
			this.renderingNeedsUpdate = false;

			this.controls.update();
			this.camera.updateMatrixWorld();

			getSunDirectionECEF(this.referenceDate, this.sunDirection);
			getMoonDirectionECEF(this.referenceDate, this.moonDirection);

			if (this.stars) {
				this.stars.material.sunDirection.copy(this.sunDirection);
				this.stars.setRotationFromMatrix(getECIToECEFRotationMatrix(this.referenceDate, REUSABLE_MATRIX4));
			}
			
                        this.renderer.render(this.scene, this.camera);
		}
	}

Do you see anything strange that would prevent the stars from properly rendering in three.js ? I think I properly ported the r3f example you directed me through, but maybe there are additional native three.js steps which were not directly obvious to me in the example.

Thank you for the help :)

Note that for testing purposes, I disabled the atmosphere on my example. I saw StarsMaterial uses a lot of common atmosphere properties. Is it possible to share them once I'll reintroduce the atmosphere in the rendering? Or will the StarsMaterial always have its own atmosphere properties?

[xawill]

Hi @shotamatsuda , I tried again multiple things and I've not been able to have both stars and atmosphere at the same time. As soon as AerialPerspectiveEffectOptions.sky=true, the stars completely disappear whatever I do and if it is set to false, the earth "shadow" on the stars sphere seems to be too big (see attached screen capture). Also, I never managed to have background=true to display any stars.

Again, thanks for the help if you can spot any issues.

If needed, see below how I setup atmosphere:

private async initAtmosphere(): Promise<void> {
		// Generate precomputed textures.
		const texturesGenerator = new PrecomputedTexturesGenerator(this.renderer);
		await texturesGenerator.update().catch(error => {
			console.error(error);
		});

		const atmosphereParameters = AtmosphereParameters.DEFAULT;
		atmosphereParameters.sunAngularRadius = 0.01;
		this.aerialPerspective = new AerialPerspectiveEffect(
			this.camera,
			{
				correctAltitude: true,
				correctGeometricError: true,
				albedoScale: 2 / Math.PI,
				transmittance: true,
				inscatter: true,
				sunLight: true,
				skyLight: true,
				sky: true, // When set to false, I can have stars partially working
				sun: true,
				moon: true,
				moonAngularRadius: 0.01,
				lunarRadianceScale: 10, // TODO: Possible to have the moon bring light to scene at night? See https://github.com/takram-design-engineering/three-geospatial/issues/80
			},
			atmosphereParameters
		);

		Object.assign(this.aerialPerspective, texturesGenerator.textures);

                // Render pass is already added to composer earlier
		const normalPass = new NormalPass(this.scene, this.camera);
		this.aerialPerspective.normalBuffer = normalPass.texture;
		this.composer.addPass(normalPass);
		this.composer.addPass(new EffectPass(this.camera, this.aerialPerspective));
		this.composer.addPass(new EffectPass(this.camera, new LensFlareEffect()));
		this.composer.addPass(new EffectPass(this.camera, new ToneMappingEffect({ mode: ToneMappingMode.AGX })));
		this.composer.addPass(new EffectPass(this.camera, new SMAAEffect()));
		this.composer.addPass(new EffectPass(this.camera, new DitheringEffect()));
	}

[shotamatsuda]

I saw StarsMaterial uses a lot of common atmosphere properties. Is it possible to share them once I'll reintroduce the atmosphere in the rendering? Or will the StarsMaterial always have its own atmosphere properties?

Yes StarsMaterial shares atmospheric properties, because the luminance coming from space is also affected by the transmittance and inscattering of the atmosphere (e.g. the color of stars at the horizon will be shifted toward red). With only the post-processing sky, these can be applied in the post-processing (so that the stars don't need to consider atmospheric properties), but to support the SkyMaterial (which is a quad geometry and allows transparent materials), StarsMaterial must have its own atmospheric scattering computation.

As soon as AerialPerspectiveEffectOptions.sky=true, the stars completely disappear

Currently, the stars have an issue with the post-processing sky (AerialPerspective with sky flag enabled).

if it is set to false, the earth "shadow" on the stars sphere seems to be too big (see attached screen capture). Also, I never managed to have background=true to display any stars.

The background property must be set to true to display the stars in the background, otherwise they are projected onto a unit sphere centered at the world origin.

I think I need to revisit the way to reliably display the stars in the background. It should have been possible to just center the origin of whatever spherical projection on the camera with depthWrite turned off, but it hasn't worked with postprocessing because it has its own depth and normal passes with an override material.

Could you give me some time, as my current focus is making this work with WebGPU and it will take a while.

[xawill]

Hi @shotamatsuda, now that webgpu port is released, any news on this? Thanks a lot :)

[shotamatsuda]

@xawill Thanks for reminding me! Just to confirm, are you still looking for a solution with WebGLRenderer?

[xawill]

Correct

[shotamatsuda]

Okay, I'll have a look at it. In WebGPU, I've switched to rendering stars in an intermediate buffer, which still has room for improvement. I think I have a better view of the issue now, though.

[shotamatsuda]

@xawill I think the issues have been fixed.

There were 2 issues. One was unreliable visibility when the sky is rendered in AerialPerspectiveEffect, as mentioned in #28. The other was inappropriate defaults for renderOrder, depthWrite and depthTest of the sky and stars, although it was not really the cause of the stars not being displayed.

Taking at a look at your code above (the first one), it lacks the assignment of the precomputed textures to StarsMaterial, so it would render black stars.

I've added stars in the vanilla story, so please refer to it for the necessary setup. Basically,

• Create a Points object with StarsGeometry and StarsMaterial. frustumCulled must be turned off.
• Assign the precomputed textures to the stars material.
• On each update, if the sun in your scene changes, update sunDirection of the stars material, and rotate the stars (the Points object) using the matrix given by getECIToECEFRotationMatrix.

You can try the latest main branch if you will. The vanilla story (rendering the sky using SkyMaterial) should work with the latest released version. If not, please add the following.

starsMaterial.depthWrite = true
starsMaterial.depthTest = true
skyMaterial.depthWrite = false
skyMaterial.depthTest = true