Three.js Thick Lines

Trying to get thicker lines for Three.js EdgesGeometry

by Douglas Duhaime

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script type="x-shader/x-vertex" id="vertexShader">
  attribute vec3 center; varying vec3 vCenter; void main() { vCenter = center; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
  varying vec3 vCenter; uniform float lineWidth; 
  float edgeFactorTri() { 
  vec3 d = fwidth( vCenter.xyz ); 
  vec3 a3 = smoothstep( vec3( 0.0 ), d * lineWidth, vCenter.xyz ); 
  return min( min( a3.x, a3.y ), a3.z ); } 
void main() {
  float factor = edgeFactorTri();
  if ( factor > 0.8 ) discard; // <===============
  gl_FragColor.rgb = mix( vec3(
  1.0 ), vec3( 0.2 ), factor); 
  gl_FragColor.a = 1.0;
}
</script>

CSS

body {
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

  var geometry, material, mesh;

  var size = 150;

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.z = 1000;

  scene = new THREE.Scene();

  //



  //

  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: 3
      }
    },
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent,
    side: THREE.DoubleSide // <===============
});

  material.extensions.derivatives = true;
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.x = 150;
  scene.add(mesh);

  //

  geometry = new THREE.SphereBufferGeometry(size, 16, 8);
  geometry = geometry.toNonIndexed();
  setupAttributes(geometry);

  material = new THREE.ShaderMaterial({
    uniforms: {
      lineWidth: {
        value: 3
      }
    },
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent,
    side: THREE.DoubleSide // <===============
  });

  material.extensions.derivatives = true;

  mesh = new THREE.Mesh(geometry, material);
  mesh.position.x = -150;
  scene.add(mesh);

  // renderer

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // events

  window.addEventListener("resize", onWindowResize, false);

}

function setupAttributes(geometry) {

  // TODO: Bring back quads

  var vectors = [
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(0, 0,...