Hello - So now I have tried to alter my project to not being dependent on the Water Reflection-shader.
And I am therefore using a compromise. This includes the Warp Sprite example: https://developer.playcanvas.com/en/tutorials/warp-a-sprite-with-glsl/
- but instead of warping the cutout opacity, I want to warp the Normal map of the material.
At this post in the forum, you reference this:
A quite good approach for coders on my level, and I have already changed two chunk-structures in other projects quite succesfully - just not with this one where I am stuck (using this as chunk inspiration: https://github.com/playcanvas/engine/blob/master/src/graphics/program-lib/chunks/normalMapFast.frag):
var Warp = pc.createScript('warp');
Warp.attributes.add('wavelength', { type: 'number', default: 1 });
Warp.attributes.add('amplitude', { type: 'number', default: 0.05 });
// initialize code called once per entity
Warp.prototype.initialize = function() {
var m = this.entity.model.meshInstances[0].material;
// Replace the opacity texture chunk:
// https://github.com/playcanvas/engine/blob/master/src/graphics/program-lib/chunks/opacity.frag
m.chunks.normalPS =
/* "uniform sampler2D texture_opacityMap;\n" +
"uniform float time;\n" +
"uniform float amplitude;\n" +
"uniform float wavelength;\n" +
"\n" +
"void getOpacity() {\n" +
" vec2 uv = $UV;\n" +
" uv.y += sin((uv.x + time) / wavelength) * amplitude;\n" +
" dAlpha = texture2D(texture_opacityMap, uv).$CH;\n" +
"}\n\n";*/
"uniform sampler2D texture_normalMap;\n" +
"\n" +
"void getNormal() {\n" +
"vec2 uv = $UV;\n" +
"uv.y += sin((uv.x + time) / wavelength) * amplitude;\n" +
"vec3 normalMap = unpackNormal(texture2D(texture_normalMap, $UV));\n" +
"dNormalMap = addNormalDetail(normalMap);\n" +
"dNormalW = dTBN * dNormalMap;\n" +
"}\n\n";
// Replace the emissive texture chunk:
// https://github.com/playcanvas/engine/blob/master/src/graphics/program-lib/chunks/emissive.frag
// Since the opacity chunk is included before the emissive chunk, we don't need to declare
// time, amplitude and wavelength here.
m.chunks.emissivePS =
"uniform sampler2D texture_emissiveMap;\n" +
"\n" +
"vec3 getEmission() {\n" +
" vec2 uv = $UV;\n" +
" uv.y += sin((uv.x + time) / wavelength) * amplitude;\n" +
" return $texture2DSAMPLE(texture_emissiveMap, uv).$CH;\n" +
"}\n\n";
m.update();
this.timer = 0;
};
// update code called every frame
Warp.prototype.update = function(dt) {
this.timer += dt;
// Set our custom uniforms for our chunks
var m = this.entity.model.meshInstances[0].material;
m.setParameter('time', this.timer);
m.setParameter('amplitude', this.amplitude);
m.setParameter('wavelength', this.wavelength);
m.update();
};