Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

LineMesh and LineSystem Per Point Color

jerome

By jerome,
in Announcements

 Share

Recommended Posts

jerome Newbie

jerome

Posted
Posted

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
Wingnut Newbie

Wingnut

Posted
Posted

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
Wingnut Newbie

Wingnut

Posted
Posted

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
jerome Newbie

jerome

Posted
  • Author
Posted

Thanks

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
jerome Newbie

jerome

Posted
  • Author
Posted

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
Wingnut Newbie

Wingnut

Posted
Posted

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

FAR better than I imagined it could be.  Excellent!

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

colors.push([
     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
Wingnut Newbie

Wingnut

Posted
Posted

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

http://playground.babylonjs.com/#W9LE0U#25

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.

Guest
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.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

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