How to control custom shader value

Hi team, I’m trying to access the custom properties of a custom shader but am unsure how to use a script to control the value.

I am referencing the sample shader ‘Wobble’ that you provided and have added an alpha threshold. How can I control the value of ‘_AlphaClip’ via script?

Thank you very much!

Hello WZZ,

To control the custom shader property _AlphaClip in your script, you can access the material of the object using the material property and set the value for _AlphaClip. Here is how you can do this in your custom script:

import { Behaviour, serializable } from "@needle-tools/engine";
import { Material } from "three";

export class ControlAlphaClip extends Behaviour {
    @serializable(Material)
    myMaterial?: Material;

    private alphaClipValue: number = 0.5; // Default value

    update() {
        if (this.myMaterial) {
            this.myMaterial["_AlphaClip"] = this.alphaClipValue; // Control the value
            this.myMaterial.needsUpdate = true; // Ensure the material updates
        }
    }

    setAlphaClip(value: number) {
        this.alphaClipValue = value; // Method to set the alpha clip value externally
    }
}

Explanation:

  • The myMaterial property is marked with @serializable so that you can assign your material through the editor.
  • The update method is called each frame and sets the value of _AlphaClip to alphaClipValue.
  • The method setAlphaClip allows you to change the value of _AlphaClip externally, which can be useful for UI controls or other interactions.

Make sure to attach this script to the relevant GameObject and assign the material you are modifying.

Refer to the sample shader documentation for further details on setting custom properties (see the documentation). If you have any further questions or need clarification, feel free to ask!

1 replies left - Get a PRO license for more AI replies.
thread_6a2OCFfb2C9NrMuJ1Yw3HMNg
Reply to this message to continue the conversation

Hi, take a look at the custom shader sample

Here’s an example script from the sample

 // START MARKER modify custom shader material property
import { Behaviour, serializable } from "@needle-tools/engine";
import { Material } from "three";

declare type MyCustomShaderMaterial = {
    _Speed: number;
};

export class IncreaseShaderSpeedOverTime extends Behaviour {

    @serializable(Material)
    myMaterial?: Material & MyCustomShaderMaterial;

    update() {
        if (this.myMaterial) {
            this.myMaterial._Speed *= 1 + this.context.time.deltaTime;
            if(this.myMaterial._Speed > 1) this.myMaterial._Speed = .0005;
            if(this.context.time.frame % 30 === 0) console.log(this.myMaterial._Speed)
        }
    }
}
 // END MARKER modify custom shader material property
1 Like

Thank you :raised_hands:!

This topic was automatically closed 13 days after the last reply. New replies are no longer allowed.