@3driseai/3drise-viewer 0.1.7 → 0.1.8

package/dist/shaders/clouds/CirrusMaterial.js

@@ -0,0 +1,167 @@
+import * as THREE from 'three';
+import { shaderMaterial } from '@react-three/drei';
+import { extend } from '@react-three/fiber';
+import { cloudCommon, skyLib, cloudGeometry } from '../glsl/cloudCore.glsl.js';
+/**
+ * Cirrus is not a volume, and rendering it as one is why most implementations get it
+ * wrong. It is ice, not water: optical depth well under one, no meaningful self-shadow,
+ * lit almost entirely by forward scattering, and stretched hard along the shear vector
+ * into fibratus streaks.
+ *
+ * Three samples through a thin slab is enough. What it needs instead of samples is
+ * anisotropy and the 22-degree halo — the refraction minimum of a hexagonal ice prism,
+ * which is the detail that makes a viewer read "ice" rather than "thin cloud".
+ */
+const vertex = /* glsl */ `
+out vec2 vUv;
+void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }
+`;
+const fragment = /* glsl */ `
+${cloudCommon}
+precision highp float;
+precision highp sampler2D;
+${skyLib}
+
+uniform float u_curvature;
+${cloudGeometry}
+
+in vec2 vUv;
+out vec4 outColor;
+
+uniform sampler2D u_weather;
+uniform sampler2D u_depth;
+uniform float u_hasDepth;
+uniform float u_time;
+uniform vec3  u_camPos, u_camFwd;
+uniform mat4  u_invProj, u_camWorld;
+uniform float u_near, u_far;
+uniform vec2  u_resolution;
+
+uniform float u_altitude, u_thickness;
+uniform float u_coverage, u_opticalDepth;
+uniform float u_featureScale, u_anisotropy;
+uniform vec2  u_windDir;
+uniform float u_windSpeed;
+uniform float u_halo, u_g1, u_g2;
+uniform vec3  u_skyAmbient;
+uniform float u_ambient, u_sunIntensityScale, u_fogDensity;
+uniform float u_screenSpace;
+
+float hg(float mu, float g){
+  float g2 = g * g;
+  return (1.0 - g2) / (4.0 * PI * pow(max(1.0 + g2 - 2.0 * g * mu, 1e-4), 1.5));
+}
+
+/**
+ * Noise rotated into the wind frame, then compressed along it. Compressing the
+ * coordinate stretches the feature, so streaks always follow the shear no matter which
+ * way the wind points — rotating the sample rather than the result is what keeps that
+ * true when the wind bearing is animated.
+ */
+float cirrusField(vec3 p){
+  vec2 wd = normalize(u_windDir + vec2(1e-5, 0.0));
+  mat2 R = mat2(wd.x, -wd.y, wd.y, wd.x);
+  vec2 q = R * (p.xz * u_featureScale);
+  q.x *= u_anisotropy;
+  vec2 drift = vec2(u_time * u_windSpeed * u_featureScale, 0.0);
+  float a = texture(u_weather, q + drift).r;
+  float b = texture(u_weather, q * 2.7 + drift * 1.7 + vec2(0.41, 0.13)).g;
+  float c = texture(u_weather, q * 6.3 - drift * 0.6 + vec2(0.83, 0.37)).g;
+  float n = a * 0.55 + b * 0.30 + c * 0.15;
+  return saturate(remap(n, 1.0 - u_coverage, 1.0 - u_coverage * 0.35, 0.0, 1.0));
+}
+
+void main(){
+  vec2 uv = (u_screenSpace > 0.5) ? vUv : (gl_FragCoord.xy / u_resolution);
+  vec2 ndc = uv * 2.0 - 1.0;
+  vec4 vp = u_invProj * vec4(ndc, -1.0, 1.0); vp /= vp.w;
+  vec3 rd = normalize(mat3(u_camWorld) * vp.xyz);
+  vec3 ro = u_camPos;
+
+  float maxT = 1e7;
+  if (u_hasDepth > 0.5){
+    float dz = texture(u_depth, uv).x;
+    if (dz < 0.999999){
+      float viewZ = (u_near * u_far) / ((u_far - u_near) * dz - u_far);
+      maxT = -viewZ / max(dot(rd, u_camFwd), 1e-4);
+    }
+  }
+
+  vec3 acc = vec3(0.0);
+  float T = 1.0;
+
+  float t0, t1;
+  if (layerRange(ro, rd, u_altitude, u_altitude + u_thickness, t0, t1)){
+    // Cap the traversal or a grazing ray turns the horizon into an opaque wall.
+    t1 = min(min(t1, maxT), t0 + u_thickness * 6.0);
+    if (t1 > t0){
+      float mu = dot(rd, u_sunDir);
+      float dt = (t1 - t0) / 3.0;
+
+      // 22 degrees = 0.3840 rad. The minimum deviation angle of a 60-degree ice prism.
+      float halo = smoothstep(0.030, 0.004, abs(acos(clamp(mu, -1.0, 1.0)) - 0.3840)) * u_halo;
+      float ph = mix(hg(mu, u_g1), hg(mu, u_g2), 0.35);
+
+      for (int i = 0; i < 3; i++){
+        vec3 p = ro + rd * (t0 + dt * (float(i) + 0.5));
+        float d = cirrusField(p) * u_opticalDepth;
+        if (d > 0.0){
+          float sigma = d * 0.0007 * dt;
+          vec3 S = u_sunColor * (u_sunIntensity * SUN_RADIANCE * u_sunIntensityScale)
+                   * (ph * 0.9 + halo * 0.5)
+                 + u_skyAmbient * 0.35 * u_ambient;
+          float trs = exp(-sigma);
+          acc += T * S * (1.0 - trs);
+          T *= trs;
+        }
+      }
+      // Same rule as the deck: dissolve toward the real background rather than
+      // toward an analytic sky that is not what the viewer is looking at.
+      float fogT = exp(-t0 * u_fogDensity * 0.55);
+      acc *= fogT;
+      T = mix(1.0, T, fogT);
+    }
+  }
+
+  outColor = vec4(acc, T);
+}
+`;
+export const cirrusDefaults = {
+    u_weather: null,
+    u_depth: null,
+    u_hasDepth: 0,
+    u_time: 0,
+    u_sunDir: new THREE.Vector3(0.3, 0.4, 0.86).normalize(),
+    u_sunColor: new THREE.Color(1, 1, 1),
+    u_sunIntensity: 1,
+    u_turbidity: 1,
+    u_rayleigh: 1,
+    u_mieCoefficient: 0.005,
+    u_mieG: 0.76,
+    u_skyAmbient: new THREE.Color(0.32, 0.5, 0.86),
+    u_ambient: 1,
+    u_sunIntensityScale: 1,
+    u_altitude: 8200,
+    u_thickness: 700,
+    u_coverage: 0.62,
+    u_opticalDepth: 0.95,
+    u_featureScale: 1 / 44000,
+    u_anisotropy: 0.11,
+    u_windDir: new THREE.Vector2(1, 0.22).normalize(),
+    u_windSpeed: 16,
+    u_halo: 1.1,
+    u_g1: 0.9,
+    u_g2: 0.2,
+    u_curvature: 1 / (2 * 6371000),
+    u_fogDensity: 0.000026,
+    u_camPos: new THREE.Vector3(),
+    u_camFwd: new THREE.Vector3(0, 0, -1),
+    u_invProj: new THREE.Matrix4(),
+    u_camWorld: new THREE.Matrix4(),
+    u_near: 1,
+    u_far: 100000,
+    u_resolution: new THREE.Vector2(1, 1),
+    u_screenSpace: 1
+};
+export const CirrusMaterial = shaderMaterial(cirrusDefaults, vertex, fragment);
+extend({ CirrusMaterial });

package/dist/shaders/clouds/CloudCompositeMaterial.d.ts

@@ -0,0 +1,20 @@
+import * as THREE from 'three';
+import { type ThreeElement } from '@react-three/fiber';
+export declare const CloudCompositeMaterial: import("@react-three/fiber").ConstructorRepresentation<THREE.ShaderMaterial & {
+    u_scene: any;
+    u_clouds: any;
+    u_cirrus: any;
+    u_depth: any;
+    u_lowTexel: THREE.Vector2;
+    u_exposure: number;
+    u_tonemap: number;
+    u_hasCirrus: number;
+}> & {
+    key: string;
+};
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        cloudCompositeMaterial: ThreeElement<typeof CloudCompositeMaterial>;
+    }
+}
+//# sourceMappingURL=CloudCompositeMaterial.d.ts.map

package/dist/shaders/clouds/CloudCompositeMaterial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudCompositeMaterial.d.ts","sourceRoot":"","sources":["../../../src/shaders/clouds/CloudCompositeMaterial.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAyE9D,eAAO,MAAM,sBAAsB;;;;;;;;;;;CAalC,CAAA;AAID,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAa;QACrB,sBAAsB,EAAE,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAA;KACpE;CACF"}

package/dist/shaders/clouds/CloudCompositeMaterial.js

@@ -0,0 +1,82 @@
+import * as THREE from 'three';
+import { shaderMaterial } from '@react-three/drei';
+import { extend } from '@react-three/fiber';
+/**
+ * Depth-aware upsample and composite for the layer path.
+ *
+ * A plain bilinear upsample of the half-res cloud buffer smears cloud across the
+ * silhouette of any geometry it meets. Weighting the four taps by depth similarity keeps
+ * the edge where the geometry is.
+ *
+ * u_tonemap: 1 when this pass writes the final image (the layer path takes over
+ * rendering, so three's own tone mapping never runs); 0 when something downstream —
+ * an EffectComposer, say — will tonemap instead.
+ */
+const vertex = /* glsl */ `
+out vec2 vUv;
+void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }
+`;
+const fragment = /* glsl */ `
+precision highp float;
+in vec2 vUv;
+out vec4 outColor;
+
+uniform sampler2D u_scene;
+uniform sampler2D u_clouds;
+uniform sampler2D u_cirrus;
+uniform sampler2D u_depth;
+uniform vec2  u_lowTexel;
+uniform float u_exposure;
+uniform float u_tonemap;
+uniform float u_hasCirrus;
+
+vec3 aces(vec3 x){
+  const float a = 2.51, b = 0.03, c = 2.43, d = 0.59, e = 0.14;
+  return clamp((x * (a * x + b)) / (x * (c * x + d) + e), 0.0, 1.0);
+}
+
+vec4 bilateral(sampler2D tex, float dRef){
+  vec4 sum = vec4(0.0);
+  float wsum = 0.0;
+  for (int y = -1; y <= 1; y++)
+  for (int x = -1; x <= 1; x++){
+    vec2 o = vec2(float(x), float(y)) * u_lowTexel;
+    float dS = texture(u_depth, vUv + o).x;
+    float w = exp(-abs(dS - dRef) * 900.0) * (1.0 - 0.18 * float(abs(x) + abs(y)));
+    sum += texture(tex, vUv + o) * w;
+    wsum += w;
+  }
+  return (wsum > 0.0) ? sum / wsum : texture(tex, vUv);
+}
+
+void main(){
+  vec3 col = texture(u_scene, vUv).rgb;
+  float dRef = texture(u_depth, vUv).x;
+
+  // Cirrus sits above and beyond the convective deck, so it composites first.
+  if (u_hasCirrus > 0.5){
+    vec4 ci = bilateral(u_cirrus, dRef);
+    col = col * ci.a + ci.rgb;
+  }
+  vec4 cl = bilateral(u_clouds, dRef);
+  col = col * cl.a + cl.rgb;
+
+  col *= u_exposure;
+  if (u_tonemap > 0.5){
+    col = aces(col);
+    col = pow(col, vec3(1.0 / 2.2));
+  }
+  outColor = vec4(col, 1.0);
+}
+`;
+export const CloudCompositeMaterial = shaderMaterial({
+    u_scene: null,
+    u_clouds: null,
+    u_cirrus: null,
+    u_depth: null,
+    u_lowTexel: new THREE.Vector2(1, 1),
+    u_exposure: 1,
+    u_tonemap: 1,
+    u_hasCirrus: 0
+}, vertex, fragment);
+extend({ CloudCompositeMaterial });

package/dist/shaders/clouds/CloudResolveMaterial.d.ts

@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+import { type ThreeElement } from '@react-three/fiber';
+export declare const CloudResolveMaterial: import("@react-three/fiber").ConstructorRepresentation<THREE.ShaderMaterial & {
+    u_current: any;
+    u_history: any;
+    u_prevViewProj: THREE.Matrix4;
+    u_invProj: THREE.Matrix4;
+    u_camWorld: THREE.Matrix4;
+    u_camPos: THREE.Vector3;
+    u_texel: THREE.Vector2;
+    u_blend: number;
+    u_proxyHeight: number;
+    u_valid: number;
+}> & {
+    key: string;
+};
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        cloudResolveMaterial: ThreeElement<typeof CloudResolveMaterial>;
+    }
+}
+//# sourceMappingURL=CloudResolveMaterial.d.ts.map

package/dist/shaders/clouds/CloudResolveMaterial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudResolveMaterial.d.ts","sourceRoot":"","sources":["../../../src/shaders/clouds/CloudResolveMaterial.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAkE9D,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAehC,CAAA;AAID,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAa;QACrB,oBAAoB,EAAE,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAA;KAChE;CACF"}

package/dist/shaders/clouds/CloudResolveMaterial.js

@@ -0,0 +1,77 @@
+import * as THREE from 'three';
+import { shaderMaterial } from '@react-three/drei';
+import { extend } from '@react-three/fiber';
+/**
+ * Temporal resolve for the layer path. Blends this frame's half-resolution march with a
+ * reprojected history buffer, so 96 march steps at quarter the pixel count converge to
+ * something close to a full-resolution result over ~4 frames.
+ *
+ * Reprojection runs against a proxy surface at the layer's mid-height rather than a
+ * per-pixel cloud depth. That avoids a second render target for depth, and for a layer
+ * that is far relative to per-frame camera motion the two are indistinguishable. The
+ * neighbourhood clamp is what actually prevents ghosting.
+ */
+const vertex = /* glsl */ `
+out vec2 vUv;
+void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }
+`;
+const fragment = /* glsl */ `
+precision highp float;
+in vec2 vUv;
+out vec4 outColor;
+
+uniform sampler2D u_current;
+uniform sampler2D u_history;
+uniform mat4 u_prevViewProj;
+uniform mat4 u_invProj, u_camWorld;
+uniform vec3 u_camPos;
+uniform vec2 u_texel;
+uniform float u_blend;
+uniform float u_proxyHeight;
+uniform float u_valid;
+
+void main(){
+  vec4 cur = texture(u_current, vUv);
+
+  if (u_valid < 0.5){ outColor = cur; return; }
+
+  vec2 ndc = vUv * 2.0 - 1.0;
+  vec4 vp = u_invProj * vec4(ndc, -1.0, 1.0); vp /= vp.w;
+  vec3 rd = normalize(mat3(u_camWorld) * vp.xyz);
+
+  float denom = (abs(rd.y) < 1e-3) ? (1e-3 * sign(rd.y + 1e-6)) : rd.y;
+  float t = (u_proxyHeight - u_camPos.y) / denom;
+  if (t < 0.0) t = 40000.0;
+  t = clamp(t, 200.0, 60000.0);
+  vec3 world = u_camPos + rd * t;
+
+  vec4 clip = u_prevViewProj * vec4(world, 1.0);
+  vec2 pUv = (clip.xy / clip.w) * 0.5 + 0.5;
+  if (clip.w <= 0.0 || pUv.x < 0.0 || pUv.x > 1.0 || pUv.y < 0.0 || pUv.y > 1.0){
+    outColor = cur; return;
+  }
+
+  vec4 hist = texture(u_history, pUv);
+
+  vec4 lo = cur, hi = cur;
+  for (int y = -1; y <= 1; y++)
+  for (int x = -1; x <= 1; x++){
+    vec4 s = texture(u_current, vUv + vec2(float(x), float(y)) * u_texel);
+    lo = min(lo, s); hi = max(hi, s);
+  }
+  outColor = mix(cur, clamp(hist, lo, hi), u_blend);
+}
+`;
+export const CloudResolveMaterial = shaderMaterial({
+    u_current: null,
+    u_history: null,
+    u_prevViewProj: new THREE.Matrix4(),
+    u_invProj: new THREE.Matrix4(),
+    u_camWorld: new THREE.Matrix4(),
+    u_camPos: new THREE.Vector3(),
+    u_texel: new THREE.Vector2(1, 1),
+    u_blend: 0.9,
+    u_proxyHeight: 2400,
+    u_valid: 0
+}, vertex, fragment);
+extend({ CloudResolveMaterial });

package/dist/shaders/clouds/CloudVolumeMaterial.d.ts

@@ -0,0 +1,143 @@
+import * as THREE from 'three';
+import { type ThreeElement } from '@react-three/fiber';
+export interface CloudVolumeUniformDefaults {
+    [key: string]: unknown;
+}
+export declare const cloudVolumeDefaults: {
+    u_base: any;
+    u_detail: any;
+    u_weather: any;
+    u_curl: any;
+    u_depth: any;
+    u_hasDepth: number;
+    u_time: number;
+    u_frame: number;
+    u_sunDir: THREE.Vector3;
+    u_sunColor: THREE.Color;
+    u_sunIntensity: number;
+    u_turbidity: number;
+    u_rayleigh: number;
+    u_mieCoefficient: number;
+    u_mieG: number;
+    u_skyAmbient: THREE.Color;
+    u_groundAmbient: THREE.Color;
+    u_coverage: number;
+    u_density: number;
+    u_cloudType: number;
+    u_baseScale: number;
+    u_detailScale: number;
+    u_detailStrength: number;
+    u_curlStrength: number;
+    u_layerBottom: number;
+    u_layerTop: number;
+    u_shear: number;
+    u_anvil: number;
+    u_precip: number;
+    u_weatherScale: number;
+    u_evolution: number;
+    u_windDir: THREE.Vector2;
+    u_windSpeed: number;
+    u_rise: number;
+    u_churn: number;
+    u_sigmaT: number;
+    u_g1: number;
+    u_g2: number;
+    u_msExtinction: number;
+    u_msEnergy: number;
+    u_msPhase: number;
+    u_powder: number;
+    u_silver: number;
+    u_ambient: number;
+    u_steps: number;
+    u_lightSteps: number;
+    u_lightStep: number;
+    u_stepGrowth: number;
+    u_maxSpan: number;
+    u_detailFade: number;
+    u_host: number;
+    u_center: THREE.Vector3;
+    u_radius: number;
+    u_curvature: number;
+    u_fogDensity: number;
+    u_camPos: THREE.Vector3;
+    u_camFwd: THREE.Vector3;
+    u_invProj: THREE.Matrix4;
+    u_camWorld: THREE.Matrix4;
+    u_near: number;
+    u_far: number;
+    u_resolution: THREE.Vector2;
+    u_screenSpace: number;
+};
+export declare const CloudVolumeMaterial: import("@react-three/fiber").ConstructorRepresentation<THREE.ShaderMaterial & {
+    u_base: any;
+    u_detail: any;
+    u_weather: any;
+    u_curl: any;
+    u_depth: any;
+    u_hasDepth: number;
+    u_time: number;
+    u_frame: number;
+    u_sunDir: THREE.Vector3;
+    u_sunColor: THREE.Color;
+    u_sunIntensity: number;
+    u_turbidity: number;
+    u_rayleigh: number;
+    u_mieCoefficient: number;
+    u_mieG: number;
+    u_skyAmbient: THREE.Color;
+    u_groundAmbient: THREE.Color;
+    u_coverage: number;
+    u_density: number;
+    u_cloudType: number;
+    u_baseScale: number;
+    u_detailScale: number;
+    u_detailStrength: number;
+    u_curlStrength: number;
+    u_layerBottom: number;
+    u_layerTop: number;
+    u_shear: number;
+    u_anvil: number;
+    u_precip: number;
+    u_weatherScale: number;
+    u_evolution: number;
+    u_windDir: THREE.Vector2;
+    u_windSpeed: number;
+    u_rise: number;
+    u_churn: number;
+    u_sigmaT: number;
+    u_g1: number;
+    u_g2: number;
+    u_msExtinction: number;
+    u_msEnergy: number;
+    u_msPhase: number;
+    u_powder: number;
+    u_silver: number;
+    u_ambient: number;
+    u_steps: number;
+    u_lightSteps: number;
+    u_lightStep: number;
+    u_stepGrowth: number;
+    u_maxSpan: number;
+    u_detailFade: number;
+    u_host: number;
+    u_center: THREE.Vector3;
+    u_radius: number;
+    u_curvature: number;
+    u_fogDensity: number;
+    u_camPos: THREE.Vector3;
+    u_camFwd: THREE.Vector3;
+    u_invProj: THREE.Matrix4;
+    u_camWorld: THREE.Matrix4;
+    u_near: number;
+    u_far: number;
+    u_resolution: THREE.Vector2;
+    u_screenSpace: number;
+}> & {
+    key: string;
+};
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        cloudVolumeMaterial: ThreeElement<typeof CloudVolumeMaterial>;
+    }
+}
+//# sourceMappingURL=CloudVolumeMaterial.d.ts.map

package/dist/shaders/clouds/CloudVolumeMaterial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloudVolumeMaterial.d.ts","sourceRoot":"","sources":["../../../src/shaders/clouds/CloudVolumeMaterial.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAwL9D,MAAM,WAAW,0BAA0B;IACzC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuE/B,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwD,CAAA;AAIxF,OAAO,QAAQ,oBAAoB,CAAC;IAClC,UAAU,aAAa;QACrB,mBAAmB,EAAE,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAA;KAC9D;CACF"}