This commit is contained in:
Andreas Wilms
2025-09-08 16:25:55 +02:00
commit cdcd870b6f
614 changed files with 343437 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2016 Jaume Sanchez
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,137 @@
# MeshLine
Mesh replacement for ```THREE.Line```
Instead of using GL_LINE, it uses a strip of triangles billboarded. Some examples:
[![Demo](screenshots/demo.jpg)](https://www.clicktorelease.com/code/THREE.MeshLine/demo/index.html)
[![Graph](screenshots/graph.jpg)](https://www.clicktorelease.com/code/THREE.MeshLine/demo/graph.html)
[![Spinner](screenshots/spinner.jpg)](https://www.clicktorelease.com/code/THREE.MeshLine/demo/spinner.html)
[![SVG](screenshots/svg.jpg)](https://www.clicktorelease.com/code/THREE.MeshLine/demo/svg.html)
[![Shape](screenshots/shape.jpg)](https://www.clicktorelease.com/code/THREE.MeshLine/demo/shape.html)
[![Shape](screenshots/birds.jpg)](https://www.clicktorelease.com/code/THREE.MeshLine/demo/birds.html)
* [Demo](https://www.clicktorelease.com/code/THREE.MeshLine/demo/index.html): play with the different settings of materials
* [Graph](https://www.clicktorelease.com/code/THREE.MeshLine/demo/graph.html): example of using ```MeshLine``` to plot graphs
* [Spinner](https://www.clicktorelease.com/code/THREE.MeshLine/demo/spinner.html): example of dynamic ```MeshLine``` with texture
* [SVG](https://www.clicktorelease.com/code/THREE.MeshLine/demo/svg.html): example of ```MeshLine``` rendering SVG Paths
* [Shape](https://www.clicktorelease.com/code/THREE.MeshLine/demo/shape.html): example of ```MeshLine``` created from a mesh
* [Birds](https://www.clicktorelease.com/code/THREE.MeshLine/demo/birds.html): example of ```MeshLine.advance()``` by @caramelcode (Jared Sprague) and @mwcz (Michael Clayton)
### How to use ####
* Include script
* Create and populate a geometry
* Create a MeshLine and assign the geometry
* Create a MeshLineMaterial
* Use MeshLine and MeshLineMaterial to create a THREE.Mesh
#### Include the script
Include script after THREE is included
```js
<script src="THREE.MeshLine.js"></script>
```
or use npm to install it
```
npm i three.meshline
```
and include it in your code (don't forget to require three.js)
```js
var THREE = require( 'three' );
var MeshLine = require( 'three.meshline' );
```
##### Create and populate a geometry #####
First, create the list of vertices that will define the line. ```MeshLine``` accepts ```THREE.Geometry``` (looking up the ```.vertices``` in it) and ```Array```/```Float32Array```. ```THREE.BufferGeometry``` coming soon, and may be others like ```Array``` of ```THREE.Vector3```.
```js
var geometry = new THREE.Geometry();
for( var j = 0; j < Math.PI; j += 2 * Math.PI / 100 ) {
var v = new THREE.Vector3( Math.cos( j ), Math.sin( j ), 0 );
geometry.vertices.push( v );
}
```
##### Create a MeshLine and assign the geometry #####
Once you have that, you can create a new ```MeshLine```, and call ```.setGeometry()``` passing the vertices.
```js
var line = new MeshLine();
line.setGeometry( geometry );
```
Note: ```.setGeometry``` accepts a second parameter, which is a function to define the width in each point along the line. By default that value is 1, making the line width 1 * lineWidth.
```js
line.setGeometry( geometry, function( p ) { return 2; } ); // makes width 2 * lineWidth
line.setGeometry( geometry, function( p ) { return 1 - p; } ); // makes width taper
line.setGeometry( geometry, function( p ) { return 2 + Math.sin( 50 * p ); } ); // makes width sinusoidal
```
##### Create a MeshLineMaterial #####
A ```MeshLine``` needs a ```MeshLineMaterial```:
```js
var material = new MeshLineMaterial();
```
By default it's a white material of width 1 unit.
```MeshLineMaterial``` has several attributes to control the appereance of the ```MeshLine```:
* ```map``` - a ```THREE.Texture``` to paint along the line (requires ```useMap``` set to true)
* ```useMap``` - tells the material to use ```map``` (0 - solid color, 1 use texture)
* ```alphaMap``` - a ```THREE.Texture``` to use as alpha along the line (requires ```useAlphaMap``` set to true)
* ```useAlphaMap``` - tells the material to use ```alphaMap``` (0 - no alpha, 1 modulate alpha)
* ```repeat``` - THREE.Vector2 to define the texture tiling (applies to map and alphaMap - MIGHT CHANGE IN THE FUTURE)
* ```color``` - ```THREE.Color``` to paint the line width, or tint the texture with
* ```opacity``` - alpha value from 0 to 1 (requires ```transparent``` set to ```true```)
* ```alphaTest``` - cutoff value from 0 to 1
* ```dashArray``` - THREE.Vector2 to define the dashing (NOT IMPLEMENTED YET)
* ```resolution``` - ```THREE.Vector2``` specifying the canvas size (REQUIRED)
* ```sizeAttenuation``` - makes the line width constant regardless distance (1 unit is 1px on screen) (0 - attenuate, 1 - don't attenuate)
* ```lineWidth``` - float defining width (if ```sizeAttenuation``` is true, it's world units; else is screen pixels)
* ```near``` - camera near clip plane distance (REQUIRED if ```sizeAttenuation``` set to false)
* ```far``` - camera far clip plane distance (REQUIRED if ```sizeAttenuation``` set to false)
If you're rendering transparent lines or using a texture with alpha map, you should set ```depthTest``` to ```false```, ```transparent``` to ```true``` and ```blending``` to an appropriate blending mode, or use ```alphaTest```.
##### Use MeshLine and MeshLineMaterial to create a THREE.Mesh #####
Finally, we create a mesh and add it to the scene:
```js
var mesh = new THREE.Mesh( line.geometry, material ); // this syntax could definitely be improved!
scene.add( mesh );
```
### TODO ###
* Better miters
* Proper sizes
* Support for dashArray
### Support ###
Tested successfully on
* Chrome OSX, Windows, Android
* Firefox OSX, Windows, Anroid
* Safari OSX, iOS
* Internet Explorer 11 (SVG and Shape demo won't work because they use Promises)
* Opera OSX, Windows
### References ###
* [Drawing lines is hard](http://mattdesl.svbtle.com/drawing-lines-is-hard)
* [WebGL rendering of solid trails](http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/)
* [Drawing Antialiased Lines with OpenGL](https://www.mapbox.com/blog/drawing-antialiased-lines/)
#### License ####
MIT licensed
Copyright (C) 2015-2016 Jaume Sanchez Elias, http://www.clicktorelease.com

View File

@@ -0,0 +1,477 @@
;(function() {
"use strict";
var root = this
var has_require = typeof require !== 'undefined'
var THREE = root.THREE || has_require && require('three')
if( !THREE )
throw new Error( 'MeshLine requires three.js' )
function MeshLine() {
this.positions = [];
this.previous = [];
this.next = [];
this.side = [];
this.width = [];
this.indices_array = [];
this.uvs = [];
this.counters = [];
this.geometry = new THREE.BufferGeometry();
this.widthCallback = null;
}
MeshLine.prototype.setGeometry = function( g, c ) {
this.widthCallback = c;
this.positions = [];
this.counters = [];
if( g instanceof THREE.Geometry ) {
for( var j = 0; j < g.vertices.length; j++ ) {
var v = g.vertices[ j ];
var c = j/g.vertices.length;
this.positions.push( v.x, v.y, v.z );
this.positions.push( v.x, v.y, v.z );
this.counters.push(c);
this.counters.push(c);
}
}
if( g instanceof THREE.BufferGeometry ) {
// read attribute positions ?
}
if( g instanceof Float32Array || g instanceof Array ) {
for( var j = 0; j < g.length; j += 3 ) {
var c = j/g.length;
this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
this.counters.push(c);
this.counters.push(c);
}
}
this.process();
}
MeshLine.prototype.compareV3 = function( a, b ) {
var aa = a * 6;
var ab = b * 6;
return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] );
}
MeshLine.prototype.copyV3 = function( a ) {
var aa = a * 6;
return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ];
}
MeshLine.prototype.process = function() {
var l = this.positions.length / 6;
this.previous = [];
this.next = [];
this.side = [];
this.width = [];
this.indices_array = [];
this.uvs = [];
for( var j = 0; j < l; j++ ) {
this.side.push( 1 );
this.side.push( -1 );
}
var w;
for( var j = 0; j < l; j++ ) {
if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) );
else w = 1;
this.width.push( w );
this.width.push( w );
}
for( var j = 0; j < l; j++ ) {
this.uvs.push( j / ( l - 1 ), 0 );
this.uvs.push( j / ( l - 1 ), 1 );
}
var v;
if( this.compareV3( 0, l - 1 ) ){
v = this.copyV3( l - 2 );
} else {
v = this.copyV3( 0 );
}
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
for( var j = 0; j < l - 1; j++ ) {
v = this.copyV3( j );
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] );
}
for( var j = 1; j < l; j++ ) {
v = this.copyV3( j );
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
}
if( this.compareV3( l - 1, 0 ) ){
v = this.copyV3( 1 );
} else {
v = this.copyV3( l - 1 );
}
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] );
for( var j = 0; j < l - 1; j++ ) {
var n = j * 2;
this.indices_array.push( n, n + 1, n + 2 );
this.indices_array.push( n + 2, n + 1, n + 3 );
}
if (!this.attributes) {
this.attributes = {
position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ),
previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ),
next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ),
side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ),
width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ),
uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ),
index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ),
counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
}
} else {
this.attributes.position.copyArray(new Float32Array(this.positions));
this.attributes.position.needsUpdate = true;
this.attributes.previous.copyArray(new Float32Array(this.previous));
this.attributes.previous.needsUpdate = true;
this.attributes.next.copyArray(new Float32Array(this.next));
this.attributes.next.needsUpdate = true;
this.attributes.side.copyArray(new Float32Array(this.side));
this.attributes.side.needsUpdate = true;
this.attributes.width.copyArray(new Float32Array(this.width));
this.attributes.width.needsUpdate = true;
this.attributes.uv.copyArray(new Float32Array(this.uvs));
this.attributes.uv.needsUpdate = true;
this.attributes.index.copyArray(new Uint16Array(this.indices_array));
this.attributes.index.needsUpdate = true;
}
this.geometry.addAttribute( 'position', this.attributes.position );
this.geometry.addAttribute( 'previous', this.attributes.previous );
this.geometry.addAttribute( 'next', this.attributes.next );
this.geometry.addAttribute( 'side', this.attributes.side );
this.geometry.addAttribute( 'width', this.attributes.width );
this.geometry.addAttribute( 'uv', this.attributes.uv );
this.geometry.addAttribute( 'counters', this.attributes.counters );
this.geometry.setIndex( this.attributes.index );
}
function memcpy (src, srcOffset, dst, dstOffset, length) {
var i
src = src.subarray || src.slice ? src : src.buffer
dst = dst.subarray || dst.slice ? dst : dst.buffer
src = srcOffset ? src.subarray ?
src.subarray(srcOffset, length && srcOffset + length) :
src.slice(srcOffset, length && srcOffset + length) : src
if (dst.set) {
dst.set(src, dstOffset)
} else {
for (i=0; i<src.length; i++) {
dst[i + dstOffset] = src[i]
}
}
return dst
}
/**
* Fast method to advance the line by one position. The oldest position is removed.
* @param position
*/
MeshLine.prototype.advance = function(position) {
var positions = this.attributes.position.array;
var previous = this.attributes.previous.array;
var next = this.attributes.next.array;
var l = positions.length;
// PREVIOUS
memcpy( positions, 0, previous, 0, l );
// POSITIONS
memcpy( positions, 6, positions, 0, l - 6 );
positions[l - 6] = position.x;
positions[l - 5] = position.y;
positions[l - 4] = position.z;
positions[l - 3] = position.x;
positions[l - 2] = position.y;
positions[l - 1] = position.z;
// NEXT
memcpy( positions, 6, next, 0, l - 6 );
next[l - 6] = position.x;
next[l - 5] = position.y;
next[l - 4] = position.z;
next[l - 3] = position.x;
next[l - 2] = position.y;
next[l - 1] = position.z;
this.attributes.position.needsUpdate = true;
this.attributes.previous.needsUpdate = true;
this.attributes.next.needsUpdate = true;
};
function MeshLineMaterial( parameters ) {
var vertexShaderSource = [
'precision highp float;',
'',
'attribute vec3 position;',
'attribute vec3 previous;',
'attribute vec3 next;',
'attribute float side;',
'attribute float width;',
'attribute vec2 uv;',
'attribute float counters;',
'',
'uniform mat4 projectionMatrix;',
'uniform mat4 modelViewMatrix;',
'uniform vec2 resolution;',
'uniform float lineWidth;',
'uniform vec3 color;',
'uniform float opacity;',
'uniform float near;',
'uniform float far;',
'uniform float sizeAttenuation;',
'',
'varying vec2 vUV;',
'varying vec4 vColor;',
'varying float vCounters;',
'',
'vec2 fix( vec4 i, float aspect ) {',
'',
' vec2 res = i.xy / i.w;',
' res.x *= aspect;',
' vCounters = counters;',
' return res;',
'',
'}',
'',
'void main() {',
'',
' float aspect = resolution.x / resolution.y;',
' float pixelWidthRatio = 1. / (resolution.x * projectionMatrix[0][0]);',
'',
' vColor = vec4( color, opacity );',
' vUV = uv;',
'',
' mat4 m = projectionMatrix * modelViewMatrix;',
' vec4 finalPosition = m * vec4( position, 1.0 );',
' vec4 prevPos = m * vec4( previous, 1.0 );',
' vec4 nextPos = m * vec4( next, 1.0 );',
'',
' vec2 currentP = fix( finalPosition, aspect );',
' vec2 prevP = fix( prevPos, aspect );',
' vec2 nextP = fix( nextPos, aspect );',
'',
' float pixelWidth = finalPosition.w * pixelWidthRatio;',
' float w = 1.8 * pixelWidth * lineWidth * width;',
'',
' if( sizeAttenuation == 1. ) {',
' w = 1.8 * lineWidth * width;',
' }',
'',
' vec2 dir;',
' if( nextP == currentP ) dir = normalize( currentP - prevP );',
' else if( prevP == currentP ) dir = normalize( nextP - currentP );',
' else {',
' vec2 dir1 = normalize( currentP - prevP );',
' vec2 dir2 = normalize( nextP - currentP );',
' dir = normalize( dir1 + dir2 );',
'',
' vec2 perp = vec2( -dir1.y, dir1.x );',
' vec2 miter = vec2( -dir.y, dir.x );',
' //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );',
'',
' }',
'',
' //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;',
' vec2 normal = vec2( -dir.y, dir.x );',
' normal.x /= aspect;',
' normal *= .5 * w;',
'',
' vec4 offset = vec4( normal * side, 0.0, 1.0 );',
' finalPosition.xy += offset.xy;',
'',
' gl_Position = finalPosition;',
'',
'}' ];
var fragmentShaderSource = [
'#extension GL_OES_standard_derivatives : enable',
'precision mediump float;',
'',
'uniform sampler2D map;',
'uniform sampler2D alphaMap;',
'uniform float useMap;',
'uniform float useAlphaMap;',
'uniform float useDash;',
'uniform vec2 dashArray;',
'uniform float visibility;',
'uniform float alphaTest;',
'uniform vec2 repeat;',
'',
'varying vec2 vUV;',
'varying vec4 vColor;',
'varying float vCounters;',
'',
'void main() {',
'',
' vec4 c = vColor;',
' if( useMap == 1. ) c *= texture2D( map, vUV * repeat );',
' if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;',
' if( c.a < alphaTest ) discard;',
' if( useDash == 1. ){',
' ',
' }',
' gl_FragColor = c;',
' gl_FragColor.a *= step(vCounters,visibility);',
'}' ];
function check( v, d ) {
if( v === undefined ) return d;
return v;
}
THREE.Material.call( this );
parameters = parameters || {};
this.lineWidth = check( parameters.lineWidth, 1 );
this.map = check( parameters.map, null );
this.useMap = check( parameters.useMap, 0 );
this.alphaMap = check( parameters.alphaMap, null );
this.useAlphaMap = check( parameters.useAlphaMap, 0 );
this.color = check( parameters.color, new THREE.Color( 0xffffff ) );
this.opacity = check( parameters.opacity, 1 );
this.resolution = check( parameters.resolution, new THREE.Vector2( 1, 1 ) );
this.sizeAttenuation = check( parameters.sizeAttenuation, 1 );
this.near = check( parameters.near, 1 );
this.far = check( parameters.far, 1 );
this.dashArray = check( parameters.dashArray, [] );
this.useDash = ( this.dashArray !== [] ) ? 1 : 0;
this.visibility = check( parameters.visibility, 1 );
this.alphaTest = check( parameters.alphaTest, 0 );
this.repeat = check( parameters.repeat, new THREE.Vector2( 1, 1 ) );
var material = new THREE.RawShaderMaterial( {
uniforms:{
lineWidth: { type: 'f', value: this.lineWidth },
map: { type: 't', value: this.map },
useMap: { type: 'f', value: this.useMap },
alphaMap: { type: 't', value: this.alphaMap },
useAlphaMap: { type: 'f', value: this.useAlphaMap },
color: { type: 'c', value: this.color },
opacity: { type: 'f', value: this.opacity },
resolution: { type: 'v2', value: this.resolution },
sizeAttenuation: { type: 'f', value: this.sizeAttenuation },
near: { type: 'f', value: this.near },
far: { type: 'f', value: this.far },
dashArray: { type: 'v2', value: new THREE.Vector2( this.dashArray[ 0 ], this.dashArray[ 1 ] ) },
useDash: { type: 'f', value: this.useDash },
visibility: {type: 'f', value: this.visibility},
alphaTest: {type: 'f', value: this.alphaTest},
repeat: { type: 'v2', value: this.repeat }
},
vertexShader: vertexShaderSource.join( '\r\n' ),
fragmentShader: fragmentShaderSource.join( '\r\n' )
});
delete parameters.lineWidth;
delete parameters.map;
delete parameters.useMap;
delete parameters.alphaMap;
delete parameters.useAlphaMap;
delete parameters.color;
delete parameters.opacity;
delete parameters.resolution;
delete parameters.sizeAttenuation;
delete parameters.near;
delete parameters.far;
delete parameters.dashArray;
delete parameters.visibility;
delete parameters.alphaTest;
delete parameters.repeat;
material.type = 'MeshLineMaterial';
material.setValues( parameters );
return material;
};
MeshLineMaterial.prototype = Object.create( THREE.Material.prototype );
MeshLineMaterial.prototype.constructor = MeshLineMaterial;
MeshLineMaterial.prototype.copy = function ( source ) {
THREE.Material.prototype.copy.call( this, source );
this.lineWidth = source.lineWidth;
this.map = source.map;
this.useMap = source.useMap;
this.alphaMap = source.alphaMap;
this.useAlphaMap = source.useAlphaMap;
this.color.copy( source.color );
this.opacity = source.opacity;
this.resolution.copy( source.resolution );
this.sizeAttenuation = source.sizeAttenuation;
this.near = source.near;
this.far = source.far;
this.dashArray.copy( source.dashArray );
this.useDash = source.useDash;
this.visibility = source.visibility;
this.alphaTest = source.alphaTest;
this.repeat.copy( source.repeat );
return this;
};
if( typeof exports !== 'undefined' ) {
if( typeof module !== 'undefined' && module.exports ) {
exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial };
}
exports.MeshLine = MeshLine;
exports.MeshLineMaterial = MeshLineMaterial;
}
else {
root.MeshLine = MeshLine;
root.MeshLineMaterial = MeshLineMaterial;
}
}).call(this);