BabylonJS MeshLine - a port of THREE.MeshLine

roland · June 17, 2023, 4:08am

Hi Boris!
That’s a good and valid point

roland · June 17, 2023, 4:41am

@bvaisman
But let the coder remain in control

bvaisman · June 17, 2023, 4:50am

To me it is just not logical to declare 4 colors if you only use 3 ( first case)

roland · June 17, 2023, 5:00am

It’s already finished and waiting to be merged.

I’m creating the docs, creating some PGs and as I progress and playing with the lines a lot I’m still not convinced that the current solution to colorize the lines is the best one. I am thinking about something like:

interface ColorSection {
  start: number
  end: number
  percentage?: boolean
  color: Color3
}

function setColorSections(colorSections: ColorSection[])

So I can easily for example set a color for the first 1m of a line or half of the line, and so on.

Also I’d like to add a SimpleGreasedLineMaterial which will use ShaderMaterial for maximum performance. I work on digital twins of buildings and I need to draw a lot of piping, electrical wires, etc. and I don’t need any funky material stuff, I just need maximum performance with no overhead of the material plugin and the StandardMaterial.

I changed the material option pbr?: boolean (false meant use StandardMaterial as the base material, true to use PBRMaterial) to materialType?: GreasedLineMeshMaterialType a few weeks ago so I can later add new material(s) easily.

EDIT: I was thinking about it and such functionality can be part of GreasedLineTools. All we need is prepare a color texture which matches our needs.

roland · June 17, 2023, 5:00am

You don’t need to declare 4 colors, just 3. I was just lazy to paste two code snippets

roland · June 17, 2023, 11:00am

Guys, look at this bad ass sphere:

scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/textures/environment.dds", scene);

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments: 32, diameter: 2 }, scene);
sphere.setEnabled(false)

const sphereLines = BABYLON.CreateGreasedLine(
    "sphereLines", 
    { points: BABYLON.GreasedLineTools.MeshesToLines([sphere]) }, 
    { materialType: BABYLON.GreasedLineMeshMaterialType.MATERIAL_TYPE_PBR,
    colorMode: BABYLON.GreasedLineMeshColorMode.COLOR_MODE_MULTIPLY,
    width: 0.05}
)

const pbr = sphereLines.material
pbr.metallic = 0;
pbr.roughness = 0;

pbr.subSurface.isRefractionEnabled = true;
pbr.subSurface.indexOfRefraction = 1.8;

roland · June 18, 2023, 10:44am

Hi Guys!

When will be this merged? I’d like to add the PGs to the docs and I can’t before its merged.

Really don’t want to rush anyone I just wanted to put it online before my vacation.

Thanks!

mawa · June 18, 2023, 11:04am

OK, now I’m really eager to use this thing. I’ve been looking for the past 4-months on how I will create the structure of my main feature (a giant interactive sphere) featured in my scene of ‘space museum’. And I think I have a winner now. This is just so slick and ez, looks awesome and offers tons of possibilities. I bookmarked it alread,y now just waiting on this merge… PLEASE

roland · June 18, 2023, 11:37am

Look at this wave analyzer:

Edit: sry, works on mac only, it uses an old version of GreasedLine

It just uses dashing, a color texture, a bit of glow, widths connected to the audio engine’s analyser and rotates around the Z axis So easy to make it with GreasedLine and I think it’s looking cool!

roland · June 18, 2023, 11:47am

I am overhyped

mawa · June 18, 2023, 12:48pm

I can see a butterfly… wait no, a heart… wait, a clover…no a dragon…wait, an apple… a lip… a dragon ( ) I can see…may be I should stop drinking

mawa · June 18, 2023, 12:54pm

Can we share it as a preview? This is just too cool

roland · June 18, 2023, 1:09pm

Yes sure, but share what?

mawa · June 18, 2023, 1:11pm

The wave analyzer demo.

roland · June 18, 2023, 1:13pm

No problem. Give me a few moments.

roland · June 18, 2023, 1:26pm

github.com

RolandCsibrei/babylonjs-greasedline/blob/one-plugin-material/src/pages/demos/AnalyzerPage.vue

<template>
  <canvas ref="canvas" class="canvas"></canvas>
</template>

<script setup lang="ts">
import { Analyser, ArcRotateCamera, Axis, Color3, Engine, GlowLayer, MeshBuilder, MirrorTexture, Plane, RawTexture, Scene, Sound, StandardMaterial, Vector2, Vector3 } from '@babylonjs/core';
import { init } from 'src/babylon';
import { onMounted, ref } from 'vue';
import { GreasedLineBuilder } from '../../greased-line/graesedLineBuilder'
import { circle } from 'src/greased-line/greasedLineTools';

const canvas = ref<HTMLCanvasElement | null>(null);
onMounted(() => {

  if (canvas.value) {
    const { scene, camera } = init(canvas.value, false, false)
    demo(scene, camera)
  }
});

This file has been truncated. show original

Quick way - try this first
Clone this repo:

npm install -g @quasar/cli
npm i
quasar dev

This is the old repo, a lot has changed since then, but this analyzer was created with it. Navigate via the hamburger menu to Demos/Analyzer. I’ll rewrite it now for the actual version of GreasedLine so you can run it in the playground locally, see below.

The correct way
Clone this repo:

Install node and npm versions required by BabylonJS

Build it

Run npx build-tools --command dev-watch --watch-assets --watch-declarations --serve (watch and serve in one command)
Run npm run serve -w @tools/playground in a new terminal window

Open http://localhost:1338 in your browser.

As I wrote, I will create a PG now.

roland · June 18, 2023, 1:39pm

If you can run PG locally then http://localhost:1338/#H1LRZ3#45. (try from index 1 up to 45, I am putting the draft versions of PGs which will be included in the docs there)

Quick transfer to PG. As I said, some default values and behaviour has changed in GreasedLine since I created this analyzer, so it’s not exaclty the same but a working one you can customize

And here you have the docs:

github.com

RolandCsibrei/BabylonJS-Documentation/blob/master/content/features/featuresDeepDive/mesh/creation/param/greased_line.md

---
title: Creating A GreasedLine
image:
description: Learn how to create GreaasedLines in Babylon.js.
keywords: diving deeper, meshes, parametric shapes, greasedline, greased line
further-reading:
video-overview:
video-content:
---

## GreasedLine

`GreasedLine` is a special type of line which uses a regular mesh with triangles to display a line of any width. It incorporates custom shaders designed to ensure that the mesh always faces the camera resulting in consistent thickness from all perspectives. The shaders are provided as a plugin material. You can use `StandardMaterial` or `PBRMaterial` with `GreasedLine` so you can use any property of the material to stylize your line. `GreasedLine` also features dashing, multicolored lines with sampling option, color blending options, variable width of both side of the line (upper, lower part), visibility (what percentage of the line is visible), points coordinates offsets, instance mode (you can add more lines to an instance and they will be drawn in one draw call), lazy mode. The values for these features are animatable. You can translate, rotate and scale the line as well because it's a mesh.

## Create a GreasedLine

The easiest, prefered and recommended way to create a `GreasedLine` is to use the `CreateGreasedLine` function:

```javascript
function CreateGreasedLine(name: string, options: GreasedLineMeshBuilderOptions, materialOptions?: Nullable<GreasedLineMaterialBuilderOptions>, scene?: Nullable<Scene>)

This file has been truncated. show original

Evgeni_Popov · June 19, 2023, 10:41am

Let us know when you think all your changes have been made: I see you’ve made some more between this message and today!

roland · June 19, 2023, 11:24am

Edit2: Just tried out the wave analyzer on windows and it failed to compile the shader. I’ll go trough all the stuff on windows now and will let you know!

Yes, I added a useful tool function, but the core is already ready to merge. The docs are fully prepared too.

Thanks!

Edit: go go go!

EDIT3: I nearly shat my pants that something bad happened and I’ve just realized that the wave analyzer was created with an old version of GreasedLine All seems to be fine for the merge! Is the first one always this stresful?

mawa · June 19, 2023, 11:57am

@roland Just wanted to inform you that I have scheduled this in two hours (LK post).
If you have any comments, now is the time

Topic		Replies	Views
Path Tracing with Babylon, Background and Implementation Demos and projects	40	17394	January 23, 2023
Faux thickness for lines using shader port from three.js Feature requests shader	3	487	August 29, 2023
BabylonJS 5 release Off topic	18	1818	February 11, 2022
Need help with Babylonjs shader creation Service offers and requests	2	426	May 6, 2020
Looking for a freelance babylonjs developer Service offers and requests	1	547	July 17, 2020

Related Topics