What is the correct solution for rendering SVG icons inside A-Frame so that I don't get this fuzzy effect on some of my graphics?

Question

My A-frame app is a basic 360 photo tour. As you can see below I'm rendering svg icons for the tour "hotspots". Some icons are loading fine but others have a fuzzy effect to them. If it helps I created codepen to show how I'm implementing the SVG icons: https://codepen.io/trentontri/pen/JQyNrE

<a-scene cursor="rayOrigin: mouse">
 <a-assets>
  <a-mixin id="icon-animation" geometry="primitive: ring; radiusInner: 0.5; radiusOuter: 0.8;" material="color: #fff; opacity: 0.5" animation="property: geometry.radiusOuter; from: 0.8; to: 1.2; dur: 1000; easing: easeInOutSine; dir:alternate; loop: true;">
 </a-mixin>
 <a-asset-item id="icon-plus" src="https://gist.githubusercontent.com/trentontri/876c8050c5353ef44dcb1bada768c6a9/raw/e116742c4d461e0d404e60e07fe6c785a781c0ba/icon-plus.svg"></a-asset-item>
 </a-assets>

<a-entity position="0 1.8 -3">
 <a-entity mixin="icon-animation">
  <a-entity svg="src: #icon-plus;"></a-entity>
 </a-entity>
</a-entity>

 <a-entity id="rig">
  <a-entity id="camera" camera look-controls></a-entity>
 </a-entity>
</a-scene>

score 0 · Answer 1 · answered Jul 17 '19 at 05:33

0

It looks like your + symbol is z-fighting with the blue circle. See here: https://en.wikipedia.org/wiki/Z-fighting Just give them a different position.z value so they don't occupy the same plane.

answered Jul 17 '19 at 05:33

M -

26,908
11
49
81

What is the correct solution for rendering SVG icons inside A-Frame so that I don't get this fuzzy effect on some of my graphics?

1 Answers1