How to Add a Wind Effect to an Existing Material?

Ertugrul_Cetin · April 6, 2023, 11:39am

I have an existing material for a tree’s leaf. However, I want to add a wind effect to the leaf. Can I simply write a vertex shader for this existing material and integrate it, or do I have to create a new fragment shader and mimic the attributes of the existing material?

yaustar · April 11, 2023, 10:59am

@Leonidas You’ve done some work like this for your projects?

Leonidas · April 11, 2023, 11:12am

Hi @Ertugrul_Cetin,

Yes, unless you have a very specific not to, use shader chunks and override transform.js to add your own time based animations (e.g. sin/cos based):

github.com

playcanvas/engine/blob/b152f733922fc56852fa2b3b3ad629cf4d1ef619/src/scene/shader-lib/chunks/common/vert/transform.js

export default /* glsl */`
#ifdef PIXELSNAP
uniform vec4 uScreenSize;
#endif

#ifdef SCREENSPACE
uniform float projectionFlipY;
#endif

#ifdef MORPHING
uniform vec4 morph_weights_a;
uniform vec4 morph_weights_b;
#endif

#ifdef MORPHING_TEXTURE_BASED
uniform vec4 morph_tex_params;

vec2 getTextureMorphCoords() {
    float vertexId = morph_vertex_id;
    vec2 textureSize = morph_tex_params.xy;

This file has been truncated. show original

That way your material will continue supporting lighting/shadows and all other material properties.

We’ve done something similar in most of our demos that feature vegetation wind:

Ertugrul_Cetin · April 11, 2023, 11:24am

Thank you! Will have a look into this

Dylan · April 28, 2025, 9:27pm

@Leonidas @Ertugrul_Cetin I am also looking at this exact feature. I would like to sway tree leaves or shrubs using vertex shaders. Were either of you successful? Are there any example scenes I can try?