Three js video with rounded corners

Questions
,
10

Yup that’s why its i said its an dirty alternative solution which gives the intended visual result .
Alpha test value can also help make the edges crisp.

if you want rounded geometry then try this

here a code block which will map the uv map to 0 to 1 range, use it on your shape geometry


var uvAttribute = geometry.attributes.uv;
		let min = Infinity, max = 0
		//find min max
		for (var i = 0; i < uvAttribute.count; i++) {
			let u = uvAttribute.getX(i);
			let v = uvAttribute.getY(i);
			min = Math.min(min, u, v)
			max = Math.max(max, u, v)
		}

		//map min map to 1 to 1 range
		for (var i = 0; i < uvAttribute.count; i++) {
			let u = uvAttribute.getX(i);
			let v = uvAttribute.getY(i);

			// do something with uv
			u = THREE.MathUtils.mapLinear(u, min, max, 0, 1)
			v = THREE.MathUtils.mapLinear(v, min, max, 0, 1)

			// write values back to attribute
			uvAttribute.setXY(i, u, v);

		}

your fiddle updated with this code https://jsfiddle.net/orion_prime/0v21ct8g/
make sure the shape aspect matches the video

1 Like