Jump to content

LineMesh and LineSystem Per Point Color


Recommended Posts

Hi people,

Based on the internal initial code from @JCPalmer, here are the per point colors for LineMesh and LineSystem

var points = [arrayVector3]; 
var lineColors = [arrayColor4]; 
var line = BABYLON.MeshBuilder.CreateLines("l", {points: points, colors: lineColors}, scene); 
// same for LineSystems 
var lines = [arrayVector3[] ]; 
var colors = [arrayColor4[] ]; 
var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, colors: colors}, scene);


Note1 : this works also with updatable LineMesh or LineSystem objects as the colors array can be updated live.
Note2 : when set at construction time, the parameter colors overwrite the hypothetical line or lineSystem .color property. If colors is passed but undefined, the object color falls back to the .color property value.

[EDITED]Note3 : if you need to enable the alpha blending (line or segment transparency), just set the parameter "useVertexAlpha" to true at construction time :

[EDITED 2] the alpha blending is now enabled by default. So when you don't need it, just set "useVertexAlpha" to false instead :

var lineSystem = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lines, colors: colors, useVertexAlpha: true}, scene);

var line = BABYLON.MeshBuilder.CreateLines("l", {points: points, colors: colors, useVertexAlpha: true}, scene);


This will allow you to create rulers, axes, graduation systems with multiple colors and to draw them in a single draw call.

As usual, documentation and PG examples coming soon ...

meanwhile : http://jerome.bousquie.fr/BJS/test/linesystem.html

Link to comment
Share on other sites

Very nice, J-man!  THANKS!

If anyone can bend that ruler's base-line into a (semi-) circle (for me) (ahem)... I might have some usages for that... on the faces of some round gauges and meters (car speedometer, etc).

(Only if anyone is bored and wants a little weekend challenge.)

Darn, line thickness would be soooo useful, though.  But, as most know, thickness is not part of "the nature-of" these type of lines.

I wonder... would a "linesThickenerLayer"... be anywhat similar to a highLightLayer?  hmm.  Any post-process thickener... is going to suffer from the same hassles as highLightLayer and similar.  Problems with depth/overlap.

Anyway, thx agn, J... for the cool new features.  Well done!  Thank YOU too, JcPalmer!

Link to comment
Share on other sites

soooooooo cooooooool!  omg!  Jerome... not only are you a fine artist... but just a little crazy, too.  Excellent!

Try some rain, maybe?  ;)  Let's see, what else could be tried?  A pyramid?  umm.  Long/Short needle pine tree? 

I think Nikos123 was looking for tree-growing (gource boy).

He'd probably explode in happiness if ya made a 3D tree-o-lines.

If you REALLY want to get a tumor... use structureInfo for your tree-o-lines... based-upon a tree-walk of the playground's <body> element.  :)  Ouch! 

That might not be very deep, though.  We need some tree structure/json that is 20-50 levels of containers of containers of containers, etc.  Good tree-stuff.

I know I can make an html div, containing divs of divs of divs of divs... with a little JS "motor".  HTML node-vomitter.  :)

Two-stage.  ONE... grow big, fat, deep, tree structure.  TWO... feed THAT to the tree-o-lines maker.  :)  Demented.

Hmm... linesMesh as SPS shapes.  hmm.  :o

Link to comment
Share on other sites


About the ability to add Lines in the SPS as shapes, it's not possible and still won't be (unless dealing with some real high complexity) because the LineMesh has both a different basic geometry than a mesh (a segment instead of a facet, so pair of indices to manage instead of triplets) and uses a different shader to be rendered.

That said, what could be done would be a LPS (Line Particle System) on the same design as the SPS. I know how to do this ... but it's such a work and a big project. Not sure it's worth it to invest time and energy in this as nobody requested such a feature up now.

Link to comment
Share on other sites

Here's a rain shower : http://playground.babylonjs.com/#W9LE0U#12

Wait for seconds until the shower gets continuous. 5000 recycled drops.

It's really naive, everything is randomized. I could have set the drop speed according to its length instead. I could also have set slightly different colors.

Note that the alpha is used between the two drop segment points. More visible with a constant speed and longer drops : http://playground.babylonjs.com/#W9LE0U#13

You can play with the drop number, the drop length and the drop speed. Example : not more drops than before but longer and faster to simulate an intensive shower : http://playground.babylonjs.com/#W9LE0U#14

Have fun ;)


[EDIT] just change the camera position and target to get a budget starfield : http://playground.babylonjs.com/#W9LE0U#15

Link to comment
Share on other sites

hahahaha  OH MY GOODNESS!  PERFECT!!!!  rofl.

FAR better than I imagined it could be.  Excellent!

Of course Mister Wingleberry needs his tooty-frooty colors:)

     new BABYLON.Color4(Math.random()*3,Math.random()*3,Math.random()*3,1),
     new BABYLON.Color4(Math.random()*3,Math.random()*3,Math.random()*3,1)

(Works for ALL these demos).  x3 color hack.  :)

We added .Random() to Color3 class... but... no Color4 version.  No Color4 versions of .Red(), .Blue(), .Green(), etc... either.  hmm.

Anyway, nice job, J-doggy-dog!  Thank you!!!  They're so FAST, too!  Just... amazing.  Well done!

Link to comment
Share on other sites

:)  What the heck... let's get stupid...


First, I'm rockin' the rain angle back and forth... AND... I borrowed DK's cool particle effects demo, and made some drop-circles on the ground.  FUN!!!

The ground particle's 'billboarding' (particles always trying to face camera)... is screwing up the effect, a bit, but, it's a start.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...