Initial commit

samples/material/Sample_ClearCoat.ts

@@ -34,15 +34,19 @@ class Sample_ClearCoat {
     }
 
     async initScene() {
+        {
+            let atmosphericSky = this.scene.addComponent(AtmosphericComponent);
+            GUIUtil.renderAtmosphericSky(atmosphericSky);
+        }
         /******** sky *******/
         {
             // let tex = await Engine3D.res.loadHDRTextureCube("hdri/T_Panorama05_HDRI.HDR");
             // let sky = this.scene.addComponent(SkyRenderer);
             // sky.map = tex;
             // sky.enable = true;
-            let sky = this.scene.getOrAddComponent(SkyRenderer);
-            sky.map = await Engine3D.res.loadHDRTextureCube('/hdri/sunset.hdr');
-            this.scene.envMap = sky.map;
+            // let sky = this.scene.getOrAddComponent(SkyRenderer);
+            // sky.map = await Engine3D.res.loadHDRTextureCube('/hdri/sunset.hdr');
+            // this.scene.envMap = sky.map;
         }
         /******** light *******/
         {

samples/post/Sample_SSR.ts

@@ -1,9 +1,12 @@
 import { DirectLight, Engine3D, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, SSRPost, Time, CameraUtil, webGPUContext, PostProcessingComponent, BloomPost, AtmosphericComponent } from '@orillusion/core'
+import { GUIHelp } from '@orillusion/debug/GUIHelp'
 import * as dat from '@orillusion/debug/dat.gui.module'
+import { GUIUtil } from '@samples/utils/GUIUtil'
 
 class Sample_SSR {
     lightObj: Object3D
     scene: Scene3D
+    sky: AtmosphericComponent
     mats: any[]
 
     constructor() { }
@@ -18,7 +21,8 @@ class Sample_SSR {
         })
 
         this.scene = new Scene3D()
-        this.scene.addComponent(AtmosphericComponent).sunY = 0.6
+        this.sky = this.scene.addComponent(AtmosphericComponent)
+        this.sky.sunY = 0.6
 
         let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera')
         mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0)
@@ -78,9 +82,10 @@ class Sample_SSR {
             mr.geometry = planeGeometry
             scene.addChild(floor)
 
-            const GUIHelp = new dat.GUI()
-            GUIHelp.add(floorMaterial, 'roughness', 0, 1, 0.01)
-            GUIHelp.add(floorMaterial, 'metallic', 0, 1, 0.01)
+            GUIHelp.init()
+            GUIHelp.gui.add(floorMaterial, 'roughness', 0, 1, 0.01)
+            GUIHelp.gui.add(floorMaterial, 'metallic', 0, 1, 0.01)
+            GUIUtil.renderAtmosphericSky(this.sky)
         }
 
         {

samples/sky/Sample_AtmosphericSky.ts

@@ -9,26 +9,68 @@ class Sample_AtmosphericSky {
         // init engine
         await Engine3D.init({});
         // init scene
-        let scene: Scene3D = createExampleScene().scene;
+        let example = createExampleScene();
+        let scene: Scene3D = example.scene;
         // start renderer
         Engine3D.startRenderView(scene.view);
         // add atmospheric sky
         let sky = scene.getComponent(AtmosphericComponent);
 
-        let texture = sky['_atmosphericScatteringSky'];
-        let ulitMaterial = new UnLitMaterial();
-        ulitMaterial.baseMap = texture.texture2D;
-        ulitMaterial.cullMode = GPUCullMode.none;
-        let obj = new Object3D();
-        scene.addChild(obj);
-        let r = obj.addComponent(MeshRenderer);
-        r.material = ulitMaterial;
-        r.geometry = new PlaneGeometry(100, 50, 1, 1, Vector3.Z_AXIS);
-        scene.addChild(obj);
+        {
+            let texture = sky['_atmosphericScatteringSky']['_transmittanceLut'];
+            let ulitMaterial = new UnLitMaterial();
+            ulitMaterial.baseMap = texture;
+            ulitMaterial.cullMode = GPUCullMode.none;
+            let obj = new Object3D();
+            let r = obj.addComponent(MeshRenderer);
+            r.material = ulitMaterial;
+            r.geometry = new PlaneGeometry(50, 25, 1, 1, Vector3.Z_AXIS);
+            obj.y = 50;
+            scene.addChild(obj);
+        }
+        {
+            let texture = sky['_atmosphericScatteringSky']['_multipleScatteringLut'];
+            let ulitMaterial = new UnLitMaterial();
+            ulitMaterial.baseMap = texture;
+            ulitMaterial.cullMode = GPUCullMode.none;
+            let obj = new Object3D();
+            let r = obj.addComponent(MeshRenderer);
+            r.material = ulitMaterial;
+            r.geometry = new PlaneGeometry(25, 25, 1, 1, Vector3.Z_AXIS);
+            obj.y = 25;
+            scene.addChild(obj);
+        }
+        {
+            let texture = sky['_atmosphericScatteringSky']['_skyViewLut'];
+            let ulitMaterial = new UnLitMaterial();
+            ulitMaterial.baseMap = texture;
+            ulitMaterial.cullMode = GPUCullMode.none;
+            let obj = new Object3D();
+            let r = obj.addComponent(MeshRenderer);
+            r.material = ulitMaterial;
+            r.geometry = new PlaneGeometry(50, 25, 1, 1, Vector3.Z_AXIS);
+            scene.addChild(obj);
+        }
+
+        // {
+        //     let texture = sky['_atmosphericScatteringSky']['_skyTexture'];
+        //     let ulitMaterial = new UnLitMaterial();
+        //     ulitMaterial.baseMap = texture;
+        //     ulitMaterial.cullMode = GPUCullMode.none;
+        //     let obj = new Object3D();
+        //     let r = obj.addComponent(MeshRenderer);
+        //     r.material = ulitMaterial;
+        //     r.geometry = new PlaneGeometry(50, 25, 1, 1, Vector3.Z_AXIS);
+        //     scene.addChild(obj);
+        // }
+
+
 
         // gui
         GUIHelp.init();
         GUIUtil.renderAtmosphericSky(sky);
+        GUIUtil.renderSceneSetting(scene);
+        GUIUtil.renderCameraSetting(example.camera);
     }
 }
 

samples/sky/Sample_HDRSky.ts

@@ -1,5 +1,7 @@
 import { createExampleScene } from "@samples/utils/ExampleScene";
 import { Engine3D, Scene3D, SkyRenderer, Object3DUtil } from "@orillusion/core";
+import { GUIUtil } from "@samples/utils/GUIUtil";
+import { GUIHelp } from "@orillusion/debug/GUIHelp";
 
 // sample to replace hdr sky map
 class Sample_HDRSky {
@@ -16,6 +18,9 @@ class Sample_HDRSky {
 
         // start renderer
         Engine3D.startRenderView(scene.view);
+
+        GUIHelp.init();
+        GUIUtil.renderSceneSetting(scene);
     }
 
 }

samples/utils/GUIUtil.ts

@@ -1,10 +1,28 @@
 import { GUIHelp } from "@orillusion/debug/GUIHelp";
-import { AnimatorComponent, AtmosphericComponent, BillboardType, BlendMode, BloomPost, Color, DepthOfFieldPost, DirectLight, Engine3D, GPUCullMode, GTAOPost, GlobalFog, GlobalIlluminationComponent, GodRayPost, LitMaterial, Material, MorphTargetBlender, Object3D, PointLight, SkinnedMeshRenderer2, SpotLight, Transform, UIImage, UIPanel, UIShadow, Vector2, Vector4, View3D } from "@orillusion/core";
+import { AnimatorComponent, AtmosphericComponent, BillboardType, BlendMode, BloomPost, Camera3D, Color, DepthOfFieldPost, DirectLight, Engine3D, GPUCullMode, GTAOPost, GlobalFog, GlobalIlluminationComponent, GodRayPost, LitMaterial, Material, MorphTargetBlender, Object3D, PointLight, Scene3D, SkinnedMeshRenderer2, SpotLight, Transform, UIImage, UIPanel, UIShadow, Vector2, Vector4, View3D } from "@orillusion/core";
 import { UVMoveComponent } from "@samples/material/script/UVMoveComponent";
 
 export class GUIUtil {
 
+    public static renderSceneSetting(scene: Scene3D, open: boolean = true, name?: string) {
+        name ||= 'SceneSetting';
+        GUIHelp.addFolder(name);
+        GUIHelp.add(scene, 'exposure', 0.1, 10, 0.01);
+        GUIHelp.add(Engine3D.setting.render, 'hdrExposure', 0.1, 10, 0.01);
+
+        open && GUIHelp.open();
+        GUIHelp.endFolder();
+    }
 
+    public static renderCameraSetting(camera: Camera3D, open: boolean = true, name?: string) {
+        name ||= 'CameraSetting';
+        GUIHelp.addFolder(name);
+        GUIHelp.add(camera, 'fov', 0.1, 180, 0.01);
+        GUIHelp.add(camera, 'near', 0.1, 1000, 0.01);
+        GUIHelp.add(camera, 'far', 0.1, 1000, 0.01);
+        open && GUIHelp.open();
+        GUIHelp.endFolder();
+    }
 
 
     public static renderShadowSetting(open: boolean = true) {
@@ -22,14 +40,15 @@ export class GUIUtil {
         name ||= 'AtmosphericSky';
         GUIHelp.addFolder(name);
         GUIHelp.add(component, 'sunX', 0, 1, 0.01);
-        GUIHelp.add(component, 'sunY', 0.4, 1.6, 0.01);
+        GUIHelp.add(component, 'sunY', 0.45, 0.55, 0.001);
         GUIHelp.add(component, 'eyePos', 0, 5000, 1);
         GUIHelp.add(component, 'sunRadius', 0, 1000, 0.01);
         GUIHelp.add(component, 'sunRadiance', 0, 100, 0.01);
         GUIHelp.add(component, 'sunBrightness', 0, 10, 0.01);
         GUIHelp.add(component, 'exposure', 0, 2, 0.01);
         GUIHelp.add(component, 'displaySun', 0, 1, 0.01);
         GUIHelp.add(component, 'enable');
+        GUIHelp.add(component, 'hdrExposure', 0, 20, 0.001);
 
         open && GUIHelp.open();
         GUIHelp.endFolder();

src/assets/shader/ShaderLib.ts

@@ -45,6 +45,7 @@ import { GBuffer_pass } from './core/pass/GBuffer_pass';
 import { castPointShadowMap_vert, directionShadowCastMap_frag, shadowCastMap_frag, shadowCastMap_vert } from './core/pass/CastShadow_pass';
 import { ZPassShader_vs } from './core/pass/ZPassShader_vs';
 import { ZPassShader_fs } from './core/pass/ZPassShader_fs';
+import { AtmosphericScatteringSky_shader } from '../..';
 
 /**
  * @internal
@@ -107,6 +108,8 @@ export class ShaderLib {
         ShaderLib.register('Quad_depthCube_frag_wgsl', Quad_depthCube_frag_wgsl);
         ShaderLib.register('sky_vs_frag_wgsl', CubeSky_Shader.sky_vs_frag_wgsl);
         ShaderLib.register('sky_fs_frag_wgsl', CubeSky_Shader.sky_fs_frag_wgsl);
+        ShaderLib.register('AtmosphericScatteringIntegration', AtmosphericScatteringSky_shader.integration);
+        ShaderLib.register('AtmosphereEarth', AtmosphericScatteringSky_shader.earth);
 
         ShaderLib.register("LambertShader", Lambert_shader);
 

src/assets/shader/sky/AtmosphereEarth.wgsl

@@ -0,0 +1,72 @@
+fn GetAtmosphereParameters() -> AtmosphereParameters {
+  var info: AtmosphereParameters;
+
+  let EarthBottomRadius: f32 = 6360.0;
+  var scalar: f32 = 1.0; // TODO: control with uniform
+  var EarthTopRadius: f32 = EarthBottomRadius + 100.0 * scalar;
+  var EarthRayleighScaleHeight: f32 = 8.0 * scalar;
+  var EarthMieScaleHeight: f32 = 1.2 * scalar;
+
+  info.BottomRadius = EarthBottomRadius;
+  info.TopRadius = EarthTopRadius;
+  info.GroundAlbedo = vec3<f32>(1.0, 1.0, 1.0);
+
+  info.RayleighDensityExpScale = -1.0 / EarthRayleighScaleHeight;
+  info.RayleighScattering = vec3<f32>(0.005802, 0.013558, 0.033100);
+
+  info.MieDensityExpScale = -1.0 / EarthMieScaleHeight;
+  info.MieScattering = vec3<f32>(0.003996, 0.003996, 0.003996);
+  info.MieExtinction = vec3<f32>(0.004440, 0.004440, 0.004440);
+  info.MieAbsorption = info.MieExtinction - info.MieScattering;
+  info.MiePhaseG = 0.8;
+
+  info.AbsorptionDensity0LayerWidth = 25.0 * scalar;
+  info.AbsorptionDensity0ConstantTerm = -2.0 / 3.0;
+  info.AbsorptionDensity0LinearTerm = 1.0 / (15.0 * scalar);
+  info.AbsorptionDensity1ConstantTerm = 8.0 / 3.0;
+  info.AbsorptionDensity1LinearTerm = -1.0 / (15.0 * scalar);
+  info.AbsorptionExtinction = vec3<f32>(0.000650, 0.001881, 0.000085);
+
+  return info;
+}
+
+fn getAlbedo(scattering: vec3<f32>, extinction: vec3<f32>) -> vec3<f32> {
+  return vec3<f32>(
+    scattering.x / max(0.001, extinction.x),
+    scattering.y / max(0.001, extinction.y),
+    scattering.z / max(0.001, extinction.z)
+  );
+}
+
+fn sampleMediumRGB(WorldPos: vec3<f32>, Atmosphere: AtmosphereParameters) -> MediumSampleRGB {
+  var viewHeight: f32 = length(WorldPos) - Atmosphere.BottomRadius;
+
+  var densityMie: f32 = exp(Atmosphere.MieDensityExpScale * viewHeight);
+  var densityRay: f32 = exp(Atmosphere.RayleighDensityExpScale * viewHeight);
+  var clampVal: f32 = Atmosphere.AbsorptionDensity1LinearTerm * viewHeight + Atmosphere.AbsorptionDensity1ConstantTerm;
+  if viewHeight < Atmosphere.AbsorptionDensity0LayerWidth {
+    clampVal = Atmosphere.AbsorptionDensity0LinearTerm * viewHeight + Atmosphere.AbsorptionDensity0ConstantTerm;
+  }
+  var densityOzo: f32 = clamp(clampVal, 0.0, 1.0);
+
+  var s: MediumSampleRGB;
+
+  s.scatteringMie = densityMie * Atmosphere.MieScattering;
+  s.absorptionMie = densityMie * Atmosphere.MieAbsorption;
+  s.extinctionMie = densityMie * Atmosphere.MieExtinction;
+
+  s.scatteringRay = densityRay * Atmosphere.RayleighScattering;
+  s.absorptionRay = vec3<f32>(0.0, 0.0, 0.0);
+  s.extinctionRay = s.scatteringRay + s.absorptionRay;
+
+  s.scatteringOzo = vec3<f32>(0.0, 0.0, 0.0);
+  s.absorptionOzo = densityOzo * Atmosphere.AbsorptionExtinction;
+  s.extinctionOzo = s.scatteringOzo + s.absorptionOzo;
+
+  s.scattering = s.scatteringMie + s.scatteringRay + s.scatteringOzo;
+  s.absorption = s.absorptionMie + s.absorptionRay + s.absorptionOzo;
+  s.extinction = s.extinctionMie + s.extinctionRay + s.extinctionOzo;
+  s.albedo = getAlbedo(s.scattering, s.extinction);
+
+  return s;
+}