@spearwolf/twopoint5d/lib/sprites/TexturedSprites/TexturedSpritesMaterial.js

Create 2.5D realtime graphics and pixelart with WebGL and three.js

var _a;
import { createEffect, createSignal, SignalGroup } from '@spearwolf/signalize';
import { attribute, float, rotate, vec3, vec4 } from 'three/tsl';
import { NodeMaterial } from 'three/webgpu';
import { billboardVertexByInstancePosition, colorFromTextureByTexCoords, vertexByInstancePosition } from '../node-utils.js';
export class TexturedSpritesMaterial extends NodeMaterial {
    static { this.PositionAttributeName = 'position'; }
    static { this.InstancePositionAttributeName = 'instancePosition'; }
    static { this.RotationAttributeName = 'rotation'; }
    static { this.QuadSizeAttributeName = 'quadSize'; }
    #texCoordsNode = createSignal(undefined, { attach: this });
    #vertexPositionNode = createSignal(attribute(_a.PositionAttributeName), {
        attach: this,
    });
    #rotationNode = createSignal(attribute(_a.RotationAttributeName), { attach: this });
    #instancePositionNode = createSignal(attribute(_a.InstancePositionAttributeName), {
        attach: this,
    });
    #quadSizeNode = createSignal(attribute(_a.QuadSizeAttributeName), { attach: this });
    #renderAsBillboards = createSignal(false, { attach: this });
    #colorMap = createSignal(undefined, { attach: this });
    get colorMap() {
        return this.#colorMap.get();
    }
    set colorMap(value) {
        this.#colorMap.set(value);
    }
    get vertexPositionNode() {
        return this.#vertexPositionNode.get();
    }
    set vertexPositionNode(node) {
        this.#vertexPositionNode.set(node);
    }
    get texCoordsNode() {
        return this.#texCoordsNode.get();
    }
    set texCoordsNode(node) {
        this.#texCoordsNode.set(node);
    }
    get rotationNode() {
        return this.#rotationNode.get();
    }
    set rotationNode(node) {
        this.#rotationNode.set(node);
    }
    get instancePositionNode() {
        return this.#instancePositionNode.get();
    }
    set instancePositionNode(node) {
        this.#instancePositionNode.set(node);
    }
    get quadSizeNode() {
        return this.#quadSizeNode.get();
    }
    set quadSizeNode(node) {
        this.#quadSizeNode.set(node);
    }
    get renderAsBillboards() {
        return this.#renderAsBillboards.get();
    }
    set renderAsBillboards(value) {
        this.#renderAsBillboards.set(value);
    }
    constructor(options) {
        super();
        this.name = options?.name ?? 'twopoint5d.TexturedSpritesMaterial';
        this.renderAsBillboards = options?.renderAsBillboards ?? this.#renderAsBillboards.value;
        this.alphaTestNode = float(0.001);
        this.colorMap = options?.colorMap;
        createEffect(() => {
            const rotationEulerNode = vec3(0, 0, this.rotationNode.toFloat());
            const vertexPosition = rotate(this.vertexPositionNode, rotationEulerNode);
            const instancePosition = this.instancePositionNode;
            const scale = vec3(this.quadSizeNode.xy, 1.0);
            this.positionNode = (this.renderAsBillboards ? billboardVertexByInstancePosition : vertexByInstancePosition)({
                vertexPosition,
                instancePosition,
                scale,
            });
            this.needsUpdate = true;
        }, { attach: this });
        createEffect(() => {
            if (this.colorMap) {
                this.colorNode = colorFromTextureByTexCoords(this.colorMap, { texCoords: this.texCoordsNode });
            }
            else {
                this.colorNode = vec4(0.5, 0.5, 0.5, 1);
            }
            this.needsUpdate = true;
        }, { attach: this });
    }
    dispose() {
        SignalGroup.destroy(this);
        super.dispose();
    }
}
_a = TexturedSpritesMaterial;
//# sourceMappingURL=TexturedSpritesMaterial.js.map