Problem rendering SVG to Texture

Questions
,
1

I have a <svg> tag defined on the HTML page, so my JS code is as follows:

let camera, scene, renderer;

const loader = new THREE.TextureLoader();

const makeTexture = () => {
	const svg = document.getElementById('svg');
	const svgData = (new XMLSerializer()).serializeToString(svg);
  const base64 = window.btoa(unescape(encodeURIComponent(svgData)));
  const src = "data:image/svg+xml;base64," + base64;

	const texture = loader.load(
    src,
    function (texture) {	renderScene(); },
    undefined,
    function (err) { console.error(err); }
	);

  return texture;
}

init();

function init() {

	const [w, h] = [400, 400];
  camera = new THREE.OrthographicCamera(-w/2, w/2, h/2, -h/2, 0,1);

  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(w, h);
  document.body.appendChild(renderer.domElement);

  scene.background = new THREE.Color(0x003300);
  
  let geom = new THREE.PlaneBufferGeometry(300, 250, 1, 1);
  let mat = new THREE.MeshBasicMaterial({ color: 0xffffff });
  mat.transparent = true;
  
  mat.map = makeTexture();
  mat.map.minFilter = THREE.LinearFilter;
  
	const mesh = new THREE.Mesh(geom, mat);
  scene.add(mesh);

	renderScene();
}

function renderScene() {
  renderer.render(scene, camera);
}

It works but I have two questions:

  1. The quality of rendering is worse than svg itself, is it possible to improve?

  2. In this case, do I need to use texture.needsUpdate somewhere in the code?

svg_to_tex
svg_to_tex372×577 11.3 KB

fiddle:
https://jsfiddle.net/tfoller/e0r5ayfo/82/

2

@tfoller
Have you ever tried?

renderer.setPixelRatio( window.devicePixelRatio );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.physicallyCorrectLights = true;

3

outputEncoding seem to make it a little bit better but the colors are obviously wrong, physicallyCorrectLights doesn’t do anything.

4

How about this?

5

Also doesn’t change anything

6

Ok, for some unclear reason I get better results if I make an image out of svg and then draw image to canvas and use canvas as a texture, so I’ll go with that.

In terms of text sharpness, this solution sits somewhere in between of using svg in the texture loader and rendering text directly on canvas.

https://jsfiddle.net/tfoller/81qyh0w2/14/