@yaustar had a quick look, and this PR introduced the error … possibly by triggering some resize or something, not sure https://github.com/playcanvas/engine/pull/3124
{thx for update - and I have just noticed that things are ok again (as well)} … wait, that was premature
- I had not put the water reflections back on, anyway >> still not working I am afraid :-/
Hope the last repo will get ok for now, but what to do if I want to export by an older engine release? - still the same as above but without the ‘launch … debug=true’?
Maybe like this: Publishing With Custom Engine
- in such case, can I then do a normal download of my project and choose to alter the manifest.json?
To me it feels the water project might have a bug in it … when screen resizes, the water render targets get recreated, but it seems they’re not set on cameras / layers till frame later, and so one frame the engine renders with destroyed buffers … and we get these errors:
attempting to use a texture that has been destroyed.
and this when resizing the window
launch.js:8069 ERROR: FRAMEBUFFER_INCOMPLETE_ATTACHMENT
1 Like
ok
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();
};
ok - so I try to use diffuseMap alongside the normalMap (which is better from: https://github.com/playcanvas/engine/blob/master/src/graphics/program-lib/chunks/normalMap.frag)
My forked Warp-project:
https://playcanvas.com/editor/scene/1144797
(@LeXXik ->> you might also be interested in saving your example as useful? … cf above: It/Water reflection now produces 2 errors instead of 1 only - on beforehand, thanks)
1 Like
Do you know who made the vert and frag-chunks?
I hate to land in a place between ‘unknowing’ and ‘seeming lazy’
-> I am neither, and have several times been both learning, and trying out shader-languages.
As far as I know the chunks are openGL right? And as such the code/our code, does not look like this:
The chunks are in GLSL language.
Your best bet here is to look at the engine repo chunks and the examples in the engine examples page. eg https://playcanvas.github.io/#graphics/post-effects.html
ok my bad - thanks
I ended up finding an error-free solution
Can you share the resource please to help others that may have run into this or similar issue?
Yes, but it will take at least a month, as it then will be part of a release (otherwise kind of entrepreneur classified etc) … ps it is far from perfect for the moment, and I dont want to defend against comments on quality
You said that you ‘found’ an error free solution, why can’t you share where you found it? That’s all I’m really asking for.
The main idea of the community here is to not only post about issues and problems people have, but also share the solutions to build up a knowledge base and help others.
My first partial solution uses a glb-blender animation solution, which is quite non-code oriented.
Here is the second one (more code-like/dynamic)
var MoveBumpOffset = pc.createScript('moveBumpOffset');
// initialize code called once per entity
MoveBumpOffset.prototype.initialize = function() {
this.bump = 0.7; this.uvoffsetX= 0; this.uvoffsetY= 0;
this.upOrDwn =false; this.upOrDwn_time = 0;this.upOrDwn_Vaerdi =0.002;
};
// update code called every frame
MoveBumpOffset.prototype.update = function(dt) {
var app = this.app; var self = this; self.fr++;
var meshes = null; self.uvoffsetX+=dt.toFixed(4)/100;self.uvoffsetY+=dt.toFixed(4)/100;
if(self.bump<1 && self.upOrDwn===false){ self.bump+=dt.toFixed(4)/4;}
if(self.bump>0 && self.upOrDwn===true){ self.bump-=dt.toFixed(4)/4;}
if(self.bump>1 ){ self.upOrDwn=true;} else{
if(self.bump<0 ){ self.upOrDwn=false;}}
if(self.entity.model){meshes = self.entity.model.model.meshInstances;
for(var i=0; i<meshes.length; i++){
var mesh = meshes[i];
self.entity.model.model.meshInstances[i].material.bumpiness = this.bump;
self.entity.model.model.meshInstances[i].material.normalMapOffset.set(self.uvoffsetX, self.uvoffsetY);
self.entity.model.model.meshInstances[i].material.shininess = 92;
self.entity.model.model.meshInstances[i].material.update();
}
}
};
The material has to have a normal-map attached off course
1 Like
Did you still use a shader or other techniques for reflection?
No, but if you re-read the whole thread you would not go in that direction either - at least when it comes to moving water. A repo-update set my project back, and I had to use all these ‘extra’ hours … anyways the water reflection example (shader) had a resize error already, so it does not matter that mvaligursky and Lexxig did not answer. My solutions are free of errors and not dependent on the repo-change.
PS: Have to go now, and this last bumpwater-example is actually good enough to become a tutorial (the best moving water as I can see - but up to you admins 
)
I’m happy to move it to the tutorials section but we would need a full project with the assets etc that just implements the water feature.
I haven’t read the thread in details, but is there an issue with my project I should look into? I have just checked it and fixed some issues with RenderTarget, which was using an old API. Apart from that I don’t seem to have any errors with it on resize.
2 Likes
@LeXXik I can confirm it’s working as expected. The same error I was getting in a project of mine seems to have been fixed with one of the recent engine releases.
2 Likes