Rendering svg to texture returns low quality image

Questions
,
1

Hi! I’m trying to make an interactive website with clickable images composed of svgs and such, and I decided to use three.js so I can add post-processing and shaders to the content of the site.
That being said, rendering the svgs to planes seems to return a fairly low-quality result, especially when compared to an equivalent using only elements

three.js demo (only some objects implemented):

image
image1916×931 97.3 KB

img tag demo ():
image
image1599×908 116 KB

Current code:


	const canvas = document.querySelector("#render-canvas")
	const renderer = new THREE.WebGLRenderer({antialias: false, canvas})

	// Setup camera
	const fov = 75
	const aspect = 2
	const near = 1
	const far = 50
	const cam = new THREE.PerspectiveCamera(fov, aspect, near, far)
	const scene = new THREE.Scene()
	cam.position.z = 1

	// Object Factories
	function addPlaneObject(x, y, w, h, texture_link) {
		const pixelsToPerspectiveUnits = 22.35 // 1 unit = between 22.333px and 22.40px (at 720p)

		x = x + (w/2)
		y = y + (h/2)
		y = 360-y
		x = x-640

		w = w / pixelsToPerspectiveUnits
		h = h / pixelsToPerspectiveUnits
		x = x / pixelsToPerspectiveUnits
		y = y / pixelsToPerspectiveUnits

		const loader = new THREE.TextureLoader();
		const texture = loader.load(texture_link);
		texture.colorSpace = THREE.SRGBColorSpace;

		const geometry = new THREE.PlaneGeometry( w, h );
		const material = new THREE.MeshBasicMaterial( {color: 0xffffff, side: THREE.DoubleSide, map: texture, transparent: true} );
		const plane = new THREE.Mesh( geometry, material );
		scene.add( plane );
		plane.position.set(x, y, -20);
	}

	addPlaneObject(-89.1, -144.5, 1576.8, 907.85, "/roomassets/background.svg")
	addPlaneObject(-57.35, 590.75, 898.6, 179.5, "/roomassets/bed.svg")
	addPlaneObject(394.25, 285.35, 71.7, 132.65, "/roomassets/cdrack.svg")
	addPlaneObject(663.05, 45.95, 149.1, 206.7, "/roomassets/emilyposter.svg")

	// Render loop
	function resizeRendererToDisplaySize(renderer) {
		const canvas = renderer.domElement;
		const pixelRatio = window.devicePixelRatio;
		const width = Math.floor(canvas.clientWidth * pixelRatio);
		const height = Math.floor(canvas.clientHeight * pixelRatio);
		const needResize = canvas.width !== width || canvas.height !== height;
		if (needResize) {
			renderer.setSize(width, height, false);
		}
		return needResize;
	}

	function render(time) {
		time *= 0.001;

		if (resizeRendererToDisplaySize(renderer)) {
			const canvas = renderer.domElement;
			cam.aspect = canvas.clientWidth / canvas.clientHeight;
			cam.updateProjectionMatrix();
		}

		renderer.render(scene, cam)
		requestAnimationFrame(render);
	}
	requestAnimationFrame(render);

Any way I can increase the rasterization quality?

2

What are the current values of the width and height properties on your <svg> element? Try increasing them to see if it helps.

1 Like