How to apply RENDERSTYLE_POINTS to animated model/render component

Help & Support
1

Hi,

I would like to apply this RENDERSTYLE_POINTS shader to an animated model where the points sample the color of the texture.

Would someone know which shader chunks I would need to modify to achieve this effect?

Thanks for being helpful!

PS. I was able to do this for static models overwriting the shader completely but this does not support animation.

2

Sorry I think I figured it out on my own.
The solution looked something like this.

for (var i = 0; i < model.meshInstances.length; i++) 
{
  model.meshInstances[i].material.chunks.startVS = replacementVertexShader;
  model.meshInstances[i].renderStyle = pc.RENDERSTYLE_POINTS;
}

in your shader add the following to your main function

gl_PointSize = 1.;
3 Likes
3

Thanks for posting the solution!

4

https://playcanvas.com/project/702588/overview/character-damage-demo

I followed your example. Here I could edit the DamageStartVS to result in the following

uniform sampler2D uDamageTex;

void main(void) {
    gl_Position = getPosition(); //required because of hidden global :| 
    
    vUv1 = vec2(vertex_texCoord1.x, 1.0-vertex_texCoord1.y);
    
    float ooS=1.0/512.0;
    
    vec4 damageSamp=texture2D(uDamageTex, vUv1);
    damageSamp=max(damageSamp, texture2D(uDamageTex, vUv1+(vec2(ooS,ooS)*0.0)+vec2(-ooS,-ooS)));
    damageSamp=max(damageSamp, texture2D(uDamageTex, vUv1+(vec2(ooS,ooS)*0.0)+vec2(-ooS, ooS)));
    damageSamp=max(damageSamp, texture2D(uDamageTex, vUv1+(vec2(ooS,ooS)*0.0)+vec2( ooS,-ooS)));
    damageSamp=max(damageSamp, texture2D(uDamageTex, vUv1+(vec2(ooS,ooS)*0.0)+vec2( ooS, ooS)));       
    
    vec4 normW = dModelMatrix * vec4(vertex_normal, 0.0);
    vec4 posW = dModelMatrix * vec4(vertex_position, 1.0);
    
    posW.xyz -= normalize(normW.xyz)*((damageSamp.r>0.5)?1.0:damageSamp.r*2.0)*0.02;
    gl_PointSize = 1.;
    gl_Position = matrix_viewProjection * vec4(posW.xyz,1.0);

And the ApplyDamage.js script’s for loop in the postInitialize function should be edited to this

    for (var i=0;i<this.entity.model.model.meshInstances.length;i++)
    {
        this.damageMaterials[i]=this.entity.model.model.meshInstances[i].material.clone();

        this.damageMaterials[i].chunks.startVS = damageStartVS;
        this.damageMaterials[i].chunks.startPS = damageStartPS;
        
        this.damageMaterials[i].chunks.TBNderivativePS = damageTBNderivativePS;
        this.damageMaterials[i].chunks.reflDirPS = damageReflDirPS;
        this.damageMaterials[i].chunks.metalnessPS = damageMetalnessPS;        
        this.damageMaterials[i].chunks.fresnelSchlickPS = damageFresnelSchlickPS;        
        
        this.damageMaterials[i].chunks.endPS = damageEndPS;
        
        this.damageMaterials[i].update();
        
        this.damageMaterials[i].setParameter("uDamageTex", layer.renderTarget.colorBuffer);
        this.damageMaterials[i].setParameter("uNoiseTex", this.noiseTex.resource);
        
        this.entity.model.model.meshInstances[i].material = this.damageMaterials[i]; 
        this.entity.model.model.meshInstances[i].renderStyle = pc.RENDERSTYLE_POINTS;

    }

It looks pixelish but I realized that the lighting no longer is applied. Would you know how to fix this @yaustar ?

pixelish
pixelish962×892 46.6 KB

5

I’m afraid I didn’t write the original project so I can’t help much here :sweat: