Back to the Shapespark home page

Improve Anti-aliasing

Hi!

Been looking through the forum for info on anti-aliasing and was able to find some tips, but I would like a more direct help if possible.

We are getting a really bad anti-aliasing glitch: Dropbox - grout-problem_v07R6aiQ.mp4 - Simplify your life

Do you know any fix for this?

Thanks!

Is the fugue between tiles modeled in 3D? If so, would it work for you if you included the fugue in the texture? This should significantly reduce anti-aliasing artifacts.

The fugue is not 3D it’s part of the texture. Do you have any other suggestions? Thanks

Are you able to share a link to the uploaded scene with us? This would allow us to check if there are any settings that make this look better

Sure here it is: 3D scene

Tell me if you need anything else.

One note: we are changing the texture through code so all you see in the uploaded scene is the default material

Could you also share the texture file or a link to it?

Sorry for the delay here it is

The problem can be due to how the UV mapping stretches this texture, when the texture is applied to a surface with less ‘streching’ uvs the lines are stable and do not have this flickering aliasing problem:

Unfortunately we can’t test with your model because the uploaded version doesn’t have UVs. Could you make a copy of your scene, set this problematic texture in the Shapespark editor as a base color and upload the scene again?

Hi,

Test this scene instead please, we added two texture that were giving us trouble: 3D scene

Here’s a video example: ClickUp

Also you can check the website we are developing here: http://vr360.flooriing.com/
Just press the login button to enter. There you can test a lot more textures, on both the bathroom and kitchen, to try and help us figure out a solution.

Thanks!

I see this problem on your service but not with Shapespark ‘raw’ scene, so it is most likely related to your custom code that assembles the textures in JavaScript. First thing to check would be if resolution of the computed canvas based textures is high enough. Your input textures have high resolution, but perhaps the transformation code reduces it too much?

Also to pass the computed textures to Shapespark, you do:

textureCanvas.toBlob(
  (blob) => {
    const fileUrl = window.URL.createObjectURL(blob);
    const img = new Image();
    img.src = fileUrl;

    let reviewImg = document.getElementById("review_img_1");
    reviewImg.src = fileUrl;

    const texture = viewer.createTextureFromHtmlImage(img);
    resolve(texture);
  },
  "image/jpeg",
  1
);

Try instead passing canvas directly to Shapespark:

const texture = viewer.createTextureFromHtmlImage(textureCanvas);

This will avoid the jpeg compression that toBlob is doing, so can improve quality.

Thanks for the tip @jan we’ll have a look at it