diff --git a/package.json b/package.json index 86d433e7..9abdd142 100644 --- a/package.json +++ b/package.json @@ -26,16 +26,25 @@ "exports": { "./three": { "types": "./dist/three.d.ts", - "import": "./dist/three.js" + "default": "./dist/three.js" }, "./pmndrs": { "types": "./dist/pmndrs.d.ts", - "import": "./dist/pmndrs.js" + "default": "./dist/pmndrs.js" }, "./*": "./*" }, + "typesVersions": { + "*": { + "three": [ + "./dist/three.d.ts" + ], + "pmndrs": [ + "./dist/pmndrs.d.ts" + ] + } + }, "files": [ - "*.d.ts", "dist" ], "publishConfig": { @@ -44,7 +53,7 @@ "scripts": { "dev": "cd playground && npm run dev", "playground": "cd playground && npm run dev", - "build": "vite build", + "build": "vite build && node ./scripts/postbuild.mjs", "preview": "vite preview", "release": "release-it", "lint": "eslint .", diff --git a/playground-nuxt/nuxt.config.ts b/playground-nuxt/nuxt.config.ts index 6d126026..2849cdd6 100644 --- a/playground-nuxt/nuxt.config.ts +++ b/playground-nuxt/nuxt.config.ts @@ -6,6 +6,16 @@ export default defineNuxtConfig({ modules: [ '@tresjs/nuxt', ], + typescript: { + tsConfig: { + compilerOptions: { + paths: { + '@tresjs/post-processing/pmndrs': ['../../src/core/pmndrs'], + '@tresjs/post-processing/three': ['../../src/core/three'], + }, + }, + }, + }, vite: { resolve: { alias: { diff --git a/playground-nuxt/package.json b/playground-nuxt/package.json index b37afec6..a7073494 100644 --- a/playground-nuxt/package.json +++ b/playground-nuxt/package.json @@ -12,7 +12,7 @@ "dependencies": { "@tresjs/cientos": "^4.0.3", "@tresjs/nuxt": "^3.0.7", - "@tresjs/post-processing": "^0.7.1", + "@tresjs/post-processing": "workspace:*", "@types/three": "^0.169.0" }, "devDependencies": { diff --git a/playground-nuxt/pages/index.vue b/playground-nuxt/pages/index.vue index 58bb6e51..8254d98f 100644 --- a/playground-nuxt/pages/index.vue +++ b/playground-nuxt/pages/index.vue @@ -1,5 +1,5 @@ - - diff --git a/src/core/pmndrs/BloomPmndrs.vue b/src/core/pmndrs/BloomPmndrs.vue new file mode 100644 index 00000000..ef02b932 --- /dev/null +++ b/src/core/pmndrs/BloomPmndrs.vue @@ -0,0 +1,29 @@ + diff --git a/src/core/pmndrs/DepthOfField.vue b/src/core/pmndrs/DepthOfField.vue deleted file mode 100644 index 3c26f4b3..00000000 --- a/src/core/pmndrs/DepthOfField.vue +++ /dev/null @@ -1,67 +0,0 @@ - - - diff --git a/src/core/pmndrs/DepthOfFieldPmndrs.vue b/src/core/pmndrs/DepthOfFieldPmndrs.vue new file mode 100644 index 00000000..ea6e9467 --- /dev/null +++ b/src/core/pmndrs/DepthOfFieldPmndrs.vue @@ -0,0 +1,29 @@ + diff --git a/src/core/pmndrs/EffectComposer.vue b/src/core/pmndrs/EffectComposerPmndrs.vue similarity index 86% rename from src/core/pmndrs/EffectComposer.vue rename to src/core/pmndrs/EffectComposerPmndrs.vue index ece799af..c389314a 100644 --- a/src/core/pmndrs/EffectComposer.vue +++ b/src/core/pmndrs/EffectComposerPmndrs.vue @@ -1,31 +1,17 @@ - - - - - diff --git a/src/core/pmndrs/GlitchPmndrs.vue b/src/core/pmndrs/GlitchPmndrs.vue new file mode 100644 index 00000000..082c304b --- /dev/null +++ b/src/core/pmndrs/GlitchPmndrs.vue @@ -0,0 +1,37 @@ + diff --git a/src/core/pmndrs/Noise.vue b/src/core/pmndrs/Noise.vue deleted file mode 100644 index a0a626ad..00000000 --- a/src/core/pmndrs/Noise.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/src/core/pmndrs/NoisePmndrs.vue b/src/core/pmndrs/NoisePmndrs.vue new file mode 100644 index 00000000..020e0edc --- /dev/null +++ b/src/core/pmndrs/NoisePmndrs.vue @@ -0,0 +1,25 @@ + diff --git a/src/core/pmndrs/Outline.vue b/src/core/pmndrs/OutlinePmndrs.vue similarity index 68% rename from src/core/pmndrs/Outline.vue rename to src/core/pmndrs/OutlinePmndrs.vue index 77a3ae10..b68ccd59 100644 --- a/src/core/pmndrs/Outline.vue +++ b/src/core/pmndrs/OutlinePmndrs.vue @@ -1,57 +1,14 @@ - - diff --git a/src/core/pmndrs/PixelationPmndrs.vue b/src/core/pmndrs/PixelationPmndrs.vue new file mode 100644 index 00000000..665c9edb --- /dev/null +++ b/src/core/pmndrs/PixelationPmndrs.vue @@ -0,0 +1,17 @@ + diff --git a/src/core/pmndrs/Vignette.vue b/src/core/pmndrs/Vignette.vue deleted file mode 100644 index 0016fe0c..00000000 --- a/src/core/pmndrs/Vignette.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/src/core/pmndrs/VignettePmndrs.vue b/src/core/pmndrs/VignettePmndrs.vue new file mode 100644 index 00000000..15f9b2f4 --- /dev/null +++ b/src/core/pmndrs/VignettePmndrs.vue @@ -0,0 +1,23 @@ + diff --git a/src/core/pmndrs/composables/useEffect.ts b/src/core/pmndrs/composables/useEffectPmndrs.ts similarity index 92% rename from src/core/pmndrs/composables/useEffect.ts rename to src/core/pmndrs/composables/useEffectPmndrs.ts index 83e1f3cd..b3692cb6 100644 --- a/src/core/pmndrs/composables/useEffect.ts +++ b/src/core/pmndrs/composables/useEffectPmndrs.ts @@ -3,9 +3,9 @@ import type { Reactive, ShallowRef } from 'vue' import { useTresContext } from '@tresjs/core' import { EffectPass } from 'postprocessing' import { inject, nextTick, onUnmounted, shallowRef, watch, watchEffect } from 'vue' -import { effectComposerInjectionKey } from '../EffectComposer.vue' +import { effectComposerInjectionKey } from '../helper.js' -export const useEffect = ( +export const useEffectPmndrs = ( newEffectFunction: () => T, passDependencies: Reactive, ): { diff --git a/src/core/pmndrs/helper.ts b/src/core/pmndrs/helper.ts new file mode 100644 index 00000000..e5d566aa --- /dev/null +++ b/src/core/pmndrs/helper.ts @@ -0,0 +1,4 @@ +import type { InjectionKey, ShallowRef } from 'vue' +import type { EffectComposer } from 'postprocessing' + +export const effectComposerInjectionKey: InjectionKey> = Symbol('effectComposer') diff --git a/src/core/pmndrs/index.ts b/src/core/pmndrs/index.ts index 79891ddd..658ea25b 100644 --- a/src/core/pmndrs/index.ts +++ b/src/core/pmndrs/index.ts @@ -1,32 +1,21 @@ -/* eslint-disable perfectionist/sort-named-exports */ +export { useEffectPmndrs } from './composables/useEffectPmndrs.js' +export type { + BloomPmndrsProps, + DepthOfFieldPmndrsProps, + EffectComposerPmndrsProps, + GlitchPmndrsProps, + NoisePmndrsProps, + OutlinePmndrsProps, + PixelationPmndrsProps, + VignettePmndrsProps, +} from './types.js' -import Bloom, { type BloomProps } from './Bloom.vue' -import { useEffect } from './composables/useEffect' -import DepthOfField, { type DepthOfFieldProps } from './DepthOfField.vue' -import EffectComposer, { type EffectComposerProps } from './EffectComposer.vue' -import Glitch, { type GlitchProps } from './Glitch.vue' -import Noise, { type NoiseProps } from './Noise.vue' -import Outline, { type OutlineProps } from './Outline.vue' -import Pixelation, { type PixelationProps } from './Pixelation.vue' -import Vignette, { type VignetteProps } from './Vignette.vue' - -export { - Bloom, - DepthOfField, - EffectComposer, - Glitch, - Noise, - Outline, - Pixelation, - useEffect, - Vignette, - - BloomProps, - DepthOfFieldProps, - EffectComposerProps, - GlitchProps, - NoiseProps, - OutlineProps, - PixelationProps, - VignetteProps, -} +// eslint-disable-next-line perfectionist/sort-exports +export { default as BloomPmndrs } from './BloomPmndrs.vue' +export { default as DepthOfFieldPmndrs } from './DepthOfFieldPmndrs.vue' +export { default as EffectComposerPmndrs } from './EffectComposerPmndrs.vue' +export { default as GlitchPmndrs } from './GlitchPmndrs.vue' +export { default as NoisePmndrs } from './NoisePmndrs.vue' +export { default as OutlinePmndrs } from './OutlinePmndrs.vue' +export { default as PixelationPmndrs } from './PixelationPmndrs.vue' +export { default as VignettePmndrs } from './VignettePmndrs.vue' diff --git a/src/core/pmndrs/types.ts b/src/core/pmndrs/types.ts new file mode 100644 index 00000000..df125e50 --- /dev/null +++ b/src/core/pmndrs/types.ts @@ -0,0 +1,216 @@ +import type { BlendFunction, GlitchMode, KernelSize, VignetteTechnique } from 'postprocessing' +import type { Object3D, Texture, Vector2 } from 'three' +import type { TresColor } from '@tresjs/core' + +export interface EffectComposerPmndrsProps { + enabled?: boolean + depthBuffer?: boolean + disableNormalPass?: boolean + stencilBuffer?: boolean + resolutionScale?: number + autoClear?: boolean + multisampling?: number + frameBufferType?: number +} + +export interface DepthOfFieldPmndrsProps { + /** + * The blend function of this effect. This prop is not reactive. + */ + blendFunction?: BlendFunction + + /** + * The focus distance in world units. + */ + worldFocusDistance?: number + + /** + * The focus range in world units. + */ + worldFocusRange?: number + + /** + * The normalized focus distance. Range is [0.0, 1.0]. + */ + focusDistance?: number + + /** + * The focus range. Range is [0.0, 1.0]. + */ + focusRange?: number + + /** + * The scale of the bokeh blur. + */ + bokehScale?: number + + resolutionScale?: number + resolutionX?: number + resolutionY?: number +} + +export interface BloomPmndrsProps { + /** + * The blend function of this effect. This prop is not reactive. + * @default BlendFunction.SCREEN + * @type {BlendFunction} + * @memberof BloomPmndrsProps + */ + blendFunction?: BlendFunction + /** + * The intensity of the bloom effect. + * + * @default 1 + * @type {number} + * @memberof BloomPmndrsProps + */ + intensity?: number + /** + * The kernel size. + * + * @default KernelSize.LARGE + * + * @type {KernelSize} + * @memberof BloomPmndrsProps + */ + kernelSize?: KernelSize + /** + * The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. + * + * @default 0.9 + * + * @type {number} + * @memberof BloomPmndrsProps + */ + luminanceThreshold?: number + /** + * Controls the smoothness of the luminance threshold. Range is [0, 1]. + * + * @default 0.025 + * + * @type {number} + * @memberof BloomPmndrsProps + */ + luminanceSmoothing?: number + /** + * Enables mip map blur. + * + * @default false + * + * @type {boolean} + * @memberof BloomPmndrsProps + */ + mipmapBlur?: boolean +} + +export interface GlitchPmndrsProps { + blendFunction?: BlendFunction + /** + * The minimum and maximum delay between glitch activations in seconds. + */ + delay?: Vector2 + /** + * The minimum and maximum duration of a glitch in seconds. + */ + duration?: Vector2 + /** + * The strength of weak and strong glitches. + */ + strength?: Vector2 + /** + * The glitch mode. Can be DISABLED | SPORADIC | CONSTANT_MILD | CONSTANT_WILD. + */ + mode?: GlitchMode + /** + * Turn the effect on and off. + */ + active?: boolean + /** + * + * The threshold for strong glitches. + */ + ratio?: number + /** + * The scale of the blocky glitch columns. + */ + columns?: number + /** + * A chromatic aberration offset. If provided, the glitch effect will influence this offset. + */ + chromaticAberrationOffset?: Vector2 + /** + * A perturbation map. If none is provided, a noise texture will be created. + */ + perturbationMap?: Texture + /** + * The size of the generated noise map. Will be ignored if a perturbation map is provided. + */ + dtSize?: number +} + +export interface NoisePmndrsProps { + /** + * Whether the noise should be multiplied with the input color. + */ + premultiply?: boolean + blendFunction?: BlendFunction +} + +export interface OutlinePmndrsProps { + /** + * The objects in the scene which should have an outline. + */ + outlinedObjects: Object3D[] + + blur?: boolean + + /** + * Whether occluded parts of selected objects should be visible + */ + xRay?: boolean + + /** + * The blur kernel size. Must be used with blur being true. + */ + kernelSize?: KernelSize + + /** + * The pulse speed. A value of zero disables the pulse effect. + */ + pulseSpeed?: number + resolutionX?: number + resolutionY?: number + edgeStrength?: number + patternScale?: number + + /** + * The number of samples used for multisample antialiasing. Requires WebGL 2. + */ + multisampling?: number + + /** + * The blend function. Use `BlendFunction.ALPHA` for dark outlines. + */ + blendFunction?: BlendFunction + patternTexture?: Texture + resolutionScale?: number + hiddenEdgeColor?: TresColor + visibleEdgeColor?: TresColor +} + +export interface PixelationPmndrsProps { + /** + * The pixel granularity. + */ + granularity?: number +} + +export interface VignettePmndrsProps { + /** + * Whether the noise should be multiplied with the input color. + */ + technique?: VignetteTechnique + blendFunction?: BlendFunction + offset: number + darkness: number +} diff --git a/src/core/three/EffectComposer.vue b/src/core/three/EffectComposer.vue index 162dab9f..d91bf8b6 100644 --- a/src/core/three/EffectComposer.vue +++ b/src/core/three/EffectComposer.vue @@ -1,19 +1,12 @@ - +import { onUnmounted, provide, type ShallowRef, shallowRef, watchEffect } from 'vue' +import { effectComposerInjectionKey } from './helper.js' +import type { EffectComposerProps } from './types.js' - +import { makePropWatchers } from '../../util/prop.js' +import { useEffect } from './composables/useEffect.js' +import type { GlitchProps } from './types.js' - - - +import { makePropWatchers } from '../../util/prop.js' +import { useEffect } from './composables/useEffect.js' +import type { PixelationProps } from './types.js' - +import { useEffect } from './composables/useEffect.js' +import type { SMAAProps } from './types.js' - +import { useEffect } from './composables/useEffect.js' +import type { UnrealBloomProps } from './types.js' -