@spearwolf/twopoint5d
Version:
Create 2.5D realtime graphics and pixelart with WebGL and three.js
52 lines • 2.14 kB
JavaScript
import { createEffect, createSignal } from '@spearwolf/signalize';
import { add, attribute, div, mod, mul, texture, uniform, vec2, vec4 } from 'three/tsl';
import {} from 'three/webgpu';
import { TexturedSpritesMaterial } from '../TexturedSprites/TexturedSpritesMaterial.js';
import { texCoordsFromIndex } from '../node-utils.js';
export class AnimatedSpritesMaterial extends TexturedSpritesMaterial {
static { this.AnimAttributeName = 'anim'; }
#animsMap = createSignal(undefined, { attach: this });
get animsMap() {
return this.#animsMap.get();
}
set animsMap(value) {
this.#animsMap.set(value);
}
#timeUniform = uniform(0);
set time(value) {
this.#timeUniform.value = value;
}
get time() {
return this.#timeUniform.value;
}
constructor(options) {
super(options);
this.animsMap = options?.animsMap;
createEffect(() => {
if (this.animsMap) {
const animsTexture = this.animsMap.image;
const animsMapSize = vec2(animsTexture.width, animsTexture.height);
const time = this.#timeUniform;
const anim = attribute(AnimatedSpritesMaterial.AnimAttributeName);
const animId = anim.x;
const animOffset = anim.y;
const animMetaData = texture(this.animsMap, texCoordsFromIndex(animsMapSize, animId.toInt()));
const frameIndex = mod(mul(div(add(time, animOffset), animMetaData.y), animMetaData.x), animMetaData.x)
.floor()
.toInt();
this.texCoordsNode = texture(this.animsMap, texCoordsFromIndex(animsMapSize, add(animMetaData.z.toInt(), frameIndex).toInt()));
}
else {
this.texCoordsNode = vec4(0, 0, 1, 1);
}
this.needsUpdate = true;
}, { attach: this });
}
dispose() {
this.#animsMap.value?.dispose();
this.#animsMap.set(undefined);
this.#animsMap.destroy();
super.dispose();
}
}
//# sourceMappingURL=AnimatedSpritesMaterial.js.map