Modificare le Proprietà dei Materiali a Runtime

Puoi modificare anche a runtime qualsiasi proprietà dei materiali che trovi nell’editor. Questo potrebbe significare cambiare la texture per un flipbook, evidenziare un oggetto per indicare l’interattività o semplicemente animare la specularità in base al tempo atmosferico.

In Wonderland Engine, puoi recuperare un materiale utilizzato da un componente mesh recuperando il componente con Object3D.getComponent o specificando un parametro per il tuo componente personalizzato con tipo Property.material().

Modificare le proprietà dei materiali

La modifica delle proprietà dei materiali viene effettuata tramite setter/getter generati sul tipo Material.

material.setDiffuseColor([1, 1, 0, 1]); /* R, G, B, A */
material.setSpecularity(2);
material.setDiffuseTexture(someTexture);

Qualsiasi proprietà che può essere impostata dal pannello delle proprietà dei materiali, può essere impostata anche qui.

Esempio: Componente Fade

L’esempio qui sotto anima il valore alfa del materiale in base al tempo. Questo potrebbe essere usato come effetto di dissolvenza in entrata per un oggetto.

Nota che ogni oggetto che utilizza il materiale impostato sul componente mesh sarà influenzato dall’animazione. Per rendere l’animazione unica per l’oggetto, il componente usa Material.clone per recuperare un’istanza unica e assegnarla alla mesh.

import {Component, Property} from '@wonderlandengine/api';

export class FadeIn extends Component {
    static TypeName = 'fade-in';
    static Properties = {
        /* Durata della dissolvenza in secondi */
        duration: Property.float(2.0),
        /* Valore alfa iniziale */
        startAlpha: Property.float(2.0),
        /* Valore alfa finale */
        endAlpha: Property.float(2.0),
    };

    start() {
        /* Recupera il materiale dal componente mesh associato a questo oggetto */
        const mesh = this.object.getComponent('mesh');
        if (!mesh) throw new Error('Componente mesh mancante sull'oggetto.');
        /* Assicurati di non cambiare accidentalmente altri oggetti che utilizzano lo stesso
         * materiale */
        this.material = mesh.material.clone();
        mesh.material = this.material;
    }

    onActivate() {
        this.alpha = 1.0;
        this.time = 0;
    }

    update(dt) {
        this.time += dt;

        this.alpha =
            this.startAlpha +
            (this.endAlpha - this.startAlpha) * Math.min(1.0, this.time / this.duration);
        /* Non c'è bisogno di chiamare update() dopo che endAlpha è stato raggiunto */
        if (this.alpha == this.endAlpha) this.active = false;

        /* Imposta l'alfa del colore diffuso. Per altri materiali, potrebbe essere necessario modificare
         * una proprietà diversa */
        const c = this.material.getDiffuseColor();
        this.material.setDiffuseColor([c[0], c[1], c[2], this.alpha]);
    }
}

Nota che le proprietà del materiale, come diffuseColor qui, dipendono dal pipeline e dallo shader utilizzato. Potresti voler modificare flatColor per “Flat Opaque” invece, o qualcosa di completamente diverso per shader personalizzati.

Qualsiasi proprietà mostrata nel pannello delle proprietà dei materiali per il materiale può essere modificata in questo modo.