Canvas texture when applied on model it seems to be jaggered edges

Questions
,
1

I am doing a jersey configurator, i am getting weird jiggered edges in model when i apply the canvas as a texture to the model.

image
image1870×843 74 KB

the red polygon is an SVG so i dont think the uploaded image in itself has jaggered edges

I have tried antialiasing - i have tried his suggestions and it seems to not be resolving the issue.

intially i thought it might be because my UV are small in the fabric js canvas and hence the jaggered edges but i englarged the UV to the size of the canvas and still the issue persists

relevant code is

code of fabric js canvas

// Initialize Fabric.js canvas
const fabricCanvasElement = document.getElementById('fabric-canvas');
const canvas = new fabric.Canvas(fabricCanvasElement, {
    width: 1024,
    height: 1024,
    preserveObjectStacking : true,
});

code to apply canvas as texture to the model

function applyTextureToModel() {
    // Ensure the model is loaded
    if (!model) {
        console.log('Model is not loaded yet');
        return;
    }

    // Get the canvas element from Fabric.js
    const canvas1 = canvas.lowerCanvasEl;

    // Create a texture from the canvas
    const texture = new THREE.CanvasTexture(canvas1);
    texture.colorSpace = THREE.SRGBColorSpace;
    console.log('loki');

    // Set texture parameters
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    
    // Ensure the texture is not flipped
    texture.flipY = false; // Ensure the texture is not flipped

    // Update the texture to reflect any changes
    texture.needsUpdate = true;

    // Apply the texture to the specific mesh within the model
    model.traverse((child) => {
        console.log('checking child',child.name);
        if (child.isMesh && child.name === 'font') {
            // Apply the texture to the mesh's material
            child.material.map = texture;
            child.material.needsUpdate = true;
            console.log('Texture applied to the mesh named "heel_quarter_side2"');
        }
    });
}

three js code

// Initialize Three.js scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.001, 1000);
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('threejs-container').appendChild(renderer.domElement);
scene.background = new THREE.Color(0x808080);
2

UVs are just mapping coordinates - they have no effect on resolution.

On the other hand - canvas texture resolution has that effect. And 1024x1024 is quite a small resolution. Use either 2048x2048 or 4096x4096, and make sure you’re using that texture in an optimal way - don’t unnecessarily crop the content only in the center, leaving huge white borders around it.

3

I increased the canvas size to 4096 x 4096, it definitely reduced the the jaggedness but i think the problem still persists. It can be clearly seen especially during bobbing animation

also just another observation is when i apply the texture through blender and export the model i don’t see any jaggedness even at 1024 x 1024 but why is that when applied through canvas is the output coming so weird?

the fabric canvas code

const fabricCanvasElement = document.getElementById('fabric-canvas');
const canvas = new fabric.Canvas(fabricCanvasElement, {
    width: 4096,
    height: 4096,
    preserveObjectStacking : true,
});

4

the solution that worked was using mipmapping and having using THREE.LinearMipmapLinearFilter . also make sure the geometry is smooth, mine had little bit of artifacts can i used a crude method of decimate geometry to reduce the vertices count

5

I think this may be caused by not taking premultiplied alpha into account. IIRC, the pixels in a canvas have their RGB values already multiplied by alpha, which must be explicitely declared by setting texture.premultipliedAlpha = true. Otherwise the wrong alpha-blending formula will be used, the results of blending operations will be wrong, and blended anti-aliased edges will look bad.

I can’t really tell from the screenshot if that’s the issue here though.