Examples: webgl_postprocessing_hbao

examples-testing/changes.patch

@@ -10836,6 +10836,19 @@ index 47e89f6..4329bfe 100644
      } else {
          renderer.setRenderTarget(null);
          renderer.clear();
+diff --git a/examples-testing/examples/webgl_postprocessing_hbao.ts b/examples-testing/examples/webgl_postprocessing_hbao.ts
+index 31f50c5..8ef076e 100644
+--- a/examples-testing/examples/webgl_postprocessing_hbao.ts
++++ b/examples-testing/examples/webgl_postprocessing_hbao.ts
+@@ -13,7 +13,7 @@ import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+ import { HBAOPass } from 'three/addons/postprocessing/HBAOPass.js';
+ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+-let mixer;
++let mixer: THREE.AnimationMixer;
+
+ const clock = new THREE.Clock();
+ const container = document.createElement('div');
 diff --git a/examples-testing/examples/webgl_postprocessing_masking.ts b/examples-testing/examples/webgl_postprocessing_masking.ts
 index 3650bfe..88a3d81 100644
 --- a/examples-testing/examples/webgl_postprocessing_masking.ts
@@ -13074,7 +13087,7 @@ index 6aadaf2..bb7fa30 100644
  init();
  animate();
 diff --git a/examples-testing/examples/webgpu_clearcoat.ts b/examples-testing/examples/webgpu_clearcoat.ts
-index 6bc0667..1f52852 100644
+index 3705045..7fc1806 100644
 --- a/examples-testing/examples/webgpu_clearcoat.ts
 +++ b/examples-testing/examples/webgpu_clearcoat.ts
 @@ -10,12 +10,12 @@ import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.
@@ -13093,7 +13106,7 @@ index 6bc0667..1f52852 100644
 +let group: THREE.Group;
 
  init();
- animate();
+
 diff --git a/examples-testing/examples/webgpu_lights_ies_spotlight.ts b/examples-testing/examples/webgpu_lights_ies_spotlight.ts
 index 1430a29..58b951d 100644
 --- a/examples-testing/examples/webgpu_lights_ies_spotlight.ts
@@ -13164,7 +13177,7 @@ index 02b4f22..78e1591 100644
  init().catch(function (err) {
      console.error(err);
 diff --git a/examples-testing/examples/webgpu_loader_gltf_sheen.ts b/examples-testing/examples/webgpu_loader_gltf_sheen.ts
-index 56cfb9a..0790e0b 100644
+index 3c3e199..e0d86c3 100644
 --- a/examples-testing/examples/webgpu_loader_gltf_sheen.ts
 +++ b/examples-testing/examples/webgpu_loader_gltf_sheen.ts
 @@ -9,7 +9,7 @@ import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
@@ -13175,8 +13188,8 @@ index 56cfb9a..0790e0b 100644
 +let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: WebGPURenderer, controls: OrbitControls;
 
  init();
- animate();
-@@ -35,7 +35,10 @@ function init() {
+
+@@ -34,7 +34,10 @@ function init() {
      new GLTFLoader().setPath('models/gltf/').load('SheenChair.glb', function (gltf) {
          scene.add(gltf.scene);
 
@@ -13381,7 +13394,7 @@ index 4184cb4..f6d36c0 100644
 
      torusKnot.rotation.x += 0.25 * delta;
 diff --git a/examples-testing/examples/webgpu_video_panorama.ts b/examples-testing/examples/webgpu_video_panorama.ts
-index d2b3482..d88be17 100644
+index 527cc17..eb03f96 100644
 --- a/examples-testing/examples/webgpu_video_panorama.ts
 +++ b/examples-testing/examples/webgpu_video_panorama.ts
 @@ -3,7 +3,7 @@ import * as THREE from 'three';
@@ -13393,7 +13406,7 @@ index d2b3482..d88be17 100644
 
  let isUserInteracting = false,
      lon = 0,
-@@ -27,7 +27,7 @@ function init() {
+@@ -26,7 +26,7 @@ function init() {
          throw new Error('No WebGPU support');
      }
 
@@ -13402,7 +13415,7 @@ index d2b3482..d88be17 100644
 
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.25, 10);
 
-@@ -37,7 +37,7 @@ function init() {
+@@ -36,7 +36,7 @@ function init() {
      // invert the geometry on the x-axis so that all of the faces point inward
      geometry.scale(-1, 1, 1);
 

examples-testing/index.js

@@ -250,6 +250,7 @@ const files = {
         'webgl_postprocessing_fxaa',
         'webgl_postprocessing_glitch',
         'webgl_postprocessing_godrays',
+        'webgl_postprocessing_hbao',
         'webgl_postprocessing_rgb_halftone',
         'webgl_postprocessing_masking',
         'webgl_postprocessing_ssaa',

types/three/examples/jsm/postprocessing/HBAOPass.d.ts

@@ -0,0 +1,106 @@
+import {
+    Camera,
+    Color,
+    ColorRepresentation,
+    DataTexture,
+    DepthTexture,
+    MeshNormalMaterial,
+    Scene,
+    ShaderMaterial,
+    Texture,
+    WebGLRenderer,
+    WebGLRenderTarget,
+} from '../../../src/Three.js';
+
+import { FullScreenQuad, Pass } from './Pass.js';
+
+export class HBAOPass extends Pass {
+    width: number;
+    height: number;
+    clear: boolean;
+    camera: Camera;
+    scene: Scene;
+    output: number;
+
+    rings: number;
+    samples: number;
+
+    noiseTexture: DataTexture;
+
+    hbaoRenderTarget: WebGLRenderTarget;
+    pdRenderTarget: WebGLRenderTarget;
+
+    hbaoMaterial: ShaderMaterial;
+
+    normalMaterial: MeshNormalMaterial;
+
+    pdMaterial: ShaderMaterial;
+
+    depthRenderMaterial: ShaderMaterial;
+
+    copyMaterial: ShaderMaterial;
+
+    fsQuad: FullScreenQuad;
+
+    originalClearColor: Color;
+
+    depthTexture: DepthTexture;
+    normalTexture: Texture;
+
+    constructor(
+        scene: Scene,
+        camera: Camera,
+        width?: number | undefined,
+        height?: number | undefined,
+        parameters?: { depthTexture?: DepthTexture | undefined; normalTexture?: Texture | undefined } | undefined,
+    );
+
+    setTextures(depthTexture?: DepthTexture | undefined, normalTexture?: Texture | undefined): void;
+
+    updateHbaoMaterial(parameters: {
+        radius?: number | undefined;
+        distanceExponent?: number | undefined;
+        bias?: number | undefined;
+        samples?: number | undefined;
+    }): void;
+
+    updatePdMaterial(parameters: {
+        lumaPhi?: number | undefined;
+        depthPhi?: number | undefined;
+        normalPhi?: number | undefined;
+        radius?: number | undefined;
+        rings?: number | undefined;
+        samples?: number | undefined;
+    }): void;
+
+    renderPass(
+        renderer: WebGLRenderer,
+        passMaterial: ShaderMaterial,
+        renderTarget: WebGLRenderTarget | null,
+        clearColor?: ColorRepresentation | undefined,
+        clearAlpha?: number | undefined,
+    ): void;
+
+    renderOverride(
+        renderer: WebGLRenderer,
+        overrideMaterial: MeshNormalMaterial,
+        renderTarget: WebGLRenderTarget | null,
+        clearColor?: ColorRepresentation | undefined,
+        clearAlpha?: number | undefined,
+    ): void;
+
+    overrideVisibility(): void;
+
+    restoreVisibility(): void;
+
+    generateNoise(size?: number): DataTexture;
+
+    static OUTPUT: {
+        Default: 0;
+        Diffuse: 1;
+        Depth: 2;
+        Normal: 3;
+        HBAO: 4;
+        Denoise: 5;
+    };
+}

types/three/examples/jsm/shaders/HBAOShader.d.ts

@@ -0,0 +1,44 @@
+import { IUniform, Matrix4, Vector2 } from '../../../src/Three.js';
+
+export const HBAOShader: {
+    name: string;
+    defines: {
+        PERSPECTIVE_CAMERA: number;
+        SAMPLES: number;
+        SAMPLE_VECTORS: string;
+        NORMAL_VECTOR_TYPE: number;
+        DEPTH_VALUE_SOURCE: number;
+        COSINE_SAMPLE_HEMISPHERE: number;
+    };
+    uniforms: {
+        tNormal: IUniform;
+        tDepth: IUniform;
+        tNoise: IUniform;
+        resolution: IUniform<Vector2>;
+        cameraNear: IUniform;
+        cameraFar: IUniform;
+        cameraProjectionMatrix: IUniform<Matrix4>;
+        cameraProjectionMatrixInverse: IUniform<Matrix4>;
+        radius: IUniform<number>;
+        distanceExponent: IUniform<number>;
+        bias: IUniform<number>;
+    };
+    vertexShader: string;
+    fragmentShader: string;
+};
+
+export const HBAODepthShader: {
+    name: string;
+    defines: {
+        PERSPECTIVE_CAMERA: number;
+    };
+    uniforms: {
+        tDepth: IUniform;
+        cameraNear: IUniform;
+        cameraFar: IUniform;
+    };
+    vertexShader: string;
+    fragmentShader: string;
+};
+
+export function generateHaboSampleKernelInitializer(samples: number): string;

types/three/examples/jsm/shaders/PoissonDenoiseShader.d.ts

@@ -0,0 +1,28 @@
+import { IUniform, Matrix4, Vector2 } from '../../../src/Three.js';
+
+export const PoissonDenoiseShader: {
+    name: string;
+    defines: {
+        SAMPLES: number;
+        SAMPLE_VECTORS: string;
+        NORMAL_VECTOR_TYPE: number;
+        DEPTH_VALUE_SOURCE: number;
+    };
+    uniforms: {
+        tDiffuse: IUniform;
+        tNormal: IUniform;
+        tDepth: IUniform;
+        tNoise: IUniform;
+        resolution: IUniform<Vector2>;
+        cameraProjectionMatrixInverse: IUniform<Matrix4>;
+        lumaPhi: IUniform<number>;
+        depthPhi: IUniform<number>;
+        normalPhi: IUniform<number>;
+        radius: IUniform<number>;
+        index: IUniform<number>;
+    };
+    vertexShader: string;
+    fragmentShader: string;
+};
+
+export function generatePdSamplePointInitializer(samples: number, rings: number): string;