• 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

import { vertex } from '@tools/fragments';
import fragment from './bevel.frag';
import { Filter } from '@pixi/core';
import { DEG_TO_RAD } from '@pixi/math';
import { rgb2hex, hex2rgb } from '@pixi/utils';

interface BevelFilterOptions {
    rotation: number,
    thickness: number,
    lightColor: number,
    lightAlpha: number,
    shadowColor: number,
    shadowAlpha: number,
}

/**
 * Bevel Filter.<br>
 * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/bevel.png)
 *
 * @class
 * @extends PIXI.Filter
 * @memberof PIXI.filters
 * @see @pixi/filter-bevel
 * @see pixi-filters
 */
class BevelFilter extends Filter
{
    private _thickness = 2;
    private _angle = 0;

    /**
     * @param {object} [options] - The optional parameters of the filter.
     * @param {number} [options.rotation = 45] - The angle of the light in degrees.
     * @param {number} [options.thickness = 2] - The tickness of the bevel.
     * @param {number} [options.lightColor = 0xffffff] - Color of the light.
     * @param {number} [options.lightAlpha = 0.7] - Alpha of the light.
     * @param {number} [options.shadowColor = 0x000000] - Color of the shadow.
     * @param {number} [options.shadowAlpha = 0.7] - Alpha of the shadow.
     */
    constructor(options?: Partial<BevelFilterOptions>)
    {
        super(vertex, fragment);

        this.uniforms.lightColor = new Float32Array(3);
        this.uniforms.shadowColor = new Float32Array(3);

        Object.assign(this, {
            rotation: 45,
            thickness: 2,
            lightColor: 0xffffff,
            lightAlpha: 0.7,
            shadowColor: 0x000000,
            shadowAlpha: 0.7,
        }, options);

        // Workaround: https://github.com/pixijs/filters/issues/230
        // applies correctly only if there is at least a single-pixel padding with alpha=0 around an image
        // To solve this problem, a padding of 1 put on the filter should suffice
        this.padding = 1;
    }

    /**
     * Update the transform matrix of offset angle.
     * @private
     */
    private _updateTransform()
    {
        this.uniforms.transformX = this._thickness * Math.cos(this._angle);
        this.uniforms.transformY = this._thickness * Math.sin(this._angle);
    }

    /**
     * The angle of the light in degrees.
     * @default 45
     */
    get rotation(): number
    {
        return this._angle / DEG_TO_RAD;
    }
    set rotation(value: number)
    {
        this._angle = value * DEG_TO_RAD;
        this._updateTransform();
    }

    /**
     * The tickness of the bevel.
     * @default 2
     */
    get thickness(): number
    {
        return this._thickness;
    }
    set thickness(value: number)
    {
        this._thickness = value;
        this._updateTransform();
    }

    /**
     * Color of the light.
     * @default 0xffffff
     */
    get lightColor(): number
    {
        return rgb2hex(this.uniforms.lightColor);
    }
    set lightColor(value: number)
    {
        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;
    }

    /**
     * Color of the shadow.
     * @default 0x000000
     */
    get shadowColor(): number
    {
        return rgb2hex(this.uniforms.shadowColor);
    }
    set shadowColor(value: number)
    {
        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;
    }
}

export { BevelFilter };
export type { BevelFilterOptions };