Cambiar Propiedades del Material en Tiempo de Ejecución

Puedes cambiar cualquier propiedad del material que encuentres en el editor también en tiempo de ejecución. Esto puede ser para cambiar la textura de un flipbook, resaltar un objeto para indicar interactividad o simplemente animar la especularidad basado en el clima.

En Wonderland Engine, puedes obtener un material usado por un componente de malla obteniendo el componente con Object3D.getComponent o especificando un parámetro para tu componente personalizado con el tipo Property.material().

Cambiar propiedades del material

Cambiar las propiedades del material se hace a través de setters/getters generados en el tipo Material.

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

Cualquier propiedad que pueda establecerse desde el panel de propiedades del material, se puede establecer aquí.

Ejemplo: Componente de Desvanecimiento

El ejemplo a continuación anima el valor alfa del material basado en el tiempo. Esto podría usarse como un efecto de desvanecimiento para un objeto.

Ten en cuenta que cada objeto que use el material establecido en el componente de malla será afectado por la animación. Para hacer que la animación sea única para el objeto, el componente usa Material.clone para obtener una instancia única y establecerla en la malla.

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

export class FadeIn extends Component {
    static TypeName = 'fade-in';
    static Properties = {
        /* Duración del desvanecimiento en segundos */
        duration: Property.float(2.0),
        /* Valor alfa inicial */
        startAlpha: Property.float(2.0),
        /* Valor alfa final */
        endAlpha: Property.float(2.0),
    };

    start() {
        /* Obtener material del componente de malla adjunto a este objeto */
        const mesh = this.object.getComponent('mesh');
        if (!mesh) throw new Error('Falta el componente de malla en el objeto.');
        /* Asegúrate de no cambiar accidentalmente otros objetos que usen el mismo
         * material */
        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);
        /* No es necesario llamar a update() después de que se alcanza endAlpha */
        if (this.alpha == this.endAlpha) this.active = false;

        /* Establece el alfa del color difuso. Para otros materiales, puede que necesites modificar
         * una propiedad diferente */
        const c = this.material.getDiffuseColor();
        this.material.setDiffuseColor([c[0], c[1], c[2], this.alpha]);
    }
}

Ten en cuenta que las propiedades del material, como diffuseColor aquí, dependen del pipeline y shader utilizado. Puede que quieras modificar flatColor para “Flat Opaque” en su lugar, por ejemplo, o algo completamente diferente para shaders personalizados.

Cualquier propiedad mostrada en el panel de propiedades del material se puede editar de esta manera.