Error message : Offset overflows texture dimensions

Help & Support
1

Hi everyone,
Didn’t find anything on the forum and I don’t know what’s happening.

TLDR;
I have this warning and I don’t know where to look further to fix it :
[.WebGL-0000530C04978D00] GL_INVALID_VALUE: Offset overflows texture dimensions.

I had a build stored on playcanvas, in version 1.62.2.
But my client’s IT department installed a firewall and blocked playcanvas (categorized as “games”).
They can’t change it yet, so I made a new downloadable build (version 1.67.3)

Aaaannd…
Kind of same as in my previous post ([SOLVED] Ghosting effect after several engine updates - #5 by mvaligursky), I have a new problem that appeared even though I did change nothing except the version.

I can’t show a live version unfortunately because it won’t work outside of the projects environment, but here’s what’s happening :

I can put some fake engravings on my model, which are nothing less than just textures, alpha maps set in the opacityMap (no diffuseMap used).

image
image708×424 17.5 KB
image
image571×598 38.6 KB

They are on the same plane and can (and will) have some overlapping, only visible if you use too much text. This never caused any problem for now, except slight visual glitches.

image

image
image810×309 85.1 KB

But now in this new version, I get these warnings in the console, and the fake engravings won’t all show up anymore.

image
image828×83 3.42 KB

image
image605×600 35.4 KB

This happens in random configurations of text, and sometimes it will work, sometimes it won’t…

Sorry for the long post !
Does anybody knows where I should look for this problem?

Thanks in advance :slight_smile:

2

Some more info, this warning appears at the function “setSource”

Here is the code where it is used, and how I pass my dataurl (coming from the html form) to an image that I can use as source for the texture.

Engraving.prototype._extractTextureAndApply = function (engravingChild, dataUrl) {

    var mat = engravingChild.render.meshInstances[0].material;

    let tex = new pc.Texture(pc.app.graphicsDevice, {
        mipmaps: false
    });

    tex.minFilter = pc.FILTER_LINEAR;
    tex.magFilter = pc.FILTER_LINEAR;
    tex.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    tex.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

    let img = document.createElement('img');
    img.src = dataUrl;
    img.crossOrigin = 'anonymous';
    img.onload = (e) => {
        tex.setSource(img);
    };

    mat.opacityMap = tex;
    mat.update();

};
3

Ok so I added some options for the new texture instance. By default the texture created is 4x8 pixels, and maybe that’s what went wrong. It surely has to be somewhat close to the image used in order to work correctly.

For now it looks like it works again, but I’ll let the users also try and wait for their feedback.

let tex = new pc.Texture(pc.app.graphicsDevice, {
  mipmaps: false,
  width: 1200,
  height: 100
});
4

@slimbuck this could be related to the texture upload changes. But as long as it works now, I think that’s fine. It seems like this was creating a texture without specifying a correct size.

1 Like
5

Hi @TonyLGC,

Do you have a repro you can share with us? As @mvaligursky says, we made a few changes around updating textures, but I think this case should be working and I would like to figure out why it didn’t.

Thanks!

6

Hi @slimbuck ,

I can’t use my project but I made a demo wich will reproduce the warning / bug :slight_smile:

Build : Forum Engraving Demo - PLAYCANVAS
Open project : PlayCanvas 3D HTML5 Game Engine

Put a text in the input, spam the “apply” button, and eventually you’ll see the warning happening
image

Check the box and dimensions will be added in the texture instanciation options, and everything will be OK :sweat_smile:
image

Hope this helps :wink:

1 Like
7

Hi @TonyLGC,

I finally had a chance to look into this. The reason it’s failing is because the texture is sometimes being rendered as 4x4 first, then being updated to the 1200x100 texture. (This depends on timing of the image onload callback).

This is something we should fix in the engine.

You can work around the issue on your end by moving the material update code:

const material = engraving.render.meshInstances[0].material;
material.opacityMap = newTexture;
material.update();

…into the onload handler itself. This way the texture will only get used when it’s ready.

Thanks so much for the repo!

1 Like