Skip to content

Commit

Permalink
Examples: webgl_postprocessing_hbao (#668)
Browse files Browse the repository at this point in the history
* Add example

* Add examples

* Updates

* Update patch

* Delete examples
  • Loading branch information
Methuselah96 authored Nov 7, 2023
1 parent 589a4cb commit 5cb219c
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 9 deletions.
29 changes: 21 additions & 8 deletions examples-testing/changes.patch
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand Down Expand Up @@ -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';
Expand All @@ -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);

Expand Down Expand Up @@ -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';
Expand All @@ -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');
}

Expand All @@ -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);

Expand Down
1 change: 1 addition & 0 deletions examples-testing/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion three.js
Submodule three.js updated 38 files
+1 −0 docs/examples/en/postprocessing/EffectComposer.html
+1 −0 docs/examples/zh/postprocessing/EffectComposer.html
+1 −0 examples/files.json
+0 −6 examples/jsm/loaders/ColladaLoader.js
+7 −1 examples/jsm/loaders/GLTFLoader.js
+79 −57 examples/jsm/objects/BatchedMesh.js
+501 −0 examples/jsm/postprocessing/HBAOPass.js
+10 −21 examples/jsm/renderers/common/Animation.js
+3 −3 examples/jsm/renderers/common/Bindings.js
+4 −4 examples/jsm/renderers/common/Geometries.js
+12 −2 examples/jsm/renderers/common/Info.js
+24 −16 examples/jsm/renderers/common/Renderer.js
+6 −6 examples/jsm/renderers/common/nodes/Nodes.js
+331 −0 examples/jsm/shaders/HBAOShader.js
+248 −0 examples/jsm/shaders/PoissonDenoiseShader.js
+ examples/screenshots/webgl_postprocessing_hbao.jpg
+ examples/screenshots/webgpu_instance_points.jpg
+ examples/screenshots/webgpu_lines_fat.jpg
+ examples/screenshots/webgpu_particles.jpg
+ examples/screenshots/webgpu_shadertoy.jpg
+ examples/screenshots/webgpu_tsl_editor.jpg
+ examples/screenshots/webgpu_tsl_transpiler.jpg
+1 −0 examples/tags.json
+198 −0 examples/webgl_postprocessing_hbao.html
+1 −3 examples/webgpu_clearcoat.html
+9 −2 examples/webgpu_compute_texture_pingpong.html
+1 −3 examples/webgpu_instance_points.html
+1 −3 examples/webgpu_lines_fat.html
+1 −3 examples/webgpu_loader_gltf_sheen.html
+0 −1 examples/webgpu_particles.html
+1 −1 examples/webgpu_sprites.html
+8 −4 examples/webgpu_tsl_editor.html
+1 −2 examples/webgpu_video_panorama.html
+11 −11 package-lock.json
+5 −1 src/renderers/WebGLRenderer.js
+26 −0 src/renderers/webgl/WebGLBufferRenderer.js
+26 −0 src/renderers/webgl/WebGLIndexedBufferRenderer.js
+6 −3 test/e2e/puppeteer.js
106 changes: 106 additions & 0 deletions types/three/examples/jsm/postprocessing/HBAOPass.d.ts
Original file line number Diff line number Diff line change
@@ -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;
};
}
44 changes: 44 additions & 0 deletions types/three/examples/jsm/shaders/HBAOShader.d.ts
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 28 additions & 0 deletions types/three/examples/jsm/shaders/PoissonDenoiseShader.d.ts
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 5cb219c

Please sign in to comment.