Add more postprocessing examples (#553)

* Add examples

* Add function

* Remove example

* Update patch

* Delete examples

* Update

examples-testing/changes.patch

@@ -3277,6 +3277,148 @@ index 4930155..e041a19 100644
          selectedObjects = [];
          selectedObjects.push(object);
      }
+diff --git a/examples-testing/examples/webgl_postprocessing_pixel.ts b/examples-testing/examples/webgl_postprocessing_pixel.ts
+index c3bcfe4..b9ee62c 100644
+--- a/examples-testing/examples/webgl_postprocessing_pixel.ts
++++ b/examples-testing/examples/webgl_postprocessing_pixel.ts
+@@ -6,8 +6,14 @@ import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelated
+ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+-let camera, scene, renderer, composer, crystalMesh, clock;
+-let gui, params;
++let camera: THREE.OrthographicCamera,
++    scene: THREE.Scene,
++    renderer: THREE.WebGLRenderer,
++    composer: EffectComposer,
++    crystalMesh: THREE.Mesh<THREE.IcosahedronGeometry, THREE.MeshPhongMaterial>,
++    clock: THREE.Clock;
++let gui: GUI,
++    params: { pixelSize: number; normalEdgeStrength: number; depthEdgeStrength: number; pixelAlignedPanning: boolean };
+
+ init();
+ animate();
+@@ -70,7 +76,7 @@ function init() {
+
+     const boxMaterial = new THREE.MeshPhongMaterial({ map: texChecker2 });
+
+-    function addBox(boxSideLength, x, z, rotation) {
++    function addBox(boxSideLength: number, x: number, z: number, rotation: number) {
+         const mesh = new THREE.Mesh(new THREE.BoxGeometry(boxSideLength, boxSideLength, boxSideLength), boxMaterial);
+         mesh.castShadow = true;
+         mesh.receiveShadow = true;
+@@ -169,7 +175,7 @@ function animate() {
+
+ // Helper functions
+
+-function pixelTexture(texture) {
++function pixelTexture(texture: THREE.Texture) {
+     texture.minFilter = THREE.NearestFilter;
+     texture.magFilter = THREE.NearestFilter;
+     texture.generateMipmaps = false;
+@@ -179,25 +185,30 @@ function pixelTexture(texture) {
+     return texture;
+ }
+
+-function easeInOutCubic(x) {
++function easeInOutCubic(x: number) {
+     return x ** 2 * 3 - x ** 3 * 2;
+ }
+
+-function linearStep(x, edge0, edge1) {
++function linearStep(x: number, edge0: number, edge1: number) {
+     const w = edge1 - edge0;
+     const m = 1 / w;
+     const y0 = -m * edge0;
+     return THREE.MathUtils.clamp(y0 + m * x, 0, 1);
+ }
+
+-function stopGoEased(x, downtime, period) {
++function stopGoEased(x: number, downtime: number, period: number) {
+     const cycle = (x / period) | 0;
+     const tween = x - cycle * period;
+     const linStep = easeInOutCubic(linearStep(tween, downtime, period));
+     return cycle + linStep;
+ }
+
+-function pixelAlignFrustum(camera, aspectRatio, pixelsPerScreenWidth, pixelsPerScreenHeight) {
++function pixelAlignFrustum(
++    camera: THREE.OrthographicCamera,
++    aspectRatio: number,
++    pixelsPerScreenWidth: number,
++    pixelsPerScreenHeight: number,
++) {
+     // 0. Get Pixel Grid Units
+     const worldScreenWidth = (camera.right - camera.left) / camera.zoom;
+     const worldScreenHeight = (camera.top - camera.bottom) / camera.zoom;
+diff --git a/examples-testing/examples/webgl_postprocessing_procedural.ts b/examples-testing/examples/webgl_postprocessing_procedural.ts
+index 0a05229..1ec8cb9 100644
+--- a/examples-testing/examples/webgl_postprocessing_procedural.ts
++++ b/examples-testing/examples/webgl_postprocessing_procedural.ts
+@@ -3,9 +3,13 @@ import * as THREE from 'three';
+ import Stats from 'three/addons/libs/stats.module.js';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+-let postCamera, postScene, renderer;
+-let postMaterial, noiseRandom1DMaterial, noiseRandom2DMaterial, noiseRandom3DMaterial, postQuad;
+-let stats;
++let postCamera: THREE.OrthographicCamera, postScene: THREE.Scene, renderer: THREE.WebGLRenderer;
++let postMaterial: THREE.ShaderMaterial,
++    noiseRandom1DMaterial: THREE.ShaderMaterial,
++    noiseRandom2DMaterial: THREE.ShaderMaterial,
++    noiseRandom3DMaterial: THREE.ShaderMaterial,
++    postQuad: THREE.Mesh;
++let stats: Stats;
+
+ const params = { procedure: 'noiseRandom3D' };
+
+@@ -20,7 +24,7 @@ function initGui() {
+ }
+
+ function init() {
+-    const container = document.getElementById('container');
++    const container = document.getElementById('container')!;
+
+     renderer = new THREE.WebGLRenderer();
+     renderer.setPixelRatio(window.devicePixelRatio);
+@@ -34,16 +38,16 @@ function init() {
+     // Setup post processing stage
+     postCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+     noiseRandom1DMaterial = new THREE.ShaderMaterial({
+-        vertexShader: document.querySelector('#procedural-vert').textContent.trim(),
+-        fragmentShader: document.querySelector('#noiseRandom1D-frag').textContent.trim(),
++        vertexShader: document.querySelector('#procedural-vert')!.textContent!.trim(),
++        fragmentShader: document.querySelector('#noiseRandom1D-frag')!.textContent!.trim(),
+     });
+     noiseRandom2DMaterial = new THREE.ShaderMaterial({
+-        vertexShader: document.querySelector('#procedural-vert').textContent.trim(),
+-        fragmentShader: document.querySelector('#noiseRandom2D-frag').textContent.trim(),
++        vertexShader: document.querySelector('#procedural-vert')!.textContent!.trim(),
++        fragmentShader: document.querySelector('#noiseRandom2D-frag')!.textContent!.trim(),
+     });
+     noiseRandom3DMaterial = new THREE.ShaderMaterial({
+-        vertexShader: document.querySelector('#procedural-vert').textContent.trim(),
+-        fragmentShader: document.querySelector('#noiseRandom3D-frag').textContent.trim(),
++        vertexShader: document.querySelector('#procedural-vert')!.textContent!.trim(),
++        fragmentShader: document.querySelector('#noiseRandom3D-frag')!.textContent!.trim(),
+     });
+     postMaterial = noiseRandom3DMaterial;
+     const postPlane = new THREE.PlaneGeometry(2, 2);
+@@ -55,13 +59,7 @@ function init() {
+ }
+
+ function onWindowResize() {
+-    const width = window.innerWidth;
+-    const height = window.innerHeight;
+-
+-    postCamera.aspect = width / height;
+-    postCamera.updateProjectionMatrix();
+-
+-    renderer.setSize(width, height);
++    renderer.setSize(window.innerWidth, window.innerHeight);
+ }
+
+ function animate() {
 diff --git a/examples-testing/examples/webgl_postprocessing_rgb_halftone.ts b/examples-testing/examples/webgl_postprocessing_rgb_halftone.ts
 index cb97a5a..1c15b62 100644
 --- a/examples-testing/examples/webgl_postprocessing_rgb_halftone.ts
@@ -3295,6 +3437,74 @@ index cb97a5a..1c15b62 100644
 
  init();
  animate();
+diff --git a/examples-testing/examples/webgl_postprocessing_sao.ts b/examples-testing/examples/webgl_postprocessing_sao.ts
+index 6f09ad6..34daf12 100644
+--- a/examples-testing/examples/webgl_postprocessing_sao.ts
++++ b/examples-testing/examples/webgl_postprocessing_sao.ts
+@@ -8,10 +8,10 @@ import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+ import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
+ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+-let container, stats;
+-let camera, scene, renderer;
+-let composer, renderPass, saoPass;
+-let group;
++let container: HTMLDivElement, stats: Stats;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
++let composer: EffectComposer, renderPass: RenderPass, saoPass: SAOPass;
++let group: THREE.Object3D;
+
+ init();
+ animate();
+@@ -99,7 +99,7 @@ function init() {
+         SAO: SAOPass.OUTPUT.SAO,
+         Depth: SAOPass.OUTPUT.Depth,
+         Normal: SAOPass.OUTPUT.Normal,
+-    }).onChange(function (value) {
++    }).onChange(function (value: string) {
+         saoPass.params.output = parseInt(value);
+     });
+     gui.add(saoPass.params, 'saoBias', -1, 1);
+diff --git a/examples-testing/examples/webgl_postprocessing_smaa.ts b/examples-testing/examples/webgl_postprocessing_smaa.ts
+index 36d014d..c4aff5c 100644
+--- a/examples-testing/examples/webgl_postprocessing_smaa.ts
++++ b/examples-testing/examples/webgl_postprocessing_smaa.ts
+@@ -7,13 +7,17 @@ import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+ import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
+ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+-let camera, scene, renderer, composer, stats;
++let camera: THREE.PerspectiveCamera,
++    scene: THREE.Scene,
++    renderer: THREE.WebGLRenderer,
++    composer: EffectComposer,
++    stats: Stats;
+
+ init();
+ animate();
+
+ function init() {
+-    const container = document.getElementById('container');
++    const container = document.getElementById('container')!;
+
+     renderer = new THREE.WebGLRenderer();
+     renderer.setPixelRatio(window.devicePixelRatio);
+diff --git a/examples-testing/examples/webgl_postprocessing_sobel.ts b/examples-testing/examples/webgl_postprocessing_sobel.ts
+index a561fb7..997974b 100644
+--- a/examples-testing/examples/webgl_postprocessing_sobel.ts
++++ b/examples-testing/examples/webgl_postprocessing_sobel.ts
+@@ -11,9 +11,9 @@ import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+ import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
+ import { SobelOperatorShader } from 'three/addons/shaders/SobelOperatorShader.js';
+
+-let camera, scene, renderer, composer;
++let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, composer: EffectComposer;
+
+-let effectSobel;
++let effectSobel: ShaderPass;
+
+ const params = {
+     enable: true,
 diff --git a/examples-testing/examples/webgl_postprocessing_ssaa.ts b/examples-testing/examples/webgl_postprocessing_ssaa.ts
 index f3028fa..9cf7166 100644
 --- a/examples-testing/examples/webgl_postprocessing_ssaa.ts

examples-testing/index.js

@@ -250,11 +250,11 @@ const files = {
         'webgl_postprocessing_masking',
         'webgl_postprocessing_ssaa',
         'webgl_postprocessing_outline',
-        // 'webgl_postprocessing_pixel',
-        // 'webgl_postprocessing_procedural',
-        // 'webgl_postprocessing_sao',
-        // 'webgl_postprocessing_smaa',
-        // 'webgl_postprocessing_sobel',
+        'webgl_postprocessing_pixel',
+        'webgl_postprocessing_procedural',
+        'webgl_postprocessing_sao',
+        'webgl_postprocessing_smaa',
+        'webgl_postprocessing_sobel',
         // 'webgl_postprocessing_ssao',
         // 'webgl_postprocessing_ssr',
         // 'webgl_postprocessing_taa',

types/three/OTHER_FILES.txt

@@ -117,6 +117,7 @@ examples/jsm/postprocessing/MaskPass.d.ts
 examples/jsm/postprocessing/OutlinePass.d.ts
 examples/jsm/postprocessing/OutputPass.d.ts
 examples/jsm/postprocessing/RenderPass.d.ts
+examples/jsm/postprocessing/RenderPixelatedPass.d.ts
 examples/jsm/postprocessing/BloomPass.d.ts
 examples/jsm/postprocessing/SAOPass.d.ts
 examples/jsm/postprocessing/SMAAPass.d.ts

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

@@ -25,4 +25,6 @@ export class RenderPixelatedPass extends Pass {
 
     beautyRenderTarget: WebGLRenderTarget;
     normalRenderTarget: WebGLRenderTarget;
+
+    setPixelSize(pixelSize: number): void;
 }