chili3d 0.6.1

package/packages/chili-three/src/outlinePass.js

@@ -0,0 +1,340 @@
+/**
+ * This is a forked and simplified version of the OutlinePass from three.js. In order to improve performance, various
+ * features have been deleted. This is about 2x faster.
+ */
+import {
+    AdditiveBlending,
+    Color,
+    DoubleSide,
+    LinearFilter,
+    Matrix4,
+    MeshBasicMaterial,
+    MeshDepthMaterial,
+    NoBlending,
+    RGBADepthPacking,
+    RGBAFormat,
+    ShaderMaterial,
+    UniformsUtils,
+    Vector2,
+    Vector3,
+    WebGLRenderTarget,
+} from "three";
+import { FullScreenQuad, Pass } from "three/examples/jsm/postprocessing/Pass.js";
+import { CopyShader } from "three/examples/jsm/shaders/CopyShader.js";
+
+class OutlinePass extends Pass {
+    constructor(scene, camera) {
+        super();
+
+        this.renderScene = scene;
+        this.renderCamera = camera;
+        this.visibleEdgeColor = new Color(1, 1, 1);
+        this.hiddenEdgeColor = new Color(0.1, 0.04, 0.02);
+        this.usePatternTexture = false;
+        this.edgeStrength = 3.0;
+        this.pulsePeriod = 0;
+
+        this._visibilityCache = new Map();
+
+        this.resolution = new Vector2(256, 256);
+
+        const pars = {
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            format: RGBAFormat,
+            skipInvalidateFramebuffer: true,
+        };
+
+        this.maskBufferMaterial = new MeshBasicMaterial({ color: 0xffffff });
+        this.maskBufferMaterial.side = DoubleSide;
+        this.renderTargetMaskBuffer = new WebGLRenderTarget(this.resolution.x, this.resolution.y, pars);
+        this.renderTargetMaskBuffer.texture.name = "OutlinePass.mask";
+        this.renderTargetMaskBuffer.texture.generateMipmaps = false;
+
+        this.depthMaterial = new MeshDepthMaterial();
+        this.depthMaterial.side = DoubleSide;
+        this.depthMaterial.depthPacking = RGBADepthPacking;
+        this.depthMaterial.blending = NoBlending;
+
+        this.prepareMaskMaterial = this.getPrepareMaskMaterial();
+        this.prepareMaskMaterial.side = DoubleSide;
+        this.prepareMaskMaterial.fragmentShader = replaceDepthToViewZ(
+            this.prepareMaskMaterial.fragmentShader,
+            this.renderCamera,
+        );
+
+        this.renderTargetDepthBuffer = new WebGLRenderTarget(this.resolution.x, this.resolution.y, pars);
+        this.renderTargetDepthBuffer.texture.name = "OutlinePass.depth";
+        this.renderTargetDepthBuffer.texture.generateMipmaps = false;
+
+        this.edgeDetectionMaterial = this.getEdgeDetectionMaterial();
+        this.renderTargetEdgeBuffer1 = new WebGLRenderTarget(this.resolution.x, this.resolution.y, pars);
+        this.renderTargetEdgeBuffer1.texture.name = "OutlinePass.edge1";
+        this.renderTargetEdgeBuffer1.texture.generateMipmaps = false;
+
+        // Overlay material
+        this.overlayMaterial = this.getOverlayMaterial();
+
+        // copy material
+        if (CopyShader === undefined) console.error("THREE.OutlinePass relies on CopyShader");
+
+        const copyShader = CopyShader;
+
+        this.copyUniforms = UniformsUtils.clone(copyShader.uniforms);
+        this.copyUniforms["opacity"].value = 1.0;
+
+        this.materialCopy = new ShaderMaterial({
+            uniforms: this.copyUniforms,
+            vertexShader: copyShader.vertexShader,
+            fragmentShader: copyShader.fragmentShader,
+            blending: NoBlending,
+            depthTest: false,
+            depthWrite: false,
+            transparent: true,
+        });
+
+        this.enabled = true;
+        this.needsSwap = false;
+
+        this._oldClearColor = new Color();
+        this.oldClearAlpha = 1;
+
+        this.fsQuad = new FullScreenQuad(null);
+
+        this.tempPulseColor1 = new Color();
+        this.tempPulseColor2 = new Color();
+        this.textureMatrix = new Matrix4();
+
+        function replaceDepthToViewZ(string, camera) {
+            var type = camera.isPerspectiveCamera ? "perspective" : "orthographic";
+
+            return string.replace(/DEPTH_TO_VIEW_Z/g, type + "DepthToViewZ");
+        }
+    }
+
+    dispose() {
+        this.renderTargetMaskBuffer.dispose();
+        this.renderTargetDepthBuffer.dispose();
+        this.renderTargetEdgeBuffer1.dispose();
+    }
+
+    setSize(width, height) {
+        this.renderTargetMaskBuffer.setSize(width, height);
+        this.renderTargetDepthBuffer.setSize(width, height);
+
+        this.renderTargetEdgeBuffer1.setSize(width, height);
+    }
+
+    updateTextureMatrix() {
+        this.textureMatrix.set(
+            0.5,
+            0.0,
+            0.0,
+            0.5,
+            0.0,
+            0.5,
+            0.0,
+            0.5,
+            0.0,
+            0.0,
+            0.5,
+            0.5,
+            0.0,
+            0.0,
+            0.0,
+            1.0,
+        );
+        this.textureMatrix.multiply(this.renderCamera.projectionMatrix);
+        this.textureMatrix.multiply(this.renderCamera.matrixWorldInverse);
+    }
+
+    render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
+        if (this.renderScene.children.length > 0) {
+            renderer.getClearColor(this._oldClearColor);
+            this.oldClearAlpha = renderer.getClearAlpha();
+            const oldAutoClear = renderer.autoClear;
+
+            renderer.autoClear = false;
+
+            if (maskActive) renderer.state.buffers.stencil.setTest(false);
+
+            renderer.setClearColor(0xffffff, 1);
+
+            // Update Texture Matrix for Depth compare
+            this.updateTextureMatrix();
+
+            this.renderScene.overrideMaterial = this.prepareMaskMaterial;
+            this.prepareMaskMaterial.uniforms["cameraNearFar"].value.set(
+                this.renderCamera.near,
+                this.renderCamera.far,
+            );
+            this.prepareMaskMaterial.uniforms["depthTexture"].value = this.renderTargetDepthBuffer.texture;
+            this.prepareMaskMaterial.uniforms["textureMatrix"].value = this.textureMatrix;
+            renderer.setRenderTarget(this.renderTargetMaskBuffer);
+            renderer.clear();
+            renderer.render(this.renderScene, this.renderCamera);
+            this.renderScene.overrideMaterial = null;
+
+            this.tempPulseColor1.copy(this.visibleEdgeColor);
+            this.tempPulseColor2.copy(this.hiddenEdgeColor);
+
+            // 3. Apply Edge Detection Pass
+            this.fsQuad.material = this.edgeDetectionMaterial;
+            this.edgeDetectionMaterial.uniforms["maskTexture"].value = this.renderTargetMaskBuffer.texture;
+            this.edgeDetectionMaterial.uniforms["texSize"].value.set(
+                this.renderTargetMaskBuffer.width,
+                this.renderTargetMaskBuffer.height,
+            );
+            this.edgeDetectionMaterial.uniforms["visibleEdgeColor"].value = this.tempPulseColor1;
+            this.edgeDetectionMaterial.uniforms["hiddenEdgeColor"].value = this.tempPulseColor2;
+            renderer.setRenderTarget(this.renderTargetEdgeBuffer1);
+            renderer.clear();
+            this.fsQuad.render(renderer);
+
+            // Blend it additively over the input texture
+            this.fsQuad.material = this.overlayMaterial;
+            this.overlayMaterial.uniforms["maskTexture"].value = this.renderTargetMaskBuffer.texture;
+            this.overlayMaterial.uniforms["edgeTexture1"].value = this.renderTargetEdgeBuffer1.texture;
+            this.overlayMaterial.uniforms["edgeStrength"].value = this.edgeStrength;
+
+            if (maskActive) renderer.state.buffers.stencil.setTest(true);
+
+            renderer.setRenderTarget(readBuffer);
+            this.fsQuad.render(renderer);
+
+            renderer.setClearColor(this._oldClearColor, this.oldClearAlpha);
+            renderer.autoClear = oldAutoClear;
+        }
+
+        if (this.renderToScreen) {
+            this.fsQuad.material = this.materialCopy;
+            this.copyUniforms["tDiffuse"].value = readBuffer.texture;
+            renderer.setRenderTarget(null);
+            this.fsQuad.render(renderer);
+        }
+    }
+
+    getPrepareMaskMaterial() {
+        const result = new ShaderMaterial({
+            uniforms: {
+                depthTexture: { value: null },
+                cameraNearFar: { value: new Vector2(0.5, 0.5) },
+                textureMatrix: { value: null },
+                id: { value: null },
+            },
+
+            vertexShader: `#include <morphtarget_pars_vertex>
+				#include <skinning_pars_vertex>
+				varying vec4 projTexCoord;
+				varying vec4 vPosition;
+				uniform mat4 textureMatrix;
+				void main() {
+					#include <skinbase_vertex>
+					#include <begin_vertex>
+					#include <morphtarget_vertex>
+					#include <skinning_vertex>
+					#include <project_vertex>
+					vPosition = mvPosition;
+					vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
+					projTexCoord = textureMatrix * worldPosition;
+				}`,
+
+            fragmentShader: `#include <packing>
+				varying vec4 vPosition;
+				varying vec4 projTexCoord;
+				uniform sampler2D depthTexture;
+				uniform vec2 cameraNearFar;
+                uniform float id;
+				void main() {
+					float depth = unpackRGBAToDepth(texture2DProj( depthTexture, projTexCoord ));
+					float viewZ = - DEPTH_TO_VIEW_Z( depth, cameraNearFar.x, cameraNearFar.y );
+					float depthTest = (-vPosition.z > viewZ) ? 1.0 : 0.0;
+					gl_FragColor = vec4(id/255.0, depthTest, 1.0, 1.0);
+				}`,
+        });
+
+        let idCounter = 0;
+        result.onBeforeRender = (renderer, scene, camera, geometry, object, group) => {
+            result.uniforms.id.value = idCounter;
+            result.uniformsNeedUpdate = true;
+            idCounter += 100;
+            idCounter %= 255;
+        };
+        return result;
+    }
+
+    getEdgeDetectionMaterial() {
+        return new ShaderMaterial({
+            uniforms: {
+                maskTexture: { value: null },
+                texSize: { value: new Vector2(0.5, 0.5) },
+                visibleEdgeColor: { value: new Vector3(1.0, 1.0, 1.0) },
+                hiddenEdgeColor: { value: new Vector3(1.0, 1.0, 1.0) },
+            },
+
+            vertexShader: `varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+
+            fragmentShader: `varying vec2 vUv;
+				uniform sampler2D maskTexture;
+				uniform vec2 texSize;
+				uniform vec3 visibleEdgeColor;
+				uniform vec3 hiddenEdgeColor;
+				void main() {
+					vec2 invSize = 1. / texSize;
+					vec4 uvOffset = vec4(1.0, 0.0, 0.0, 1.0) * vec4(invSize, invSize);
+					vec4 c1 = texture2D( maskTexture, vUv + uvOffset.xy);
+					vec4 c2 = texture2D( maskTexture, vUv - uvOffset.xy);
+					vec4 c3 = texture2D( maskTexture, vUv + uvOffset.yw);
+					vec4 c4 = texture2D( maskTexture, vUv - uvOffset.yw);
+					float diff1 = (c1.r - c2.r)*0.5;
+					float diff2 = (c3.r - c4.r)*0.5;
+					float d = length( vec2(diff1, diff2) );
+					float a1 = min(c1.g, c2.g);
+					float a2 = min(c3.g, c4.g);
+					float visibilityFactor = min(a1, a2);
+					vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;
+					gl_FragColor = vec4(edgeColor, 1.0) * vec4(d > 0. ? 1. : 0.);
+				}`,
+        });
+    }
+
+    getOverlayMaterial() {
+        return new ShaderMaterial({
+            uniforms: {
+                maskTexture: { value: null },
+                edgeTexture1: { value: null },
+                patternTexture: { value: null },
+                edgeStrength: { value: 1.0 },
+            },
+
+            vertexShader: `varying vec2 vUv;
+				void main() {
+					vUv = uv;
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+				}`,
+
+            fragmentShader: `varying vec2 vUv;
+				uniform sampler2D maskTexture;
+				uniform sampler2D edgeTexture1;
+				uniform sampler2D patternTexture;
+				uniform float edgeStrength;
+				void main() {
+					vec4 edgeValue = texture2D(edgeTexture1, vUv);
+					vec4 maskColor = texture2D(maskTexture, vUv);
+					float visibilityFactor = 1.0 - maskColor.g > 0.0 ? 1.0 : 0.5;
+					vec4 finalColor = edgeStrength * edgeValue;
+					gl_FragColor = finalColor;
+				}`,
+            blending: AdditiveBlending,
+            depthTest: false,
+            depthWrite: false,
+            transparent: true,
+        });
+    }
+}
+
+export { OutlinePass };

package/packages/chili-three/src/threeGeometry.ts

@@ -0,0 +1,207 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type BoundingBox,
+    type EdgeMeshData,
+    type FaceMeshData,
+    type GeometryNode,
+    type IShape,
+    type ISubShape,
+    type IVisualGeometry,
+    type Matrix4,
+    MeshUtils,
+    type ShapeMeshRange,
+    ShapeNode,
+    ShapeType,
+} from "chili-core";
+import { type Material, Mesh, type MeshLambertMaterial } from "three";
+import type { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry";
+import { defaultEdgeMaterial } from "./common";
+import { Constants } from "./constants";
+import { ThreeGeometryFactory } from "./threeGeometryFactory";
+import { ThreeHelper } from "./threeHelper";
+import type { ThreeVisualContext } from "./threeVisualContext";
+import { ThreeVisualObject } from "./threeVisualObject";
+
+export class ThreeGeometry extends ThreeVisualObject implements IVisualGeometry {
+    private _faceMaterial: Material | Material[];
+    private _edges?: LineSegments2;
+    private _faces?: Mesh;
+
+    constructor(
+        readonly geometryNode: GeometryNode,
+        readonly context: ThreeVisualContext,
+    ) {
+        super(geometryNode);
+        this._faceMaterial = context.getMaterial(geometryNode.materialId);
+        this.generateShape();
+        geometryNode.onPropertyChanged(this.handleGeometryPropertyChanged);
+    }
+
+    changeFaceMaterial(material: Material | Material[]) {
+        if (this._faces) {
+            this._faceMaterial = material;
+            this._faces.material = material;
+        }
+    }
+
+    box() {
+        return this._faces?.geometry.boundingBox ?? this._edges?.geometry.boundingBox;
+    }
+
+    override boundingBox(): BoundingBox | undefined {
+        const box = this._faces?.geometry.boundingBox ?? this._edges?.geometry.boundingBox;
+        if (!box) return undefined;
+
+        return {
+            min: ThreeHelper.toXYZ(box.min),
+            max: ThreeHelper.toXYZ(box.max),
+        };
+    }
+
+    private readonly handleGeometryPropertyChanged = (property: keyof GeometryNode) => {
+        if (property === "materialId") {
+            this.changeFaceMaterial(this.context.getMaterial(this.geometryNode.materialId));
+        } else if ((property as keyof ShapeNode) === "shape") {
+            this.removeMeshes();
+            this.generateShape();
+        }
+    };
+
+    private generateShape() {
+        const mesh = this.geometryNode.mesh;
+        if (mesh?.faces?.position.length) this.initFaces(mesh.faces);
+        if (mesh?.edges?.position.length) this.initEdges(mesh.edges);
+    }
+
+    override dispose() {
+        super.dispose();
+        this.geometryNode.removePropertyChanged(this.handleGeometryPropertyChanged);
+        this.removeMeshes();
+    }
+
+    private removeMeshes() {
+        if (this._edges) {
+            this.remove(this._edges);
+            this._edges.geometry.dispose();
+            this._edges = null as any;
+        }
+        if (this._faces) {
+            this.remove(this._faces);
+            this._faces.geometry.dispose();
+            this._faces = null as any;
+        }
+    }
+
+    private initEdges(data: EdgeMeshData) {
+        const buff = ThreeGeometryFactory.createEdgeBufferGeometry(data);
+        this._edges = new LineSegments2(buff, defaultEdgeMaterial);
+        this._edges.layers.set(Constants.Layers.Wireframe);
+        this.add(this._edges);
+    }
+
+    private initFaces(data: FaceMeshData) {
+        const buff = ThreeGeometryFactory.createFaceBufferGeometry(data);
+        if (data.groups.length > 1) buff.groups = data.groups;
+        this._faces = new Mesh(buff, this._faceMaterial);
+        this._faces.layers.set(Constants.Layers.Solid);
+        this.add(this._faces);
+    }
+
+    setFacesMateiralTemperary(material: MeshLambertMaterial) {
+        if (this._faces) this._faces.material = material;
+    }
+
+    setEdgesMateiralTemperary(material: LineMaterial) {
+        if (this._edges) this._edges.material = material;
+    }
+
+    removeTemperaryMaterial(): void {
+        if (this._edges) this._edges.material = defaultEdgeMaterial;
+        if (this._faces) this._faces.material = this._faceMaterial;
+    }
+
+    cloneSubEdge(index: number) {
+        const positions = MeshUtils.subEdge(this.geometryNode.mesh.edges!, index);
+        if (!positions) return undefined;
+
+        const buff = new LineSegmentsGeometry();
+        buff.setPositions(positions);
+        buff.applyMatrix4(this.matrixWorld);
+
+        return new LineSegments2(buff, defaultEdgeMaterial);
+    }
+
+    cloneSubFace(index: number) {
+        const mesh = MeshUtils.subFace(this.geometryNode.mesh.faces!, index);
+        if (!mesh) return undefined;
+
+        const buff = ThreeGeometryFactory.createFaceBufferGeometry(mesh);
+        buff.applyMatrix4(this.matrixWorld);
+
+        return new Mesh(buff, this._faceMaterial);
+    }
+
+    faces() {
+        return this._faces;
+    }
+
+    edges() {
+        return this._edges;
+    }
+
+    override getSubShapeAndIndex(shapeType: "face" | "edge", subVisualIndex: number) {
+        let subShape: ISubShape | undefined;
+        let transform: Matrix4 | undefined;
+        let index: number = -1;
+        let groups: ShapeMeshRange[] | undefined;
+        if (shapeType === "edge") {
+            groups = this.geometryNode.mesh.edges?.range;
+            if (groups) {
+                index = ThreeHelper.findGroupIndex(groups, subVisualIndex)!;
+                subShape = groups[index].shape;
+                transform = groups[index].transform;
+            }
+        } else {
+            groups = this.geometryNode.mesh.faces?.range;
+            if (groups) {
+                index = ThreeHelper.findGroupIndex(groups, subVisualIndex)!;
+                subShape = groups[index].shape;
+                transform = groups[index].transform;
+            }
+        }
+
+        let shape: IShape | undefined = subShape;
+        if (this.geometryNode instanceof ShapeNode) {
+            shape = this.geometryNode.shape.value;
+        }
+        return { transform, shape, subShape, index, groups: groups ?? [] };
+    }
+
+    override subShapeVisual(shapeType: ShapeType): (Mesh | LineSegments2)[] {
+        const shapes: (Mesh | LineSegments2 | undefined)[] = [];
+
+        const isWhole =
+            shapeType === ShapeType.Shape ||
+            ShapeType.hasCompound(shapeType) ||
+            ShapeType.hasCompoundSolid(shapeType) ||
+            ShapeType.hasSolid(shapeType);
+
+        if (isWhole || ShapeType.hasEdge(shapeType) || ShapeType.hasWire(shapeType)) {
+            shapes.push(this.edges());
+        }
+
+        if (isWhole || ShapeType.hasFace(shapeType) || ShapeType.hasShell(shapeType)) {
+            shapes.push(this.faces());
+        }
+
+        return shapes.filter((x) => x !== undefined);
+    }
+
+    override wholeVisual(): (Mesh | LineSegments2)[] {
+        return [this.edges(), this.faces()].filter((x) => x !== undefined);
+    }
+}

package/packages/chili-three/src/threeGeometryFactory.ts

@@ -0,0 +1,120 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type EdgeMeshData,
+    type FaceMeshData,
+    LineType,
+    type MeshLike,
+    type VertexMeshData,
+} from "chili-core";
+import {
+    AlwaysDepth,
+    BufferAttribute,
+    BufferGeometry,
+    DoubleSide,
+    Float32BufferAttribute,
+    type LineBasicMaterial,
+    Mesh,
+    MeshLambertMaterial,
+    Points,
+    PointsMaterial,
+} from "three";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { LineSegments2 } from "three/examples/jsm/lines/LineSegments2";
+import { LineSegmentsGeometry } from "three/examples/jsm/lines/LineSegmentsGeometry";
+
+export class ThreeGeometryFactory {
+    static createVertexGeometry(data: VertexMeshData) {
+        const buff = ThreeGeometryFactory.createVertexBufferGeometry(data);
+        const material = ThreeGeometryFactory.createVertexMaterial(data);
+        ThreeGeometryFactory.setColor(buff, data, material);
+
+        material.depthFunc = AlwaysDepth;
+        return new Points(buff, material);
+    }
+
+    static createVertexMaterial(data: VertexMeshData) {
+        return new PointsMaterial({
+            size: data.size,
+            sizeAttenuation: false,
+        });
+    }
+
+    static createFaceGeometry(data: FaceMeshData, opacity?: number) {
+        const buff = ThreeGeometryFactory.createFaceBufferGeometry(data);
+        const material = ThreeGeometryFactory.createMeshMaterial(opacity);
+        ThreeGeometryFactory.setColor(buff, data, material);
+
+        return new Mesh(buff, material);
+    }
+
+    static createMeshMaterial(opacity: number | undefined) {
+        const material = new MeshLambertMaterial({ side: DoubleSide });
+        if (opacity !== undefined) {
+            material.transparent = true;
+            material.opacity = opacity;
+        }
+        return material;
+    }
+
+    static setColor(
+        buffer: BufferGeometry,
+        data: { color?: number | number[] },
+        material: MeshLambertMaterial | PointsMaterial | LineMaterial | LineBasicMaterial,
+    ) {
+        if (typeof data.color === "number") {
+            material.color.set(data.color);
+        } else if (Array.isArray(data.color)) {
+            material.vertexColors = true;
+            buffer.setAttribute("color", new Float32BufferAttribute(data.color, 3));
+        }
+    }
+
+    static createFaceBufferGeometry(data: MeshLike) {
+        const buff = new BufferGeometry();
+        buff.setAttribute("position", new BufferAttribute(data.position, 3));
+        buff.setAttribute("normal", new BufferAttribute(data.normal, 3));
+        buff.setAttribute("uv", new BufferAttribute(data.uv, 2));
+        if (data.index && data.index.length > 0) buff.setIndex(new BufferAttribute(data.index, 1));
+        buff.computeBoundingBox();
+        return buff;
+    }
+
+    static createEdgeGeometry(data: EdgeMeshData) {
+        const buff = ThreeGeometryFactory.createEdgeBufferGeometry(data);
+        const material = ThreeGeometryFactory.createEdgeMaterial(data);
+        ThreeGeometryFactory.setColor(buff, data, material);
+        return new LineSegments2(buff, material).computeLineDistances();
+    }
+
+    static createEdgeMaterial(data: EdgeMeshData) {
+        const material = new LineMaterial({
+            linewidth: data.lineWidth ?? 1,
+            polygonOffset: true,
+            polygonOffsetFactor: -4,
+            polygonOffsetUnits: -4,
+        });
+        if (data.lineType === LineType.Dash) {
+            material.dashed = true;
+            material.dashScale = 100;
+            material.dashSize = 100;
+            material.gapSize = 100;
+        }
+        return material;
+    }
+
+    static createEdgeBufferGeometry(data: EdgeMeshData) {
+        const buff = new LineSegmentsGeometry();
+        buff.setPositions(data.position);
+        buff.computeBoundingBox();
+        return buff;
+    }
+
+    static createVertexBufferGeometry(data: VertexMeshData) {
+        const buff = new BufferGeometry();
+        buff.setAttribute("position", new BufferAttribute(data.position, 3));
+        buff.computeBoundingBox();
+        return buff;
+    }
+}