From 26b0eb3eef228cf3104db1e39635bfcf2c06f997 Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Wed, 26 Jun 2024 15:49:35 +0900 Subject: [PATCH 1/4] add : test for color filter pass --- .../postprocess/ColorFilterShaderPass.spec.ts | 42 +++++++++++++++++++ __test__/postprocess/PassRender.ts | 16 +++++++ .../postprocess/PostProcessRenderer.spec.ts | 29 +++---------- __test__/postprocess/SceneGenerator.ts | 13 ++++++ 4 files changed, 77 insertions(+), 23 deletions(-) create mode 100644 __test__/postprocess/ColorFilterShaderPass.spec.ts create mode 100644 __test__/postprocess/PassRender.ts create mode 100644 __test__/postprocess/SceneGenerator.ts diff --git a/__test__/postprocess/ColorFilterShaderPass.spec.ts b/__test__/postprocess/ColorFilterShaderPass.spec.ts new file mode 100644 index 0000000..89b503b --- /dev/null +++ b/__test__/postprocess/ColorFilterShaderPass.spec.ts @@ -0,0 +1,42 @@ +import { beforeEach, describe, expect, it, test } from "vitest"; +import { ColorFilterShaderPass } from "../../src/index.js"; +import { renderingPass } from "./PassRender.js"; + +describe("ColorFilter", () => { + it("should be able to render", () => { + renderingPass("ColorFilterPass", new ColorFilterShaderPass()); + }); +}); + +describe("ColorFilter.accessor", () => { + let pass: ColorFilterShaderPass; + + beforeEach(() => { + pass = new ColorFilterShaderPass(); + }); + + test("h getter and setter", () => { + pass.h = 0.5; + expect(pass.h).toBe(0.5); + }); + + test("multiS getter and setter", () => { + pass.multiS = 0.5; + expect(pass.multiS).toBe(0.5); + }); + + test("multiB getter and setter", () => { + pass.multiB = 0.5; + expect(pass.multiB).toBe(0.5); + }); + + test("addS getter and setter", () => { + pass.addS = 0.5; + expect(pass.addS).toBe(0.5); + }); + + test("addB getter and setter", () => { + pass.addB = 0.5; + expect(pass.addB).toBe(0.5); + }); +}); diff --git a/__test__/postprocess/PassRender.ts b/__test__/postprocess/PassRender.ts new file mode 100644 index 0000000..b17c268 --- /dev/null +++ b/__test__/postprocess/PassRender.ts @@ -0,0 +1,16 @@ +import { expect, vi } from "vitest"; +import { PostProcessRenderer, PostProcessShaderPass } from "../../src/index.js"; +import { generateScene } from "./SceneGenerator.js"; + +export const renderingPass = (message: string, pass: PostProcessShaderPass) => { + const { scene, camera, webGLRenderer } = generateScene(); + const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); + + const composer = renderer.createScreenRenderingComposer([pass]); + composer.onAfterRender = vi.fn(); + composer.onBeforeRender = vi.fn(); + + renderer.render(0); + expect(composer.onAfterRender, message).toBeCalled(); + expect(composer.onBeforeRender, message).toBeCalled(); +}; diff --git a/__test__/postprocess/PostProcessRenderer.spec.ts b/__test__/postprocess/PostProcessRenderer.spec.ts index b95bdc4..cf00275 100644 --- a/__test__/postprocess/PostProcessRenderer.spec.ts +++ b/__test__/postprocess/PostProcessRenderer.spec.ts @@ -1,30 +1,16 @@ import { describe, it, expect, vi } from "vitest"; import { FXAAShaderPass, PostProcessRenderer } from "../../src/index.js"; -import { PerspectiveCamera, Scene, WebGLRenderer } from "three"; +import { generateScene } from "./SceneGenerator.js"; describe("PostProcessRenderer", () => { - const generateWebGLRenderer = () => { - const renderer = new WebGLRenderer(); - return renderer; - }; - - const generateScene = () => { - const scene = new Scene(); - const camera = new PerspectiveCamera(75, 1, 0.1, 1000); - return { scene, camera }; - }; - it("should be able to create an instance", () => { - const { scene, camera } = generateScene(); - const webGLRenderer = generateWebGLRenderer(); + const { scene, camera, webGLRenderer } = generateScene(); const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); - expect(renderer).toBeInstanceOf(PostProcessRenderer); }); it("should be able to add composer", () => { - const { scene, camera } = generateScene(); - const webGLRenderer = generateWebGLRenderer(); + const { scene, camera, webGLRenderer } = generateScene(); const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); const pass = new FXAAShaderPass(); @@ -33,8 +19,7 @@ describe("PostProcessRenderer", () => { }); it("should be able to resize renderer", () => { - const { scene, camera } = generateScene(); - const webGLRenderer = generateWebGLRenderer(); + const { scene, camera, webGLRenderer } = generateScene(); const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); renderer.setSize(100, 200); @@ -43,8 +28,7 @@ describe("PostProcessRenderer", () => { }); it("should be able to resize composers", () => { - const { scene, camera } = generateScene(); - const webGLRenderer = generateWebGLRenderer(); + const { scene, camera, webGLRenderer } = generateScene(); const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); const pass = new FXAAShaderPass(); @@ -56,8 +40,7 @@ describe("PostProcessRenderer", () => { }); it("should be able to render", () => { - const { scene, camera } = generateScene(); - const webGLRenderer = generateWebGLRenderer(); + const { scene, camera, webGLRenderer } = generateScene(); const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); const pass = new FXAAShaderPass(); diff --git a/__test__/postprocess/SceneGenerator.ts b/__test__/postprocess/SceneGenerator.ts new file mode 100644 index 0000000..8755f30 --- /dev/null +++ b/__test__/postprocess/SceneGenerator.ts @@ -0,0 +1,13 @@ +import { PerspectiveCamera, Scene, WebGLRenderer } from "three"; + +const generateWebGLRenderer = (): WebGLRenderer => { + const renderer = new WebGLRenderer(); + return renderer; +}; + +export const generateScene = () => { + const scene = new Scene(); + const camera = new PerspectiveCamera(75, 1, 0.1, 1000); + const webGLRenderer = generateWebGLRenderer(); + return { scene, camera, webGLRenderer }; +}; From ac3cb9c8fed8ab57c967abb565401ff6dfc024f9 Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Wed, 26 Jun 2024 16:03:58 +0900 Subject: [PATCH 2/4] add : rendering test --- __test__/postprocess/PassRender.ts | 8 ++++++++ __test__/postprocess/PostProcessShaderPass.spec.ts | 4 +++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/__test__/postprocess/PassRender.ts b/__test__/postprocess/PassRender.ts index b17c268..dc64f50 100644 --- a/__test__/postprocess/PassRender.ts +++ b/__test__/postprocess/PassRender.ts @@ -10,7 +10,15 @@ export const renderingPass = (message: string, pass: PostProcessShaderPass) => { composer.onAfterRender = vi.fn(); composer.onBeforeRender = vi.fn(); + const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {}); + renderer.render(0); expect(composer.onAfterRender, message).toBeCalled(); expect(composer.onBeforeRender, message).toBeCalled(); + expect( + errorSpy, + message + " : The compilation of the fragmentShader", + ).not.toBeCalled(); + + errorSpy.mockRestore(); }; diff --git a/__test__/postprocess/PostProcessShaderPass.spec.ts b/__test__/postprocess/PostProcessShaderPass.spec.ts index a324a74..6699ef1 100644 --- a/__test__/postprocess/PostProcessShaderPass.spec.ts +++ b/__test__/postprocess/PostProcessShaderPass.spec.ts @@ -4,7 +4,9 @@ import { Texture } from "three"; describe("PostProcessShaderPass", () => { it("should correctly instantiate PostProcessShaderPass with default properties", () => { - const pass = new PostProcessShaderPass(new PostProcessShader()); + const shader = new PostProcessShader(); + shader.fragmentShader = ""; + const pass = new PostProcessShaderPass(shader); expect(pass).toBeInstanceOf(PostProcessShaderPass); expect(pass.uniforms).toBeDefined(); From 02368edd8b261f16eb39a9adb8106305d64639bc Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Wed, 26 Jun 2024 17:24:57 +0900 Subject: [PATCH 3/4] add : unit test --- .../postprocess/BloomEffectComposer.spec.ts | 57 +++++++++++++++++++ .../ChromaticAberrationShaderPass.spec.ts | 35 ++++++++++++ .../DisplacementMapShaderPass.spec.ts | 27 +++++++++ __test__/postprocess/MixShaderPass.spec.ts | 15 +++++ .../postprocess/MonotoneShaderPass.spec.ts | 29 ++++++++++ .../PeripheralLightShaderPass.spec.ts | 39 +++++++++++++ 6 files changed, 202 insertions(+) create mode 100644 __test__/postprocess/BloomEffectComposer.spec.ts create mode 100644 __test__/postprocess/ChromaticAberrationShaderPass.spec.ts create mode 100644 __test__/postprocess/DisplacementMapShaderPass.spec.ts create mode 100644 __test__/postprocess/MixShaderPass.spec.ts create mode 100644 __test__/postprocess/MonotoneShaderPass.spec.ts create mode 100644 __test__/postprocess/PeripheralLightShaderPass.spec.ts diff --git a/__test__/postprocess/BloomEffectComposer.spec.ts b/__test__/postprocess/BloomEffectComposer.spec.ts new file mode 100644 index 0000000..fffcb46 --- /dev/null +++ b/__test__/postprocess/BloomEffectComposer.spec.ts @@ -0,0 +1,57 @@ +import { beforeEach, describe, expect, it, test, vi } from "vitest"; +import { renderingPass } from "./PassRender.js"; +import { + BloomEffectComposer, + MixShaderPass, + PostProcessRenderer, +} from "../../src/index.js"; +import { generateScene } from "./SceneGenerator.js"; +import { RenderPass } from "three/examples/jsm/Addons.js"; +import { BoxGeometry, Mesh, MeshBasicMaterial, MeshPhongMaterial } from "three"; + +describe("BloomEffectComposer", () => { + it("should be able to render", () => { + const { scene, camera, webGLRenderer } = generateScene(); + const renderer = new PostProcessRenderer(scene, camera, webGLRenderer); + const renderPass = new RenderPass(scene, camera); + const bloom = new BloomEffectComposer(scene, webGLRenderer, { + renderPass, + }); + + const mixPass = new MixShaderPass(bloom.result); + + renderer.composers.push(bloom); + const composer = renderer.createScreenRenderingComposer( + [mixPass], + renderPass, + ); + + const mesh = new Mesh(new BoxGeometry(1, 1, 1), new MeshPhongMaterial()); + const meshWithArray = new Mesh(new BoxGeometry(1, 1, 1), [ + new MeshBasicMaterial(), + new MeshBasicMaterial(), + new MeshBasicMaterial(), + new MeshBasicMaterial(), + new MeshBasicMaterial(), + new MeshBasicMaterial(), + ]); + scene.add(mesh, meshWithArray); + + composer.onAfterRender = vi.fn(); + composer.onBeforeRender = vi.fn(); + const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {}); + const message = "BloomEffectComposer"; + + renderer.render(0); + renderer.render(1000); + + expect(composer.onAfterRender, message).toBeCalled(); + expect(composer.onBeforeRender, message).toBeCalled(); + expect( + errorSpy, + message + " : The compilation of the fragmentShader", + ).not.toBeCalled(); + + errorSpy.mockRestore(); + }); +}); diff --git a/__test__/postprocess/ChromaticAberrationShaderPass.spec.ts b/__test__/postprocess/ChromaticAberrationShaderPass.spec.ts new file mode 100644 index 0000000..5675dc0 --- /dev/null +++ b/__test__/postprocess/ChromaticAberrationShaderPass.spec.ts @@ -0,0 +1,35 @@ +import { beforeEach, describe, expect, it, test } from "vitest"; +import { renderingPass } from "./PassRender.js"; +import { ChromaticAberrationShaderPass } from "../../src/index.js"; + +describe("ChromaticAberrationShaderPass", () => { + it("should be able to render", () => { + renderingPass( + "ChromaticAberrationShaderPass", + new ChromaticAberrationShaderPass(), + ); + }); +}); + +describe("ChromaticAberrationShaderPass.accessor", () => { + let pass: ChromaticAberrationShaderPass; + + beforeEach(() => { + pass = new ChromaticAberrationShaderPass(); + }); + + test("rate getter and setter", () => { + pass.rate = 0.5; + expect(pass.rate).toBe(0.5); + }); + + test("radiusInner getter and setter", () => { + pass.radiusInner = 0.5; + expect(pass.radiusInner).toBe(0.5); + }); + + test("radiusOuter getter and setter", () => { + pass.radiusOuter = 0.5; + expect(pass.radiusOuter).toBe(0.5); + }); +}); diff --git a/__test__/postprocess/DisplacementMapShaderPass.spec.ts b/__test__/postprocess/DisplacementMapShaderPass.spec.ts new file mode 100644 index 0000000..12471fb --- /dev/null +++ b/__test__/postprocess/DisplacementMapShaderPass.spec.ts @@ -0,0 +1,27 @@ +import { beforeEach, describe, expect, it, test } from "vitest"; +import { renderingPass } from "./PassRender.js"; +import { DisplacementMapShaderPass } from "../../src/index.js"; + +describe("DisplacementMapShaderPass", () => { + it("should be able to render", () => { + renderingPass("DisplacementMapShaderPass", new DisplacementMapShaderPass()); + }); +}); + +describe("DisplacementMapShaderPass.accessor", () => { + let pass: DisplacementMapShaderPass; + + beforeEach(() => { + pass = new DisplacementMapShaderPass(); + }); + + test("strengthX getter and setter", () => { + pass.strengthX = 0.5; + expect(pass.strengthX).toBe(0.5); + }); + + test("strengthY getter and setter", () => { + pass.strengthY = 0.5; + expect(pass.strengthY).toBe(0.5); + }); +}); diff --git a/__test__/postprocess/MixShaderPass.spec.ts b/__test__/postprocess/MixShaderPass.spec.ts new file mode 100644 index 0000000..bd36c35 --- /dev/null +++ b/__test__/postprocess/MixShaderPass.spec.ts @@ -0,0 +1,15 @@ +import { Texture } from "three"; +import { describe, expect, it } from "vitest"; +import { MixShaderPass } from "../../src/index.js"; +import { renderingPass } from "./PassRender.js"; + +describe("MixShaderPass", () => { + it("should be able to render", () => { + const texture = new Texture(); + const pass = new MixShaderPass(texture); + + renderingPass("MixShaderPass", pass); + + expect(texture).toBe(pass.mixTexture); + }); +}); diff --git a/__test__/postprocess/MonotoneShaderPass.spec.ts b/__test__/postprocess/MonotoneShaderPass.spec.ts new file mode 100644 index 0000000..adfbed4 --- /dev/null +++ b/__test__/postprocess/MonotoneShaderPass.spec.ts @@ -0,0 +1,29 @@ +import { beforeEach, describe, expect, it, test } from "vitest"; +import { renderingPass } from "./PassRender.js"; +import { MonotoneShaderPass } from "../../src/index.js"; +import { Color } from "three"; + +describe("MonotoneShaderPass", () => { + it("should be able to render", () => { + renderingPass("MonotoneShaderPass", new MonotoneShaderPass()); + }); +}); + +describe("MonotoneShaderPass.accessor", () => { + let pass: MonotoneShaderPass; + + beforeEach(() => { + pass = new MonotoneShaderPass(); + }); + + test("strength getter and setter", () => { + pass.strength = 0.5; + expect(pass.strength).toBe(0.5); + }); + + test("color getter and setter", () => { + const color = new Color(0x123456); + pass.color = color; + expect(pass.color.getHex()).toBe(color.getHex()); + }); +}); diff --git a/__test__/postprocess/PeripheralLightShaderPass.spec.ts b/__test__/postprocess/PeripheralLightShaderPass.spec.ts new file mode 100644 index 0000000..f322655 --- /dev/null +++ b/__test__/postprocess/PeripheralLightShaderPass.spec.ts @@ -0,0 +1,39 @@ +import { beforeEach, describe, expect, it, test } from "vitest"; +import { PeripheralLightShaderPass } from "../../src/index.js"; +import { renderingPass } from "./PassRender.js"; +import { Color } from "three"; + +describe("PeripheralLightShaderPass", () => { + it("should be able to render", () => { + renderingPass("PeripheralLightShaderPass", new PeripheralLightShaderPass()); + }); +}); + +describe("PeripheralLightShaderPass.accessor", () => { + let pass: PeripheralLightShaderPass; + + beforeEach(() => { + pass = new PeripheralLightShaderPass(); + }); + + test("rate getter and setter", () => { + pass.rate = 0.5; + expect(pass.rate).toBe(0.5); + }); + + test("radiusInner getter and setter", () => { + pass.radiusInner = 0.5; + expect(pass.radiusInner).toBe(0.5); + }); + + test("radiusOuter getter and setter", () => { + pass.radiusOuter = 0.5; + expect(pass.radiusOuter).toBe(0.5); + }); + + test("color getter and setter", () => { + const color = new Color(0x123456); + pass.color = color; + expect(pass.color.getHex()).toBe(color.getHex()); + }); +}); From bebe515d19fa0c3669559c592267fad5e972ebe7 Mon Sep 17 00:00:00 2001 From: MasatoMakino Date: Wed, 26 Jun 2024 17:30:29 +0900 Subject: [PATCH 4/4] add : unit test --- __test__/postprocess/DisplacementMapShaderPass.spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/__test__/postprocess/DisplacementMapShaderPass.spec.ts b/__test__/postprocess/DisplacementMapShaderPass.spec.ts index 12471fb..96ff97b 100644 --- a/__test__/postprocess/DisplacementMapShaderPass.spec.ts +++ b/__test__/postprocess/DisplacementMapShaderPass.spec.ts @@ -24,4 +24,8 @@ describe("DisplacementMapShaderPass.accessor", () => { pass.strengthY = 0.5; expect(pass.strengthY).toBe(0.5); }); + + test("map getter and setter", () => { + expect(pass.map).toBeNull(); + }); });