diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch index 89e5cbea4..90cfa6806 100644 --- a/examples-testing/changes.patch +++ b/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, ++ 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 diff --git a/examples-testing/index.js b/examples-testing/index.js index 6efe8fe00..296b7577f 100644 --- a/examples-testing/index.js +++ b/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', diff --git a/types/three/OTHER_FILES.txt b/types/three/OTHER_FILES.txt index 821115ab9..b1289173b 100644 --- a/types/three/OTHER_FILES.txt +++ b/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 diff --git a/types/three/examples/jsm/postprocessing/RenderPixelatedPass.d.ts b/types/three/examples/jsm/postprocessing/RenderPixelatedPass.d.ts index 8fe100885..60fcfb116 100644 --- a/types/three/examples/jsm/postprocessing/RenderPixelatedPass.d.ts +++ b/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; } diff --git a/types/three/test/integration/three-examples/webgl_postprocessing_pixel.ts b/types/three/test/integration/three-examples/webgl_postprocessing_pixel.ts deleted file mode 100644 index 33fc11c35..000000000 --- a/types/three/test/integration/three-examples/webgl_postprocessing_pixel.ts +++ /dev/null @@ -1,172 +0,0 @@ -import * as THREE from 'three'; - -import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; -import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; -import { RenderPixelatedPass } from 'three/examples/jsm/postprocessing/RenderPixelatedPass'; - -let camera: THREE.OrthographicCamera; -let scene: THREE.Scene; -let renderer: THREE.WebGLRenderer; -let composer: EffectComposer; -let crystalMesh: THREE.Mesh; -let clock: THREE.Clock; - -init(); -animate(); - -function init() { - const aspectRatio = window.innerWidth / window.innerHeight; - - camera = new THREE.OrthographicCamera(-aspectRatio, aspectRatio, 1, -1, 0.1, 10); - camera.position.y = 2 * Math.tan(Math.PI / 6); - camera.position.z = 2; - - scene = new THREE.Scene(); - scene.background = new THREE.Color(0x151729); - - clock = new THREE.Clock(); - - renderer = new THREE.WebGLRenderer(); - renderer.shadowMap.enabled = true; - renderer.setSize(window.innerWidth, window.innerHeight); - document.body.appendChild(renderer.domElement); - - composer = new EffectComposer(renderer); - const renderPixelatedPass = new RenderPixelatedPass(6, scene, camera); - composer.addPass(renderPixelatedPass); - - window.addEventListener('resize', onWindowResize); - - const controls = new OrbitControls(camera, renderer.domElement); - controls.maxZoom = 2; - - // textures - - const loader = new THREE.TextureLoader(); - const texChecker = pixelTexture(loader.load('textures/checker.png')); - const texChecker2 = pixelTexture(loader.load('textures/checker.png')); - texChecker.repeat.set(3, 3); - texChecker2.repeat.set(1.5, 1.5); - - // meshes - - const boxMaterial = new THREE.MeshPhongMaterial({ map: texChecker2 }); - - 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; - mesh.rotation.y = rotation; - mesh.position.y = boxSideLength / 2; - mesh.position.set(x, boxSideLength / 2 + 0.0001, z); - scene.add(mesh); - return mesh; - } - - addBox(0.4, 0, 0, Math.PI / 4); - addBox(0.5, -0.5, -0.5, Math.PI / 4); - - const planeSideLength = 2; - const planeMesh = new THREE.Mesh( - new THREE.PlaneGeometry(planeSideLength, planeSideLength), - new THREE.MeshPhongMaterial({ map: texChecker }), - ); - planeMesh.receiveShadow = true; - planeMesh.rotation.x = -Math.PI / 2; - scene.add(planeMesh); - - const radius = 0.2; - const geometry = new THREE.IcosahedronGeometry(radius); - crystalMesh = new THREE.Mesh( - geometry, - new THREE.MeshPhongMaterial({ - color: 0x2379cf, - emissive: 0x143542, - shininess: 10, - specular: 0xffffff, - }), - ); - crystalMesh.receiveShadow = true; - crystalMesh.castShadow = true; - scene.add(crystalMesh); - - // lights - - scene.add(new THREE.AmbientLight(0x2d3645, 1.5)); - - const directionalLight = new THREE.DirectionalLight(0xfffc9c, 0.5); - directionalLight.position.set(100, 100, 100); - directionalLight.castShadow = true; - directionalLight.shadow.mapSize.set(2048, 2048); - scene.add(directionalLight); - - const spotLight = new THREE.SpotLight(0xff8800, 1, 10, Math.PI / 16, 0.02, 2); - spotLight.position.set(2, 2, 0); - const target = spotLight.target; - scene.add(target); - target.position.set(0, 0, 0); - spotLight.castShadow = true; - scene.add(spotLight); -} - -function onWindowResize() { - const aspectRatio = window.innerWidth / window.innerHeight; - camera.left = -aspectRatio; - camera.right = aspectRatio; - camera.updateProjectionMatrix(); - - renderer.setSize(window.innerWidth, window.innerHeight); - composer.setSize(window.innerWidth, window.innerHeight); -} - -function animate() { - requestAnimationFrame(animate); - - const t = clock.getElapsedTime(); - - crystalMesh.material.emissiveIntensity = Math.sin(t * 3) * 0.5 + 0.5; - crystalMesh.position.y = 0.7 + Math.sin(t * 2) * 0.05; - crystalMesh.rotation.y = stopGoEased(t, 2, 4) * 2 * Math.PI; - - const rendererSize = renderer.getSize(new THREE.Vector2()); - const aspectRatio = rendererSize.x / rendererSize.y; - if (camera.left !== -aspectRatio || camera.top !== 1.0) { - // Reset the Camera Frustum if it has been modified - camera.left = -aspectRatio; - camera.right = aspectRatio; - camera.top = 1.0; - camera.bottom = -1.0; - camera.updateProjectionMatrix(); - } - - composer.render(); -} - -// Helper functions - -function pixelTexture(texture: THREE.Texture) { - texture.minFilter = THREE.NearestFilter; - texture.magFilter = THREE.NearestFilter; - texture.generateMipmaps = false; - texture.wrapS = THREE.RepeatWrapping; - texture.wrapT = THREE.RepeatWrapping; - return texture; -} - -function easeInOutCubic(x: number) { - return x ** 2 * 3 - x ** 3 * 2; -} - -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: 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; -} diff --git a/types/three/tsconfig.json b/types/three/tsconfig.json index fcc615f41..013bad078 100644 --- a/types/three/tsconfig.json +++ b/types/three/tsconfig.json @@ -61,7 +61,6 @@ "test/integration/three-examples/webgl_nodes_loader_gltf_iridescence.ts", "test/integration/three-examples/webgl_nodes_materials_instance_uniform.ts", "test/integration/three-examples/webgl_portal.ts", - "test/integration/three-examples/webgl_postprocessing_pixel.ts", "test/integration/three-examples/webgl_postprocessing_ssr.ts", "test/integration/three-examples/webgl_shadowmap.ts", "test/integration/three-examples/webgl_shadowmap_csm.ts",