whs-component-glowline v0.0.5

WHS.GlowLine

Usage

const glowline = new WHS.GlowLine({
  geometry: {
    radius: 0.1,
    delta: 0.2,
    curveDetail: 64,
    curve: new THREE.CubicBezierCurve3(
      new THREE.Vector3( -10, 0, 0 ),
      new THREE.Vector3( -5, 15, 0 ),
      new THREE.Vector3( 20, 15, 0 ),
      new THREE.Vector3( 10, 0, 0 )
    )
  },

  glow: {
    normalIntensity: 70,
    cameraIntensity: 0
  }
});

glowline.addTo(world);

Options

.geometry {...}

• curve - THREE.Curve instance. Used to create tube. _Default is new THREE.LineCurve(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 10, 0)).
• curveDetail - tubularSegments of Tube geometry. Default is 20
• arcDetail - radiusSegments of Tube geometry. Default is 32
• radius - Tube (line) radius. Default is 2
• delta - Glow shadow radius difference compared to tube. Default is 1

.glow {...}

• normalIntensity - Intensity of normal calculations in glow shader. Default is 70
• cameraIntensity - Sensibility of glow to camera position. The closer camera is - the bigger glow will be. Default is 0
• margin - Glow margin. (Used in algorythm to calculate glow). Default is 0
• pow - Glow pow. (Used in algorythm to calculate glow). Default is 2
• color - Glow color. Default is 0xff0000

.material {...}

!!! Currently, only basic material is supported.

• color - Color of the tube. Default is 0xff0000

The algorythm (part)

The following code is a part of fragmentShader code of glowTube object.

void main() {
  float intensity = 
    pow(glowMargin - dot(vNormal1, vec3(0.0, 0.0, 1.0)), glowPow) * normalIntensity
    + pow(glowMargin - dot(vNormal2, vec3(0.0, 0.0, 1.0)), glowPow) * (1.00 - normalIntensity);

  gl_FragColor = vec4(color, 1.0) * intensity;
}

• glowMargin = glow.margin
• glowPow = glow.pow
• normalIntensity = glow.normalIntensity
• vNormal1 - static normal.
• vNormal2 - dynamic normal (changes with camera position).

Properties

• .native - Three.js mesh of tube.
• .glow - Three.js mesh of glow. (Also is children of a tube)