# BabylonJS MeshLine - a port of THREE.MeshLine **URL:** \ **Category:** Demos and projects\ **Created:** [August 10, 2022, 6:09pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924 "2022-08-10T18:09:25Z")\ **Posts on this page:** 20\ **Page:** 3
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 1, 2022, 7:39pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/41 "2022-12-01T19:39:40Z")
Thanks! Sorry, not yet, but it is on my list. EDIT: Already working on it ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 2, 2022, 12:38pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/42 "2022-12-02T12:38:57Z")
Here you go πŸ™‚ The black ray intersects the red line and the given point marked with the black sphere. Looking good but I need to do more tests though. R. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/2/128832272a3ac2886c702ab0c5a7441c242cd53b.jpeg) ---
**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\ **Post date:** [December 4, 2022, 7:01pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/43 "2022-12-04T19:01:24Z")
Amazing 🀩 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 10, 2022, 6:03pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/44 "2022-12-10T18:03:53Z")
Guys, just wanted to let you know I’m working on this whenever I can and I think finally it has a quite reliable `raycast` function. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/2/62e41200f3d0edeba18efe173d92219ac956bbdc.png) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/6/16c98ce8387d685550632b2ede67cd8c66136a18.png) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/5/252940d110825cb3a33688981812b060fe29d882.png) R. πŸ–– ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 12, 2022, 12:01pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/45 "2022-12-12T12:01:15Z")
Guys I started to create something like the GitHub globe using `GreasedLine` . Current status is: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/f/8fea4f8024aaf73f0e947190b714083772587156.jpeg) Follow here if you are interested: > [@How to create "Fly Line"?](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/7): > > +1 ---
**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\ **Post date:** [December 15, 2022, 9:03pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/46 "2022-12-15T21:03:20Z")
@roland Nice work! I’m using this [GitHub - RolandCsibrei/babylonjs-meshline at v2](https://github.com/RolandCsibrei/babylonjs-meshline/tree/v2) and I noticed that when the camera zooms out, the line gets really big πŸ€” ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 15, 2022, 9:27pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/47 "2022-12-15T21:27:47Z")
Ok guys, one more screenshot of the possibilities of the `GreasedLine` before release πŸ™‚ I rewrote some code once again to match the usage of the existing `LineSystem` (I’ve used same common parameter names) and I will rename the stuff to `GreasedLineSystem`. Finally the code is able to draw multiple lines with each line segment differently coloured, each segment can have it’s own width so you can draw something like this in 1 draw call: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/b/8bb7149ec561f7adfc7616da962d7636d0faa190.png) Arrows can be easily drawn by setting the line segment widths. I’ve created convenience methods for creating the color and width tables so it’s much easier to draw, size and colorise the line segments. πŸ–– ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 15, 2022, 9:28pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/48 "2022-12-15T21:28:38Z")
Thanks dude πŸ™‚ There might be still bugs. Can you make a screenshot? ---
**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\ **Post date:** [December 15, 2022, 9:49pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/49 "2022-12-15T21:49:17Z")
here πŸ™‚ ![line scale](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/8/e87da14b5c070d017b2f34c0865e72c6b13151bb.gif) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 16, 2022, 4:48am UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/50 "2022-12-16T04:48:50Z")
Well, you are modifiying the line mesh with a gizmo. I tried to modify the scale using the scale gizmo provided by the Scene Explorer and it’s behaving ok. I suggest you to wait for the release version or you can send me the code snippet where you are generating the line and I will try to find out what’s wrong. Thanks! ---
**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\ **Post date:** [December 16, 2022, 8:37pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/51 "2022-12-16T20:37:03Z")
This is an example, if you start zooming out, the shape of the line is barely visible > **[Babylon.js Playground](https://playground.babylonjs.com/#LQVB2Y%2316)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![chuan-1996](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/chuan-1996/32/28698_2.png) [@chuan-1996](https://forum.babylonjs.com/u/chuan-1996)\ **Post date:** [December 17, 2022, 3:00pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/52 "2022-12-17T15:00:05Z")
Great! ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 20, 2022, 12:50pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/53 "2022-12-20T12:50:43Z")
Hi! This is your code with the current `GreasedLine` stuff. Looks better: [https://demos.babylonjs.xyz/greased-line/hello/](https://demos.babylonjs.xyz/greased-line/hello/) Source code (`new-builder` branch): > ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 20, 2022, 12:55pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/54 "2022-12-20T12:55:39Z")
Actually I was thinking about to introduce a `visiblityStart` parameter so you can limit the visibility of the line from the start - at what percentage to start to draw the line(the current `visibility` parameter affects the line only from its end, so it basically sets the length of the line - at what percentage to stop to draw the line) but this hack with dash solves this problem - nice hack, thanks πŸ™‚ ---
**Author:** ![waverider404](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/waverider404/32/17464_2.png) [@waverider404](https://forum.babylonjs.com/u/waverider404)\ **Post date:** [December 22, 2022, 12:26am UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/55 "2022-12-22T00:26:53Z")
Whoa this is much better!! Thanks πŸ™‚! ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 22, 2022, 12:52pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/56 "2022-12-22T12:52:17Z")
Hi! I’ve just added `GeometryDraw `to `GreasedLine`: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/4/b4f850a5d07416f950b59e36b27df2c08edd018b.jpeg) and created a utility function to draw curves from Blender: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/e/1e3da01f283b5d92ee3b2128f0232abfe1772b47.jpeg) r. πŸ–– ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 28, 2022, 12:24pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/57 "2022-12-28T12:24:45Z")
Hello buddies! I put together a small Quasar/Vue/Vite app to demonstrate the capabilities and usage of `GreasedLine`. This is just for the few people in this thread this time. I will create docs for BabylonJS later ofcourse. It’s still in beta, some stuff will change under the hood however the main `GreasedLineBuilder`’s interface is 98% final πŸ™‚ If you are tired of X-MASS and the food have a look at (navigate using the hamburger menu - sry not mobile friendly) > **[BabylonJS GreasedLine demos](https://greased-line.babylonjs.xyz/)** > > Demonstration how to use GreasedLine in BabylonJS If you want to try it out yourself you can write your own code in `src/pages/tools/TryPage` and access it at `http://localhost:9000/tools/Try` There is a bug in this version which creates should-be-temporary bounding spheres for ray picking but they are permanent for now πŸ˜ƒ They are disabled so not visible but the Scene explorer reveals their existence (Press SHIFT+CTRL+I to open the Inspector) > **[GitHub - RolandCsibrei/babylonjs-greasedline](https://github.com/RolandCsibrei/babylonjs-greasedline)** > > Contribute to RolandCsibrei/babylonjs-greasedline development by creating an account on GitHub. 1. Install Quasar CLI - must be admin on Windows `npm i -g @quasar/cli @quasar/cli` 2. Clone repo 3. Install dependecies `npm i` 4. Run `quasar dev` 5. Automatically opens browser at `localhost:9000` You can use `yarn` as well. r. πŸ–– Live long and prosper my friends! @labris what about to try to create some cool disco lasers for your project with GreasedLine? πŸ˜‰ **Tested only on Mac/Chrome/Retina** ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/7/9763022179ae4e44ae512f5f0537a0f8c7d46dff.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/f/bf7cdc063144811ab9cbbe1565a8be4a4610f081.jpeg) ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 28, 2022, 1:28pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/58 "2022-12-28T13:28:12Z")
The docs look gorgeous and the demos too - love the Star Wars πŸ™‚ ---
**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\ **Post date:** [December 28, 2022, 2:06pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/59 "2022-12-28T14:06:00Z")
why is blurry i saw? ![50221228220420](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/a/daf55b2dcfc70769f7cc0b26b2db745ff1ca7a11.png) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [December 31, 2022, 6:48pm UTC](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924/60 "2022-12-31T18:48:12Z")
what’s your config? OS/Browser/GPU? Thanks! [Previous page](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924.md?page=2) [Next page](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924.md?page=4)