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?
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.