- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
import { vertex } from '@tools/fragments';
import fragment from './crt.frag';
import { Filter } from '@pixi/core';
import type { Rectangle } from '@pixi/math';
import type { FilterSystem, RenderTexture } from '@pixi/core';
import type { CLEAR_MODES } from '@pixi/constants';
interface CRTFilterOptions {
curvature: number;
lineWidth: number;
lineContrast: number;
verticalLine: boolean;
noise: number;
noiseSize: number;
seed: number;
vignetting: number;
vignettingAlpha: number;
vignettingBlur: number;
time: number;
}
/**
* The CRTFilter applies a CRT effect to an object.<br>
* 
*
* @class
* @extends PIXI.Filter
* @memberof PIXI.filters
* @see @pixi/filter-crt
* @see pixi-filters
*/
class CRTFilter extends Filter
{
/** Default constructor options */
public static readonly defaults: CRTFilterOptions = {
curvature: 1.0,
lineWidth: 1.0,
lineContrast: 0.25,
verticalLine: false,
noise: 0.0,
noiseSize: 1.0,
seed: 0.0,
vignetting: 0.3,
vignettingAlpha: 1.0,
vignettingBlur: 0.3,
time: 0.0,
};
/** For animating interlaced lines */
public time = 0;
/** A seed value to apply to the random noise generation */
public seed = 0;
/**
* @param {object} [options] - The optional parameters of CRT effect
* @param {number} [options.curvature=1.0] - Bent of interlaced lines, higher value means more bend
* @param {number} [options.lineWidth=1.0] - Width of the interlaced lines
* @param {number} [options.lineContrast=0.25] - Contrast of interlaced lines
* @param {number} [options.verticalLine=false] - `true` is vertical lines, `false` is horizontal
* @param {number} [options.noise=0.3] - Opacity/intensity of the noise effect between `0` and `1`
* @param {number} [options.noiseSize=1.0] - The size of the noise particles
* @param {number} [options.seed=0] - A seed value to apply to the random noise generation
* @param {number} [options.vignetting=0.3] - The radius of the vignette effect, smaller
* values produces a smaller vignette
* @param {number} [options.vignettingAlpha=1.0] - Amount of opacity of vignette
* @param {number} [options.vignettingBlur=0.3] - Blur intensity of the vignette
* @param {number} [options.time=0] - For animating interlaced lines
*/
constructor(options?: Partial<CRTFilterOptions>)
{
super(vertex, fragment);
this.uniforms.dimensions = new Float32Array(2);
Object.assign(this, CRTFilter.defaults, options);
}
/**
* Override existing apply method in PIXI.Filter
* @private
*/
apply(filterManager: FilterSystem, input: RenderTexture, output: RenderTexture, clear: CLEAR_MODES): void
{
const { width, height } = input.filterFrame as Rectangle;
this.uniforms.dimensions[0] = width;
this.uniforms.dimensions[1] = height;
this.uniforms.seed = this.seed;
this.uniforms.time = this.time;
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;
}
/**
* Width of interlaced lines
* @default 1
*/
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;
}
/**
* `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;
}
/**
* 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;
}
/**
* The size of the noise particles
* @default 0
*/
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;
}
/**
* Amount of opacity of vignette
* @default 0
*/
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;
}
}
export { CRTFilter };
export type { CRTFilterOptions };