title: How to increase line thickness in three.js edges geometry using shaders?
body: <p>I'm trying to replicate the effect shown in <a href="https://threejs.org/examples/#webgl_materials_wireframe" rel="nofollow noreferrer" title="Three.js/examples WebGL Materials Wireframe">this</a> Three.js example but instead of showing the wireframe and an opaque box, I'd like to show just the edges without any faces (like what is shown when using the <a href="http://jsfiddle.net/SZR_Harrison/6k2y95am/" rel="nofollow noreferrer">THREE.EdgesGeometry</a>.) I know that setting the <code>linewidth</code> property doesn't work and that using shaders is necessary but I'm not really sure where to begin. For reference, these are the shaders being used in the above Three.js example:</p>
  
  <p>Vertex Shader:</p>
  
  <pre><code>attribute vec3 center;
  varying vec3 vCenter;
  
  void main() {
      vCenter = center;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  
  }
  </code></pre>
  
  <p>Fragment Shader:</p>
  
  <pre><code>varying vec3 vCenter;
  
  float edgeFactorTri() {
      vec3 d = fwidth( vCenter.xyz );
      vec3 a3 = smoothstep( vec3( 0.0 ), d * 1.5, vCenter.xyz );
      return min( min( a3.x, a3.y ), a3.z );
  }
  
  void main() {
  
      gl_FragColor.rgb = mix( vec3( 1.0 ), vec3( 0.2 ), edgeFactorTri() );
      gl_FragColor.a = 1.0;
  }
  </code></pre>
  
  <p>I've gotten as far as figuring out that changing what <code>d</code> gets multiplied by (1.5 in the example) is what determines the thickness of the line but I'm completely lost as to how the <code>vCenter</code> variable is actually used (it's a <code>vec3</code> that is either <code>[1, 0, 0]</code>, <code>[0, 1, 0]</code> or <code>[0, 0, 1]</code>) or what I could use to make the THREE.EdgesGeometry render with thicker lines like in the example.</p>
  
  <p>Here is what happens when I try rendering the edges geometry with these shaders:</p>
  
  <pre><code>&lt;script type="x-shader/x-vertex" id="vertexShader"&gt;
              attribute vec3 center;
              varying vec3 vCenter;
  
              void main() {
                  vCenter = center;
                  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  
              }
  &lt;/script&gt;
  
  &lt;script type="x-shader/x-fragment" id="fragmentShader"&gt;
              varying vec3 vCenter;
              uniform float lineWidth;
  
              float edgeFactorTri() {
                  float newWidth = lineWidth + 0.5;
                  vec3 d = fwidth( vCenter.xyz );
                  vec3 a3 = smoothstep( vec3( 0.0 ), d * newWidth, vCenter.xyz );
                  return min( min( a3.x, a3.y ), a3.z );
              }
  
              void main() {
  
                  gl_FragColor.rgb = mix( vec3( 1.0 ), vec3( 0.2 ), edgeFactorTri() );
                  gl_FragColor.a = 1.0;
              }
  &lt;/script&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>size = 150
  geometry = new THREE.BoxGeometry(size, size, size);
  material = new THREE.MeshBasicMaterial({ wireframe: true });
  
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.x = -150;
  scene.add(mesh);
  
  //
  
  // geometry = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(size, size, size));
  geometry = new THREE.EdgesGeometry(new THREE.BoxGeometry(size, size, size));
  setupAttributes(geometry);
  
  material = new THREE.ShaderMaterial({
      uniforms: { lineWidth: { value: 10 } },
      vertexShader: document.getElementById("vertexShader").textContent,
      fragmentShader: document.getElementById("fragmentShader").textContent
  });
  
  material.extensions.derivatives = true;
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.x = 150;
  scene.add(mesh);
  
  //
  
  geometry = new THREE.BufferGeometry().fromGeometry(new THREE.SphereGeometry(size / 2, 32, 16));
  
  setupAttributes(geometry);
  
  material = new THREE.ShaderMaterial({
      uniforms: { lineWidth: { value: 1 } },
      vertexShader: document.getElementById("vertexShader").textContent,
      fragmentShader: document.getElementById("fragmentShader").textContent
  });
  
  material.extensions.derivatives = true;
  
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.x = -150;
  scene.add(mesh);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/SZR_Harrison/vy0we5wb/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <p>As you can see in the fiddle, this is not what I'm looking for, but I don't have a good enough grasp on how the shaders work to know where I'm going wrong or if this approach would work for what I want. </p>
  
  <p>I've looked into <a href="https://stackoverflow.com/a/26709144">this answer</a> but I'm not sure how to use it as a <code>ShaderMaterial</code> and I can't use it as a shader pass (<a href="https://webgl-lab.herokuapp.com/js/shaders/ThickLineShader.js" rel="nofollow noreferrer">here</a> are the shaders he uses for his answer.)</p>
  
  <p>I've also looked into <a href="https://github.com/spite/THREE.MeshLine" rel="nofollow noreferrer">THREE.MeshLine</a> and <a href="https://github.com/spite/THREE.MeshLine/issues/37" rel="nofollow noreferrer">this issue</a> doesn't seem to have been resolved.</p>
  
  <p>Any guidance would be greatly appreciated!</p>