Another candidate for the featured PG in the docs. Where will it end? I think the greased lines page in doc has already more examples than any other feature Is there anything you cannot do with greasedLines?
Actually this will go to a new page called Advanced examples.
I faced a lot of imperfections of GreasedLine already but I donāt like to talk about them
Iām trying to find solutions but first of all Iād like to add animation support for offsets, widths and colors and add a SimpleGreasedLine material. The animation support means simply adding offsets to offsets, widths and colors table so you can provide a bigger table as needed and you can move/animate trough it specifiying an offset. SimpleGreased material will be based on ShaderMaterial (no lighting, no base material) and will be very fast.
Thatās sound yummy
I had to drop these ideas because offset and widths animation is not possible technicaly in the vertex shader but can be achieved by modifyin the underlying vertex buffers. There will be examples for this. Animation of colors can be achieved by modifying the color texture offset so there is no need to add an extra shader attribute for this. Iāll create an example for this as well. The SimpleGreasedLine material is the only candidate for an update and it makes sense to have an ultra fast material just for drawing plain colored lines especially in digital twin projects where I use the GreasedLine to draw electrical wires, water, plubmbing in the buildingsā¦
I am working on the examples in my spare time and there is stuff worth to wait for
Amazing beauty!
This is so cool!
Lightning bolts v1.0:
The recursive algorithm for creating the lighting branches was in my code library for years already so I canāt remember who is the authorā¦ Sorryā¦
Man, this is real COOL. Iām sure many people will want to see that.
Thanks, this one with the others were created for the advanced doc examples.
So pretty !!!
HIi everyone! New examples are available:
@mawa
Now itās ready to publish Can you please add to the text that it was created by roland@babylonjs.xyz (not a team member e-mail address). It will help to raise my reputation and make it easier to find another jobs in the future for sure.
Thank you!
Great to hear that . Let me āpolishā the content a little and update the featured examples, now that they have extended. BtW, any suggestion for the best/most diverse examples to feature?
I will do a rev version shortly and let me come back to you before I publish so we can fine-tune this togetherā¦ Meanwhile, have a great WE
Hmm, nope They all look trivial to me after spending so many time playing around with
GreasedLine
. Maybe the circular audio analyzer is the one. Itās just one circular line with dashing enabled and widths set to the audio analyzers output.
Anyway, Iām going to release the non camera facing version today. As you already know itās based on the ribbon mesh and this opens a lot new possibilites.
Yes, I like the audio analyzer because of wellā¦ the audio. Audio has up to 15 times more impact than visual. Reason why I selected this. Are you saying the copyrighting/rights issue of the soundtrack is now fixed and we are good to feature this?
I hope so. What worst can happen?
EDIT:
Maybe itās a good idea to ask the team.
@Deltakosh @RaananW @sebavan @Evgeni_Popov ā¦ donāt know who elseā¦
Guys, we have this PG which features a music by Alan Walker. Is it ok to use it in our official PG example?
Iāll PM you something in a minute. Hope you donāt mind. Iāve being going somewhat ādeleriousā this afternoon with this audio analyzer thingy. Did some design thinking around it (I admit under influence of a couple beers
) Iād like to have your opinion on it, see if this is something I should work out with a clear mind?
Cheers,
Non camera facing GreasedLine - DRAFT, so things can and probably will change:
https://playground.babylonjs.com/?snapshot=refs/pull/14184/merge
If you want to use a non camera facing line you have to use the ribbonOptions
property.
There are two modes available to define the coordinates:
BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS
You just define a line with the points and with thedirection
(itāll be renamed toslope
) you define the slope of the line thickness. Basically it thickens the line in the direction ofslope
bywidth/2
and to-slope
bywidth/2
.BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_PATHS
You have to define two paths with the same number of points. The right side of the line and the left side of the line. Thus you can define theslope
and thewidth
using these paths.
You can define more than two paths to create non-flat lines. In this mode you canāt use thewidths
property for altering the segment widths.
In both cases you need to set the cameraFacing
material property to false
. Defaults to true
.
It uses CreateRibbonVertexData
under the hood.
If you donāt need a double-sided mesh, set that option to false
. Defaults to true.
const mesh = BABYLON.CreateGreasedLine("line-widths", {
points,
ribbonOptions: {
pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS,
direction: new BABYLON.Vector3(0, 0, 1),
width: 0.1,
doubleSided: true
},
}, {
cameraFacing: false,
})
All the features of the GreasedLine will be supported. You can check the current implementation status here:
More PGs:
Has an UV(?) issue?
Has an width
issue: EDIT: fixed
PATHS mode, two paths - two edges of the line
PATH mode with 4, paths creating a non flat line (actually itās not a line anymore) with dashing:
If you have any comments, please let me know, Iāll gladly and thankfuly use your ideas/improvements!
Hey everyone!
I donāt want to spoil anything here but @mawa is pushing the circular audio analyzer (https://playground.babylonjs.com/#H1LRZ3#232) to an insanely cool level!!
You sure know how to commit people to your project, donāt ya? I will try my best - Iām not sure āinsanely coolā will really apply here
Weāll see how it goesā¦ Meanwhile, have a great sunday