whs-component-glowline
v0.0.5
Published
Simple plugin to make glow lines
Downloads
13
Maintainers
Readme
WHS.GlowLine
| Type | Physics? | WHS Version | |------|----------|-------------| | Component | No | ^1.1.14 |
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 isnew 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)