Vertex Shader for swaying branches and leaves

Help & Support
21

The example is using new API that is coming out with the next release of the engine (v2.8). So you’d need to use older API, but possibly other changes would be needed, I’m not entirely sure, as this has changed in many ways since v2.7

22

see here, the same example using API from engine 2.7: PlayCanvas Examples

But as I said, there might be other issues with this with 2.7 engine, as example is written with 2.8 in mind. Might just work though.

1 Like
23

Thank you so much! Great to see this does work in 2.7
It looks like that example still uses the same function, transformCoreVS for the vertex shader
@eproasim this might be useful?

24

Yep! I’m working on it now and digging into see what I’m missing =]

1 Like
25

@Dylan,

Hello! I managed to make the required adjustments to be made for Engine 2.7. If you like, when 2.8 is released, I can revisit and edit again. You can check out the changes in this fork:

https://playcanvas.com/editor/scene/2239562

Make sure you’re looking at windv2.js as well as copying the new shader file to your project.

I hope this is helpful.

1 Like
26

@eproasim Amazing! Thank you so much!!
I’m getting that same error opening your scene “Error while saving changes” but it usually works after a bit of time.

If possible can you share the new wind.js and wind.vert.glsl ?

27

Yep!

windv2.js:

var Windv2 = pc.createScript('windv2');

Windv2.attributes.add('vShader', {
    type: 'asset',
    title: 'Vertex Shader',
    assetType: 'shader'
});

Windv2.attributes.add('amplitude', {
    type: 'number',
    title: 'Amplitude',
    default: 1
});

Windv2.attributes.add('wavelength', {
    type: 'number',
    title: 'Frequency',
    default: 1
});

// initialize code called once per entity
Windv2.prototype.initialize = function() {
    this.timer = 0;

    this.material = this.entity.render.meshInstances[0].material;
    // this.material.chunks.startVS = this.vShader.resource;
    this.material.chunks.transformCoreVS = this.vShader.resource;
    // console.log(this.material);
    // this.material.shaderChunks.glsl.set('transformCoreVS', this.vShader.resource);
    // console.log(this.material.chunks);

    
};

// update code called every frame
Windv2.prototype.update = function(dt) {
    this.timer += dt;

    // this.material.setParameter('time', this.timer);
    this.app.graphicsDevice.scope.resolve('time').setValue(this.timer);
    // this.material.setParameter('amplitude', this.amplitude);
    this.app.graphicsDevice.scope.resolve('amplitude').setValue(this.amplitude);
    // this.material.setParameter('wavelength', this.wavelength);
    this.app.graphicsDevice.scope.resolve('wavelength').setValue(this.wavelength);
    // this.material.update();
    
};

// swap method called for script hot-reloading
// inherit your script state here
// Windv2.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

wind.glsl:

uniform float time;
uniform float amplitude;
uniform float wavelength;

attribute vec4 vertex_position;
uniform mat4 matrix_viewProjection;
uniform mat4 matrix_model;
uniform mat3 matrix_normal;

#if defined(INSTANCING)
    #include "transformInstancingVS"
#endif

mat4 getModelMatrix() {
    return matrix_model;
}

vec3 getLocalPosition(vec3 vertexPosition) {

    vec3 pos = vertexPosition;

    pos.y +=  cos(pos.z * wavelength + time) * amplitude * pow(sin(pos.x * wavelength + time), 3.0);

    return pos;
}
1 Like
28

@eproasim I got it working! Thank you so much!!!

@mvaligursky Thank you so much for your help also!

Looking forward to sharing my project with you both, should be done end of day Thursday

2 Likes
29

@eproasim @mvaligursky Check it out!

Please drop a like and share it if you enjoy. Thanks again!

2 Likes