I have the following snippet which does well for drawing nice looking dashed edges, but I’d like the scale of the dashes to be dependent on the screen, instead of the model to look good at any zoom level:
<SNIP>
const mat = new LineMaterial({
color: COLOR_LINES,
defines:{ "USE_DASH": "" },
linewidth: params.accentThickness,
dashed: true,
dashScale: params.dashScale / Math.sqrt(modelSize),
dashOffset: params.dashOffset,
dashSize: params.dashSize,
gapSize: params.dashGap
});
mat.resolution.set(window.innerWidth, window.innerHeight);
mat.resolution.multiplyScalar( window.devicePixelRatio );
const thickLines = new LineSegments2( thickLineGeom, mat );
thickLines.scale.copy( mesh.scale );
thickLines.position.copy( mesh.position );
thickLines.rotation.copy( mesh.rotation );
thickLines.computeLineDistances();
<SNIP>
The scale is used here in three/examples/jsm/lines/LineMaterial.js:110
:
#ifdef USE_DASH
vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
vUv = uv;
#endif
float aspect = resolution.x / resolution.y;
Would it be possible to link it to the resolution, which is set to the screen resolution?