gl-draw 0.9.0-beta.99 → 0.9.1

package/README.md

@@ -2,258 +2,3 @@ gl-draw 基于 Three.js 的可视化开发框架
 
 [![npm version](https://img.shields.io/npm/v/gl-draw.svg?style=flat-square)](https://www.npmjs.com/package/gl-draw)
 [![npm downloads](https://img.shields.io/npm/dm/gl-draw.svg?style=flat-square)](https://www.npmjs.com/package/gl-draw)
-
-gl-draw 旨在简化基于 Three.js 的可视化开发。 用户可以通过组合现有 Object 或利用 gl-draw 的可扩展架构来满足自定义需求，从而以快速获得令人印象深刻的视觉效果。
-
-<!-- Documentation -->
-
-## 快速开始
-
-```bash
-yarn add gl-draw
-# or npm install gl-draw
-```
-
-依赖
-
-```javascript
-{
-  "three": ">=0.136.0"
-}
-```
-使用
-
-核心类：
-
-- Pencil: 初始化场景，控制整个场景的渲染、更新和废除
-- DrawController: 用于场景中元素的绘制、获取和删除
-- BaseObject: 元素基类，封装了一些生命周期和通用方法
-
-
-
-```javascript
-import {Node, Video, Image} from 'gl-draw/dist/objects'
-class MyObject extends BaseObject {
-  create() {
-    const geo = new THREE.PlaneBufferGeometry(100, 100)
-    const mat = new THREE.MeshBasicMaterial({
-      color: new THREE.Color('#00243B'),
-    })
-    this.createMesh(geo, mat)
-  }
-}
-const drawController = new DrawController({
-    Node,
-    Video,
-    Image,
-    obj: MyObject,
-});
-const pencil = new Pencil(
-  {
-    container: document.querySelector('#container'),
-    control: true,
-    axesHelper: true,
-    stats: true,
-  }
-);
-pencil.use(drawController)
-await drawController.draw('obj')
-await Promise.all(drawController.objectsPromise);
-pencil.start();
-
-```
-
-## 参数&API
-
-### Pencil
-
-```js
-// 参数
-interface Options {
-  // 容器元素
-  container: HTMLElement;
-  // 是否为开发模式
-  isdev?: boolean;
-  // 是否创建stats
-  stats?: boolean;
-  // 是否创建gui
-  gui?: boolean;
-  // 是否显示坐标轴
-  axesHelper?: boolean;
-  // 是否开启控制器
-  control?: boolean;
-  // 如果为true则使用MapControls否则使用OrbitControls
-  mapControl?: boolean;
-  // WebGLRenderer配置，与three.js中配置相同
-  renderer?: {
-    antialias?: false | 'fxaa' | 'smaa' | 'ssaa' | 'msaa';
-  } & Omit<Partial<RendererParams>, 'antialias'>;
-  // MSAA抗锯齿采样数，默认为8
-  multisampling?: number;
-  // 按需渲染，开启后只有当相机移动时才重新渲染
-  staticRender?: boolean;
-  // 配置背景
-  scene?: {
-    background?: THREE.Scene['background'];
-  }
-  // 摄像机机相关配置
-  camera?: Partial<{
-     fov: number;
-     near: number;
-     far: number;
-  }> | THREE.PerspectiveCamera;
-  // 是否开启辉光后期处理
-  bloom?: boolean;
-  // 辉光参数
-  bloomParams?: Partial<{
-     threshold: number;
-     strength: number;
-     radius: number;
-  }>;
-  // 是否开启描边后期处理
-  outline?: boolean;
-  // 描边参数，具体可查看https://threejs.org/examples/?q=outline#webgl_postprocessing_outline
-  outlineParams?: Partial<OutlineParams>;
-  // 是否开启ssr后期处理
-  ssr?: boolean;
-  // ssr参数，具体可查看https://threejs.org/examples/?q=ssr#webgl_postprocessing_ssr
-  ssrParams?: Partial<SSRParams>;
-  // 是否加载css2DRenderer
-  css2DRenderer?: boolean;
-  // 配置css2DRenderer容器z-index
-  css2DRendererParams?: Partial<{
-    zIndex: string;
-  }>;
-  // 是否加载css3DRenderer
-  css3DRenderer?: boolean;
-  // 配置css3DRenderer容器z-index
-  css3DRendererParams?: Partial<{
-    zIndex: string;
-  }>;
-}
-
-// API
-// 获取renderer
-(getter) Pencil.renderer: THREE.WebGLRenderer | undefined
-
-// 获取控制器
-(getter) Pencil.control: OrbitControls | undefined
-
-// 获取摄像机
-(getter) Pencil.camera: THREE.PerspectiveCamera | undefined
-
-// 获取Scene
-(getter) Pencil.scene: THREE.Scene | undefined
-
-// 事件处理
-(property) Pencil.event: EventEmitter
-
-// 射线交互
-(method) Pencil.pick(event: MouseEvent, objects?: THREE.Object3D[], recursive?: boolean): {
-    object: THREE.Object3D<THREE.Event>;
-    intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[];
-} | undefined
-
-// 开启渲染循环
-(method) Pencil.start(): void
-
-// 废除整个场景
-(method) Pencil.dispose(): void
-```
-### DrawController
-```js
-// 参数
-{ [key: string]: new (...args: any[]) => IBaseObject; }
-
-// API
-// 所有创建元素的Promise
-(getter) Draw.objectsPromise: Promise<any>[]
-
-// 根据名称和key获取元素
-(method) Draw.getObject<Y extends Extract<keyof T, string>>(nameOrigin: Y, options?: {
-    key: string;
-} | undefined): InstanceType<T[Y]>
-
-// 根据名称和key获取所有元素
-(method) Draw.getAllObject<Y extends Extract<keyof T, string>>(nameOrigin: Y, options?: {
-    key: string;
-} | undefined): InstanceType<T[Y]>[]
-
-// 绘制元素
-(method) Draw.draw(nameOrigin: Y, options?: ConstructorParameters<T[Y]>[0] & {
-    key?: string;
-    target?: U;
-}, target?: U): Promise<...>
-
-// 删除元素
-(method) Dra.erase(...args: (KeyOf<T> | `${KeyOf<T>}#${string}` | InstanceType<T[keyof T]>)[]): void
-```
-### BaseObject
-```js
-// API
-// 该元素唯一key
-(property) BaseObject.key: string
-
-// 该元素对应Pencil
-(property) BaseObject.pencil: Pencil
-
-// 内部保存最终加载到场景中的three对象
-(property) BaseObject.object3d: THREE.Object3D<THREE.Event>
-
-// 该元素Promise，在创建完成后会resolve
-(property) BaseObject.pm: {
-    promise: Promise<any>;
-    resolve: (value?: any) => void;
-    reject: (value?: any) => void;
-}
-
-// 获取父元素
-(getter) BaseObject.parent: IBaseObject | THREE.Scene
-
-// 获取子元素
-(getter) BaseObject.children: IBaseObject[]
-
-// create钩子在创建时调用
-(method) BaseObject.create(): void
-
-// render钩子在创建完成加入到场景后调用
-(method) BaseObject.render(): void
-
-// update钩子在每一帧渲染时调用
-(method) BaseObject.update(delta: number, elapsed: number): void
-
-// 显示元素
-(method) BaseObject.show(): this
-
-// 隐藏元素
-(method) BaseObject.hide(): this
-
-// 获取该元素包围盒
-(method) BaseObject.getSize(): {
-    min: THREE.Vector3;
-    max: THREE.Vector3;
-    size: THREE.Vector3;
-}
-
-// 废除元素
-(method) BaseObject.dispose(): void
-```
-
-## 提示
-### @tweenjs/tween.js 使用需要注册
-```js
-const pencil = new Pencil({
-  ...
-})
-pencil.use({
-  install: () => {},
-  update: () => {
-    TWEEN.update();
-  },
-  dispose: () => {
-    TWEEN.removeAll();
-  },
-})
-```
-
-

package/dist/BaseObject.js

@@ -1 +1 @@
-"use strict";const o=require("three"),h=require("esus-lite"),a=require("three/examples/jsm/renderers/CSS2DRenderer"),c=require("three/examples/jsm/renderers/CSS3DRenderer"),d=require("./disposeMesh.js");require("idb-keyval");function u(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const s=u(o),n=t=>{t&&(d.disposeMesh(t),t.children.forEach(e=>{e.userData.BaseObject_||n(e)}))};class b{constructor(){this.objecttype__="BaseObject",this.userData={},this.pm=h.makePromiseCreator(),this.visible=!1}get parent(){const e=this.object3d.parent;return(e==null?void 0:e.userData.BaseObject_)||this.pencil.scene}get children(){return this.object3d.children.map(e=>e.userData.BaseObject_).filter(e=>!!e)}init(){}create(){}render(){}update(e,r){}resize(e,r){}show(){return this.object3d&&(this.object3d.visible=!0),this.visible=!0,this}hide(){return this.object3d&&(this.object3d.visible=!1),this.visible=!1,this}isVisible(){return this.visible}createMesh(...e){return this.object3d=new s.Mesh(...e),this}createGroup(){return this.object3d=new s.Group,this}createPoints(...e){return this.object3d=new s.Points(...e),this}createCSS2DObject(e){return this.object3d=new a.CSS2DObject(e),this}createCSS3DObject(e){return this.object3d=new c.CSS3DObject(e),this}createCSS3DSprite(e){return this.object3d=new c.CSS3DSprite(e),this}createSprite(e){return this.object3d=new s.Sprite(e),this}add(...e){return this.object3d.add(...e),this}remove(...e){return this.object3d.remove(...e),this}attach(...e){return[...e].forEach(r=>{this.object3d.attach(r.object3d)}),this}getSize(){const e=new s.Box3().setFromObject(this.object3d);return{min:e.min,max:e.max,size:e.getSize(new s.Vector3)}}traverse(e){e(this),this.children.forEach(r=>{r.traverse(e)})}dispose(){n(this.object3d)}}exports.BaseObject=b;
+"use strict";const d=require("three"),l=require("esus-lite"),u=require("three/examples/jsm/renderers/CSS2DRenderer"),n=require("three/examples/jsm/renderers/CSS3DRenderer"),o=require("./disposeMesh.js");require("idb-keyval");require("d3-geo");function b(i){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const t in i)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(i,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>i[t]})}}return e.default=i,Object.freeze(e)}const s=b(d),h=(i,e,t)=>{e&&(o.disposeMesh(e,t),e.children.forEach(r=>{i.has(r)||h(i,r,t)}))};class j{constructor(){this.objectType="BaseObject",this.userData={},this.prefab=!1,this.pm=l.makePromiseCreator(),this.materialList={},this.useMaterialType="origin"}get parent(){const e=this.object3d.parent;return e?this.drawController.objMap.get(e)||this.pencil.scene:null}get children(){return this.object3d.children.map(e=>this.drawController.objMap.get(e)).filter(e=>!!e)}get position(){var e;return(e=this.object3d)==null?void 0:e.position}get rotation(){var e;return(e=this.object3d)==null?void 0:e.rotation}get scale(){var e;return(e=this.object3d)==null?void 0:e.scale}get add(){var e;return(e=this.object3d)==null?void 0:e.add.bind(this.object3d)}get remove(){var e;return(e=this.object3d)==null?void 0:e.remove.bind(this.object3d)}get visible(){return this.object3d?this.object3d.visible:!1}create(){}render(){}update(e,t){}resize(e,t){}show(){return this.object3d&&(this.object3d.visible=!0),this}hide(){return this.object3d&&(this.object3d.visible=!1),this}createMesh(...e){return this.object3d=new s.Mesh(...e),this}createGroup(){return this.object3d=new s.Group,this}createPoints(...e){return this.object3d=new s.Points(...e),this}createCSS2DObject(e){return this.object3d=new u.CSS2DObject(e),this}createCSS3DObject(e){return this.object3d=new n.CSS3DObject(e),this}createCSS3DSprite(e){return this.object3d=new n.CSS3DSprite(e),this}createSprite(e){return this.object3d=new s.Sprite(e),this}attach(...e){return[...e].forEach(t=>{this.object3d.attach(t.object3d),this.drawController!==t.drawController&&(t.drawController.objects.delete(t.key),this.drawController.objects.set(t.key,t))}),this}getSize(){const e=new s.Box3().setFromObject(this.object3d);return{min:e.min,max:e.max,size:e.getSize(new s.Vector3)}}traverse(e){e(this),this.children.forEach(t=>{t.traverse(e)})}clone(){return this.instantiate()}instantiate(e){return this.drawController.instantiate(this,{create:t=>{this.object3d&&(t.object3d=this.object3d.clone(!0)),typeof e=="number"&&(t.object3d=new s.InstancedMesh(t.object3d.geometry,t.object3d.material,e),t.object3d.instanceMatrix.setUsage(s.DynamicDrawUsage))}})}setInstancedMatrix(e){this.object3d instanceof s.InstancedMesh&&(Object.keys(e).forEach(t=>{this.object3d.setMatrixAt(Number(t),e[t])}),this.object3d.instanceMatrix.needsUpdate=!0,this.object3d.computeBoundingSphere())}erase(){this.drawController.erase(this)}cloneMaterial(){const e=this.object3d;if(!e||!e.material)return;const t=e.material;if(Array.isArray(t))return t.map(r=>{const a=r.userData;r.userData={};const c=r.clone();return r.userData=a,c});{const r=t.userData;t.userData={};const a=t.clone();return t.userData=r,a}}setMaterialList(e,t,r=!0){const a=this.object3d;if(!a||!a.material)return;if(this.materialList.origin||(this.materialList.origin=a.material),!r&&this.materialList[e])return this.materialList[e];const c=t==="clone"?this.cloneMaterial():t;return this.materialList[e]=c,c}useMaterial(e){const t=this.object3d;!t||!t.material||this.useMaterialType===e||!this.materialList[e]||(this.useMaterialType=e,t.material=this.materialList[e])}setTop(e){this.object3d&&(this.object3d.renderOrder=e)}dispose(e=!0){h(this.drawController.objMap,this.object3d,e),e&&Object.keys(this.materialList).forEach(t=>{t!=="origin"&&o.disposeMesh({material:this.materialList[t]})})}}exports.BaseObject=j;

package/dist/BaseObject.module.js

@@ -1,93 +1,174 @@
-import * as t from "three";
+import * as i from "three";
 import { makePromiseCreator as h } from "esus-lite";
-import { CSS2DObject as c } from "three/examples/jsm/renderers/CSS2DRenderer";
-import { CSS3DObject as o, CSS3DSprite as a } from "three/examples/jsm/renderers/CSS3DRenderer";
-import { d as n } from "./disposeMesh.module.js";
+import { CSS2DObject as d } from "three/examples/jsm/renderers/CSS2DRenderer";
+import { CSS3DObject as l, CSS3DSprite as b } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { d as c } from "./disposeMesh.module.js";
 import "idb-keyval";
-const s = (r) => {
-  r && (n(r), r.children.forEach((e) => {
-    e.userData.BaseObject_ || s(e);
+import "d3-geo";
+const n = (o, t, e) => {
+  t && (c(t, e), t.children.forEach((r) => {
+    o.has(r) || n(o, r, e);
   }));
 };
-class m {
+class g {
   constructor() {
-    this.objecttype__ = "BaseObject", this.userData = {}, this.pm = h(), this.visible = !1;
+    this.objectType = "BaseObject", this.userData = {}, this.prefab = !1, this.pm = h(), this.materialList = {}, this.useMaterialType = "origin";
   }
   get parent() {
-    const e = this.object3d.parent;
-    return (e == null ? void 0 : e.userData.BaseObject_) || this.pencil.scene;
+    const t = this.object3d.parent;
+    return t ? this.drawController.objMap.get(t) || this.pencil.scene : null;
   }
   get children() {
-    return this.object3d.children.map((e) => e.userData.BaseObject_).filter((e) => !!e);
+    return this.object3d.children.map((t) => this.drawController.objMap.get(t)).filter((t) => !!t);
   }
-  init() {
+  get position() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.position;
+  }
+  get rotation() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.rotation;
+  }
+  get scale() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.scale;
+  }
+  get add() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.add.bind(this.object3d);
+  }
+  get remove() {
+    var t;
+    return (t = this.object3d) == null ? void 0 : t.remove.bind(this.object3d);
+  }
+  get visible() {
+    return this.object3d ? this.object3d.visible : !1;
   }
   create() {
   }
   render() {
   }
-  update(e, i) {
+  update(t, e) {
   }
-  resize(e, i) {
+  resize(t, e) {
   }
   show() {
-    return this.object3d && (this.object3d.visible = !0), this.visible = !0, this;
+    return this.object3d && (this.object3d.visible = !0), this;
   }
   hide() {
-    return this.object3d && (this.object3d.visible = !1), this.visible = !1, this;
-  }
-  isVisible() {
-    return this.visible;
+    return this.object3d && (this.object3d.visible = !1), this;
   }
-  createMesh(...e) {
-    return this.object3d = new t.Mesh(...e), this;
+  createMesh(...t) {
+    return this.object3d = new i.Mesh(...t), this;
   }
   createGroup() {
-    return this.object3d = new t.Group(), this;
+    return this.object3d = new i.Group(), this;
   }
-  createPoints(...e) {
-    return this.object3d = new t.Points(...e), this;
+  createPoints(...t) {
+    return this.object3d = new i.Points(...t), this;
   }
-  createCSS2DObject(e) {
-    return this.object3d = new c(e), this;
+  createCSS2DObject(t) {
+    return this.object3d = new d(t), this;
   }
-  createCSS3DObject(e) {
-    return this.object3d = new o(e), this;
+  createCSS3DObject(t) {
+    return this.object3d = new l(t), this;
   }
-  createCSS3DSprite(e) {
-    return this.object3d = new a(e), this;
+  createCSS3DSprite(t) {
+    return this.object3d = new b(t), this;
   }
-  createSprite(e) {
-    return this.object3d = new t.Sprite(e), this;
+  createSprite(t) {
+    return this.object3d = new i.Sprite(t), this;
   }
-  add(...e) {
-    return this.object3d.add(...e), this;
-  }
-  remove(...e) {
-    return this.object3d.remove(...e), this;
-  }
-  attach(...e) {
-    return [...e].forEach((i) => {
-      this.object3d.attach(i.object3d);
+  attach(...t) {
+    return [...t].forEach((e) => {
+      this.object3d.attach(e.object3d), this.drawController !== e.drawController && (e.drawController.objects.delete(e.key), this.drawController.objects.set(e.key, e));
     }), this;
   }
   getSize() {
-    const e = new t.Box3().setFromObject(this.object3d);
+    const t = new i.Box3().setFromObject(this.object3d);
     return {
-      min: e.min,
-      max: e.max,
-      size: e.getSize(new t.Vector3())
+      min: t.min,
+      max: t.max,
+      size: t.getSize(new i.Vector3())
     };
   }
-  traverse(e) {
-    e(this), this.children.forEach((i) => {
-      i.traverse(e);
+  traverse(t) {
+    t(this), this.children.forEach((e) => {
+      e.traverse(t);
     });
   }
-  dispose() {
-    s(this.object3d);
+  clone() {
+    return this.instantiate();
+  }
+  instantiate(t) {
+    return this.drawController.instantiate(this, {
+      create: (e) => {
+        this.object3d && (e.object3d = this.object3d.clone(!0)), typeof t == "number" && (e.object3d = new i.InstancedMesh(
+          e.object3d.geometry,
+          e.object3d.material,
+          t
+        ), e.object3d.instanceMatrix.setUsage(i.DynamicDrawUsage));
+      }
+    });
+  }
+  setInstancedMatrix(t) {
+    this.object3d instanceof i.InstancedMesh && (Object.keys(t).forEach((e) => {
+      this.object3d.setMatrixAt(
+        Number(e),
+        t[e]
+      );
+    }), this.object3d.instanceMatrix.needsUpdate = !0, this.object3d.computeBoundingSphere());
+  }
+  erase() {
+    this.drawController.erase(this);
+  }
+  cloneMaterial() {
+    const t = this.object3d;
+    if (!t || !t.material)
+      return;
+    const e = t.material;
+    if (Array.isArray(e))
+      return e.map((r) => {
+        const s = r.userData;
+        r.userData = {};
+        const a = r.clone();
+        return r.userData = s, a;
+      });
+    {
+      const r = e.userData;
+      e.userData = {};
+      const s = e.clone();
+      return e.userData = r, s;
+    }
+  }
+  setMaterialList(t, e, r = !0) {
+    const s = this.object3d;
+    if (!s || !s.material)
+      return;
+    if (this.materialList.origin || (this.materialList.origin = s.material), !r && this.materialList[t])
+      return this.materialList[t];
+    const a = e === "clone" ? this.cloneMaterial() : e;
+    return this.materialList[t] = a, a;
+  }
+  useMaterial(t) {
+    const e = this.object3d;
+    !e || !e.material || this.useMaterialType === t || !this.materialList[t] || (this.useMaterialType = t, e.material = this.materialList[t]);
+  }
+  setTop(t) {
+    this.object3d && (this.object3d.renderOrder = t);
+  }
+  dispose(t = !0) {
+    n(
+      this.drawController.objMap,
+      this.object3d,
+      t
+    ), t && Object.keys(this.materialList).forEach((e) => {
+      e !== "origin" && c({
+        material: this.materialList[e]
+      });
+    });
   }
 }
 export {
-  m as B
+  g as B
 };

package/dist/MeshLineMaterial.js

@@ -0,0 +1,146 @@
+"use strict";var h=Object.defineProperty,v=Object.defineProperties;var m=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var p=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var o=(i,t,e)=>t in i?h(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e,u=(i,t)=>{for(var e in t||(t={}))p.call(t,e)&&o(i,e,t[e]);if(n)for(var e of n(t))c.call(t,e)&&o(i,e,t[e]);return i},l=(i,t)=>v(i,m(t));const d=require("three");function g(i){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const e in i)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(i,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>i[e]})}}return t.default=i,Object.freeze(t)}const r=g(d),f=["encodings_fragment","colorspace_fragment"],y=`
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+  #include <fog_pars_vertex>
+
+  attribute vec3 previous;
+  attribute vec3 next;
+  attribute float side;
+  attribute float width;
+  attribute float counters;
+  
+  uniform vec2 resolution;
+  uniform float lineWidth;
+  uniform vec3 color;
+  uniform float opacity;
+  uniform float sizeAttenuation;
+  uniform vec2 offset;
+
+  uniform float time;
+  uniform vec3 lightColor;
+  uniform vec2 uCenter;
+  uniform float size;
+  uniform float speed;
+  uniform float lightWidth;
+  uniform float lineLightAnimation;
+  
+  varying vec2 vUV;
+  varying vec4 vColor;
+  varying float vCounters;
+  varying vec2 vHighPrecisionZW;
+  
+  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;
+    if (lineLightAnimation == 1.0) {
+      vec2 vWorld=position.xy;
+      float r_time=mod(time/(speed*size),2.);
+      float l=distance(vWorld, uCenter)/size;
+      float r_opacity=smoothstep(r_time-lightWidth*2.,r_time-lightWidth,l)-smoothstep(r_time-lightWidth,r_time,l);
+      vColor=vec4(mix(color,lightColor,r_opacity),opacity);
+    } else {
+      vColor=vec4(color,opacity);
+    }
+
+    vUV=uv+offset;
+
+    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 w = 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;
+    vec4 normal = vec4(-dir.y, dir.x, 0., 1.);
+    normal.xy *= .5 * w;
+    //normal *= projectionMatrix;
+    if (sizeAttenuation == 0.) {
+      normal.xy *= finalPosition.w;
+      normal.xy /= (vec4(resolution, 0., 1.) * projectionMatrix).xy;
+    }
+  
+    finalPosition.xy += normal.xy * side;
+    gl_Position = finalPosition;
+    #include <logdepthbuf_vertex>
+    #include <fog_vertex>
+    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
+    vHighPrecisionZW = finalPosition.zw;
+    #include <fog_vertex>
+  }
+`,b=`
+  #include <packing>
+  #include <fog_pars_fragment>
+  #include <logdepthbuf_pars_fragment>
+  
+  uniform sampler2D map;
+  uniform sampler2D alphaMap;
+  uniform float useMap;
+  uniform float useAlphaMap;
+  uniform float useDash;
+  uniform float dashArray;
+  uniform float dashOffset;
+  uniform float dashRatio;
+  uniform float visibility;
+  uniform float alphaTest;
+  uniform vec2 repeat;
+  uniform float useDepth;
+  uniform float offsetLoop;
+  
+  varying vec2 vUV;
+  varying vec4 vColor;
+  varying float vCounters;
+  varying vec2 vHighPrecisionZW;
+  
+  void main() {
+    #include <logdepthbuf_fragment>
+    vec4 c = vColor;
+    if (useMap == 1.) c *= texture2D(map, vUV * repeat);
+    if (useAlphaMap == 1.) c.a *= texture2D(alphaMap, vUV * repeat).a;
+    if(offsetLoop!=1.0){
+      if(vUV.x>1.0 || vUV.x<0.0){
+        c.a = 0.0;
+      }
+    }
+
+    if (c.a < alphaTest) discard;
+    if (useDash == 1.) {
+      c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));
+    }
+    if (useDepth == 1.) {
+      float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;
+      gl_FragColor = packDepthToRGBA( fragCoordZ );
+    }else{
+      gl_FragColor = c;
+      gl_FragColor.a *= step(vCounters, visibility);
+    }
+   
+   
+    #include <fog_fragment>
+    #include <tonemapping_fragment>
+    #include <${+r.REVISION<154?f[0]:f[1]}>
+  }
+`,a=[];class x extends r.ShaderMaterial{constructor(t){super({uniforms:l(u({},r.UniformsLib.fog),{lineWidth:{value:1},map:{value:null},useMap:{value:0},alphaMap:{value:null},useAlphaMap:{value:0},color:{value:new r.Color(16777215)},opacity:{value:1},resolution:{value:new r.Vector2(1,1)},sizeAttenuation:{value:1},dashArray:{value:0},dashOffset:{value:0},dashRatio:{value:.5},useDash:{value:0},useDepth:{value:0},visibility:{value:1},alphaTest:{value:0},repeat:{value:new r.Vector2(1,1)},offset:{value:new r.Vector2(0,0)},offsetLoop:{value:1},lineLightAnimation:{value:0},time:{value:0},size:{value:300},speed:{value:.3},lightWidth:{value:.1},uCenter:{value:new r.Vector2(0,0)},lightColor:{value:new r.Color(16777215)}}),vertexShader:y,fragmentShader:b}),a.push(this),this.type="MeshLineMaterial",Object.defineProperties(this,{lineWidth:{enumerable:!0,get(){return this.uniforms.lineWidth.value},set(e){this.uniforms.lineWidth.value=e}},map:{enumerable:!0,get(){return this.uniforms.map.value},set(e){this.uniforms.map.value=e}},useMap:{enumerable:!0,get(){return this.uniforms.useMap.value},set(e){this.uniforms.useMap.value=e}},alphaMap:{enumerable:!0,get(){return this.uniforms.alphaMap.value},set(e){this.uniforms.alphaMap.value=e}},useAlphaMap:{enumerable:!0,get(){return this.uniforms.useAlphaMap.value},set(e){this.uniforms.useAlphaMap.value=e}},color:{enumerable:!0,get(){return this.uniforms.color.value},set(e){this.uniforms.color.value=e}},opacity:{enumerable:!0,get(){return this.uniforms.opacity.value},set(e){this.uniforms.opacity.value=e}},resolution:{enumerable:!0,get(){return this.uniforms.resolution.value},set(e){this.uniforms.resolution.value.copy(e)}},sizeAttenuation:{enumerable:!0,get(){return this.uniforms.sizeAttenuation.value},set(e){this.uniforms.sizeAttenuation.value=e}},dashArray:{enumerable:!0,get(){return this.uniforms.dashArray.value},set(e){this.uniforms.dashArray.value=e,this.useDash=e!==0?1:0}},dashOffset:{enumerable:!0,get(){return this.uniforms.dashOffset.value},set(e){this.uniforms.dashOffset.value=e}},dashRatio:{enumerable:!0,get(){return this.uniforms.dashRatio.value},set(e){this.uniforms.dashRatio.value=e}},useDash:{enumerable:!0,get(){return this.uniforms.useDash.value},set(e){this.uniforms.useDash.value=e}},useDepth:{enumerable:!0,get(){return this.uniforms.useDepth.value},set(e){this.uniforms.useDepth.value=e}},visibility:{enumerable:!0,get(){return this.uniforms.visibility.value},set(e){this.uniforms.visibility.value=e}},alphaTest:{enumerable:!0,get(){return this.uniforms.alphaTest.value},set(e){this.uniforms.alphaTest.value=e}},repeat:{enumerable:!0,get(){return this.uniforms.repeat.value},set(e){this.uniforms.repeat.value.copy(e)}},lineLightAnimation:{enumerable:!0,get:function(){return this.uniforms.lineLightAnimation.value},set:function(e){this.uniforms.lineLightAnimation.value=e}},time:{enumerable:!0,get:function(){return this.uniforms.time.value},set:function(e){this.uniforms.time.value=e}},size:{enumerable:!0,get:function(){return this.uniforms.size.value},set:function(e){this.uniforms.size.value=e}},speed:{enumerable:!0,get:function(){return this.uniforms.speed.value},set:function(e){this.uniforms.speed.value=e}},lightWidth:{enumerable:!0,get:function(){return this.uniforms.lightWidth.value},set:function(e){this.uniforms.lightWidth.value=e}},uCenter:{enumerable:!0,get:function(){return this.uniforms.uCenter.value},set:function(e){this.uniforms.uCenter.value=e}},lightColor:{enumerable:!0,get:function(){return this.uniforms.lightColor.value},set:function(e){e&&(this.uniforms.lightColor.value=e)}}}),this.setValues(t)}copy(t){return super.copy(t),this.lineWidth=t.lineWidth,this.map=t.map,this.useMap=t.useMap,this.alphaMap=t.alphaMap,this.useAlphaMap=t.useAlphaMap,this.color.copy(t.color),this.opacity=t.opacity,this.resolution.copy(t.resolution),this.sizeAttenuation=t.sizeAttenuation,this.dashArray=t.dashArray,this.dashOffset=t.dashOffset,this.dashRatio=t.dashRatio,this.useDash=t.useDash,this.visibility=t.visibility,this.alphaTest=t.alphaTest,this.repeat.copy(t.repeat),this}dispose(){super.dispose();const t=a.indexOf(this);t>-1&&a.splice(t,1)}}exports.MeshLineMaterial=x;exports.meshLineMaterialArr=a;