strange earth in webgl 2.0

[blitheli]

when I use Webgpu Atmosphere(Demo: Space), the earth night color is very strange(forceWebgl =true), like this

[shotamatsuda]

Thanks for the report. I checked the story with the "force webgl" switch enabled, but I don't see the issue on the latest Safari / Chrome on macOS, Chrome on Windows, and Mobile Safari on iPadOS. Could you provide more details about your environment?

[blitheli]

Yes, I did not use Storybook. Below is the complete code.

import { useMemo, useEffect, useLayoutEffect } from "react";

import { extend, useThree, type ThreeElement } from "@react-three/fiber";
import { OrbitControls, } from "@react-three/drei";
import { AgXToneMapping, TextureLoader } from "three";
import {
  context,
  mix,
  mul,
  texture,
  vec3,
  pass,
  mrt,
  output,
  uniform,
  toneMapping,
} from "three/tsl";
import {
  MeshPhysicalNodeMaterial,
  RenderPipeline,
  type MeshPhysicalNodeMaterialParameters,
  type Renderer
} from 'three/webgpu'
import {
  lensFlare,
  temporalAntialias,
  dithering,
  highpVelocity,
} from "@takram/three-geospatial/webgpu";
import {
  getECIToECEFRotationMatrix,
  getMoonDirectionECI,
  getSunDirectionECI,
  getSunDirectionECEF,
  getMoonDirectionECEF,
} from "@takram/three-atmosphere";
import {
  aerialPerspective,
  AtmosphereContextNode,
  AtmosphereLight,
  AtmosphereLightNode,
} from "@takram/three-atmosphere/webgpu";
import { Ellipsoid } from "@takram/three-geospatial";
import { EllipsoidMesh } from "@takram/three-geospatial/r3f";
import { WebGPUCanvas } from "../components/WebGPUCanvas";
import { useResource } from "../hooks/useResource";
import { useGuardedFrame } from "../hooks/useGuardedFrame";

extend({ MeshPhysicalNodeMaterial });
extend({ AtmosphereLight });

declare module '@react-three/fiber' {
  interface ThreeElements {
    atmosphereLight: ThreeElement<typeof AtmosphereLight>
  }
}

const blueMarble = ({
  cloudAlbedo = 0.95,
  oceanRoughness = 0.4, 
  emissiveColor = vec3(1, 0.6, 0.5).mul(0.15), 
  oceanIOR = 1.33, 
} = {}) => {
  const color = new TextureLoader().load("/blue_marble/color.webp");
  const ocean = new TextureLoader().load("/blue_marble/ocean.webp");
  const clouds = new TextureLoader().load("/blue_marble/clouds.webp");
  const emissive = new TextureLoader().load("/blue_marble/emissive.webp");
  color.anisotropy = 16;
  ocean.anisotropy = 16;
  clouds.anisotropy = 16;
  emissive.anisotropy = 16;

  const oceanSubClouds = mul(texture(ocean).r, texture(clouds).r.oneMinus());
  return {    
    colorNode: mix(texture(color).rgb, vec3(cloudAlbedo), texture(clouds).r),
    emissiveNode: texture(emissive).r.mul(emissiveColor),
    roughnessNode: oceanSubClouds.remap(1, 0, oceanRoughness, 1),
    ior: oceanIOR,
  };
};


function Content() { 
  const renderer = useThree<Renderer>(({ gl }) => gl as any)
  const scene = useThree(({ scene }) => scene)
  const camera = useThree(({ camera }) => camera)
 
  const atmosphereContext = useResource(() => new AtmosphereContextNode(), [])
  atmosphereContext.camera = camera;

  useLayoutEffect(() => {
    renderer.contextNode = context({
      ...renderer.contextNode.value,
      getAtmosphere: () => atmosphereContext
    })
  }, [renderer, atmosphereContext])
  
  useEffect(() => {
    const date = new Date();
    const { matrixECIToECEF, sunDirectionECEF, moonDirectionECEF } = atmosphereContext;

    getSunDirectionECEF(date, sunDirectionECEF.value);
    getMoonDirectionECEF(date, moonDirectionECEF.value);

  }, []);
 
  const passNode = useResource(
    () =>
      pass(scene, camera, { samples: 0 }).setMRT(
        mrt({ output, velocity: highpVelocity }),
      ),
    [scene, camera],
  );

  const colorNode = passNode.getTextureNode("output");
  const depthNode = passNode.getTextureNode("depth");
  const velocityNode = passNode.getTextureNode("velocity");

  const aerialNode = useResource(
    () => aerialPerspective(atmosphereContext, colorNode, depthNode),
    [atmosphereContext, colorNode, depthNode],
  );

   const lensFlareNode = useMemo(() => lensFlare(aerialNode), [aerialNode]);

  const toneMappingNode = useMemo(
    () => toneMapping(AgXToneMapping, uniform(2), lensFlareNode),
    [lensFlareNode],
  );

  const taaNode = useResource(
    () =>
      temporalAntialias(highpVelocity)(
        toneMappingNode,
        depthNode,
        velocityNode,
        camera,
      ),
    [camera, depthNode, velocityNode, toneMappingNode],
  );

  const renderPipeline = useResource(
    () => new RenderPipeline(renderer, taaNode.add(dithering)),
    [renderer, taaNode],
  );

  useGuardedFrame(() => {
    renderPipeline.render();
  }, 1);

  const earthMaterial = useResource(
    () => new MeshPhysicalNodeMaterial(blueMarble()),
    [],
  );

  return (
    <>
      <atmosphereLight args={[atmosphereContext]} />
      <EllipsoidMesh
        args={[Ellipsoid.WGS84.radii, 360, 180]}
        material={earthMaterial}
      />
      <OrbitControls minDistance={1.2e6} enablePan={false} />
    </>
  );
}

export default function Atmosphere() {
  return (
    <WebGPUCanvas
      forceWebGL={true}
      shadows
      renderer={{
        logarithmicDepthBuffer: true,
        onInit: (renderer) => {
          renderer.library.addLight(AtmosphereLightNode, AtmosphereLight);
        },
      }}
      camera={{
        fov: 60,
        position: [-2e7, 0, 0],
        up: [0, 0, 1],
        near: 1e4,
        far: 1e9,
      }}
    >
      <Content />
    </WebGPUCanvas>
  );
}

[shotamatsuda]

You appear to be using Three.js r183, which I have not tested with. Does the issue reproduce with r182?

[shotamatsuda]

You also appear to be mixing in an unreleased version of our code. AtmosphereContextNode is not supposed to be used in the renderer's global context, as noted in CHANGELOG.md.

Code compatible with the latest stable version can be found here. Please refer to it and update your code accordingly.

This makes me think we should have separate main and dev branches.

[blitheli]

Thank you. I developed my project using the npm package. However, I am using Three.js version 183, which may be the cause of this issue.

I would like to offer a suggestion, taking the AtmosphereLight component as an example.
From a user's perspective, the only examples and code available for reference are those displayed in your Storybook. However, certain post-processing functions are not provided alongside them. If a user attempts to extract the code directly from the Storybook examples, they will find that it contains dependencies on internal Storybook components and functions, making it impossible to use directly in a standalone project. Would you consider integrating these post-processing functions directly into the AtmosphereLight component itself? Alternatively, could you provide examples that are decoupled from the Storybook environment, allowing users to utilize them immediately without modification?

Additionally, while users typically develop using the npm package, the version of the code within the package sometimes differs from the example code hosted on your GitHub repository; this discrepancy can occasionally lead to confusion.

[shotamatsuda]

Thank you. I developed my project using the npm package. However, I am using Three.js version 183, which may be the cause of this issue.

Yes, our code had issues with r183. This was fixed in #104, and I just released a patch version.
There was another reason your code didn't work, which was an unreleased breaking change (I'm still wondering if this could be deprecated instead) that changed the atmosphere context to utilize the renderer's global context (the renderer.contextNode part) that has been added in r182.

I would like to offer a suggestion, taking the AtmosphereLight component as an example.
From a user's perspective, the only examples and code available for reference are those displayed in your Storybook.

I understand your point, and I'm still figuring out what is the best way for this while allowing the use of React and avoiding duplication across examples (stories).

Previously, I used Leva for controls, which you can still see in our WebGL implementations. However, it had a couple of issues that were difficult to address. Storybook's controls don't perfectly meet my need either, but they work better overall. I'm also considering adding custom UI layers for the examples, though that would increase the amount of code that doesn't come with the library.

However, certain post-processing functions are not provided alongside them. If a user attempts to extract the code directly from the Storybook examples, they will find that it contains dependencies on internal Storybook components and functions, making it impossible to use directly in a standalone project. Would you consider integrating these post-processing functions directly into the AtmosphereLight component itself? Alternatively, could you provide examples that are decoupled from the Storybook environment, allowing users to utilize them immediately without modification?

That's true, they cannot be copy-pasted into standalone projects. The purpose of examples is to demonstrate the concept and capabilities of the libraries. Of course, it would be ideal if they could be used directly anywhere, but I'm not sure how to achieve that while affording the level of interactivity the current examples provide.

Hopefully, R3F v10 will allow the use of Three.js's "Inspector" in React, which could replace our Storybook controls and be somewhat directly used as standalone.

Additionally, while users typically develop using the npm package, the version of the code within the package sometimes differs from the example code hosted on your GitHub repository; this discrepancy can occasionally lead to confusion.

Yes, that made me think we should have separate main and dev branches, or stable branch along with main. There's still a lot of rooms for improvement in terms of repository management.

[blitheli]

Thank you. So far, in Three.js projects, I have never seen such realistic atmospheric and cloud effects. Excellent work.！

[shotamatsuda]

Now that the separate stable branch is in place, it will hopefully make it clearer that it is the latest released version.

[shotamatsuda]

Made a separate issue on the Inspector and easier standalone use. #109