@onerjs/addons 8.37.6 → 8.37.8

package/atmosphere/atmosphere.js

@@ -17,7 +17,6 @@ import "./Shaders/compositeAerialPerspective.fragment.js";
 import "./Shaders/compositeSky.fragment.js";
 import "./Shaders/compositeGlobeAtmosphere.fragment.js";
 import "./Shaders/fullscreenTriangle.vertex.js";
-import "./Shaders/multiScattering.fragment.js";
 import "./Shaders/skyView.fragment.js";
 import "./Shaders/aerialPerspective.fragment.js";
 import "./Shaders/ShadersInclude/atmosphereFragmentDeclaration.js";
@@ -501,6 +500,7 @@ export class Atmosphere {
         this._isEnabled = true;
         this._aerialPerspectiveLutHasBeenRendered = false;
         this._hasRenderedMultiScatteringLut = false;
+        this._hasEverRenderedMultiScatteringLut = false;
         this._multiScatteringEffectWrapper = null;
         this._multiScatteringLutRenderTarget = null;
         this._aerialPerspectiveLutEffectWrapper = null;
@@ -513,6 +513,7 @@ export class Atmosphere {
         this._skyCompositorEffectWrapper = null;
         this._globeAtmosphereCompositorEffectWrapper = null;
         this._onBeforeCameraRenderObserver = null;
+        this._onBeforeRenderObserver = null;
         this._onBeforeDrawPhaseObserver = null;
         this._onAfterRenderingGroupObserver = null;
         /**
@@ -605,6 +606,17 @@ export class Atmosphere {
         this._minimumMultiScattering.x = minimumMultiScatteringColor.r * this._minimumMultiScatteringIntensity;
         this._minimumMultiScattering.y = minimumMultiScatteringColor.g * this._minimumMultiScatteringIntensity;
         this._minimumMultiScattering.z = minimumMultiScatteringColor.b * this._minimumMultiScatteringIntensity;
+        // Initialize light direction and color.
+        {
+            const light = lights[0];
+            this._directionToLight.copyFrom(light.direction).scaleInPlace(-1);
+            const lightColor = this._linearLightColor.copyFrom(light.diffuse);
+            if (!this._isLinearSpaceLight) {
+                lightColor.toLinearSpaceToRef(lightColor);
+            }
+            const intensity = light.intensity;
+            this._lightRadianceAtCamera.set(intensity * lightColor.r, intensity * lightColor.g, intensity * lightColor.b);
+        }
         this._effectRenderer = new EffectRenderer(engine, {
             // Full screen triangle.
             indices: [0, 2, 1],
@@ -613,7 +625,8 @@ export class Atmosphere {
         this._transmittanceLut = new TransmittanceLut(this);
         this._multiScatteringLutRenderTarget = CreateRenderTargetTexture("atmo-multiScattering", { width: 32, height: 32 }, scene);
         this._multiScatteringEffectWrapper = CreateMultiScatteringEffectWrapper(engine, this.uniformBuffer, this._groundAlbedo);
-        if (options?.isDiffuseSkyIrradianceLutEnabled ?? true) {
+        this._isDiffuseSkyIrradianceLutEnabled = options?.isDiffuseSkyIrradianceLutEnabled ?? true;
+        if (this._isDiffuseSkyIrradianceLutEnabled) {
             this._diffuseSkyIrradianceLut = new DiffuseSkyIrradianceLut(this);
         }
         if (this._isSkyViewLutEnabled) {
@@ -622,6 +635,10 @@ export class Atmosphere {
         if (this._isAerialPerspectiveLutEnabled) {
             this.aerialPerspectiveLutRenderTarget;
         }
+        // Render global LUTs once per frame (not per camera).
+        this._onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
+            this.renderGlobalLuts();
+        });
         // Before rendering, make sure the per-camera variables have been updated.
         this._onBeforeCameraRenderObserver = scene.onBeforeCameraRenderObservable.add((x) => {
             this._updatePerCameraVariables(x);
@@ -697,6 +714,8 @@ export class Atmosphere {
         this._onBeforeDrawPhaseObserver = null;
         this._onAfterRenderingGroupObserver?.remove();
         this._onAfterRenderingGroupObserver = null;
+        this._onBeforeRenderObserver?.remove();
+        this._onBeforeRenderObserver = null;
         this._globeAtmosphereCompositorEffectWrapper?.dispose();
         this._globeAtmosphereCompositorEffectWrapper = null;
         this._skyCompositorEffectWrapper?.dispose();
@@ -776,13 +795,16 @@ export class Atmosphere {
         if (!isEnabled) {
             return;
         }
+        const engine = this._engine;
+        const effectWrapper = (this._aerialPerspectiveCompositorEffectWrapper ?? (this._aerialPerspectiveCompositorEffectWrapper = CreateAerialPerspectiveCompositorEffectWrapper(engine, this.uniformBuffer, this._isAerialPerspectiveLutEnabled, this._isSkyViewLutEnabled, this._isLinearSpaceComposition, this._applyApproximateTransmittance, this._aerialPerspectiveIntensity, this._aerialPerspectiveRadianceBias)));
+        if (!this._isGlobalLutsReady) {
+            return;
+        }
         // Aerial perspective compositor only renders when inside the atmosphere.
         const isOutsideAtmosphere = this._cameraAtmosphereVariables.clampedCameraRadius > this._physicalProperties.atmosphereRadius;
         if (isOutsideAtmosphere) {
             return;
         }
-        const engine = this._engine;
-        const effectWrapper = (this._aerialPerspectiveCompositorEffectWrapper ?? (this._aerialPerspectiveCompositorEffectWrapper = CreateAerialPerspectiveCompositorEffectWrapper(engine, this.uniformBuffer, this._isAerialPerspectiveLutEnabled, this._isSkyViewLutEnabled, this._isLinearSpaceComposition, this._applyApproximateTransmittance, this._aerialPerspectiveIntensity, this._aerialPerspectiveRadianceBias)));
         const skyViewLut = this._isSkyViewLutEnabled ? this.skyViewLutRenderTarget : null;
         const multiScatteringLut = this._multiScatteringLutRenderTarget;
         const transmittanceLut = this._transmittanceLut.renderTarget;
@@ -827,6 +849,11 @@ export class Atmosphere {
         if (!isEnabled) {
             return;
         }
+        const engine = this._engine;
+        const effectWrapper = (this._skyCompositorEffectWrapper ?? (this._skyCompositorEffectWrapper = CreateSkyCompositorEffectWrapper(engine, this.uniformBuffer, this._isSkyViewLutEnabled, this._isLinearSpaceComposition, this._applyApproximateTransmittance)));
+        if (!this._isGlobalLutsReady) {
+            return;
+        }
         // The sky compositor only renders when inside the atmosphere.
         const isOutsideAtmosphere = this._cameraAtmosphereVariables.clampedCameraRadius > this._physicalProperties.atmosphereRadius;
         if (isOutsideAtmosphere) {
@@ -835,8 +862,6 @@ export class Atmosphere {
         if (this.depthTexture !== null && !this.depthTexture.isReady()) {
             return;
         }
-        const engine = this._engine;
-        const effectWrapper = (this._skyCompositorEffectWrapper ?? (this._skyCompositorEffectWrapper = CreateSkyCompositorEffectWrapper(engine, this.uniformBuffer, this._isSkyViewLutEnabled, this._isLinearSpaceComposition, this._applyApproximateTransmittance)));
         const skyViewLut = this._isSkyViewLutEnabled ? this.skyViewLutRenderTarget : null;
         const multiScatteringLut = this._multiScatteringLutRenderTarget;
         const transmittanceLut = this._transmittanceLut.renderTarget;
@@ -868,13 +893,16 @@ export class Atmosphere {
         if (!isEnabled) {
             return;
         }
+        const engine = this._engine;
+        const effectWrapper = (this._globeAtmosphereCompositorEffectWrapper ?? (this._globeAtmosphereCompositorEffectWrapper = CreateGlobeAtmosphereCompositorEffectWrapper(engine, this.uniformBuffer, this._isSkyViewLutEnabled, this._isLinearSpaceComposition, this._applyApproximateTransmittance, this._aerialPerspectiveIntensity, this._aerialPerspectiveRadianceBias, this.depthTexture !== null)));
+        if (!this._isGlobalLutsReady) {
+            return;
+        }
         // Globe atmosphere compositor only renders when outside the atmosphere.
         const isOutsideAtmosphere = this._cameraAtmosphereVariables.clampedCameraRadius > this._physicalProperties.atmosphereRadius;
         if (!isOutsideAtmosphere) {
             return;
         }
-        const engine = this._engine;
-        const effectWrapper = (this._globeAtmosphereCompositorEffectWrapper ?? (this._globeAtmosphereCompositorEffectWrapper = CreateGlobeAtmosphereCompositorEffectWrapper(engine, this.uniformBuffer, this._isSkyViewLutEnabled, this._isLinearSpaceComposition, this._applyApproximateTransmittance, this._aerialPerspectiveIntensity, this._aerialPerspectiveRadianceBias, this.depthTexture !== null)));
         const skyViewLut = this._isSkyViewLutEnabled ? this.skyViewLutRenderTarget : null;
         const multiScatteringLut = this._multiScatteringLutRenderTarget;
         const transmittanceLut = this._transmittanceLut.renderTarget;
@@ -916,20 +944,24 @@ export class Atmosphere {
         this._globeAtmosphereCompositorEffectWrapper?.dispose();
         this._globeAtmosphereCompositorEffectWrapper = null;
     }
+    get _isGlobalLutsReady() {
+        return (this._hasEverRenderedMultiScatteringLut &&
+            !!this._transmittanceLut?.hasLutData &&
+            (!this._isDiffuseSkyIrradianceLutEnabled || this._diffuseSkyIrradianceLut.hasLutData));
+    }
     /**
      * Updates the camera variables that are specific to the atmosphere.
      * @param camera - The camera to update the variables for.
      */
     _updatePerCameraVariables(camera) {
         const light = this._lights[0];
-        this._directionToLight.copyFrom(light.direction);
-        this._directionToLight.scaleInPlace(-1);
+        const directionToLight = this._directionToLight.copyFrom(light.direction).scaleInPlace(-1);
         const properties = this._physicalProperties;
         const cameraAtmosphereVariables = this._cameraAtmosphereVariables;
-        cameraAtmosphereVariables.update(camera, properties.planetRadius, properties.planetRadiusWithOffset, properties.atmosphereRadius, this._directionToLight, this.originHeight);
+        cameraAtmosphereVariables.update(camera, properties.planetRadius, properties.planetRadiusWithOffset, properties.atmosphereRadius, directionToLight, this.originHeight);
         this._transmittanceLut.updateLightParameters(light, cameraAtmosphereVariables.clampedCameraRadius, cameraAtmosphereVariables.cameraGeocentricNormal);
         this._linearLightColor.copyFrom(light.diffuse);
-        this.getDiffuseSkyIrradianceToRef(this._directionToLight, 0, cameraAtmosphereVariables.cameraGeocentricNormal, this.lights[0].intensity, this._tempSceneAmbient);
+        this.getDiffuseSkyIrradianceToRef(directionToLight, 0, cameraAtmosphereVariables.cameraGeocentricNormal, light.intensity, this._tempSceneAmbient);
         if (!this.isLinearSpaceLight) {
             this._tempSceneAmbient.toGammaSpaceToRef(this._tempSceneAmbient);
         }
@@ -959,9 +991,6 @@ export class Atmosphere {
         const isEnabled = this.isEnabled();
         {
             this.onBeforeRenderLutsForCameraObservable.notifyObservers(camera);
-            // After UBO update we can render the global LUTs which use some of these values on the GPU.
-            // TODO: Could break out update and UBOs to global vs. per-camera.
-            this.renderGlobalLuts();
             // If atmosphere is enabled, render the per-camera LUTs (sky view and aerial perspective).
             if (isEnabled && !this._transmittanceLut.isDirty && this._hasRenderedMultiScatteringLut) {
                 if (this._isSkyViewLutEnabled) {
@@ -988,6 +1017,9 @@ export class Atmosphere {
      * Renders the lookup tables that do not depend on a camera position.
      */
     renderGlobalLuts() {
+        if (this.uniformBuffer.useUbo) {
+            this.updateUniformBuffer();
+        }
         const hasNewTransmittanceLut = this._transmittanceLut.render();
         if (hasNewTransmittanceLut) {
             this._hasRenderedMultiScatteringLut = false;
@@ -998,6 +1030,7 @@ export class Atmosphere {
             if (this._multiScatteringEffectWrapper?.isReady() && this._multiScatteringLutRenderTarget?.isReady()) {
                 this._drawMultiScatteringLut();
                 this._hasRenderedMultiScatteringLut = true;
+                this._hasEverRenderedMultiScatteringLut = true;
             }
         }
         if (!this._transmittanceLut.isDirty && this._hasRenderedMultiScatteringLut) {
@@ -1013,12 +1046,7 @@ export class Atmosphere {
         const isWGSL = effect.shaderLanguage === 1 /* ShaderLanguage.WGSL */;
         const blockName = isWGSL ? "atmosphere" : uniformBuffer.name;
         uniformBuffer.bindToEffect(effect, blockName);
-        if (uniformBuffer.useUbo) {
-            uniformBuffer.update();
-        }
-        else {
-            this.updateUniformBuffer();
-        }
+        uniformBuffer.useUbo ? uniformBuffer.update() : this.updateUniformBuffer();
     }
     /**
      * Updates the values in the atmosphere's uniform buffer.
@@ -1147,6 +1175,8 @@ const CreateEffectWrapper = (engine, name, fragmentShader, uniformNames, sampler
 const CreateMultiScatteringEffectWrapper = (engine, uniformBuffer, groundAlbedo) => {
     const name = "atmo-multiScattering";
     const useUbo = uniformBuffer.useUbo;
+    const useWebGPU = engine.isWebGPU && !EffectWrapper.ForceGLSL;
+    const uboName = useWebGPU ? "atmosphere" : uniformBuffer.name;
     const defines = ["#define POSITION_VEC2"];
     if (!groundAlbedo.equals(Color3.BlackReadOnly)) {
         defines.push("#define USE_GROUND_ALBEDO");
@@ -1158,10 +1188,16 @@ const CreateMultiScatteringEffectWrapper = (engine, uniformBuffer, groundAlbedo)
         fragmentShader: "multiScattering",
         attributeNames: ["position"],
         uniformNames: ["depth", ...(useUbo ? [] : uniformBuffer.getUniformNames())],
-        uniformBuffers: useUbo ? [uniformBuffer.name] : [],
+        uniformBuffers: useUbo ? [uboName] : [],
         samplerNames: ["transmittanceLut"],
         defines,
         useShaderStore: true,
+        shaderLanguage: useWebGPU ? 1 /* ShaderLanguage.WGSL */ : 0 /* ShaderLanguage.GLSL */,
+        extraInitializations: (_, list) => {
+            list.push(Promise.all(useWebGPU
+                ? [import("./ShadersWGSL/fullscreenTriangle.vertex.js"), import("./ShadersWGSL/multiScattering.fragment.js")]
+                : [import("./Shaders/fullscreenTriangle.vertex.js"), import("./Shaders/multiScattering.fragment.js")]));
+        },
     });
 };
 const CreateRenderTargetTexture = (name, size, scene, options) => {
@@ -1206,6 +1242,7 @@ const DrawEffect = (engine, effectRenderer, effectWrapper, renderTarget, drawCal
     if ((renderTarget !== null && !renderTarget.isReady()) || !effectWrapper?.isReady()) {
         return;
     }
+    effectRenderer.saveStates();
     // Set additional depth/stencil states before calling applyEffectWrapper.
     const currentDepthWrite = engine.getDepthWrite();
     if (depthWrite !== undefined) {
@@ -1218,10 +1255,9 @@ const DrawEffect = (engine, effectRenderer, effectWrapper, renderTarget, drawCal
     if (alphaMode !== Constants.ALPHA_DISABLE) {
         engine.setAlphaMode(alphaMode);
     }
-    effectRenderer.saveStates();
+    const currentCull = engine.depthCullingState.cull;
     effectRenderer.setViewport();
     effectRenderer.applyEffectWrapper(effectWrapper, depthTest); // Note, stencil is false by default.
-    const currentCull = engine.depthCullingState.cull;
     engine.depthCullingState.cull = false;
     const effect = effectWrapper.effect;
     effect.setFloat("depth", depth);