babylon Using Babylon JS, how can I render a 2D circle over the surface of a loaded 3D object?

[Bladetrick]

Hello!

I started with three js and, while its fine, I'm noticing that the community for Babylon is more responsive to new people's questions.  I'm just starting with Babylon JS, so I'm not sure what equivalent methods are.

What I'm trying to do, eventually, is to create a heatmap, based on a series of random points, over the surface of a loaded object.

Here's what I'm trying to do step by step:

1.  load up a model and generate X-number of random points on its geometry.  In THREE JS i used:

function loadPartModel( callback ) {
     var modelloader = new THREE.JSONLoader();
	 partmodel = modelloader.parse(face);

	 var material = new THREE.MeshPhongMaterial({
		        color: 0xFFFFFF,
		        dithering: true,
		        side: THREE.DoubleSide,
		        vertexColors: THREE.FaceColors,
		        overdraw: true
     });
	 partmesh = new THREE.Mesh(partmodel.geometry, material);
	 partmesh.position.set(0, 0, 0);
	 partmesh.receiveShadow = true;
	 partmesh.castShadow = true;
	 partmesh.geometry.dynamic = true;
	 partmesh.scale.set(1, 1, 1);
	 scene.add(partmesh);            
}


function loadDataPoints() {
     var pointlist = THREE.GeometryUtils.randomPointsInGeometry(loadedmodel.geometry, 200);

     pointlist.forEach(function (point) {
         var newpoint = new THREE.Mesh(
         new THREE.CircleGeometry(.1, 16), 
         new THREE.MeshBasicMaterial({ color: 0xff0000 }));
         newpoint.position.set(point.x, point.y, point.z);
         scene.add(newpoint);                
     });
}

Is there a babylon equivalent for the random point generator?

2.  Each generated point becomes the center of a circle (disc, in babylon?).   At render point, the object should look like it has the measles (kind of like the attached GoodCircle.PNG)

. 

 Unfortunately, this is how they end up rendering. Like disks stuck in the object instead of laying over the object(as shown in BadCircles.PNG). 

 

I think my main problem is that I'm actually just drawing and adding circles that have centers based on the random coordinates i generate.  Instead I should be calculating the surface area of a circle over the model and redoing its material at that point?  Anyway, at this step, I'm stuck.

3.  Once I'm able to accomplish this, I believe the next step would be to get something like the attachment, heatmap.PNG.  This was generated by the simpleheat.js library.  The closer the circles are to each other, the 'hotter' the cluster area gets.

I've been looking at several code samples that allow a user to paint a 3D object using their mouse (look at skullpaint). I need to do something similar but instead of using mouse input, using the randomly generated points.

I also found this Playground by Gijs for mangomongo that kind of does what I can do now, but it uses mouse input.  I need my points to be read from a file or data structure.

 

 

[Wingnut]

Hiya Bladetrick, welcome to the forum. 

I'm thinkin... particles.  https://www.babylonjs-playground.com/#MYY6S#12

Disable line 60 and enable line 61... for a "patch" of spherical coordinates-plotted particles.

For those who don't know, our basic particle systems easily allow two custom functions:  A particle start-at function, and a particle update function.  In the above playground, both are in-use.  myStartPositionFunction(), with the help of getCart() and plot1()... does the custom start positions (the globe shape).

myUpdateFunction() is non-standard in a few ways, too.  No particle flight-trajectories are changed... so the particles just sit in the same place.  AND, myUpdateFunction also "sparkles" the particles... changing colors and sizes, randomly.  Stardust twinkle.

I don't know exactly HOW the dithered/soft-edge color delineations of a heat map... can be done using particle colors.  Particles CAN be rather nicely soft-edged... when using particle images with alpha transparency around their edges.

All in all, I thinkTHIS method is worth mention, so Bladetrick can have another potential "trick" in his toolbox.  Another toy.  Another power tool.    Stay tuned, Bladetrick.  Likely more comments inbound. 

[Guest]

Hey and welcome!

Do you want your heat map to be just a texture or do you want it to be in 3D?

If you want it to be a texture, I recommend working with a DynamicTexture, draw on it and just use it on your mesh

If you want it to be in 3D:

1. You can just get position buffer from the mesh and spawn some discs: https://www.babylonjs-playground.com/#788JHK

2. You will need to align them with the surface normal: https://www.babylonjs-playground.com/#788JHK#1

 

Here you are

[Bladetrick]

Ooooh thank you!

For the warm welcomes, the quick responses, and the very exciting looking samples!  Just offhand, I see several ways that took what I was trying to do way further.  I never even considered particles.  pretty cool possibility.  I'll study these and keep checking back, but thanks for getting me unstuck and giving me direction.

Appreciate the assistance!

[jps0611]

@Deltakosh Is it possible to do the same thing but using the particle system instead of discreet meshes? I'm building an experience where I'd like to have the particle system adapt to different object shapes. Comparable to what https://hellopupil.com/ are doing.

Thanks!

[jps0611]

Derp..I'm just now seeing @Wingnut awesome post! 

[jps0611]

Howdy, @Wingnut you may be able to point me in the right direction here. I'm essentially trying to achieve what @Deltakosh is doing above but with particles. I want to do a particle system and have it form the outline of the surface of a mesh. Any playgrounds out there that illustrate this?

Thanks!

[Wingnut]

  Whether using particles or dynamicTexture, the most difficult part... will be "heat zone delineation".  Both systems... will need some 'drawing' system.

I would begin... using dynamicTexture (with transparent background, placed on a sphere slightly larger than the planet). 

DynamicTexture can do exactly what you need, but oh... those soft, round edges (around each heat-zone).  And sometimes, the edges are harder, sometimes softer, depending upon the amount of heat-change per distance.  erf.

Particles allow SOME "randomness" with their emitBox, speed, size, and directional 'ranges', but that might be a dangerous enticement for this project.

Actually, what you need is very precise control over the shapes and edges of the heat zones.  Although they are color-dithered (faded) between zones, they are fairly precise, both x/z positionally, AND Y-altitude-wise.  The Y-data is the heat value and that value determines the color (as you know). 

So, no matter if precisely positioning various particles in various colors, or precisely 'painting' various colors onto a dynamicTexture 2D canvas... the fuzzy-edged wobbly-circle generator... is going to be the bitch. 

But yeah, you can hand-paint them or use grayscale images made by others... such as heightMap grayscale images.

Speaking of heightMaps... https://www.babylonjs-playground.com/#E6OZX#7

That's a weird one, eh? 

Then, if a guy looked in this 'BJS raw-JS' file, and searched for VertexData.CreateGroundFromHeightMap... a guy could find the code for that... and steal it!  YAY!  Put it in the playground, make a few adjustments, and start hacking on it like a mad man.    174 versions later...

https://www.babylonjs-playground.com/#E6OZX#181

Just kidding.  I didn't make all those versions.  I disabled line 25 and added line 26... one simple hack...  don't let the Y-height increase.  And now, look how it is flat.  Look how it has soft edged circles of different textures.  Your version would use colors instead of textures.  Colors based upon a grayscale image, drawn, or stolen.  A 'heightMap' is now a 'heatMap'.

Ok, I'm just going crazy, here.  Grounds aren't spheres... but these are just some things to think about, I suppose. 

https://www.babylonjs-playground.com/#11JINV#36

That's... BabylonJS GUI... (for mesh texture, not full screen) used to map transparent-background textBlocks... onto spheres.  It uses (internal-to-GUI) dynamicTextures on spheres.  (yawn)  You can (programmatically or manually) paint upon any dynamicTexture canvas, including BabylonJS GUI-made ones. 

Now look at this one...  https://www.babylonjs-playground.com/#11JINV#58

Look at lines 162-195... I get the image data from the textADT inside the frame area... and stuff it full of random numbers (wherever .alpha was found to be > 0, so, on the character shapes only.)

Painting... on the canvas... of a dynamicTexture... that could be mapped onto a sphere.  You have the power to paint fuzzy wobbly circles with a JS-powered fuzzyWobblyCircleGenerator. 

Your future looks big, bold, and unhindered, Bladetrick.  You should be able to take over the world in just over 3 months. 

Now, JPS... holy crap... I need to think about that one. 

[Wingnut]

@jps0611,  I can't think of a way to do that.  HighlightLayer or glowLayer won't work? 

There are some things you can do... IF your mesh are boxes or planes... using short particle lifetimes, low emitPower, and careful emitbox/direction settings.

https://www.babylonjs-playground.com/#1NXKLI#13

And then ... somebody once made a particles-from-vertices thing.

https://www.babylonjs-playground.com/#2A4NUR#7

(that whole series is full of fun... all the way up to #46 or so)

It's still not 'outline of particles', per se.  hmm.  I'll keep thinking. 

How about a nice circle-of-particles around your mesh?  https://www.babylonjs-playground.com/#2A4NUR#42

 

[jps0611]

@Wingnut It doesn't necessarily need to be an outline. In layperson terms...I'm trying to take a bunch of dots and project them onto an object. Take for instance a coffee cup. I'd like to take 1,000 or so dots and have them create the shape of that coffee cup. Sort of like Radiohead used in their lidar scan video: 

 

[Wingnut]

Hey JPS... thx for the video.  Nice!  Perhaps we (you) start a new topic?    Then, there, we can do a serious discussion about... "A Particle Dream" (love the wolf shape) and other fun things from  https://experiments.withgoogle.com/chrome?tag=Particles

I dunno how they (other we's) do that stuff, but... with enough begging and buckets of KFC, I think we could coax the author(s) into coughing-up the algorithms... maybe. 

I love this stuff, and forum friend @dbawel also needed this, recently.  (He wanted particles that flow-show the air currents around spinning propeller blades.)

Attractors and repellers (swarmers?) are probably not REALLY on-subject for the BJS framework forum.  It's a good subject, though.  It's a GREAT effect... can't look-away, eh?

https://www.babylonjs-playground.com/#JVH6E#6

That's the nearest particle PG we have... to "A Particle Dream", I think.  It comes from THIS THREAD.  And here is another INTERESTING THREAD.  *shrug*.  Hope I've been helpful. 

"Particle Swarming - Where Are We?" sounds like a nice Q&A thread title... that could include long, grinding discussions, and 'plotting' how to talk authors out-of valuable swarming algorithms/source-code.    Your call.  And, you know, we will probably have to go web-browsing about particle swarming, too.  It is more than just a webGL subject.  It's actually rather "math-ish", eh?  yech! 

[jps0611]

Ha! I'll boot up a new thread when I have some time. Thanks @Wingnut!