• 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

import { ObjectRenderer, Shader, State, QuadUv, ExtensionType } from '@pixi/core';
import { WRAP_MODES } from '@pixi/constants';
import { Matrix } from '@pixi/math';
import { premultiplyTintToRgba, correctBlendMode } from '@pixi/utils';

import fragmentSimpleSrc from './sprite-tiling-simple.frag';
import gl1VertexSrc from './sprite-tiling-fallback.vert';
import gl1FragmentSrc from './sprite-tiling-fallback.frag';
import gl2VertexSrc from './sprite-tiling.vert';
import gl2FragmentSrc from './sprite-tiling.frag';

import type { Renderer, ExtensionMetadata } from '@pixi/core';
import type { TilingSprite } from './TilingSprite';

const tempMat = new Matrix();

/**
 * WebGL renderer plugin for tiling sprites
 * @class
 * @memberof PIXI
 * @extends PIXI.ObjectRenderer
 */
export class TilingSpriteRenderer extends ObjectRenderer
{
    /** @ignore */
    static extension: ExtensionMetadata = {
        name: 'tilingSprite',
        type: ExtensionType.RendererPlugin,
    };

    public shader: Shader;
    public simpleShader: Shader;
    public quad: QuadUv;
    public readonly state: State;

    /**
     * constructor for renderer
     * @param {PIXI.Renderer} renderer - The renderer this tiling awesomeness works for.
     */
    constructor(renderer: Renderer)
    {
        super(renderer);

        // WebGL version is not available during initialization!
        renderer.runners.contextChange.add(this);

        this.quad = new QuadUv();

        /**
         * The WebGL state in which this renderer will work.
         * @member {PIXI.State}
         * @readonly
         */
        this.state = State.for2d();
    }

    /** Creates shaders when context is initialized. */
    contextChange(): void
    {
        const renderer = this.renderer;
        const uniforms = { globals: renderer.globalUniforms };

        this.simpleShader = Shader.from(gl1VertexSrc, fragmentSimpleSrc, uniforms);
        this.shader = renderer.context.webGLVersion > 1
            ? Shader.from(gl2VertexSrc, gl2FragmentSrc, uniforms)
            : Shader.from(gl1VertexSrc, gl1FragmentSrc, uniforms);
    }

    /**
     * @param {PIXI.TilingSprite} ts - tilingSprite to be rendered
     */
    public render(ts: TilingSprite): void
    {
        const renderer = this.renderer;
        const quad = this.quad;

        let vertices = quad.vertices;

        vertices[0] = vertices[6] = (ts._width) * -ts.anchor.x;
        vertices[1] = vertices[3] = ts._height * -ts.anchor.y;

        vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x);
        vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y);

        const anchorX = ts.uvRespectAnchor ? ts.anchor.x : 0;
        const anchorY = ts.uvRespectAnchor ? ts.anchor.y : 0;

        vertices = quad.uvs;

        vertices[0] = vertices[6] = -anchorX;
        vertices[1] = vertices[3] = -anchorY;

        vertices[2] = vertices[4] = 1.0 - anchorX;
        vertices[5] = vertices[7] = 1.0 - anchorY;

        quad.invalidate();

        const tex = ts._texture;
        const baseTex = tex.baseTexture;
        const premultiplied = baseTex.alphaMode > 0;
        const lt = ts.tileTransform.localTransform;
        const uv = ts.uvMatrix;
        let isSimple = baseTex.isPowerOfTwo
            && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height;

        // auto, force repeat wrapMode for big tiling textures
        if (isSimple)
        {
            if (!baseTex._glTextures[renderer.CONTEXT_UID])
            {
                if (baseTex.wrapMode === WRAP_MODES.CLAMP)
                {
                    baseTex.wrapMode = WRAP_MODES.REPEAT;
                }
            }
            else
            {
                isSimple = baseTex.wrapMode !== WRAP_MODES.CLAMP;
            }
        }

        const shader = isSimple ? this.simpleShader : this.shader;

        const w = tex.width;
        const h = tex.height;
        const W = ts._width;
        const H = ts._height;

        tempMat.set(lt.a * w / W,
            lt.b * w / H,
            lt.c * h / W,
            lt.d * h / H,
            lt.tx / W,
            lt.ty / H);

        // that part is the same as above:
        // tempMat.identity();
        // tempMat.scale(tex.width, tex.height);
        // tempMat.prepend(lt);
        // tempMat.scale(1.0 / ts._width, 1.0 / ts._height);

        tempMat.invert();
        if (isSimple)
        {
            tempMat.prepend(uv.mapCoord);
        }
        else
        {
            shader.uniforms.uMapCoord = uv.mapCoord.toArray(true);
            shader.uniforms.uClampFrame = uv.uClampFrame;
            shader.uniforms.uClampOffset = uv.uClampOffset;
        }

        shader.uniforms.uTransform = tempMat.toArray(true);
        shader.uniforms.uColor = premultiplyTintToRgba(ts.tint, ts.worldAlpha,
            shader.uniforms.uColor, premultiplied);
        shader.uniforms.translationMatrix = ts.transform.worldTransform.toArray(true);
        shader.uniforms.uSampler = tex;

        renderer.shader.bind(shader);
        renderer.geometry.bind(quad);

        this.state.blendMode = correctBlendMode(ts.blendMode, premultiplied);
        renderer.state.set(this.state);
        renderer.geometry.draw(this.renderer.gl.TRIANGLES, 6, 0);
    }
}