Hello, I’m trying to use a shader for water foam lines (based on this public project[0]) which was compiled with the function pc.createFullscreenQuad(this.app.graphicsDevice); that has been recently removed from the pc namespace in v1.29.0[1].
Is there a different approach you might take for defining the vertexBuffer? I tried the following attempt, but unfortunately I don’t have a good understanding of this topic so the resulting effect didn’t look very good:
// this.vertexBuffer = pc.createFullscreenQuad(this.app.graphicsDevice);
var vertexFormat = new pc.VertexFormat(this.app.graphicsDevice, [
{ semantic: pc.SEMANTIC_POSITION, components: 4, type: pc.ELEMENTTYPE_FLOAT32 }
]);
this.vertexBuffer = new pc.VertexBuffer(this.app.graphicsDevice, vertexFormat, 5000);
If it helps, my public project with this change[2], and the gif of effect I’m trying to achieve[3].
Thanks @Leonidas, this is cool… but only 2 questions, please.
After adding the method… the foam appears inverted (see attached image)… I tried to change the camera with no results… I tried to rotate the water plane and set cull mode to front faces and it works only in execution time… if I reload… the foam appears inverted again.
If I animate an object inside the water… the wave effect still with the initial disposition… this need some work in the update method to regenerate the shader every frame?
Yes most likely you will have to re-render that render target for the foam to update. I am not aware on how that code works, you will have to study it and see what method should be called.
So, you were definitely correct about the renderTarget needing flipped. I was able to get the original waves project working by changing the prepareTextures() function to the following:
I have reflected the update mentioned here and changed
opaqueMeshInstances to meshInstances only to avoid further error.
but still I got an error in pc code. Waves | Editor (playcanvas.com)
Any idea?
/*
for(var i = 0; i < this.layer.opaqueMeshInstances.length; i++) {
var mesh = this.layer.opaqueMeshInstances[i];
mesh.material.onUpdateShader = onUpdateShader;
}
*/
for(var i = 0; i < this.layer.meshInstances.length; i++) {
var mesh = this.layer.meshInstances[i];
mesh.material.onUpdateShader = onUpdateShader;
}
This is an old thread and the API has changed since then. I would recommend to start from fixing all those deprecated error messages first. If you still have a problem, please create a new topic.