Reprojection issue?

[Newbie_Coder]

I’m reprojecting different textures and images to envAtlas and getting weird rendering artifact

Example simple gradient blue to red:

texture = new pc.Texture(pc.app.graphicsDevice, {
    width: 512, 
    height: 512
});

  
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");


      canvas.width = 1024;
      canvas.height = 1024;
        ctx.imageSmoothingEnabled = true;

      var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);


      gradient.addColorStop(1, "#99b2ff");
      gradient.addColorStop(0.5, "#99b2ff");  
      gradient.addColorStop(0, "#ff0000"); 


      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      texture.setSource(canvas);

var textureCube = new pc.Texture(pc.app.graphicsDevice, {
    cubemap: true,
    width: 512, 
    height: 512
});

var textureAtlas = new pc.Texture(pc.app.graphicsDevice, {
    width: 512, 
    height: 512
});


pc.reprojectTexture(texture, textureCube, {
});

pc.EnvLighting.generateAtlas(textureCube, {
    target: textureAtlas,
});

pc.app.scene.envAtlas = textureAtlas;
pc.app.scene.skyboxMip = 0;

If I’m doing the same via assets

pc.reprojectTexture(asset.resource, textureCube, {
});

Still same outcome, perhaps I’m missing something? (bottom of skybox)

Top of skybox

[mvaligursky]

I’d say it’s the texture addressing you’re not setting. See how this sets it up
https://playcanvas.github.io/#/graphics/reflection-cubemap

[Newbie_Coder]

you mean these?

addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE,

does it needed to be applied to all textures or just one specific?

[Newbie_Coder]

addressing fixed top/bottom circular artifacts
the “line” is still visible

any ideas?

[Newbie_Coder]

Can’t find a fix for the “line” it goes from bottom to top, probably where the reprojection starts/ends, tried every possible texture settings

[Newbie_Coder]

Got it working, was wondering if its possible to render skybox pixelated?
Like you can do in CSS/HTML with images: imageRendering = "pixelated";

[Newbie_Coder]

Is this the max possible pixelness appearance or it’s possible to have even more sharp pixelated look?

texture = new pc.Texture(pc.app.graphicsDevice, {
    format: pc.PIXELFORMAT_RGB8,
    mipmaps: false,
    minFilter: pc.FILTER_NEAREST,
    magFilter: pc.FILTER_NEAREST,
    addressU: pc.ADDRESS_CLAMP_TO_EDGE,
    addressV: pc.ADDRESS_CLAMP_TO_EDGE,
    width: 512, 
    height: 512,
});

[Newbie_Coder]

[LeXXik]

What was the issue with the vertical line?

[Newbie_Coder]

Needed to specify: format, mipmaps: false and mag/mig filters

[Newbie_Coder]

whats interesting:

    cubemap: true,

was the reason why these “imperfections” appear

Wonder if possible even more sharper

[Newbie_Coder]

Now this is almost ideal

texture:

width: 2160,
height: 2160,

reproject:

numSamples: 1

default or less makes webgl crash

pc.GraphicsDevice: WebGL context lost.
Update: actually this also makes it crash from time to time ;c

[Newbie_Coder]

16:41:48.628 WebGL context was lost.
16:41:48.631 pc.GraphicsDevice: WebGL context lost. debug.js:85:19
16:41:48.635 Failed to create WebGL context: WebGL creation failed: 
* tryANGLE (FEATURE_FAILURE_EGL_POT)
* Exhausted GL driver options. (FEATURE_FAILURE_WEBGL_EXHAUSTED_DRIVERS) 

really want to keep this sharpness, any ideas?

tried to load a whooping 5 mb png, and setting 1920 texture - no problem

[LeXXik]

Keep in mind that the size on your hard drive the image takes and the format (e.g. png, jpg etc) is not important for GPU side, where it will always be the same, unless you use basis compression or similar.

[Newbie_Coder]

Still don’t get it, the higher texture resolution - more likely to crash webgl, have no more ideas left

[signetshell123]

Hey Iam having a issue here …

[signetshell123]

can someone help ?