Changing Material Properties at Runtime

You can change any material properties you find in the editor at runtime as well. This might be switching the texture for a flipbook, highlighting an object to indicate interactivity or to simply animate the specularity based on weather.

In Wonderland Engine, you can retrieve a material used by a mesh component by retrieving the component with WL.Object.getComponent or specify a parameter to your custom component with type WL.Type.Material.

Change material properties

Changing material properties is as simple as setting the corresponding properties on a WL.Material.

1
2
3
material.diffuseColor = [1, 1, 0, 1]; /* R, G, B, A */
material.specularity = 2;
material.diffuseTexture = someTexture;

Any property that can be set from the material properties panel, can be set here.

Example: Fade component

The example below animates the alpha value of the material based on time. This could be used as a fade in effect for an object.

Note that every object that uses the material set on the mesh component will be affected by the animation. To make the animation unique to the object, the component uses WL.Material.clone to retrieve a unique instance and set that to the mesh.

 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
WL.registerComponent('fade-in', {
  /* Fade duration in seconds */
  duration: {type: WL.Type.Float, default: 2.0},
  /* Starting alpha value */
  startAlpha: {type: WL.Type.Float, default: 2.0},
  /* Final alpha value */
  endAlpha: {type: WL.Type.Float, default: 2.0},
}, {
  start: function() {
    /* Retrieve material from mesh component attached to this object */
    const mesh = this.object.getComponent('mesh');
    if(!mesh) throw new Error('Missing mesh component on the object.');
    /* Ensure we don't accidentally change other objects using the same
     * material */
    this.material = mesh.material.clone();
    mesh.material = this.material;
  },

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

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

    this.alpha = startAlpha + (endAlpha - startAlpha)*Math.min(1.0, this.time/this.duration);
    /* No need to call update() after endAlpha is reached */
    if(this.alpha == this.endAlpha) this.active = false;

    /* Set the alpha of the diffuse color. For other materials, you may need to modify
     * a different property */
    const c = this.material.diffuseColor;
    this.material.diffuseColor = [c[0], c[1], c[2], this.alpha];
  }
});

Note that the material properties, like diffuseColor here, depend on the pipeline and shader used. You may want to modify flatColor for “Flat Opaque” instead, for example, or something completely different for custom shaders.

Any property shown in the material properties panel for the material can be edited in this way.