diff --git a/filters/adjustment/src/AdjustmentFilter.ts b/filters/adjustment/src/AdjustmentFilter.ts index f77906e3b..794032d92 100644 --- a/filters/adjustment/src/AdjustmentFilter.ts +++ b/filters/adjustment/src/AdjustmentFilter.ts @@ -55,7 +55,7 @@ export interface AdjustmentFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/adjustment.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-adjustment|@pixi/filter-adjustment} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ @@ -184,8 +184,5 @@ export class AdjustmentFilter extends Filter * @default 1 */ get alpha(): number { return this.resources.adjustmentUniforms.uniforms.uColor[3]; } - set alpha(value: number) - { - this.resources.adjustmentUniforms.uniforms.uColor[3] = value; console.log(this.resources, this._uniformBindMap); - } + set alpha(value: number) { this.resources.adjustmentUniforms.uniforms.uColor[3] = value; } } diff --git a/filters/adjustment/src/adjustment.frag b/filters/adjustment/src/adjustment.frag index 5c465f494..cebd0fb5f 100644 --- a/filters/adjustment/src/adjustment.frag +++ b/filters/adjustment/src/adjustment.frag @@ -1,7 +1,7 @@ in vec2 vTextureCoord; out vec4 finalColor; -uniform sampler2D uTexture; +uniform sampler2D uSampler; uniform float uGamma; uniform float uContrast; uniform float uSaturation; @@ -10,7 +10,7 @@ uniform vec4 uColor; void main() { - vec4 c = texture(uTexture, vTextureCoord); + vec4 c = texture(uSampler, vTextureCoord); if (c.a > 0.0) { c.rgb /= c.a; diff --git a/filters/adjustment/src/adjustment.wgsl b/filters/adjustment/src/adjustment.wgsl index b37a339bc..17341ca17 100644 --- a/filters/adjustment/src/adjustment.wgsl +++ b/filters/adjustment/src/adjustment.wgsl @@ -16,7 +16,7 @@ struct AdjustmentUniforms { }; @group(0) @binding(0) var gfu: GlobalFilterUniforms; -@group(0) @binding(1) var uTexture: texture_2d; +@group(0) @binding(1) var uSampler: texture_2d; @group(1) @binding(0) var adjustmentUniforms : AdjustmentUniforms; @@ -65,7 +65,7 @@ fn mainFragment( @location(0) uv: vec2, @builtin(position) position: vec4 ) -> @location(0) vec4 { - var sample = textureSample(uTexture, uSampler, uv); + var sample = textureSample(uSampler, uSampler, uv); let color = adjustmentUniforms.uColor; if (sample.a > 0.0) diff --git a/filters/advanced-bloom/src/AdvancedBloomFilter.ts b/filters/advanced-bloom/src/AdvancedBloomFilter.ts index 6d6d11c91..3d74ddfa6 100644 --- a/filters/advanced-bloom/src/AdvancedBloomFilter.ts +++ b/filters/advanced-bloom/src/AdvancedBloomFilter.ts @@ -2,8 +2,8 @@ import { ExtractBrightnessFilter } from './ExtractBrightnessFilter'; import { KawaseBlurFilter } from '@pixi/filter-kawase-blur'; import { vertex } from '@tools/fragments'; import fragment from './advanced-bloom.frag'; -import { Filter } from '@pixi/core'; -import type { FilterSystem, FilterState, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; import type { PixelSizeValue } from '@pixi/filter-kawase-blur'; interface AdvancedBloomFilterOptions @@ -25,11 +25,11 @@ interface AdvancedBloomFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/advanced-bloom.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-advanced-bloom|@pixi/filter-advanced-bloom} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class AdvancedBloomFilter extends Filter +export class AdvancedBloomFilter extends Filter { /** Default construction options. */ public static readonly defaults: AdvancedBloomFilterOptions = { @@ -64,12 +64,21 @@ class AdvancedBloomFilter extends Filter * @param {number} [options.blur=8] - Sets the strength of the Blur properties simultaneously * @param {number} [options.quality=4] - The quality of the Blur filter. * @param {number[]} [options.kernels=null] - The kernels of the Blur filter. - * @param {number|number[]|PIXI.Point} [options.pixelSize=1] - the pixelSize of the Blur filter. + * @param {number|number[]|Point} [options.pixelSize=1] - the pixelSize of the Blur filter. * @param {number} [options.resolution=1] - The resolution of the Blur filter. */ constructor(options?: Partial) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'advanced-bloom-filter', + }); + + super({ + glProgram, + resources: {}, + }); if (typeof options === 'number') { @@ -93,56 +102,51 @@ class AdvancedBloomFilter extends Filter } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * * @private */ - apply( - filterManager: FilterSystem, - input: RenderTexture, - output: RenderTexture, - clear: CLEAR_MODES, - currentState?: FilterState): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const brightTarget = filterManager.getFilterTexture(); + // const brightTarget = filterManager.getFilterTexture(); - this._extractFilter.apply(filterManager, input, brightTarget, 1, currentState); + // this._extractFilter.apply(filterManager, input, brightTarget, 1, currentState); - const bloomTarget = filterManager.getFilterTexture(); + // const bloomTarget = filterManager.getFilterTexture(); - this._blurFilter.apply(filterManager, brightTarget, bloomTarget, 1); + // this._blurFilter.apply(filterManager, brightTarget, bloomTarget, 1); - this.uniforms.bloomScale = this.bloomScale; - this.uniforms.brightness = this.brightness; - this.uniforms.bloomTexture = bloomTarget; + // this.uniforms.bloomScale = this.bloomScale; + // this.uniforms.brightness = this.brightness; + // this.uniforms.bloomTexture = bloomTarget; - filterManager.applyFilter(this, input, output, clear); + // filterManager.applyFilter(this, input, output, clear); - filterManager.returnFilterTexture(bloomTarget); - filterManager.returnFilterTexture(brightTarget); + // filterManager.returnFilterTexture(bloomTarget); + // filterManager.returnFilterTexture(brightTarget); } /** * The resolution of the filter. * @ignore */ - get resolution(): number - { - return this._resolution; - } - set resolution(value: number) - { - this._resolution = value; - - if (this._extractFilter) - { - this._extractFilter.resolution = value; - } - if (this._blurFilter) - { - this._blurFilter.resolution = value; - } - } + // get resolution(): number + // { + // return this._resolution; + // } + // set resolution(value: number) + // { + // this._resolution = value; + + // if (this._extractFilter) + // { + // this._extractFilter.resolution = value; + // } + // if (this._blurFilter) + // { + // this._blurFilter.resolution = value; + // } + // } /** * Defines how bright a color needs to be to affect bloom. @@ -201,7 +205,7 @@ class AdvancedBloomFilter extends Filter /** * Sets the pixelSize of the Kawase Blur filter * - * @member {number|number[]|PIXI.Point} + * @member {number|number[]|Point} * @default 1 */ get pixelSize(): PixelSizeValue @@ -213,6 +217,3 @@ class AdvancedBloomFilter extends Filter this._blurFilter.pixelSize = value; } } - -export { AdvancedBloomFilter }; -export type { AdvancedBloomFilterOptions }; diff --git a/filters/advanced-bloom/src/ExtractBrightnessFilter.ts b/filters/advanced-bloom/src/ExtractBrightnessFilter.ts index a5a01ca2e..795356ab6 100644 --- a/filters/advanced-bloom/src/ExtractBrightnessFilter.ts +++ b/filters/advanced-bloom/src/ExtractBrightnessFilter.ts @@ -1,22 +1,31 @@ import { vertex } from '@tools/fragments'; import fragment from './extract-brightness.frag'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; /** * Internal filter for AdvancedBloomFilter to get brightness. * @class * @private */ -class ExtractBrightnessFilter extends Filter +export class ExtractBrightnessFilter extends Filter { /** * @param {number} [threshold] - Defines how bright a color needs to be extracted. */ constructor(threshold = 0.5) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'extract-brightness-filter', + }); - this.threshold = threshold; + super({ + glProgram, + resources: {}, + }); + + // this.threshold = threshold; } /** @@ -24,15 +33,12 @@ class ExtractBrightnessFilter extends Filter * * @default 0.5 */ - get threshold(): number - { - return this.uniforms.threshold; - } - set threshold(value: number) - { - this.uniforms.threshold = value; - } + // get threshold(): number + // { + // return this.uniforms.threshold; + // } + // set threshold(value: number) + // { + // this.uniforms.threshold = value; + // } } - -export { ExtractBrightnessFilter }; - diff --git a/filters/ascii/src/AsciiFilter.ts b/filters/ascii/src/AsciiFilter.ts index af830a295..67a41010e 100644 --- a/filters/ascii/src/AsciiFilter.ts +++ b/filters/ascii/src/AsciiFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './ascii.frag'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; // TODO (cengler) - The Y is flipped in this shader for some reason. @@ -12,33 +12,39 @@ import { Filter } from '@pixi/core'; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/ascii.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-ascii|@pixi/filter-ascii} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class AsciiFilter extends Filter +export class AsciiFilter extends Filter { /** * @param {number} [size=8] - Size of the font */ constructor(size = 8) { - super(vertex, fragment); - this.size = size; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'ascii-filter', + }); + + super({ + glProgram, + resources: {}, + }); + // this.size = size; } /** * The pixel size used by the filter. */ - get size(): number - { - return this.uniforms.pixelSize; - } - set size(value: number) - { - this.uniforms.pixelSize = value; - } + // get size(): number + // { + // return this.uniforms.pixelSize; + // } + // set size(value: number) + // { + // this.uniforms.pixelSize = value; + // } } - -export { AsciiFilter }; - diff --git a/filters/bevel/src/BevelFilter.ts b/filters/bevel/src/BevelFilter.ts index 33da30c1b..24fc651dd 100644 --- a/filters/bevel/src/BevelFilter.ts +++ b/filters/bevel/src/BevelFilter.ts @@ -1,8 +1,8 @@ import { vertex } from '@tools/fragments'; import fragment from './bevel.frag'; -import { Filter, DEG_TO_RAD, utils } from '@pixi/core'; +import { Filter, DEG_TO_RAD, GlProgram } from 'pixi.js'; -interface BevelFilterOptions +export interface BevelFilterOptions { rotation: number, thickness: number, @@ -17,11 +17,11 @@ interface BevelFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/bevel.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-bevel|@pixi/filter-bevel} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class BevelFilter extends Filter +export class BevelFilter extends Filter { private _thickness = 2; private _angle = 0; @@ -37,10 +37,19 @@ class BevelFilter extends Filter */ constructor(options?: Partial) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'bevel-filter', + }); - this.uniforms.lightColor = new Float32Array(3); - this.uniforms.shadowColor = new Float32Array(3); + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.lightColor = new Float32Array(3); + // this.uniforms.shadowColor = new Float32Array(3); Object.assign(this, { rotation: 45, @@ -63,8 +72,8 @@ class BevelFilter extends Filter */ private _updateTransform() { - this.uniforms.transformX = this._thickness * Math.cos(this._angle); - this.uniforms.transformY = this._thickness * Math.sin(this._angle); + // this.uniforms.transformX = this._thickness * Math.cos(this._angle); + // this.uniforms.transformY = this._thickness * Math.sin(this._angle); } /** @@ -99,54 +108,51 @@ class BevelFilter extends Filter * Color of the light. * @default 0xffffff */ - get lightColor(): number - { - return utils.rgb2hex(this.uniforms.lightColor); - } - set lightColor(value: number) - { - utils.hex2rgb(value, this.uniforms.lightColor); - } + // get lightColor(): number + // { + // return utils.rgb2hex(this.uniforms.lightColor); + // } + // set lightColor(value: number) + // { + // utils.hex2rgb(value, this.uniforms.lightColor); + // } /** * Alpha of the light. * @default 0.7 */ - get lightAlpha(): number - { - return this.uniforms.lightAlpha; - } - set lightAlpha(value: number) - { - this.uniforms.lightAlpha = value; - } + // get lightAlpha(): number + // { + // return this.uniforms.lightAlpha; + // } + // set lightAlpha(value: number) + // { + // this.uniforms.lightAlpha = value; + // } /** * Color of the shadow. * @default 0x000000 */ - get shadowColor(): number - { - return utils.rgb2hex(this.uniforms.shadowColor); - } - set shadowColor(value: number) - { - utils.hex2rgb(value, this.uniforms.shadowColor); - } + // get shadowColor(): number + // { + // return utils.rgb2hex(this.uniforms.shadowColor); + // } + // set shadowColor(value: number) + // { + // utils.hex2rgb(value, this.uniforms.shadowColor); + // } /** * Alpha of the shadow. * @default 0.7 */ - get shadowAlpha(): number - { - return this.uniforms.shadowAlpha; - } - set shadowAlpha(value: number) - { - this.uniforms.shadowAlpha = value; - } + // get shadowAlpha(): number + // { + // return this.uniforms.shadowAlpha; + // } + // set shadowAlpha(value: number) + // { + // this.uniforms.shadowAlpha = value; + // } } - -export { BevelFilter }; -export type { BevelFilterOptions }; diff --git a/filters/bloom/src/BloomFilter.ts b/filters/bloom/src/BloomFilter.ts index db1c26bfa..9f4696d51 100644 --- a/filters/bloom/src/BloomFilter.ts +++ b/filters/bloom/src/BloomFilter.ts @@ -27,7 +27,7 @@ export interface BloomFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/bloom.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-bloom|@pixi/filter-bloom} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ diff --git a/filters/bulge-pinch/src/BulgePinchFilter.ts b/filters/bulge-pinch/src/BulgePinchFilter.ts index 9393c2a5a..1b76a666b 100644 --- a/filters/bulge-pinch/src/BulgePinchFilter.ts +++ b/filters/bulge-pinch/src/BulgePinchFilter.ts @@ -1,11 +1,11 @@ import { vertex } from '@tools/fragments'; import fragment from './bulgePinch.frag'; -import { Filter } from '@pixi/core'; -import type { Point, Rectangle, FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { Point, FilterSystem, Texture, RenderSurface } from 'pixi.js'; type PointLike = Point | number[]; -interface BulgePinchFilterOptions +export interface BulgePinchFilterOptions { center: PointLike; radius: number; @@ -21,11 +21,11 @@ interface BulgePinchFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/bulge-pinch.gif) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-bulge-pinch|@pixi/filter-bulge-pinch} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class BulgePinchFilter extends Filter +export class BulgePinchFilter extends Filter { /** Default constructor options. */ public static readonly defaults: BulgePinchFilterOptions = { @@ -36,67 +36,73 @@ class BulgePinchFilter extends Filter /** * @param {object} [options] - Options to use for filter. - * @param {PIXI.Point|Array} [options.center=[0,0]] - The x and y coordinates of the center + * @param {Point|Array} [options.center=[0,0]] - The x and y coordinates of the center * of the circle of effect. * @param {number} [options.radius=100] - The radius of the circle of effect. * @param {number} [options.strength=1] - -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge) */ constructor(options?: Partial) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'bulge-pinch-filter', + }); - this.uniforms.dimensions = new Float32Array(2); + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.dimensions = new Float32Array(2); Object.assign(this, BulgePinchFilter.defaults, options); } - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const { width, height } = input.filterFrame as Rectangle; + // const { width, height } = input.filterFrame as Rectangle; - this.uniforms.dimensions[0] = width; - this.uniforms.dimensions[1] = height; - filterManager.applyFilter(this, input, output, clear); + // this.uniforms.dimensions[0] = width; + // this.uniforms.dimensions[1] = height; + // filterManager.applyFilter(this, input, output, clear); } /** * The radius of the circle of effect. */ - get radius(): number - { - return this.uniforms.radius; - } - set radius(value: number) - { - this.uniforms.radius = value; - } + // get radius(): number + // { + // return this.uniforms.radius; + // } + // set radius(value: number) + // { + // this.uniforms.radius = value; + // } /** * The strength of the effect. -1 to 1 (-1 is strong pinch, 0 is no effect, 1 is strong bulge) */ - get strength(): number - { - return this.uniforms.strength; - } - set strength(value: number) - { - this.uniforms.strength = value; - } + // get strength(): number + // { + // return this.uniforms.strength; + // } + // set strength(value: number) + // { + // this.uniforms.strength = value; + // } /** * The x and y coordinates of the center of the circle of effect. * - * @member {PIXI.Point | Array} + * @member {Point | Array} */ - get center(): PointLike - { - return this.uniforms.center; - } - set center(value: PointLike) - { - this.uniforms.center = value; - } + // get center(): PointLike + // { + // return this.uniforms.center; + // } + // set center(value: PointLike) + // { + // this.uniforms.center = value; + // } } - -export { BulgePinchFilter }; -export type { BulgePinchFilterOptions }; diff --git a/filters/color-gradient/src/ColorGradientFilter.ts b/filters/color-gradient/src/ColorGradientFilter.ts index 9026ac53f..526e74226 100644 --- a/filters/color-gradient/src/ColorGradientFilter.ts +++ b/filters/color-gradient/src/ColorGradientFilter.ts @@ -1,6 +1,6 @@ import fragment from './colorGradient.frag'; import vertex from './colorGradient.vert'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; import { parseCssGradient } from './CssGradientParser'; import { colorToNormalizedRgba } from './utils'; @@ -39,11 +39,11 @@ function sortColorStops(stops: ColorStop[]): ColorStop[] * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/color-gradient.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-color-gradient|@pixi/filter-color-gradient} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class ColorGradientFilter extends Filter +export class ColorGradientFilter extends Filter { /** Gradient types */ static readonly LINEAR = 0; @@ -92,8 +92,17 @@ class ColorGradientFilter extends Filter throw new Error('ColorGradientFilter requires at least 2 color stops.'); } - super(vertex, fragment); - this.autoFit = false; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'color-gradient-filter', + }); + + super({ + glProgram, + resources: {}, + }); + // this.autoFit = false; Object.assign(this, options_); } @@ -122,10 +131,10 @@ class ColorGradientFilter extends Filter colors[indexStart + B] = color[B]; } - this.uniforms.uColors = colors; - this.uniforms.uOffsets = sortedStops.map((s) => s.offset); - this.uniforms.uAlphas = sortedStops.map((s) => s.alpha); - this.uniforms.uNumStops = sortedStops.length; + // this.uniforms.uColors = colors; + // this.uniforms.uOffsets = sortedStops.map((s) => s.offset); + // this.uniforms.uAlphas = sortedStops.map((s) => s.alpha); + // this.uniforms.uNumStops = sortedStops.length; this._stops = sortedStops; } @@ -133,73 +142,71 @@ class ColorGradientFilter extends Filter * The type of gradient * @default ColorGradientFilter.LINEAR */ - set type(value: number) - { - this.uniforms.uType = value; - } + // set type(value: number) + // { + // this.uniforms.uType = value; + // } - get type(): number - { - return this.uniforms.uType; - } + // get type(): number + // { + // return this.uniforms.uType; + // } /** * The angle of the gradient in degrees * @default 90 */ - set angle(value: number) - { - this.uniforms.uAngle = value - ANGLE_OFFSET; - } + // set angle(value: number) + // { + // this.uniforms.uAngle = value - ANGLE_OFFSET; + // } - get angle(): number - { - return this.uniforms.uAngle + ANGLE_OFFSET; - } + // get angle(): number + // { + // return this.uniforms.uAngle + ANGLE_OFFSET; + // } /** * The alpha value of the gradient (0-1) * @default 1 */ - set alpha(value: number) - { - this.uniforms.uAlpha = value; - } + // set alpha(value: number) + // { + // this.uniforms.uAlpha = value; + // } - get alpha(): number - { - return this.uniforms.uAlpha; - } + // get alpha(): number + // { + // return this.uniforms.uAlpha; + // } /** * The maximum number of colors to render (0 = no limit) * @default 0 */ - set maxColors(value: number) - { - this.uniforms.uMaxColors = value; - } + // set maxColors(value: number) + // { + // this.uniforms.uMaxColors = value; + // } - get maxColors(): number - { - return this.uniforms.uMaxColors; - } + // get maxColors(): number + // { + // return this.uniforms.uMaxColors; + // } /** * If true, the gradient will replace the existing color, otherwise it * will be multiplied with it * @default false */ - set replace(value: boolean) - { - this.uniforms.uReplace = value; - } - - get replace(): boolean - { - return this.uniforms.uReplace; - } + // set replace(value: boolean) + // { + // this.uniforms.uReplace = value; + // } + + // get replace(): boolean + // { + // return this.uniforms.uReplace; + // } } -export { ColorGradientFilter }; - diff --git a/filters/color-gradient/src/utils.ts b/filters/color-gradient/src/utils.ts index dd685d607..3be886c28 100644 --- a/filters/color-gradient/src/utils.ts +++ b/filters/color-gradient/src/utils.ts @@ -1,5 +1,4 @@ // utils -import { utils } from '@pixi/core'; import { Color } from './ColorGradientFilter'; import rgba from 'color-rgba'; @@ -10,7 +9,9 @@ export function colorToNormalizedRgba(value: Color): number[] | Float32Array case 'string': return stringToNormalizedRgba(value); case 'number': - return utils.hex2rgb(value); + // TODO: Do conversion + return [0, 0, 0, 1]; + // return hex2rgb(value); default: return value; } diff --git a/filters/color-map/src/ColorMapFilter.ts b/filters/color-map/src/ColorMapFilter.ts index 29c0dfbca..d07ff067c 100644 --- a/filters/color-map/src/ColorMapFilter.ts +++ b/filters/color-map/src/ColorMapFilter.ts @@ -1,7 +1,7 @@ import { vertex } from '@tools/fragments'; import fragment from './color-map.frag'; -import { Filter, Texture, TextureSource, MIPMAP_MODES, SCALE_MODES } from '@pixi/core'; -import type { FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, Texture, TextureSource, GlProgram } from 'pixi.js'; +import type { FilterSystem, RenderSurface } from 'pixi.js'; type ColorMapSource = TextureSource | Texture | null; @@ -10,11 +10,11 @@ type ColorMapSource = TextureSource | Texture | null; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/color-map.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-color-map|@pixi/filter-color-map} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class ColorMapFilter extends Filter +export class ColorMapFilter extends Filter { /** The mix from 0 to 1, where 0 is the original image and 1 is the color mapped image. */ public mix = 1; @@ -24,32 +24,41 @@ class ColorMapFilter extends Filter private _slicePixelSize = 0; private _sliceInnerSize = 0; private _nearest = false; - private _scaleMode: SCALE_MODES | null = null; + // private _scaleMode: SCALE_MODES | null = null; private _colorMap: Texture | null = null; /** - * @param {HTMLImageElement|HTMLCanvasElement|PIXI.BaseTexture|PIXI.Texture} [colorMap] - The + * @param {HTMLImageElement|HTMLCanvasElement|BaseTexture|Texture} [colorMap] - The * colorMap texture of the filter. * @param {boolean} [nearest=false] - Whether use NEAREST for colorMap texture. * @param {number} [mix=1] - The mix from 0 to 1, where 0 is the original image and 1 is the color mapped image. */ constructor(colorMap: ColorMapSource, nearest = false, mix = 1) { - super(vertex, fragment); - - this._scaleMode = null; - this.nearest = nearest; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'color-map-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this._scaleMode = null; + // this.nearest = nearest; this.mix = mix; this.colorMap = colorMap; } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - this.uniforms._mix = this.mix; + // this.uniforms._mix = this.mix; filterManager.applyFilter(this, input, output, clear); } @@ -65,7 +74,7 @@ class ColorMapFilter extends Filter /** * the colorMap texture - * @member {PIXI.Texture} + * @member {Texture} */ get colorMap(): ColorMapSource { @@ -83,20 +92,20 @@ class ColorMapFilter extends Filter } if ((colorMap as Texture)?.baseTexture) { - colorMap.baseTexture.scaleMode = this._scaleMode as SCALE_MODES; - colorMap.baseTexture.mipmap = MIPMAP_MODES.OFF; + // colorMap.baseTexture.scaleMode = this._scaleMode as SCALE_MODES; + // colorMap.baseTexture.mipmap = MIPMAP_MODES.OFF; this._size = colorMap.height; this._sliceSize = 1 / this._size; this._slicePixelSize = this._sliceSize / this._size; this._sliceInnerSize = this._slicePixelSize * (this._size - 1); - this.uniforms._size = this._size; - this.uniforms._sliceSize = this._sliceSize; - this.uniforms._slicePixelSize = this._slicePixelSize; - this.uniforms._sliceInnerSize = this._sliceInnerSize; + // this.uniforms._size = this._size; + // this.uniforms._sliceSize = this._sliceSize; + // this.uniforms._slicePixelSize = this._slicePixelSize; + // this.uniforms._sliceInnerSize = this._sliceInnerSize; - this.uniforms.colorMap = colorMap; + // this.uniforms.colorMap = colorMap; } this._colorMap = colorMap; @@ -105,28 +114,28 @@ class ColorMapFilter extends Filter /** * Whether use NEAREST for colorMap texture. */ - get nearest(): boolean - { - return this._nearest; - } - set nearest(nearest: boolean) - { - this._nearest = nearest; - this._scaleMode = nearest ? SCALE_MODES.NEAREST : SCALE_MODES.LINEAR; + // get nearest(): boolean + // { + // return this._nearest; + // } + // set nearest(nearest: boolean) + // { + // this._nearest = nearest; + // this._scaleMode = nearest ? SCALE_MODES.NEAREST : SCALE_MODES.LINEAR; - const texture = this._colorMap; + // const texture = this._colorMap; - if (texture && texture.baseTexture) - { - texture.baseTexture._glTextures = {}; + // if (texture && texture.baseTexture) + // { + // texture.baseTexture._glTextures = {}; - texture.baseTexture.scaleMode = this._scaleMode; - texture.baseTexture.mipmap = MIPMAP_MODES.OFF; + // texture.baseTexture.scaleMode = this._scaleMode; + // texture.baseTexture.mipmap = MIPMAP_MODES.OFF; - texture._updateID++; - texture.baseTexture.emit('update', texture.baseTexture); - } - } + // texture._updateID++; + // texture.baseTexture.emit('update', texture.baseTexture); + // } + // } /** * If the colorMap is based on canvas , and the content of canvas has changed, @@ -138,7 +147,7 @@ class ColorMapFilter extends Filter if (texture && texture.baseTexture) { - texture._updateID++; + // texture._updateID++; texture.baseTexture.emit('update', texture.baseTexture); this.colorMap = texture; @@ -159,6 +168,3 @@ class ColorMapFilter extends Filter super.destroy(); } } - -export { ColorMapFilter }; - diff --git a/filters/color-overlay/src/ColorOverlayFilter.ts b/filters/color-overlay/src/ColorOverlayFilter.ts index 55b4282c6..d95a4f2d9 100644 --- a/filters/color-overlay/src/ColorOverlayFilter.ts +++ b/filters/color-overlay/src/ColorOverlayFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './colorOverlay.frag'; -import { Filter, utils } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; type Color = number | number[] | Float32Array; @@ -9,7 +9,7 @@ type Color = number | number[] | Float32Array; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/color-overlay.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-color-replace|@pixi/filter-color-replace} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * @@ -22,7 +22,7 @@ type Color = number | number[] | Float32Array; * )]; * */ -class ColorOverlayFilter extends Filter +export class ColorOverlayFilter extends Filter { private _color = 0x0; private _alpha = 1; @@ -33,10 +33,19 @@ class ColorOverlayFilter extends Filter */ constructor(color: Color = 0x000000, alpha = 1) { - super(vertex, fragment); - this.uniforms.color = new Float32Array(3); - this.color = color; - this.alpha = alpha; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'color-overlay-filter', + }); + + super({ + glProgram, + resources: {}, + }); + // this.uniforms.color = new Float32Array(3); + // this.color = color; + // this.alpha = alpha; } /** @@ -44,41 +53,39 @@ class ColorOverlayFilter extends Filter * @member {number|Array|Float32Array} * @default 0x000000 */ - set color(value: Color) - { - const arr = this.uniforms.color; + // set color(value: Color) + // { + // const arr = this.uniforms.color; - if (typeof value === 'number') - { - utils.hex2rgb(value, arr); - this._color = value; - } - else - { - arr[0] = value[0]; - arr[1] = value[1]; - arr[2] = value[2]; - this._color = utils.rgb2hex(arr); - } - } - get color(): Color - { - return this._color; - } + // if (typeof value === 'number') + // { + // utils.hex2rgb(value, arr); + // this._color = value; + // } + // else + // { + // arr[0] = value[0]; + // arr[1] = value[1]; + // arr[2] = value[2]; + // this._color = utils.rgb2hex(arr); + // } + // } + // get color(): Color + // { + // return this._color; + // } /** * The alpha value of the color * @default 0 */ - set alpha(value: number) - { - this.uniforms.alpha = value; - this._alpha = value; - } - get alpha(): number - { - return this._alpha; - } + // set alpha(value: number) + // { + // this.uniforms.alpha = value; + // this._alpha = value; + // } + // get alpha(): number + // { + // return this._alpha; + // } } - -export { ColorOverlayFilter }; diff --git a/filters/color-replace/src/ColorReplaceFilter.ts b/filters/color-replace/src/ColorReplaceFilter.ts index 169c3b8eb..a41b074f2 100644 --- a/filters/color-replace/src/ColorReplaceFilter.ts +++ b/filters/color-replace/src/ColorReplaceFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './colorReplace.frag'; -import { Filter, utils } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; type Color = number | number[] | Float32Array; @@ -10,7 +10,7 @@ type Color = number | number[] | Float32Array; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/color-replace.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-color-replace|@pixi/filter-color-replace} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * @@ -31,7 +31,7 @@ type Color = number | number[] | Float32Array; * someOtherSprite.filters = [new ColorReplaceFilter(0xdcdcdc, 0xe1c8d7, 0.001)]; * */ -class ColorReplaceFilter extends Filter +export class ColorReplaceFilter extends Filter { private _originalColor = 0xff0000; private _newColor = 0x0; @@ -46,12 +46,22 @@ class ColorReplaceFilter extends Filter */ constructor(originalColor: Color = 0xFF0000, newColor: Color = 0x000000, epsilon = 0.4) { - super(vertex, fragment); - this.uniforms.originalColor = new Float32Array(3); - this.uniforms.newColor = new Float32Array(3); - this.originalColor = originalColor; - this.newColor = newColor; - this.epsilon = epsilon; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'color-replace-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.originalColor = new Float32Array(3); + // this.uniforms.newColor = new Float32Array(3); + // this.originalColor = originalColor; + // this.newColor = newColor; + // this.epsilon = epsilon; } /** @@ -59,67 +69,65 @@ class ColorReplaceFilter extends Filter * @member {number|Array|Float32Array} * @default 0xFF0000 */ - set originalColor(value: Color) - { - const arr = this.uniforms.originalColor; + // set originalColor(value: Color) + // { + // const arr = this.uniforms.originalColor; - if (typeof value === 'number') - { - utils.hex2rgb(value, arr); - this._originalColor = value; - } - else - { - arr[0] = value[0]; - arr[1] = value[1]; - arr[2] = value[2]; - this._originalColor = utils.rgb2hex(arr); - } - } - get originalColor(): Color - { - return this._originalColor; - } + // if (typeof value === 'number') + // { + // utils.hex2rgb(value, arr); + // this._originalColor = value; + // } + // else + // { + // arr[0] = value[0]; + // arr[1] = value[1]; + // arr[2] = value[2]; + // this._originalColor = utils.rgb2hex(arr); + // } + // } + // get originalColor(): Color + // { + // return this._originalColor; + // } /** * The resulting color, as a 3 component RGB e.g. [1.0, 0.5, 1.0] * @member {number|Array|Float32Array} * @default 0x000000 */ - set newColor(value: Color) - { - const arr = this.uniforms.newColor; + // set newColor(value: Color) + // { + // const arr = this.uniforms.newColor; - if (typeof value === 'number') - { - utils.hex2rgb(value, arr); - this._newColor = value; - } - else - { - arr[0] = value[0]; - arr[1] = value[1]; - arr[2] = value[2]; - this._newColor = utils.rgb2hex(arr); - } - } - get newColor(): Color - { - return this._newColor; - } + // if (typeof value === 'number') + // { + // utils.hex2rgb(value, arr); + // this._newColor = value; + // } + // else + // { + // arr[0] = value[0]; + // arr[1] = value[1]; + // arr[2] = value[2]; + // this._newColor = utils.rgb2hex(arr); + // } + // } + // get newColor(): Color + // { + // return this._newColor; + // } /** * Tolerance/sensitivity of the floating-point comparison between colors (lower = more exact, higher = more inclusive) * @default 0.4 */ - set epsilon(value: number) - { - this.uniforms.epsilon = value; - } - get epsilon(): number - { - return this.uniforms.epsilon; - } + // set epsilon(value: number) + // { + // this.uniforms.epsilon = value; + // } + // get epsilon(): number + // { + // return this.uniforms.epsilon; + // } } - -export { ColorReplaceFilter }; diff --git a/filters/convolution/src/ConvolutionFilter.ts b/filters/convolution/src/ConvolutionFilter.ts index 7b21f8949..151bc73b9 100644 --- a/filters/convolution/src/ConvolutionFilter.ts +++ b/filters/convolution/src/ConvolutionFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './convolution.frag'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; /** * The ConvolutionFilter class applies a matrix convolution filter effect. @@ -11,11 +11,11 @@ import { Filter } from '@pixi/core'; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/convolution.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-convolution|@pixi/filter-convolution} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class ConvolutionFilter extends Filter +export class ConvolutionFilter extends Filter { /** * @param {number[]} [matrix=[0,0,0,0,0,0,0,0,0]] - An array of values used for matrix transformation. @@ -25,55 +25,63 @@ class ConvolutionFilter extends Filter */ constructor(matrix: number[], width = 200, height = 200) { - super(vertex, fragment); - this.uniforms.texelSize = new Float32Array(2); - this.uniforms.matrix = new Float32Array(9); - if (matrix !== undefined) - { - this.matrix = matrix; - } - this.width = width; - this.height = height; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'convolution-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.texelSize = new Float32Array(2); + // this.uniforms.matrix = new Float32Array(9); + // if (matrix !== undefined) + // { + // this.matrix = matrix; + // } + // this.width = width; + // this.height = height; } /** * An array of values used for matrix transformation. Specified as a 9 point Array. */ - get matrix(): number[] - { - return this.uniforms.matrix; - } - set matrix(matrix: number[]) - { - matrix.forEach((v, i) => - { - this.uniforms.matrix[i] = v; - }); - } + // get matrix(): number[] + // { + // return this.uniforms.matrix; + // } + // set matrix(matrix: number[]) + // { + // matrix.forEach((v, i) => + // { + // this.uniforms.matrix[i] = v; + // }); + // } /** * Width of the object you are transforming */ - get width(): number - { - return 1 / this.uniforms.texelSize[0]; - } - set width(value: number) - { - this.uniforms.texelSize[0] = 1 / value; - } + // get width(): number + // { + // return 1 / this.uniforms.texelSize[0]; + // } + // set width(value: number) + // { + // this.uniforms.texelSize[0] = 1 / value; + // } /** * Height of the object you are transforming */ - get height(): number - { - return 1 / this.uniforms.texelSize[1]; - } - set height(value: number) - { - this.uniforms.texelSize[1] = 1 / value; - } + // get height(): number + // { + // return 1 / this.uniforms.texelSize[1]; + // } + // set height(value: number) + // { + // this.uniforms.texelSize[1] = 1 / value; + // } } - -export { ConvolutionFilter }; diff --git a/filters/cross-hatch/src/CrossHatchFilter.ts b/filters/cross-hatch/src/CrossHatchFilter.ts index c1be4bc44..4a538983a 100644 --- a/filters/cross-hatch/src/CrossHatchFilter.ts +++ b/filters/cross-hatch/src/CrossHatchFilter.ts @@ -1,22 +1,29 @@ import { vertex } from '@tools/fragments'; import fragment from './crosshatch.frag'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; /** * A Cross Hatch effect filter.
* ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/cross-hatch.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-cross-hatch|@pixi/filter-cross-hatch} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class CrossHatchFilter extends Filter +export class CrossHatchFilter extends Filter { constructor() { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'cross-hatch-filter', + }); + + super({ + glProgram, + resources: {}, + }); } } - -export { CrossHatchFilter }; diff --git a/filters/crt/src/CRTFilter.ts b/filters/crt/src/CRTFilter.ts index 6bfe04f54..1a23e2e97 100644 --- a/filters/crt/src/CRTFilter.ts +++ b/filters/crt/src/CRTFilter.ts @@ -1,9 +1,9 @@ import { vertex } from '@tools/fragments'; import fragment from './crt.frag'; -import { Filter } from '@pixi/core'; -import type { Rectangle, CLEAR_MODES, FilterSystem, RenderTexture } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { FilterSystem, RenderSurface, RenderTexture, Texture } from 'pixi.js'; -interface CRTFilterOptions +export interface CRTFilterOptions { curvature: number; lineWidth: number; @@ -23,11 +23,11 @@ interface CRTFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/crt.gif) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-crt|@pixi/filter-crt} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class CRTFilter extends Filter +export class CRTFilter extends Filter { /** Default constructor options */ public static readonly defaults: CRTFilterOptions = { @@ -67,147 +67,154 @@ class CRTFilter extends Filter */ constructor(options?: Partial) { - super(vertex, fragment); - this.uniforms.dimensions = new Float32Array(2); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'crt-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.dimensions = new Float32Array(2); Object.assign(this, CRTFilter.defaults, options); } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const { width, height } = input.filterFrame as Rectangle; + // const { width, height } = input.filterFrame as Rectangle; - this.uniforms.dimensions[0] = width; - this.uniforms.dimensions[1] = height; + // this.uniforms.dimensions[0] = width; + // this.uniforms.dimensions[1] = height; - this.uniforms.seed = this.seed; - this.uniforms.time = this.time; + // this.uniforms.seed = this.seed; + // this.uniforms.time = this.time; - filterManager.applyFilter(this, input, output, clear); + // filterManager.applyFilter(this, input, output, clear); } /** * Bent of interlaced lines, higher value means more bend * @default 1 */ - set curvature(value: number) - { - this.uniforms.curvature = value; - } - get curvature(): number - { - return this.uniforms.curvature; - } + // set curvature(value: number) + // { + // this.uniforms.curvature = value; + // } + // get curvature(): number + // { + // return this.uniforms.curvature; + // } /** * Width of interlaced lines * @default 1 */ - set lineWidth(value: number) - { - this.uniforms.lineWidth = value; - } - get lineWidth(): number - { - return this.uniforms.lineWidth; - } + // set lineWidth(value: number) + // { + // this.uniforms.lineWidth = value; + // } + // get lineWidth(): number + // { + // return this.uniforms.lineWidth; + // } /** * Contrast of interlaced lines * @default 0.25 */ - set lineContrast(value: number) - { - this.uniforms.lineContrast = value; - } - get lineContrast(): number - { - return this.uniforms.lineContrast; - } + // set lineContrast(value: number) + // { + // this.uniforms.lineContrast = value; + // } + // get lineContrast(): number + // { + // return this.uniforms.lineContrast; + // } /** * `true` for vertical lines, `false` for horizontal lines * @default false */ - set verticalLine(value: boolean) - { - this.uniforms.verticalLine = value; - } - get verticalLine(): boolean - { - return this.uniforms.verticalLine; - } + // set verticalLine(value: boolean) + // { + // this.uniforms.verticalLine = value; + // } + // get verticalLine(): boolean + // { + // return this.uniforms.verticalLine; + // } /** * Opacity/intensity of the noise effect between `0` and `1` * @default 0 */ - set noise(value: number) - { - this.uniforms.noise = value; - } - get noise(): number - { - return this.uniforms.noise; - } + // set noise(value: number) + // { + // this.uniforms.noise = value; + // } + // get noise(): number + // { + // return this.uniforms.noise; + // } /** * The size of the noise particles * @default 0 */ - set noiseSize(value: number) - { - this.uniforms.noiseSize = value; - } - get noiseSize(): number - { - return this.uniforms.noiseSize; - } + // set noiseSize(value: number) + // { + // this.uniforms.noiseSize = value; + // } + // get noiseSize(): number + // { + // return this.uniforms.noiseSize; + // } /** * The radius of the vignette effect, smaller * values produces a smaller vignette * @default 0 */ - set vignetting(value: number) - { - this.uniforms.vignetting = value; - } - get vignetting(): number - { - return this.uniforms.vignetting; - } + // set vignetting(value: number) + // { + // this.uniforms.vignetting = value; + // } + // get vignetting(): number + // { + // return this.uniforms.vignetting; + // } /** * Amount of opacity of vignette * @default 0 */ - set vignettingAlpha(value: number) - { - this.uniforms.vignettingAlpha = value; - } - get vignettingAlpha(): number - { - return this.uniforms.vignettingAlpha; - } + // set vignettingAlpha(value: number) + // { + // this.uniforms.vignettingAlpha = value; + // } + // get vignettingAlpha(): number + // { + // return this.uniforms.vignettingAlpha; + // } /** * Blur intensity of the vignette * @default 0 */ - set vignettingBlur(value: number) - { - this.uniforms.vignettingBlur = value; - } - get vignettingBlur(): number - { - return this.uniforms.vignettingBlur; - } + // set vignettingBlur(value: number) + // { + // this.uniforms.vignettingBlur = value; + // } + // get vignettingBlur(): number + // { + // return this.uniforms.vignettingBlur; + // } } - -export { CRTFilter }; -export type { CRTFilterOptions }; diff --git a/filters/dot/src/DotFilter.ts b/filters/dot/src/DotFilter.ts index 276e5965e..c0d29443d 100644 --- a/filters/dot/src/DotFilter.ts +++ b/filters/dot/src/DotFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './dot.frag'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; // @author Mat Groves http://matgroves.com/ @Doormat23 // original filter: https://github.com/evanw/glfx.js/blob/master/src/filters/fun/dotscreen.js @@ -11,11 +11,11 @@ import { Filter } from '@pixi/core'; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/dot.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-dot|@pixi/filter-dot} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class DotFilter extends Filter +export class DotFilter extends Filter { /** * @param {number} [scale=1] - The scale of the effect. @@ -24,50 +24,58 @@ class DotFilter extends Filter */ constructor(scale = 1, angle = 5, grayscale = true) { - super(vertex, fragment); - this.scale = scale; - this.angle = angle; - this.grayscale = grayscale; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'dot-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.scale = scale; + // this.angle = angle; + // this.grayscale = grayscale; } /** * The scale of the effect. * @default 1 */ - get scale(): number - { - return this.uniforms.scale; - } - set scale(value: number) - { - this.uniforms.scale = value; - } + // get scale(): number + // { + // return this.uniforms.scale; + // } + // set scale(value: number) + // { + // this.uniforms.scale = value; + // } /** * The radius of the effect. * @default 5 */ - get angle(): number - { - return this.uniforms.angle; - } - set angle(value: number) - { - this.uniforms.angle = value; - } + // get angle(): number + // { + // return this.uniforms.angle; + // } + // set angle(value: number) + // { + // this.uniforms.angle = value; + // } /** * Render as grayscale. * @default true */ - get grayscale(): boolean - { - return this.uniforms.grayscale; - } - set grayscale(value: boolean) - { - this.uniforms.grayscale = value; - } + // get grayscale(): boolean + // { + // return this.uniforms.grayscale; + // } + // set grayscale(value: boolean) + // { + // this.uniforms.grayscale = value; + // } } - -export { DotFilter }; diff --git a/filters/drop-shadow/src/DropShadowFilter.ts b/filters/drop-shadow/src/DropShadowFilter.ts index 7a5e5d87d..369915cd1 100644 --- a/filters/drop-shadow/src/DropShadowFilter.ts +++ b/filters/drop-shadow/src/DropShadowFilter.ts @@ -1,8 +1,8 @@ import { KawaseBlurFilter } from '@pixi/filter-kawase-blur'; import { vertex } from '@tools/fragments'; import fragment from './dropshadow.frag'; -import { Filter, DEG_TO_RAD, ObservablePoint, utils } from '@pixi/core'; -import type { IPoint, CLEAR_MODES, FilterSystem, RenderTexture, IPointData } from '@pixi/core'; +import { Filter, DEG_TO_RAD, ObservablePoint, utils } from 'pixi.js'; +import type { IPoint, CLEAR_MODES, FilterSystem, RenderTexture, IPointData } from 'pixi.js'; type PixelSizeValue = number | number[] | IPoint; @@ -27,7 +27,7 @@ interface DropShadowFilterOptions * Drop shadow filter.
* ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/drop-shadow.png) * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-drop-shadow|@pixi/filter-drop-shadow} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ @@ -71,7 +71,7 @@ class DropShadowFilter extends Filter * @param {number} [options.blur=2] - Sets the strength of the Blur properties simultaneously * @param {number} [options.quality=3] - The quality of the Blur filter. * @param {number[]} [options.kernels=null] - The kernels of the Blur filter. - * @param {number|number[]|PIXI.Point} [options.pixelSize=1] - the pixelSize of the Blur filter. + * @param {number|number[]|Point} [options.pixelSize=1] - the pixelSize of the Blur filter. * @param {number} [options.resolution=1] - The resolution of the Blur filter. */ constructor(options?: Partial) @@ -115,7 +115,7 @@ class DropShadowFilter extends Filter this.color = color; } - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { const target = filterManager.getFilterTexture(); @@ -159,7 +159,7 @@ class DropShadowFilter extends Filter /** * Set the offset position of the drop-shadow relative to the original image. - * @type {PIXI.IPointData} + * @type {IPointData} * @default {x: 4, y: 4} */ public set offset(value: IPointData) @@ -296,7 +296,7 @@ class DropShadowFilter extends Filter /** * Sets the pixelSize of the Kawase Blur filter * - * @member {number|number[]|PIXI.Point} + * @member {number|number[]|Point} * @default 1 */ get pixelSize(): PixelSizeValue diff --git a/filters/emboss/src/EmbossFilter.ts b/filters/emboss/src/EmbossFilter.ts index 98481259b..86beb8c2e 100644 --- a/filters/emboss/src/EmbossFilter.ts +++ b/filters/emboss/src/EmbossFilter.ts @@ -1,38 +1,46 @@ import { vertex } from '@tools/fragments'; import fragment from './emboss.frag'; -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; /** * An RGB Split Filter.
* ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/emboss.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-emboss|@pixi/filter-emboss} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class EmbossFilter extends Filter +export class EmbossFilter extends Filter { /** * @param {number} [strength=5] - Strength of the emboss. */ constructor(strength = 5) { - super(vertex, fragment); - this.strength = strength; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'emboss-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.strength = strength; } /** * Strength of emboss. */ - get strength(): number - { - return this.uniforms.strength; - } - set strength(value: number) - { - this.uniforms.strength = value; - } + // get strength(): number + // { + // return this.uniforms.strength; + // } + // set strength(value: number) + // { + // this.uniforms.strength = value; + // } } - -export { EmbossFilter }; diff --git a/filters/glitch/src/GlitchFilter.ts b/filters/glitch/src/GlitchFilter.ts index 61e502f61..b4db45561 100644 --- a/filters/glitch/src/GlitchFilter.ts +++ b/filters/glitch/src/GlitchFilter.ts @@ -1,11 +1,11 @@ import { vertex } from '@tools/fragments'; import fragment from './glitch.frag'; -import { Filter, Texture, SCALE_MODES, DEG_TO_RAD, Rectangle } from '@pixi/core'; -import type { IPoint, CLEAR_MODES, FilterSystem, RenderTexture } from '@pixi/core'; +import { Filter, Texture, DEG_TO_RAD, Rectangle, GlProgram } from 'pixi.js'; +import type { FilterSystem, Point, RenderSurface, RenderTexture } from 'pixi.js'; -type PointLike = IPoint | number[]; +type PointLike = Point | number[]; -interface GlitchFilterOptions +export interface GlitchFilterOptions { slices: number; offset: number; @@ -25,11 +25,11 @@ interface GlitchFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/glitch.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-glitch|@pixi/filter-glitch} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class GlitchFilter extends Filter +export class GlitchFilter extends Filter { /** Default constructor options. */ public static readonly defaults: GlitchFilterOptions = { @@ -92,10 +92,10 @@ class GlitchFilter extends Filter * The displacement map is used to generate the bands. * If using your own texture, `slices` will be ignored. * - * @member {PIXI.Texture} + * @member {Texture} * @readonly */ - public texture: Texture; + // public texture: Texture; /** Internal number of slices */ private _slices = 0; @@ -130,34 +130,44 @@ class GlitchFilter extends Filter */ constructor(options?: Partial) { - super(vertex, fragment); - this.uniforms.dimensions = new Float32Array(2); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'glitch-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.dimensions = new Float32Array(2); this._canvas = document.createElement('canvas'); this._canvas.width = 4; this._canvas.height = this.sampleSize; - this.texture = Texture.from(this._canvas, { scaleMode: SCALE_MODES.NEAREST }); + // this.texture = Texture.from(this._canvas, { scaleMode: SCALE_MODES.NEAREST }); Object.assign(this, GlitchFilter.defaults, options); } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const { width, height } = input.filterFrame as Rectangle; + // const { width, height } = input.filterFrame as Rectangle; - this.uniforms.dimensions[0] = width; - this.uniforms.dimensions[1] = height; - this.uniforms.aspect = height / width; + // this.uniforms.dimensions[0] = width; + // this.uniforms.dimensions[1] = height; + // this.uniforms.aspect = height / width; - this.uniforms.seed = this.seed; - this.uniforms.offset = this.offset; - this.uniforms.fillMode = this.fillMode; + // this.uniforms.seed = this.seed; + // this.uniforms.offset = this.offset; + // this.uniforms.fillMode = this.fillMode; - filterManager.applyFilter(this, input, output, clear); + // filterManager.applyFilter(this, input, output, clear); } /** @@ -253,7 +263,7 @@ class GlitchFilter extends Filter redraw(): void { const size = this.sampleSize; - const texture = this.texture; + // const texture = this.texture; const ctx = this._canvas.getContext('2d') as CanvasRenderingContext2D; ctx.clearRect(0, 0, 8, size); @@ -273,8 +283,8 @@ class GlitchFilter extends Filter y += height; } - texture.baseTexture.update(); - this.uniforms.displacementMap = texture; + // texture.baseTexture.update(); + // this.uniforms.displacementMap = texture; } /** @@ -321,102 +331,99 @@ class GlitchFilter extends Filter * The count of slices. * @default 5 */ - get slices(): number - { - return this._slices; - } - set slices(value: number) - { - if (this._slices === value) - { - return; - } - this._slices = value; - this.uniforms.slices = value; - this._sizes = this.uniforms.slicesWidth = new Float32Array(value); - this._offsets = this.uniforms.slicesOffset = new Float32Array(value); - this.refresh(); - } + // get slices(): number + // { + // return this._slices; + // } + // set slices(value: number) + // { + // if (this._slices === value) + // { + // return; + // } + // this._slices = value; + // this.uniforms.slices = value; + // this._sizes = this.uniforms.slicesWidth = new Float32Array(value); + // this._offsets = this.uniforms.slicesOffset = new Float32Array(value); + // this.refresh(); + // } /** * The angle in degree of the offset of slices. * @default 0 */ - get direction(): number - { - return this._direction; - } - set direction(value: number) - { - if (this._direction === value) - { - return; - } - this._direction = value; - - const radians = value * DEG_TO_RAD; - - this.uniforms.sinDir = Math.sin(radians); - this.uniforms.cosDir = Math.cos(radians); - } + // get direction(): number + // { + // return this._direction; + // } + // set direction(value: number) + // { + // if (this._direction === value) + // { + // return; + // } + // this._direction = value; + + // const radians = value * DEG_TO_RAD; + + // this.uniforms.sinDir = Math.sin(radians); + // this.uniforms.cosDir = Math.cos(radians); + // } /** * Red channel offset. * - * @member {PIXI.Point|number[]} + * @member {Point|number[]} */ - get red(): PointLike - { - return this.uniforms.red; - } - set red(value: PointLike) - { - this.uniforms.red = value; - } + // get red(): PointLike + // { + // return this.uniforms.red; + // } + // set red(value: PointLike) + // { + // this.uniforms.red = value; + // } /** * Green channel offset. * - * @member {PIXI.Point|number[]} + * @member {Point|number[]} */ - get green(): PointLike - { - return this.uniforms.green; - } - set green(value: PointLike) - { - this.uniforms.green = value; - } + // get green(): PointLike + // { + // return this.uniforms.green; + // } + // set green(value: PointLike) + // { + // this.uniforms.green = value; + // } /** * Blue offset. * - * @member {PIXI.Point|number[]} + * @member {Point|number[]} */ - get blue(): PointLike - { - return this.uniforms.blue; - } - set blue(value: PointLike) - { - this.uniforms.blue = value; - } + // get blue(): PointLike + // { + // return this.uniforms.blue; + // } + // set blue(value: PointLike) + // { + // this.uniforms.blue = value; + // } /** * Removes all references */ destroy(): void { - this.texture?.destroy(true); - this.texture - = this._canvas - = this.red - = this.green - = this.blue - = this._sizes - = this._offsets = null as any; + // this.texture?.destroy(true); + // this.texture + // = this._canvas + // = this.red + // = this.green + // = this.blue + // = this._sizes + // = this._offsets = null as any; } } - -export { GlitchFilter }; -export type { GlitchFilterOptions }; diff --git a/filters/glow/src/GlowFilter.ts b/filters/glow/src/GlowFilter.ts index 246a3cb2b..65b3b0c6f 100644 --- a/filters/glow/src/GlowFilter.ts +++ b/filters/glow/src/GlowFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './glow.frag'; -import { Filter, utils } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; interface GlowFilterOptions { @@ -19,7 +19,7 @@ interface GlowFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/glow.png) * @class * - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-glow|@pixi/filter-glow} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * @@ -28,7 +28,7 @@ interface GlowFilterOptions * new GlowFilter({ distance: 15, outerStrength: 2 }) * ]; */ -class GlowFilter extends Filter +export class GlowFilter extends Filter { /** Default values for options. */ static readonly defaults: GlowFilterOptions = { @@ -65,12 +65,21 @@ class GlowFilter extends Filter const distance = Math.round(opts.distance); - super(vertex, fragment - .replace(/__ANGLE_STEP_SIZE__/gi, `${(1 / quality / distance).toFixed(7)}`) - .replace(/__DIST__/gi, `${distance.toFixed(0)}.0`)); + const glProgram = new GlProgram({ + vertex, + fragment: fragment + .replace(/__ANGLE_STEP_SIZE__/gi, `${(1 / quality / distance).toFixed(7)}`) + .replace(/__DIST__/gi, `${distance.toFixed(0)}.0`), + name: 'glow-filter', + }); + + super({ + glProgram, + resources: {}, + }); - this.uniforms.glowColor = new Float32Array([0, 0, 0, 1]); - this.uniforms.alpha = 1; + // this.uniforms.glowColor = new Float32Array([0, 0, 0, 1]); + // this.uniforms.alpha = 1; Object.assign(this, { color, @@ -86,67 +95,64 @@ class GlowFilter extends Filter * The color of the glow. * @default 0xFFFFFF */ - get color(): number - { - return utils.rgb2hex(this.uniforms.glowColor); - } - set color(value: number) - { - utils.hex2rgb(value, this.uniforms.glowColor); - } + // get color(): number + // { + // return utils.rgb2hex(this.uniforms.glowColor); + // } + // set color(value: number) + // { + // utils.hex2rgb(value, this.uniforms.glowColor); + // } /** * The strength of the glow outward from the edge of the sprite. * @default 4 */ - get outerStrength(): number - { - return this.uniforms.outerStrength; - } - set outerStrength(value: number) - { - this.uniforms.outerStrength = value; - } + // get outerStrength(): number + // { + // return this.uniforms.outerStrength; + // } + // set outerStrength(value: number) + // { + // this.uniforms.outerStrength = value; + // } /** * The strength of the glow inward from the edge of the sprite. * @default 0 */ - get innerStrength(): number - { - return this.uniforms.innerStrength; - } - set innerStrength(value: number) - { - this.uniforms.innerStrength = value; - } + // get innerStrength(): number + // { + // return this.uniforms.innerStrength; + // } + // set innerStrength(value: number) + // { + // this.uniforms.innerStrength = value; + // } /** * Only draw the glow, not the texture itself * @default false */ - get knockout(): boolean - { - return this.uniforms.knockout; - } - set knockout(value: boolean) - { - this.uniforms.knockout = value; - } + // get knockout(): boolean + // { + // return this.uniforms.knockout; + // } + // set knockout(value: boolean) + // { + // this.uniforms.knockout = value; + // } /** * The alpha value of the glow * @default 1 */ - get alpha(): number - { - return this.uniforms.alpha; - } - set alpha(value: number) - { - this.uniforms.alpha = value; - } + // get alpha(): number + // { + // return this.uniforms.alpha; + // } + // set alpha(value: number) + // { + // this.uniforms.alpha = value; + // } } - -export { GlowFilter }; -export type { GlowFilterOptions }; diff --git a/filters/godray/src/GodrayFilter.ts b/filters/godray/src/GodrayFilter.ts index b976014c3..2a1502589 100644 --- a/filters/godray/src/GodrayFilter.ts +++ b/filters/godray/src/GodrayFilter.ts @@ -1,8 +1,8 @@ import { vertex } from '@tools/fragments'; import perlin from './perlin.frag'; import fragment from './gorday.frag'; -import { Filter, Point, DEG_TO_RAD } from '@pixi/core'; -import type { Rectangle, CLEAR_MODES, FilterSystem, RenderTexture } from '@pixi/core'; +import { Filter, Point, DEG_TO_RAD, GlProgram } from 'pixi.js'; +import type { Rectangle, FilterSystem, RenderTexture } from 'pixi.js'; interface GodrayFilterOptions { @@ -22,14 +22,14 @@ interface GodrayFilterOptions * * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/godray.gif) * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-godray|@pixi/filter-godray} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * * @example * displayObject.filters = [new GodrayFilter()]; */ -class GodrayFilter extends Filter +export class GodrayFilter extends Filter { /** Default for constructior options. */ public static readonly defaults: GodrayFilterOptions = { @@ -67,23 +67,32 @@ class GodrayFilter extends Filter * @param {number} [options.lacunarity=2.5] - The density of the fractal noise. * @param {boolean} [options.parallel=true] - `true` to use `angle`, `false` to use `center` * @param {number} [options.time=0] - The current time position. - * @param {PIXI.Point|number[]} [options.center=[0,0]] - Focal point for non-parallel rays, + * @param {Point|number[]} [options.center=[0,0]] - Focal point for non-parallel rays, * to use this `parallel` must be set to `false`. * @param {number} [options.alpha=1.0] - the alpha, defaults to 1, affects transparency of rays */ constructor(options?: Partial) { - super(vertex, fragment.replace('${perlin}', perlin)); + const glProgram = new GlProgram({ + vertex, + fragment: fragment.replace('${perlin}', perlin), + name: 'god-ray-filter', + }); - this.uniforms.dimensions = new Float32Array(2); + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.dimensions = new Float32Array(2); const opts: GodrayFilterOptions = Object.assign(GodrayFilter.defaults, options); this._angleLight = new Point(); this.angle = opts.angle; - this.gain = opts.gain; - this.lacunarity = opts.lacunarity; - this.alpha = opts.alpha; + // this.gain = opts.gain; + // this.lacunarity = opts.lacunarity; + // this.alpha = opts.alpha; this.parallel = opts.parallel; this.center = opts.center; this.time = opts.time; @@ -92,25 +101,25 @@ class GodrayFilter extends Filter /** * Applies the filter. * @private - * @param {PIXI.FilterManager} filterManager - The manager. - * @param {PIXI.RenderTarget} input - The input target. - * @param {PIXI.RenderTarget} output - The output target. + * @param {FilterManager} filterManager - The manager. + * @param {RenderTarget} input - The input target. + * @param {RenderTarget} output - The output target. */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const { width, height } = input.filterFrame as Rectangle; + // const { width, height } = input.filterFrame as Rectangle; - this.uniforms.light = this.parallel ? this._angleLight : this.center; + // this.uniforms.light = this.parallel ? this._angleLight : this.center; - this.uniforms.parallel = this.parallel; - this.uniforms.dimensions[0] = width; - this.uniforms.dimensions[1] = height; - this.uniforms.aspect = height / width; - this.uniforms.time = this.time; - this.uniforms.alpha = this.alpha; + // this.uniforms.parallel = this.parallel; + // this.uniforms.dimensions[0] = width; + // this.uniforms.dimensions[1] = height; + // this.uniforms.aspect = height / width; + // this.uniforms.time = this.time; + // this.uniforms.alpha = this.alpha; - // draw the filter... - filterManager.applyFilter(this, input, output, clear); + // // draw the filter... + // filterManager.applyFilter(this, input, output, clear); } /** @@ -137,41 +146,39 @@ class GodrayFilter extends Filter * where a value closer to 0 will produce a subtler effect. * @default 0.5 */ - get gain(): number - { - return this.uniforms.gain; - } - set gain(value: number) - { - this.uniforms.gain = value; - } + // get gain(): number + // { + // return this.uniforms.gain; + // } + // set gain(value: number) + // { + // this.uniforms.gain = value; + // } /** * The density of the fractal noise. A higher amount produces more rays and a smaller amound * produces fewer waves. * @default 2.5 */ - get lacunarity(): number - { - return this.uniforms.lacunarity; - } - set lacunarity(value: number) - { - this.uniforms.lacunarity = value; - } + // get lacunarity(): number + // { + // return this.uniforms.lacunarity; + // } + // set lacunarity(value: number) + // { + // this.uniforms.lacunarity = value; + // } /** * The alpha (opacity) of the rays. 0 is fully transparent, 1 is fully opaque. * @default 1 */ - get alpha(): number - { - return this.uniforms.alpha; - } - set alpha(value: number) - { - this.uniforms.alpha = value; - } + // get alpha(): number + // { + // return this.uniforms.alpha; + // } + // set alpha(value: number) + // { + // this.uniforms.alpha = value; + // } } - -export { GodrayFilter }; diff --git a/filters/grayscale/src/GrayscaleFilter.ts b/filters/grayscale/src/GrayscaleFilter.ts index ccd783722..dfd152977 100644 --- a/filters/grayscale/src/GrayscaleFilter.ts +++ b/filters/grayscale/src/GrayscaleFilter.ts @@ -1,4 +1,4 @@ -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; import { vertex } from '@tools/fragments'; import fragment from './grayscale.frag'; @@ -7,16 +7,23 @@ import fragment from './grayscale.frag'; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/grayscale.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-grayscale|@pixi/filter-grayscale} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class GrayscaleFilter extends Filter +export class GrayscaleFilter extends Filter { constructor() { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'grayscale-filter', + }); + + super({ + glProgram, + resources: {}, + }); } } - -export { GrayscaleFilter }; diff --git a/filters/hsl-adjustment/src/HslAdjustmentFilter.ts b/filters/hsl-adjustment/src/HslAdjustmentFilter.ts index d822c018e..9e761addd 100644 --- a/filters/hsl-adjustment/src/HslAdjustmentFilter.ts +++ b/filters/hsl-adjustment/src/HslAdjustmentFilter.ts @@ -1,8 +1,8 @@ -import { Filter } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; import { vertex } from '@tools/fragments'; import fragment from './hsladjustment.frag'; -interface HslAdjustmentFilterOptions +export interface HslAdjustmentFilterOptions { hue: number; saturation: number; @@ -15,11 +15,11 @@ interface HslAdjustmentFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/hsl-adjustment.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-hsl-adjustment|@pixi/filter-hsl-adjustment} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class HslAdjustmentFilter extends Filter +export class HslAdjustmentFilter extends Filter { private _hue = 0; @@ -47,7 +47,16 @@ class HslAdjustmentFilter extends Filter */ constructor(options?: Partial) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'hsl-adjustment-filter', + }); + + super({ + glProgram, + resources: {}, + }); const options_: HslAdjustmentFilterOptions = Object.assign({}, HslAdjustmentFilter.defaults, options); Object.assign(this, options_); @@ -65,65 +74,62 @@ class HslAdjustmentFilter extends Filter set hue(value: number) { this._hue = value; - this.uniforms.uHue = this._hue * (Math.PI / 180); // convert degrees to radians + // this.uniforms.uHue = this._hue * (Math.PI / 180); // convert degrees to radians } /** * Alpha (0-1) * @default 1 */ - get alpha(): number - { - return this.uniforms.uAlpha; - } + // get alpha(): number + // { + // return this.uniforms.uAlpha; + // } - set alpha(value: number) - { - this.uniforms.uAlpha = value; - } + // set alpha(value: number) + // { + // this.uniforms.uAlpha = value; + // } /** * Colorize (render as a single color) * @default false */ - get colorize(): boolean - { - return this.uniforms.uColorize; - } + // get colorize(): boolean + // { + // return this.uniforms.uColorize; + // } - set colorize(value: boolean) - { - this.uniforms.uColorize = value; - } + // set colorize(value: boolean) + // { + // this.uniforms.uColorize = value; + // } /** * Lightness (-1 to 1) * @default 0 */ - get lightness(): number - { - return this.uniforms.uLightness; - } + // get lightness(): number + // { + // return this.uniforms.uLightness; + // } - set lightness(value: number) - { - this.uniforms.uLightness = value; - } + // set lightness(value: number) + // { + // this.uniforms.uLightness = value; + // } /** * Saturation (-1 to 1) * @default 0 */ - get saturation(): number - { - return this.uniforms.uSaturation; - } - - set saturation(value: number) - { - this.uniforms.uSaturation = value; - } + // get saturation(): number + // { + // return this.uniforms.uSaturation; + // } + + // set saturation(value: number) + // { + // this.uniforms.uSaturation = value; + // } } - -export { HslAdjustmentFilter }; -export type { HslAdjustmentFilterOptions }; diff --git a/filters/kawase-blur/src/KawaseBlurFilter.ts b/filters/kawase-blur/src/KawaseBlurFilter.ts index 6f80a6a5f..a731c2ca2 100644 --- a/filters/kawase-blur/src/KawaseBlurFilter.ts +++ b/filters/kawase-blur/src/KawaseBlurFilter.ts @@ -1,10 +1,10 @@ import { vertex } from '@tools/fragments'; import fragment from './kawase-blur.frag'; import fragmentClamp from './kawase-blur-clamp.frag'; -import { Filter, Point } from '@pixi/core'; -import type { IPoint, CLEAR_MODES, FilterSystem, RenderTexture } from '@pixi/core'; +import { Filter, GlProgram, Point } from 'pixi.js'; +import type { FilterSystem, RenderSurface, RenderTexture, Texture } from 'pixi.js'; -type PixelSizeValue = IPoint | number[] | number; +export type PixelSizeValue = Point | number[] | number; /** * A much faster blur than Gaussian blur, but more complicated to use.
@@ -12,11 +12,11 @@ type PixelSizeValue = IPoint | number[] | number; * * @see https://software.intel.com/en-us/blogs/2014/07/15/an-investigation-of-fast-real-time-gpu-based-image-blur-algorithms * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-kawase-blur|@pixi/filter-kawase-blur} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class KawaseBlurFilter extends Filter +export class KawaseBlurFilter extends Filter { private _pixelSize: Point; private _clamp: boolean; @@ -33,8 +33,18 @@ class KawaseBlurFilter extends Filter */ constructor(blur: number | number[] = 4, quality = 3, clamp = false) { - super(vertex, clamp ? fragmentClamp : fragment); - this.uniforms.uOffset = new Float32Array(2); + const glProgram = new GlProgram({ + vertex, + fragment: clamp ? fragmentClamp : fragment, + name: 'kawase-blur-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.uOffset = new Float32Array(2); this._pixelSize = new Point(); this.pixelSize = 1; @@ -56,47 +66,47 @@ class KawaseBlurFilter extends Filter * Overrides apply * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const uvX = this._pixelSize.x / input._frame.width; - const uvY = this._pixelSize.y / input._frame.height; - let offset; - - if (this._quality === 1 || this._blur === 0) - { - offset = this._kernels[0] + 0.5; - this.uniforms.uOffset[0] = offset * uvX; - this.uniforms.uOffset[1] = offset * uvY; - filterManager.applyFilter(this, input, output, clear); - } - else - { - const renderTarget = filterManager.getFilterTexture(); - - let source = input; - let target = renderTarget; - let tmp; - - const last = this._quality - 1; - - for (let i = 0; i < last; i++) - { - offset = this._kernels[i] + 0.5; - this.uniforms.uOffset[0] = offset * uvX; - this.uniforms.uOffset[1] = offset * uvY; - filterManager.applyFilter(this, source, target, 1); - - tmp = source; - source = target; - target = tmp; - } - offset = this._kernels[last] + 0.5; - this.uniforms.uOffset[0] = offset * uvX; - this.uniforms.uOffset[1] = offset * uvY; - filterManager.applyFilter(this, source, output, clear); - - filterManager.returnFilterTexture(renderTarget); - } + // const uvX = this._pixelSize.x / input._frame.width; + // const uvY = this._pixelSize.y / input._frame.height; + // let offset; + + // if (this._quality === 1 || this._blur === 0) + // { + // offset = this._kernels[0] + 0.5; + // this.uniforms.uOffset[0] = offset * uvX; + // this.uniforms.uOffset[1] = offset * uvY; + // filterManager.applyFilter(this, input, output, clear); + // } + // else + // { + // const renderTarget = filterManager.getFilterTexture(); + + // let source = input; + // let target = renderTarget; + // let tmp; + + // const last = this._quality - 1; + + // for (let i = 0; i < last; i++) + // { + // offset = this._kernels[i] + 0.5; + // this.uniforms.uOffset[0] = offset * uvX; + // this.uniforms.uOffset[1] = offset * uvY; + // filterManager.applyFilter(this, source, target, 1); + + // tmp = source; + // source = target; + // target = tmp; + // } + // offset = this._kernels[last] + 0.5; + // this.uniforms.uOffset[0] = offset * uvX; + // this.uniforms.uOffset[1] = offset * uvY; + // filterManager.applyFilter(this, source, output, clear); + + // filterManager.returnFilterTexture(renderTarget); + // } } private _updatePadding() @@ -169,7 +179,7 @@ class KawaseBlurFilter extends Filter /** * Sets the pixel size of the filter. Large size is blurrier. For advanced usage. * - * @member {PIXI.Point|number[]} + * @member {Point|number[]} * @default [1, 1] */ set pixelSize(value: PixelSizeValue) @@ -229,6 +239,3 @@ class KawaseBlurFilter extends Filter this._generateKernels(); } } - -export { KawaseBlurFilter }; -export type { PixelSizeValue }; diff --git a/filters/motion-blur/src/MotionBlurFilter.ts b/filters/motion-blur/src/MotionBlurFilter.ts index f369aedaa..9c81e569d 100644 --- a/filters/motion-blur/src/MotionBlurFilter.ts +++ b/filters/motion-blur/src/MotionBlurFilter.ts @@ -1,18 +1,18 @@ import { vertex } from '@tools/fragments'; import fragment from './motion-blur.frag'; -import { Filter, ObservablePoint, Point } from '@pixi/core'; -import type { IPoint, CLEAR_MODES, FilterSystem, RenderTexture } from '@pixi/core'; +import { Filter, GlProgram, ObservablePoint, Point } from 'pixi.js'; +import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; /** * The MotionBlurFilter applies a Motion blur to an object.
* ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/motion-blur.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-motion-blur|@pixi/filter-motion-blur} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class MotionBlurFilter extends Filter +export class MotionBlurFilter extends Filter { /** * The kernelSize of the blur, higher values are slower but look better. @@ -20,65 +20,75 @@ class MotionBlurFilter extends Filter */ public kernelSize = 5; - private _velocity: IPoint; + // private _velocity: Point; /** - * @param {PIXI.ObservablePoint|PIXI.Point|number[]} [velocity=[0, 0]] - Sets the velocity of the motion for blur effect. + * @param {ObservablePoint|Point|number[]} [velocity=[0, 0]] - Sets the velocity of the motion for blur effect. * @param {number} [kernelSize=5] - The kernelSize of the blur filter. Must be odd number >= 5 * @param {number} [offset=0] - The offset of the blur filter. */ constructor(velocity: number[] | Point | ObservablePoint = [0, 0], kernelSize = 5, offset = 0) { - super(vertex, fragment); - this.uniforms.uVelocity = new Float32Array(2); - this._velocity = new ObservablePoint(this.velocityChanged, this); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'motion-blur-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.uVelocity = new Float32Array(2); + // this._velocity = new ObservablePoint(this.velocityChanged, this); this.setVelocity(velocity); this.kernelSize = kernelSize; - this.offset = offset; + // this.offset = offset; } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - const { x, y } = this.velocity; + // const { x, y } = this.velocity; - this.uniforms.uKernelSize = (x !== 0 || y !== 0) ? this.kernelSize : 0; - filterManager.applyFilter(this, input, output, clear); + // this.uniforms.uKernelSize = (x !== 0 || y !== 0) ? this.kernelSize : 0; + // filterManager.applyFilter(this, input, output, clear); } /** * Sets the velocity of the motion for blur effect. * - * @member {PIXI.ObservablePoint|PIXI.Point|number[]} + * @member {ObservablePoint|Point|number[]} */ - set velocity(value: IPoint) - { - this.setVelocity(value); - } - get velocity(): IPoint - { - return this._velocity; - } + // set velocity(value: Point) + // { + // this.setVelocity(value); + // } + // get velocity(): Point + // { + // return this._velocity; + // } /** * Set velocity with more broad types */ - private setVelocity(value: IPoint | number[]) + private setVelocity(value: Point | number[]) { - if (Array.isArray(value)) - { - const [x, y] = value; + // if (Array.isArray(value)) + // { + // const [x, y] = value; - this._velocity.set(x, y); - } - else - { - this._velocity.copyFrom(value); - } + // this._velocity.set(x, y); + // } + // else + // { + // this._velocity.copyFrom(value); + // } } /** @@ -87,27 +97,24 @@ class MotionBlurFilter extends Filter */ private velocityChanged() { - this.uniforms.uVelocity[0] = this._velocity.x; - this.uniforms.uVelocity[1] = this._velocity.y; + // this.uniforms.uVelocity[0] = this._velocity.x; + // this.uniforms.uVelocity[1] = this._velocity.y; // The padding will be increased as the velocity and intern the blur size is changed - this.padding = (Math.max(Math.abs(this._velocity.x), Math.abs(this._velocity.y)) >> 0) + 1; + // this.padding = (Math.max(Math.abs(this._velocity.x), Math.abs(this._velocity.y)) >> 0) + 1; } /** * The offset of the blur filter. * @default 0 */ - set offset(value: number) - { - this.uniforms.uOffset = value; - } + // set offset(value: number) + // { + // this.uniforms.uOffset = value; + // } - get offset(): number - { - return this.uniforms.uOffset; - } + // get offset(): number + // { + // return this.uniforms.uOffset; + // } } - -export { MotionBlurFilter }; - diff --git a/filters/multi-color-replace/src/MultiColorReplaceFilter.ts b/filters/multi-color-replace/src/MultiColorReplaceFilter.ts index 97231c636..b1a7279e6 100644 --- a/filters/multi-color-replace/src/MultiColorReplaceFilter.ts +++ b/filters/multi-color-replace/src/MultiColorReplaceFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './multi-color-replace.frag'; -import { Filter, utils } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; type Color = number | number[] | Float32Array; @@ -9,7 +9,7 @@ type Color = number | number[] | Float32Array; * colors.
* ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/multi-color-replace.png) * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-multi-color-replace|@pixi/filter-multi-color-replace} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * @@ -33,7 +33,7 @@ type Color = number | number[] | Float32Array; * )]; * */ -class MultiColorReplaceFilter extends Filter +export class MultiColorReplaceFilter extends Filter { private _replacements: Array<[Color, Color]> = []; private _maxColors = 0; @@ -50,13 +50,22 @@ class MultiColorReplaceFilter extends Filter */ constructor(replacements: Array<[Color, Color]>, epsilon = 0.05, maxColors: number = replacements.length) { - super(vertex, fragment.replace(/%maxColors%/g, (maxColors).toFixed(0))); - - this.epsilon = epsilon; + const glProgram = new GlProgram({ + vertex, + fragment: fragment.replace(/%maxColors%/g, (maxColors).toFixed(0)), + name: 'multi-color-replace-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.epsilon = epsilon; this._maxColors = maxColors; - this.uniforms.originalColors = new Float32Array(maxColors * 3); - this.uniforms.targetColors = new Float32Array(maxColors * 3); - this.replacements = replacements; + // this.uniforms.originalColors = new Float32Array(maxColors * 3); + // this.uniforms.targetColors = new Float32Array(maxColors * 3); + // this.replacements = replacements; } /** @@ -64,63 +73,63 @@ class MultiColorReplaceFilter extends Filter * * @member {Array} */ - set replacements(replacements: Array<[Color, Color]>) - { - const originals = this.uniforms.originalColors; - const targets = this.uniforms.targetColors; - const colorCount = replacements.length; - - if (colorCount > this._maxColors) - { - throw new Error(`Length of replacements (${colorCount}) exceeds the maximum colors length (${this._maxColors})`); - } - - // Fill with negative values - originals[colorCount * 3] = -1; - - for (let i = 0; i < colorCount; i++) - { - const pair = replacements[i]; - - // for original colors - let color = pair[0]; - - if (typeof color === 'number') - { - color = utils.hex2rgb(color); - } - else - { - pair[0] = utils.rgb2hex(color); - } - - originals[i * 3] = color[0]; - originals[(i * 3) + 1] = color[1]; - originals[(i * 3) + 2] = color[2]; - - // for target colors - let targetColor = pair[1]; - - if (typeof targetColor === 'number') - { - targetColor = utils.hex2rgb(targetColor); - } - else - { - pair[1] = utils.rgb2hex(targetColor); - } - - targets[i * 3] = targetColor[0]; - targets[(i * 3) + 1] = targetColor[1]; - targets[(i * 3) + 2] = targetColor[2]; - } - - this._replacements = replacements; - } - get replacements(): Array<[Color, Color]> - { - return this._replacements; - } + // set replacements(replacements: Array<[Color, Color]>) + // { + // const originals = this.uniforms.originalColors; + // const targets = this.uniforms.targetColors; + // const colorCount = replacements.length; + + // if (colorCount > this._maxColors) + // { + // throw new Error(`Length of replacements (${colorCount}) exceeds the maximum colors length (${this._maxColors})`); + // } + + // // Fill with negative values + // originals[colorCount * 3] = -1; + + // for (let i = 0; i < colorCount; i++) + // { + // const pair = replacements[i]; + + // // for original colors + // let color = pair[0]; + + // if (typeof color === 'number') + // { + // color = utils.hex2rgb(color); + // } + // else + // { + // pair[0] = utils.rgb2hex(color); + // } + + // originals[i * 3] = color[0]; + // originals[(i * 3) + 1] = color[1]; + // originals[(i * 3) + 2] = color[2]; + + // // for target colors + // let targetColor = pair[1]; + + // if (typeof targetColor === 'number') + // { + // targetColor = utils.hex2rgb(targetColor); + // } + // else + // { + // pair[1] = utils.rgb2hex(targetColor); + // } + + // targets[i * 3] = targetColor[0]; + // targets[(i * 3) + 1] = targetColor[1]; + // targets[(i * 3) + 2] = targetColor[2]; + // } + + // this._replacements = replacements; + // } + // get replacements(): Array<[Color, Color]> + // { + // return this._replacements; + // } /** * Should be called after changing any of the contents of the replacements. @@ -128,7 +137,7 @@ class MultiColorReplaceFilter extends Filter */ refresh(): void { - this.replacements = this._replacements; + // this.replacements = this._replacements; } /** @@ -145,14 +154,12 @@ class MultiColorReplaceFilter extends Filter * Tolerance of the floating-point comparison between colors (lower = more exact, higher = more inclusive) * @default 0.05 */ - set epsilon(value: number) - { - this.uniforms.epsilon = value; - } - get epsilon(): number - { - return this.uniforms.epsilon; - } + // set epsilon(value: number) + // { + // this.uniforms.epsilon = value; + // } + // get epsilon(): number + // { + // return this.uniforms.epsilon; + // } } - -export { MultiColorReplaceFilter }; diff --git a/filters/old-film/src/OldFilmFilter.ts b/filters/old-film/src/OldFilmFilter.ts index c388e0377..1963ecbd3 100644 --- a/filters/old-film/src/OldFilmFilter.ts +++ b/filters/old-film/src/OldFilmFilter.ts @@ -1,9 +1,9 @@ import { vertex } from '@tools/fragments'; import fragment from './old-film.frag'; -import { Filter } from '@pixi/core'; -import type { FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; -interface OldFilmFilterOptions +export interface OldFilmFilterOptions { sepia: number; noise: number; @@ -21,11 +21,11 @@ interface OldFilmFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/old-film.gif) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-old-film|@pixi/filter-old-film} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class OldFilmFilter extends Filter +export class OldFilmFilter extends Filter { /** Default constructor options */ public static readonly defaults: OldFilmFilterOptions = { @@ -62,8 +62,18 @@ class OldFilmFilter extends Filter */ constructor(options?: Partial, seed = 0) { - super(vertex, fragment); - this.uniforms.dimensions = new Float32Array(2); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'old-film-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.dimensions = new Float32Array(2); if (typeof options === 'number') { @@ -79,19 +89,19 @@ class OldFilmFilter extends Filter } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - this.uniforms.dimensions[0] = input.filterFrame?.width; - this.uniforms.dimensions[1] = input.filterFrame?.height; + // this.uniforms.dimensions[0] = input.filterFrame?.width; + // this.uniforms.dimensions[1] = input.filterFrame?.height; - // named `seed` because in the most programming languages, - // `random` used for "the function for generating random value". - this.uniforms.seed = this.seed; + // // named `seed` because in the most programming languages, + // // `random` used for "the function for generating random value". + // this.uniforms.seed = this.seed; - filterManager.applyFilter(this, input, output, clear); + // filterManager.applyFilter(this, input, output, clear); } /** @@ -100,129 +110,126 @@ class OldFilmFilter extends Filter * and a value of `0` produces no sepia effect * @default 0 */ - set sepia(value: number) - { - this.uniforms.sepia = value; - } + // set sepia(value: number) + // { + // this.uniforms.sepia = value; + // } - get sepia(): number - { - return this.uniforms.sepia; - } + // get sepia(): number + // { + // return this.uniforms.sepia; + // } /** * Opacity/intensity of the noise effect between `0` and `1` * @default 0 */ - set noise(value: number) - { - this.uniforms.noise = value; - } + // set noise(value: number) + // { + // this.uniforms.noise = value; + // } - get noise(): number - { - return this.uniforms.noise; - } + // get noise(): number + // { + // return this.uniforms.noise; + // } /** * The size of the noise particles * @default 0 */ - set noiseSize(value: number) - { - this.uniforms.noiseSize = value; - } + // set noiseSize(value: number) + // { + // this.uniforms.noiseSize = value; + // } - get noiseSize(): number - { - return this.uniforms.noiseSize; - } + // get noiseSize(): number + // { + // return this.uniforms.noiseSize; + // } /** * How often scratches appear * @default 0 */ - set scratch(value: number) - { - this.uniforms.scratch = value; - } + // set scratch(value: number) + // { + // this.uniforms.scratch = value; + // } - get scratch(): number - { - return this.uniforms.scratch; - } + // get scratch(): number + // { + // return this.uniforms.scratch; + // } /** * The density of the number of scratches * @default 0 */ - set scratchDensity(value: number) - { - this.uniforms.scratchDensity = value; - } + // set scratchDensity(value: number) + // { + // this.uniforms.scratchDensity = value; + // } - get scratchDensity(): number - { - return this.uniforms.scratchDensity; - } + // get scratchDensity(): number + // { + // return this.uniforms.scratchDensity; + // } /** * The width of the scratches * @default 0 */ - set scratchWidth(value: number) - { - this.uniforms.scratchWidth = value; - } + // set scratchWidth(value: number) + // { + // this.uniforms.scratchWidth = value; + // } - get scratchWidth(): number - { - return this.uniforms.scratchWidth; - } + // get scratchWidth(): number + // { + // return this.uniforms.scratchWidth; + // } /** * The radius of the vignette effect, smaller * values produces a smaller vignette * @default 0 */ - set vignetting(value: number) - { - this.uniforms.vignetting = value; - } + // set vignetting(value: number) + // { + // this.uniforms.vignetting = value; + // } - get vignetting(): number - { - return this.uniforms.vignetting; - } + // get vignetting(): number + // { + // return this.uniforms.vignetting; + // } /** * Amount of opacity of vignette * @default 0 */ - set vignettingAlpha(value: number) - { - this.uniforms.vignettingAlpha = value; - } + // set vignettingAlpha(value: number) + // { + // this.uniforms.vignettingAlpha = value; + // } - get vignettingAlpha(): number - { - return this.uniforms.vignettingAlpha; - } + // get vignettingAlpha(): number + // { + // return this.uniforms.vignettingAlpha; + // } /** * Blur intensity of the vignette * @default 0 */ - set vignettingBlur(value: number) - { - this.uniforms.vignettingBlur = value; - } - - get vignettingBlur(): number - { - return this.uniforms.vignettingBlur; - } + // set vignettingBlur(value: number) + // { + // this.uniforms.vignettingBlur = value; + // } + + // get vignettingBlur(): number + // { + // return this.uniforms.vignettingBlur; + // } } - -export { OldFilmFilter }; -export type { OldFilmFilterOptions }; diff --git a/filters/outline/src/OutlineFilter.ts b/filters/outline/src/OutlineFilter.ts index 103a87e31..f677dd05e 100644 --- a/filters/outline/src/OutlineFilter.ts +++ b/filters/outline/src/OutlineFilter.ts @@ -1,7 +1,7 @@ import { vertex } from '@tools/fragments'; import fragment from './outline.frag'; -import { Filter, utils } from '@pixi/core'; -import type { FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; /** * OutlineFilter, originally by mishaa @@ -10,13 +10,13 @@ import type { FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/outline.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-outline|@pixi/filter-outline} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * * @example * someSprite.filters = [new OutlineFilter(2, 0x99ff99)]; */ -class OutlineFilter extends Filter +export class OutlineFilter extends Filter { /** The minimum number of samples for rendering outline. */ public static MIN_SAMPLES = 1; @@ -38,12 +38,21 @@ class OutlineFilter extends Filter */ constructor(thickness = 1, color = 0x000000, quality = 0.1, alpha = 1.0, knockout = false) { - super(vertex, fragment.replace(/\$\{angleStep\}/, OutlineFilter.getAngleStep(quality))); + const glProgram = new GlProgram({ + vertex, + fragment: fragment.replace(/\$\{angleStep\}/, OutlineFilter.getAngleStep(quality)), + name: 'outline-filter', + }); - this.uniforms.uThickness = new Float32Array([0, 0]); - this.uniforms.uColor = new Float32Array([0, 0, 0, 1]); - this.uniforms.uAlpha = alpha; - this.uniforms.uKnockout = knockout; + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.uThickness = new Float32Array([0, 0]); + // this.uniforms.uColor = new Float32Array([0, 0, 0, 1]); + // this.uniforms.uAlpha = alpha; + // this.uniforms.uKnockout = knockout; Object.assign(this, { thickness, color, quality, alpha, knockout }); } @@ -62,14 +71,14 @@ class OutlineFilter extends Filter return (Math.PI * 2 / samples).toFixed(7); } - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - this.uniforms.uThickness[0] = this._thickness / input._frame.width; - this.uniforms.uThickness[1] = this._thickness / input._frame.height; - this.uniforms.uAlpha = this._alpha; - this.uniforms.uKnockout = this._knockout; + // this.uniforms.uThickness[0] = this._thickness / input._frame.width; + // this.uniforms.uThickness[1] = this._thickness / input._frame.height; + // this.uniforms.uAlpha = this._alpha; + // this.uniforms.uKnockout = this._knockout; - filterManager.applyFilter(this, input, output, clear); + // filterManager.applyFilter(this, input, output, clear); } /** @@ -89,14 +98,14 @@ class OutlineFilter extends Filter * The color of the outline. * @default 0x000000 */ - get color(): number - { - return utils.rgb2hex(this.uniforms.uColor); - } - set color(value: number) - { - utils.hex2rgb(value, this.uniforms.uColor); - } + // get color(): number + // { + // return utils.rgb2hex(this.uniforms.uColor); + // } + // set color(value: number) + // { + // utils.hex2rgb(value, this.uniforms.uColor); + // } /** * Only render outline, not the contents. @@ -125,5 +134,3 @@ class OutlineFilter extends Filter this.padding = value; } } - -export { OutlineFilter }; diff --git a/filters/pixelate/src/PixelateFilter.ts b/filters/pixelate/src/PixelateFilter.ts index 8837dd547..806ffd6e5 100644 --- a/filters/pixelate/src/PixelateFilter.ts +++ b/filters/pixelate/src/PixelateFilter.ts @@ -1,7 +1,7 @@ import { vertex } from '@tools/fragments'; import fragment from './pixelate.frag'; -import { Filter } from '@pixi/core'; -import type { Point } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { Point } from 'pixi.js'; type Size = number | number[] | Point; @@ -10,40 +10,48 @@ type Size = number | number[] | Point; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/pixelate.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-pixelate|@pixi/filter-pixelate} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class PixelateFilter extends Filter +export class PixelateFilter extends Filter { /** - * @param {PIXI.Point|Array|number} [size=10] - Either the width/height of the size of the pixels, or square size + * @param {Point|Array|number} [size=10] - Either the width/height of the size of the pixels, or square size */ constructor(size: Size = 10) { - super(vertex, fragment); - this.size = size; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'pixelate-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.size = size; } /** * This a point that describes the size of the blocks. * x is the width of the block and y is the height. * - * @member {PIXI.Point|Array|number} + * @member {Point|Array|number} * @default 10 */ - get size(): Size - { - return this.uniforms.size; - } - set size(value: Size) - { - if (typeof value === 'number') - { - value = [value, value]; - } - this.uniforms.size = value; - } + // get size(): Size + // { + // return this.uniforms.size; + // } + // set size(value: Size) + // { + // if (typeof value === 'number') + // { + // value = [value, value]; + // } + // this.uniforms.size = value; + // } } - -export { PixelateFilter }; diff --git a/filters/radial-blur/src/RadialBlurFilter.ts b/filters/radial-blur/src/RadialBlurFilter.ts index 80bc00674..542fc7b13 100644 --- a/filters/radial-blur/src/RadialBlurFilter.ts +++ b/filters/radial-blur/src/RadialBlurFilter.ts @@ -1,7 +1,7 @@ import { vertex } from '@tools/fragments'; import fragment from './radial-blur.frag'; -import { Filter } from '@pixi/core'; -import type { Point, CLEAR_MODES, FilterSystem, RenderTexture } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { Point, FilterSystem, RenderSurface, Texture } from 'pixi.js'; type PointLike = Point | number[]; @@ -10,11 +10,11 @@ type PointLike = Point | number[]; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/radial-blur.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-radial-blur|@pixi/filter-radial-blur} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class RadialBlurFilter extends Filter +export class RadialBlurFilter extends Filter { private _angle = 0; @@ -26,79 +26,85 @@ class RadialBlurFilter extends Filter /** * @param {number} [angle=0] - Sets the angle of the motion for blur effect. - * @param {PIXI.Point|number[]} [center=[0,0]] - The center of the radial. + * @param {Point|number[]} [center=[0,0]] - The center of the radial. * @param {number} [kernelSize=5] - The kernelSize of the blur filter. Must be odd number >= 3 * @param {number} [radius=-1] - The maximum size of the blur radius, `-1` is infinite */ constructor(angle = 0, center: PointLike = [0, 0], kernelSize = 5, radius = -1) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'radial-blur-filter', + }); - this.angle = angle; - this.center = center; + super({ + glProgram, + resources: {}, + }); + + // this.angle = angle; + // this.center = center; this.kernelSize = kernelSize; - this.radius = radius; + // this.radius = radius; } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - this.uniforms.uKernelSize = this._angle !== 0 ? this.kernelSize : 0; - filterManager.applyFilter(this, input, output, clear); + // this.uniforms.uKernelSize = this._angle !== 0 ? this.kernelSize : 0; + // filterManager.applyFilter(this, input, output, clear); } /** * Sets the angle in degrees of the motion for blur effect. * @default 0 */ - set angle(value: number) - { - this._angle = value; - this.uniforms.uRadian = value * Math.PI / 180; - } + // set angle(value: number) + // { + // this._angle = value; + // this.uniforms.uRadian = value * Math.PI / 180; + // } - get angle(): number - { - return this._angle; - } + // get angle(): number + // { + // return this._angle; + // } /** * Center of the effect. * - * @member {PIXI.Point|number[]} + * @member {Point|number[]} * @default [0, 0] */ - get center(): PointLike - { - return this.uniforms.uCenter; - } + // get center(): PointLike + // { + // return this.uniforms.uCenter; + // } - set center(value: PointLike) - { - this.uniforms.uCenter = value; - } + // set center(value: PointLike) + // { + // this.uniforms.uCenter = value; + // } /** * Outer radius of the effect. The default value of `-1` is infinite. * @default -1 */ - get radius(): number - { - return this.uniforms.uRadius; - } + // get radius(): number + // { + // return this.uniforms.uRadius; + // } - set radius(value: number) - { - if (value < 0 || value === Infinity) - { - value = -1; - } - this.uniforms.uRadius = value; - } + // set radius(value: number) + // { + // if (value < 0 || value === Infinity) + // { + // value = -1; + // } + // this.uniforms.uRadius = value; + // } } - -export { RadialBlurFilter }; - diff --git a/filters/reflection/src/ReflectionFilter.ts b/filters/reflection/src/ReflectionFilter.ts index 234dfdc89..a6abcb316 100644 --- a/filters/reflection/src/ReflectionFilter.ts +++ b/filters/reflection/src/ReflectionFilter.ts @@ -1,11 +1,11 @@ import { vertex } from '@tools/fragments'; import fragment from './reflection.frag'; -import { Filter } from '@pixi/core'; -import type { FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; type Range = number[] | Float32Array; -interface ReflectionFilterOptions +export interface ReflectionFilterOptions { mirror: boolean; boundary: number; @@ -20,11 +20,11 @@ interface ReflectionFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/reflection.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-reflection|@pixi/filter-reflection} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class ReflectionFilter extends Filter +export class ReflectionFilter extends Filter { /** Default constructor options */ public static readonly defaults: ReflectionFilterOptions = { @@ -51,101 +51,108 @@ class ReflectionFilter extends Filter */ constructor(options?: Partial) { - super(vertex, fragment); - this.uniforms.amplitude = new Float32Array(2); - this.uniforms.waveLength = new Float32Array(2); - this.uniforms.alpha = new Float32Array(2); - this.uniforms.dimensions = new Float32Array(2); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'reflection-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.amplitude = new Float32Array(2); + // this.uniforms.waveLength = new Float32Array(2); + // this.uniforms.alpha = new Float32Array(2); + // this.uniforms.dimensions = new Float32Array(2); Object.assign(this, ReflectionFilter.defaults, options); } /** - * Override existing apply method in PIXI.Filter + * Override existing apply method in Filter * @private */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - this.uniforms.dimensions[0] = input.filterFrame?.width; - this.uniforms.dimensions[1] = input.filterFrame?.height; + // this.uniforms.dimensions[0] = input.filterFrame?.width; + // this.uniforms.dimensions[1] = input.filterFrame?.height; - this.uniforms.time = this.time; + // this.uniforms.time = this.time; - filterManager.applyFilter(this, input, output, clear); + // filterManager.applyFilter(this, input, output, clear); } /** * `true` to reflect the image, `false` for waves-only * @default true */ - set mirror(value: boolean) - { - this.uniforms.mirror = value; - } - get mirror(): boolean - { - return this.uniforms.mirror; - } + // set mirror(value: boolean) + // { + // this.uniforms.mirror = value; + // } + // get mirror(): boolean + // { + // return this.uniforms.mirror; + // } /** * Vertical position of the reflection point, default is 50% (middle) * smaller numbers produce a larger reflection, larger numbers produce a smaller reflection. * @default 0.5 */ - set boundary(value: number) - { - this.uniforms.boundary = value; - } - get boundary(): number - { - return this.uniforms.boundary; - } + // set boundary(value: number) + // { + // this.uniforms.boundary = value; + // } + // get boundary(): number + // { + // return this.uniforms.boundary; + // } /** * Starting and ending amplitude of waves * @member {number[]} * @default [0, 20] */ - set amplitude(value: Range) - { - this.uniforms.amplitude[0] = value[0]; - this.uniforms.amplitude[1] = value[1]; - } - get amplitude(): Range - { - return this.uniforms.amplitude; - } + // set amplitude(value: Range) + // { + // this.uniforms.amplitude[0] = value[0]; + // this.uniforms.amplitude[1] = value[1]; + // } + // get amplitude(): Range + // { + // return this.uniforms.amplitude; + // } /** * Starting and ending length of waves * @member {number[]} * @default [30, 100] */ - set waveLength(value: Range) - { - this.uniforms.waveLength[0] = value[0]; - this.uniforms.waveLength[1] = value[1]; - } - get waveLength(): Range - { - return this.uniforms.waveLength; - } + // set waveLength(value: Range) + // { + // this.uniforms.waveLength[0] = value[0]; + // this.uniforms.waveLength[1] = value[1]; + // } + // get waveLength(): Range + // { + // return this.uniforms.waveLength; + // } /** * Starting and ending alpha values * @member {number[]} * @default [1, 1] */ - set alpha(value: Range) - { - this.uniforms.alpha[0] = value[0]; - this.uniforms.alpha[1] = value[1]; - } - get alpha(): Range - { - return this.uniforms.alpha; - } + // set alpha(value: Range) + // { + // this.uniforms.alpha[0] = value[0]; + // this.uniforms.alpha[1] = value[1]; + // } + // get alpha(): Range + // { + // return this.uniforms.alpha; + // } } - -export { ReflectionFilter }; -export type { ReflectionFilterOptions }; diff --git a/filters/rgb-split/src/RGBSplitFilter.ts b/filters/rgb-split/src/RGBSplitFilter.ts index 086d8d30c..7dd856802 100644 --- a/filters/rgb-split/src/RGBSplitFilter.ts +++ b/filters/rgb-split/src/RGBSplitFilter.ts @@ -1,7 +1,7 @@ import { vertex } from '@tools/fragments'; import fragment from './rgb-split.frag'; -import { Filter } from '@pixi/core'; -import type { Point } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { Point } from 'pixi.js'; type Offset = [number, number] | Point; @@ -10,67 +10,73 @@ type Offset = [number, number] | Point; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/rgb.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-rgb-split|@pixi/filter-rgb-split} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class RGBSplitFilter extends Filter +export class RGBSplitFilter extends Filter { /** - * @param {PIXI.Point | number[]} [red=[-10,0]] - Red channel offset - * @param {PIXI.Point | number[]} [green=[0, 10]] - Green channel offset - * @param {PIXI.Point | number[]} [blue=[0, 0]] - Blue channel offset + * @param {Point | number[]} [red=[-10,0]] - Red channel offset + * @param {Point | number[]} [green=[0, 10]] - Green channel offset + * @param {Point | number[]} [blue=[0, 0]] - Blue channel offset */ constructor(red: Offset = [-10, 0], green: Offset = [0, 10], blue: Offset = [0, 0]) { - super(vertex, fragment); - this.red = red; - this.green = green; - this.blue = blue; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'rgb-split-filter', + }); + + super({ + glProgram, + resources: {}, + }); + // this.red = red; + // this.green = green; + // this.blue = blue; } /** * Red channel offset. * - * @member {PIXI.Point | number[]} + * @member {Point | number[]} */ - get red(): Offset - { - return this.uniforms.red; - } - set red(value: Offset) - { - this.uniforms.red = value; - } + // get red(): Offset + // { + // return this.uniforms.red; + // } + // set red(value: Offset) + // { + // this.uniforms.red = value; + // } /** * Green channel offset. * - * @member {PIXI.Point | number[]} + * @member {Point | number[]} */ - get green(): Offset - { - return this.uniforms.green; - } - set green(value: Offset) - { - this.uniforms.green = value; - } + // get green(): Offset + // { + // return this.uniforms.green; + // } + // set green(value: Offset) + // { + // this.uniforms.green = value; + // } /** * Blue offset. * - * @member {PIXI.Point | number[]} + * @member {Point | number[]} */ - get blue(): Offset - { - return this.uniforms.blue; - } - set blue(value: Offset) - { - this.uniforms.blue = value; - } + // get blue(): Offset + // { + // return this.uniforms.blue; + // } + // set blue(value: Offset) + // { + // this.uniforms.blue = value; + // } } - -export { RGBSplitFilter }; - diff --git a/filters/simple-lightmap/src/SimpleLightmapFilter.ts b/filters/simple-lightmap/src/SimpleLightmapFilter.ts index 732fbd3ab..ba8dedda7 100644 --- a/filters/simple-lightmap/src/SimpleLightmapFilter.ts +++ b/filters/simple-lightmap/src/SimpleLightmapFilter.ts @@ -1,7 +1,7 @@ import { vertex } from '@tools/fragments'; import fragment from './simpleLightmap.frag'; -import { Filter, utils } from '@pixi/core'; -import type { Texture, FilterSystem, RenderTexture, CLEAR_MODES } from '@pixi/core'; +import { Filter, GlProgram } from 'pixi.js'; +import type { Texture, FilterSystem, RenderTexture, RenderSurface } from 'pixi.js'; type Color = number | number[]; @@ -16,98 +16,106 @@ type Color = number | number[]; * * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/simple-lightmap.png) * @class -* @extends PIXI.Filter +* @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-simple-lightmap|@pixi/filter-simple-lightmap} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} * * @example * displayObject.filters = [new SimpleLightmapFilter(texture, 0x666666)]; */ -class SimpleLightmapFilter extends Filter +export class SimpleLightmapFilter extends Filter { private _color = 0x0; /** - * @param {PIXI.Texture} texture - a texture where your lightmap is rendered + * @param {Texture} texture - a texture where your lightmap is rendered * @param {Array|number} [color=0x000000] - An RGBA array of the ambient color * @param {number} [alpha=1] - Default alpha set independent of color (if it's a number, not array). */ constructor(texture: Texture, color: Color = 0x000000, alpha = 1) { - super(vertex, fragment); - this.uniforms.dimensions = new Float32Array(2); - this.uniforms.ambientColor = new Float32Array([0, 0, 0, alpha]); - this.texture = texture; - this.color = color; + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'simple-lightmap-filter', + }); + + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.dimensions = new Float32Array(2); + // this.uniforms.ambientColor = new Float32Array([0, 0, 0, alpha]); + // this.texture = texture; + // this.color = color; } /** * Applies the filter. * @private - * @param {PIXI.FilterManager} filterManager - The manager. - * @param {PIXI.RenderTarget} input - The input target. - * @param {PIXI.RenderTarget} output - The output target. + * @param {FilterManager} filterManager - The manager. + * @param {RenderTarget} input - The input target. + * @param {RenderTarget} output - The output target. */ - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { - this.uniforms.dimensions[0] = input.filterFrame?.width; - this.uniforms.dimensions[1] = input.filterFrame?.height; + // this.uniforms.dimensions[0] = input.filterFrame?.width; + // this.uniforms.dimensions[1] = input.filterFrame?.height; - // draw the filter... - filterManager.applyFilter(this, input, output, clear); + // // draw the filter... + // filterManager.applyFilter(this, input, output, clear); } /** * a texture where your lightmap is rendered - * @member {PIXI.Texture} + * @member {Texture} */ - get texture(): Texture - { - return this.uniforms.uLightmap; - } - set texture(value: Texture) - { - this.uniforms.uLightmap = value; - } + // get texture(): Texture + // { + // return this.uniforms.uLightmap; + // } + // set texture(value: Texture) + // { + // this.uniforms.uLightmap = value; + // } /** * An RGBA array of the ambient color or a hex color without alpha * @member {Array|number} */ - set color(value: Color) - { - const arr = this.uniforms.ambientColor; + // set color(value: Color) + // { + // const arr = this.uniforms.ambientColor; - if (typeof value === 'number') - { - utils.hex2rgb(value, arr); - this._color = value; - } - else - { - arr[0] = value[0]; - arr[1] = value[1]; - arr[2] = value[2]; - arr[3] = value[3]; - this._color = utils.rgb2hex(arr); - } - } - get color(): Color - { - return this._color; - } + // if (typeof value === 'number') + // { + // utils.hex2rgb(value, arr); + // this._color = value; + // } + // else + // { + // arr[0] = value[0]; + // arr[1] = value[1]; + // arr[2] = value[2]; + // arr[3] = value[3]; + // this._color = utils.rgb2hex(arr); + // } + // } + // get color(): Color + // { + // return this._color; + // } /** * When setting `color` as hex, this can be used to set alpha independently. */ - get alpha(): number - { - return this.uniforms.ambientColor[3]; - } - set alpha(value: number) - { - this.uniforms.ambientColor[3] = value; - } + // get alpha(): number + // { + // return this.uniforms.ambientColor[3]; + // } + // set alpha(value: number) + // { + // this.uniforms.ambientColor[3] = value; + // } } - -export { SimpleLightmapFilter }; diff --git a/filters/tilt-shift/src/TiltShiftAxisFilter.ts b/filters/tilt-shift/src/TiltShiftAxisFilter.ts index 0b8f2ea55..783db453e 100644 --- a/filters/tilt-shift/src/TiltShiftAxisFilter.ts +++ b/filters/tilt-shift/src/TiltShiftAxisFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './tilt-shift.frag'; -import { Filter, Point } from '@pixi/core'; +import { Filter, GlProgram, Point } from 'pixi.js'; // @author Vico @vicocotea // original filter https://github.com/evanw/glfx.js/blob/master/src/filters/blur/tiltshift.js @@ -9,7 +9,7 @@ import { Filter, Point } from '@pixi/core'; /** * Options for creating filter. */ -interface TiltShiftFilterOptions +export interface TiltShiftFilterOptions { /** The strength of the blur. */ blur: number; @@ -25,21 +25,30 @@ interface TiltShiftFilterOptions * A TiltShiftAxisFilter. * * @class - * @extends PIXI.Filter + * @extends Filter * @private */ -class TiltShiftAxisFilter extends Filter +export class TiltShiftAxisFilter extends Filter { constructor(options: TiltShiftFilterOptions) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'tilt-shift-axis-filter', + }); - this.uniforms.blur = options.blur; - this.uniforms.gradientBlur = options.gradientBlur; - this.uniforms.start = options.start ?? new Point(0, window.innerHeight / 2); - this.uniforms.end = options.end ?? new Point(600, window.innerHeight / 2); - this.uniforms.delta = new Point(30, 30); - this.uniforms.texSize = new Point(window.innerWidth, window.innerHeight); + super({ + glProgram, + resources: {}, + }); + + // this.uniforms.blur = options.blur; + // this.uniforms.gradientBlur = options.gradientBlur; + // this.uniforms.start = options.start ?? new Point(0, window.innerHeight / 2); + // this.uniforms.end = options.end ?? new Point(600, window.innerHeight / 2); + // this.uniforms.delta = new Point(30, 30); + // this.uniforms.texSize = new Point(window.innerWidth, window.innerHeight); this.updateDelta(); } @@ -50,8 +59,8 @@ class TiltShiftAxisFilter extends Filter */ protected updateDelta(): void { - this.uniforms.delta.x = 0; - this.uniforms.delta.y = 0; + // this.uniforms.delta.x = 0; + // this.uniforms.delta.y = 0; } /** @@ -59,61 +68,58 @@ class TiltShiftAxisFilter extends Filter * * @memberof TiltShiftAxisFilter# */ - get blur(): number - { - return this.uniforms.blur; - } - set blur(value: number) - { - this.uniforms.blur = value; - } + // get blur(): number + // { + // return this.uniforms.blur; + // } + // set blur(value: number) + // { + // this.uniforms.blur = value; + // } /** * The strength of the gradient blur. * * @memberof TiltShiftAxisFilter# */ - get gradientBlur(): number - { - return this.uniforms.gradientBlur; - } - set gradientBlur(value: number) - { - this.uniforms.gradientBlur = value; - } + // get gradientBlur(): number + // { + // return this.uniforms.gradientBlur; + // } + // set gradientBlur(value: number) + // { + // this.uniforms.gradientBlur = value; + // } /** * The X value to start the effect at. * - * @member {PIXI.Point} + * @member {Point} * @memberof TiltShiftAxisFilter# */ - get start(): Point - { - return this.uniforms.start; - } - set start(value: Point) - { - this.uniforms.start = value; - this.updateDelta(); - } + // get start(): Point + // { + // return this.uniforms.start; + // } + // set start(value: Point) + // { + // this.uniforms.start = value; + // this.updateDelta(); + // } /** * The X value to end the effect at. * - * @member {PIXI.Point} + * @member {Point} * @memberof TiltShiftAxisFilter# */ - get end(): Point - { - return this.uniforms.end; - } - set end(value: Point) - { - this.uniforms.end = value; - this.updateDelta(); - } + // get end(): Point + // { + // return this.uniforms.end; + // } + // set end(value: Point) + // { + // this.uniforms.end = value; + // this.updateDelta(); + // } } - -export { TiltShiftAxisFilter }; -export type { TiltShiftFilterOptions }; diff --git a/filters/tilt-shift/src/TiltShiftFilter.ts b/filters/tilt-shift/src/TiltShiftFilter.ts index f1e83b64e..d2ffbd3ee 100644 --- a/filters/tilt-shift/src/TiltShiftFilter.ts +++ b/filters/tilt-shift/src/TiltShiftFilter.ts @@ -1,7 +1,7 @@ import { TiltShiftXFilter } from './TiltShiftXFilter'; import { TiltShiftYFilter } from './TiltShiftYFilter'; -import { Filter, FilterSystem, RenderTexture, utils } from '@pixi/core'; -import type { Point, CLEAR_MODES } from '@pixi/core'; +import { Filter, FilterSystem, RenderTexture } from 'pixi.js'; +import type { Point, RenderSurface, Texture } from 'pixi.js'; import type { TiltShiftFilterOptions } from './TiltShiftAxisFilter'; // @author Vico @vicocotea @@ -13,11 +13,11 @@ import type { TiltShiftFilterOptions } from './TiltShiftAxisFilter'; * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/tilt-shift.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-tilt-shift|@pixi/filter-tilt-shift} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class TiltShiftFilter extends Filter +export class TiltShiftFilter extends Filter { /** Default options */ static readonly defaults: TiltShiftFilterOptions = { @@ -43,8 +43,8 @@ class TiltShiftFilter extends Filter * @deprecated since 5.3.0 * @param {number} [blur=100] - The strength of the blur. * @param {number} [gradientBlur=600] - The strength of the gradient blur. - * @param {PIXI.Point} [start=null] - The position to start the effect at. - * @param {PIXI.Point} [end=null] - The position to end the effect at. + * @param {Point} [start=null] - The position to start the effect at. + * @param {Point} [end=null] - The position to end the effect at. */ constructor(blur?: number, gradientBlur?: number, start?: Point, end?: Point); @@ -65,7 +65,7 @@ class TiltShiftFilter extends Filter this.tiltShiftYFilter = new TiltShiftYFilter(options as TiltShiftFilterOptions); } - apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clearMode: CLEAR_MODES): void + apply(filterManager: FilterSystem, input: Texture, output: RenderSurface, clear: boolean): void { const renderTarget = filterManager.getFilterTexture(); @@ -97,7 +97,7 @@ class TiltShiftFilter extends Filter /** * The position to start the effect at. * - * @member {PIXI.Point} + * @member {Point} */ get start(): Point { @@ -111,7 +111,7 @@ class TiltShiftFilter extends Filter /** * The position to end the effect at. * - * @member {PIXI.Point} + * @member {Point} */ get end(): Point { @@ -123,5 +123,3 @@ class TiltShiftFilter extends Filter } } -export { TiltShiftFilter }; - diff --git a/filters/tilt-shift/src/TiltShiftXFilter.ts b/filters/tilt-shift/src/TiltShiftXFilter.ts index 4214ca87f..9dfef7ddf 100644 --- a/filters/tilt-shift/src/TiltShiftXFilter.ts +++ b/filters/tilt-shift/src/TiltShiftXFilter.ts @@ -8,23 +8,21 @@ import { TiltShiftAxisFilter } from './TiltShiftAxisFilter'; * A TiltShiftXFilter. * * @class - * @extends PIXI.TiltShiftAxisFilter + * @extends TiltShiftAxisFilter * @private */ -class TiltShiftXFilter extends TiltShiftAxisFilter +export class TiltShiftXFilter extends TiltShiftAxisFilter { /** * Updates the filter delta values. */ protected updateDelta(): void { - const dx = this.uniforms.end.x - this.uniforms.start.x; - const dy = this.uniforms.end.y - this.uniforms.start.y; - const d = Math.sqrt((dx * dx) + (dy * dy)); + // const dx = this.uniforms.end.x - this.uniforms.start.x; + // const dy = this.uniforms.end.y - this.uniforms.start.y; + // const d = Math.sqrt((dx * dx) + (dy * dy)); - this.uniforms.delta.x = dx / d; - this.uniforms.delta.y = dy / d; + // this.uniforms.delta.x = dx / d; + // this.uniforms.delta.y = dy / d; } } - -export { TiltShiftXFilter }; diff --git a/filters/tilt-shift/src/TiltShiftYFilter.ts b/filters/tilt-shift/src/TiltShiftYFilter.ts index 98c4461f5..66cfe0071 100644 --- a/filters/tilt-shift/src/TiltShiftYFilter.ts +++ b/filters/tilt-shift/src/TiltShiftYFilter.ts @@ -8,23 +8,21 @@ import { TiltShiftAxisFilter } from './TiltShiftAxisFilter'; * A TiltShiftYFilter. * * @class - * @extends PIXI.TiltShiftAxisFilter + * @extends TiltShiftAxisFilter * @private */ -class TiltShiftYFilter extends TiltShiftAxisFilter +export class TiltShiftYFilter extends TiltShiftAxisFilter { /** * Updates the filter delta values. */ protected updateDelta(): void { - const dx = this.uniforms.end.x - this.uniforms.start.x; - const dy = this.uniforms.end.y - this.uniforms.start.y; - const d = Math.sqrt((dx * dx) + (dy * dy)); + // const dx = this.uniforms.end.x - this.uniforms.start.x; + // const dy = this.uniforms.end.y - this.uniforms.start.y; + // const d = Math.sqrt((dx * dx) + (dy * dy)); - this.uniforms.delta.x = -dy / d; - this.uniforms.delta.y = dx / d; + // this.uniforms.delta.x = -dy / d; + // this.uniforms.delta.y = dx / d; } } - -export { TiltShiftYFilter }; diff --git a/filters/twist/src/TwistFilter.ts b/filters/twist/src/TwistFilter.ts index fc2f72115..352abfda9 100644 --- a/filters/twist/src/TwistFilter.ts +++ b/filters/twist/src/TwistFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './twist.frag'; -import { Filter, Point } from '@pixi/core'; +import { Filter, GlProgram, Point } from 'pixi.js'; interface TwistFilterOptions { @@ -15,11 +15,11 @@ interface TwistFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/twist.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-twist|@pixi/filter-twist} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class TwistFilter extends Filter +export class TwistFilter extends Filter { /** Default constructor options. */ public static readonly defaults: TwistFilterOptions = { @@ -34,11 +34,20 @@ class TwistFilter extends Filter * @param {number} [options.radius=200] - The radius of the twist. * @param {number} [options.angle=4] - The angle of the twist. * @param {number} [options.padding=20] - Padding for filter area. - * @param {PIXI.Point} [options.offset] - Center of twist, in local, pixel coordinates. + * @param {Point} [options.offset] - Center of twist, in local, pixel coordinates. */ constructor(options?: Partial) { - super(vertex, fragment); + const glProgram = new GlProgram({ + vertex, + fragment, + name: 'twist-filter', + }); + + super({ + glProgram, + resources: {}, + }); Object.assign(this, TwistFilter.defaults, options); } @@ -46,41 +55,38 @@ class TwistFilter extends Filter /** * This point describes the the offset of the twist. * - * @member {PIXI.Point} + * @member {Point} */ - get offset(): Point - { - return this.uniforms.offset; - } - set offset(value: Point) - { - this.uniforms.offset = value; - } + // get offset(): Point + // { + // return this.uniforms.offset; + // } + // set offset(value: Point) + // { + // this.uniforms.offset = value; + // } /** * The radius of the twist. */ - get radius(): number - { - return this.uniforms.radius; - } - set radius(value: number) - { - this.uniforms.radius = value; - } + // get radius(): number + // { + // return this.uniforms.radius; + // } + // set radius(value: number) + // { + // this.uniforms.radius = value; + // } /** * The angle of the twist. */ - get angle(): number - { - return this.uniforms.angle; - } - set angle(value: number) - { - this.uniforms.angle = value; - } + // get angle(): number + // { + // return this.uniforms.angle; + // } + // set angle(value: number) + // { + // this.uniforms.angle = value; + // } } - -export { TwistFilter }; -export type { TwistFilterOptions }; diff --git a/filters/zoom-blur/src/ZoomBlurFilter.ts b/filters/zoom-blur/src/ZoomBlurFilter.ts index 8898d117e..0af9565a7 100644 --- a/filters/zoom-blur/src/ZoomBlurFilter.ts +++ b/filters/zoom-blur/src/ZoomBlurFilter.ts @@ -1,6 +1,6 @@ import { vertex } from '@tools/fragments'; import fragment from './zoom-blur.frag'; -import { Filter, Point } from '@pixi/core'; +import { Filter, GlProgram, Point } from 'pixi.js'; type PointLike = Point | number[]; @@ -18,11 +18,11 @@ interface ZoomBlurFilterOptions * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/zoom-blur.png) * * @class - * @extends PIXI.Filter + * @extends Filter * @see {@link https://www.npmjs.com/package/@pixi/filter-zoom-blur|@pixi/filter-zoom-blur} * @see {@link https://www.npmjs.com/package/pixi-filters|pixi-filters} */ -class ZoomBlurFilter extends Filter +export class ZoomBlurFilter extends Filter { /** Default constructor options. */ public static readonly defaults: ZoomBlurFilterOptions = { @@ -36,7 +36,7 @@ class ZoomBlurFilter extends Filter /** * @param {object} [options] - Filter options to use. * @param {number} [options.strength=0.1] - Sets the strength of the zoom blur effect - * @param {PIXI.Point|number[]} [options.center=[0,0]] - The center of the zoom. + * @param {Point|number[]} [options.center=[0,0]] - The center of the zoom. * @param {number} [options.innerRadius=0] - The inner radius of zoom. The part in inner circle won't apply * zoom blur effect. * @param {number} [options.radius=-1] - See `radius` property. @@ -47,7 +47,16 @@ class ZoomBlurFilter extends Filter { const { maxKernelSize, ...rest }: ZoomBlurFilterOptions = Object.assign(ZoomBlurFilter.defaults, options); - super(vertex, fragment.replace('${maxKernelSize}', maxKernelSize.toFixed(1))); + const glProgram = new GlProgram({ + vertex, + fragment: fragment.replace('${maxKernelSize}', maxKernelSize.toFixed(1)), + name: 'zoom-blur-filter', + }); + + super({ + glProgram, + resources: {}, + }); Object.assign(this, rest); } @@ -55,62 +64,59 @@ class ZoomBlurFilter extends Filter /** * Center of the effect. * - * @member {PIXI.Point|number[]} + * @member {Point|number[]} * @default [0, 0] */ - get center(): PointLike - { - return this.uniforms.uCenter; - } - set center(value: PointLike) - { - this.uniforms.uCenter = value; - } + // get center(): PointLike + // { + // return this.uniforms.uCenter; + // } + // set center(value: PointLike) + // { + // this.uniforms.uCenter = value; + // } /** * Intensity of the zoom effect. * @default 0.1 */ - get strength(): number - { - return this.uniforms.uStrength; - } - set strength(value: number) - { - this.uniforms.uStrength = value; - } + // get strength(): number + // { + // return this.uniforms.uStrength; + // } + // set strength(value: number) + // { + // this.uniforms.uStrength = value; + // } /** * Radius of the inner region not effected by blur. * @default 0 */ - get innerRadius(): number - { - return this.uniforms.uInnerRadius; - } - set innerRadius(value: number) - { - this.uniforms.uInnerRadius = value; - } + // get innerRadius(): number + // { + // return this.uniforms.uInnerRadius; + // } + // set innerRadius(value: number) + // { + // this.uniforms.uInnerRadius = value; + // } /** * Outer radius of the effect. The default value is `-1`. * `< 0.0` means it's infinity. * @default -1 */ - get radius(): number - { - return this.uniforms.uRadius; - } - set radius(value: number) - { - if (value < 0 || value === Infinity) - { - value = -1; - } - this.uniforms.uRadius = value; - } + // get radius(): number + // { + // return this.uniforms.uRadius; + // } + // set radius(value: number) + // { + // if (value < 0 || value === Infinity) + // { + // value = -1; + // } + // this.uniforms.uRadius = value; + // } } - -export { ZoomBlurFilter }; -export type { ZoomBlurFilterOptions };