Spherical Harmonic Wingnut's Challenge

[jerome]

done, using ribbons

 

http://www.babylonjs-playground.com/#O0ARA#2

 

quite easy, following the implementation example here : http://paulbourke.net/geometry/sphericalh/

 

So my javascript function is :

var harmonic = function(m, lat, long, paths) {  var pi = Math.PI;  var pi2 = Math.PI * 2;  var steplat = pi / lat;  var steplon = pi2 / long;  for (var theta = 0; theta <= pi2; theta += steplon) {    var path = [];    for (var phi = 0; phi <= pi; phi += steplat ) {      var r = 0;      r += Math.pow( Math.sin(m[0]*phi), m[1] );      r += Math.pow( Math.cos(m[2]*phi), m[3] );      r += Math.pow( Math.sin(m[4]*theta), m[5] );      r += Math.pow( Math.cos(m[6]*theta), m[7] );      var p = new BABYLON.Vector3( r * Math.sin(phi) * Math.cos(theta), r * Math.cos(phi), r * Math.sin(phi) * Math.sin(theta) );      path.push(p);    }  paths.push(path);  }};

 and the main code, quite short :

var paths = [];var m = [11, 10, 5, 8, 13, 5, 1, 13];  //  specific shape harmonic parameters : seven integers >= 0harmonic(m, 64, 64, paths);var mesh = new BABYLON.Mesh("mesh", scene);mesh.material = mat;createRibbon(mesh, paths, false, null, scene);

you can change array m values at line 138 if you want to change the shape : http://www.babylonjs-playground.com/#O0ARA#3

[GameMonetize]

Now definitely someone has to do a PR with these objects!

[jerome]

it's not ready yet

needs still some optimizations 

very soon 

[Wingnut]

Friggin' way cool!  Yay!  Well done!  Thanks, Jerome!

[jerome]

de nada

my pleasure

[Wingnut]

I started doing some experiments with it... and its fun and easy.  Drool keeps running out of my mouth.  Too fun!  Gorgeous mesh!

 

One weird thing I noticed. 

 

http://www.babylonjs-playground.com/#O0ARA#4

 

I set line 140... harmonic(m, 16, 16, paths);   ...and the mesh didn't finish closing.  8, 8 works and so does 24, 24 and 32, 32.

 

Can you take a look when you get a moment, Jerome?  Thanks!

[jerome]

ok, found it

http://www.babylonjs-playground.com/#O0ARA#5

 

mmh... I just added line 130 =>  I push a very last path in the paths array : the first path.

You know, createRibbon() just create a surface between two paths. So I just have to close the array saying : the last path to join is the first one

 

that's it

[jerome]

I count on you to set the tutty frutty colors ! :lol: :lol:

[Wingnut]

Gladly!  You are just the best, Jerome!  I think I have nearly worn out the "like this" button on the forum... by pressing it so many times on your posts/demos.  Fantastic stuff.  I can't hardly wait to turn on a reflection texture/shader and see how these shapes reflect. 

Here's an early one.  ShadersStore-based shader with a big fat image of fractals as a sampler map.  (all stolen)

http://playground.babylonjs.com/#1I0RKU

Zoom-in real close to various areas.  Friggin' gorgeous!  Droooooool!

YAY, WE GOT S.H.!!!   (Wingy dances around like an idiot, pausing only to re-shake Jerome's hand yet again.)

[jerome]

you're welcome

thaaannnnkk you so much for all your advices, encouragements, and so smart and funny posts (I wish I can speak a better english to post as you)

 

your demo is really beautiful

 

I really need to learn about all this UV stuff and add it to ribbons

[GameMonetize]

HUGE!!!

[RaananW]

this is so amazingly cool...

[marvin]

Hi everybody, I am new here. 

 

I was looking for a way to make a browser rendering of spherical armonics and google brought me here.

 

I didn't know about Babylon.js before, and I have to say it is amazing so far!

And jerome, i think you did a great job ont that code!

 

By the way, I was asking to myself: would be possible to animate the thing? I mean, would it be possible to make the waves oscillate in time?

Something like this:  https://www.youtube.com/watch?v=6lz1Y94WEtk

 

Ciao,

Marvin

[Wingnut]

Hi Marvin, welcome to the forum!

   Yeah, I think Jerome (and others) is working-on three kinds of oscillating... textures, colors, and vertex positions (shape).  But he's doing it for his tube creations, and not really for spherical harmonics.  This is very new for BJS, so we are sure to see numerous modifications and adjustments to Jerome's many cool meshes, including animations.  It's sure to happen, eventually.  Jerome is a genius. 

Folks, today, I finally got back to playing with basic SH. (fun!)  I applied some simple UV's (line 68 area) and some purple procedural fire (thanks Meulta!), and it's worth a look and worth grabbing a zip for home fun.

http://playground.babylonjs.com/#QMJ3

Zoom on in.    Some folks might need to adjust the mouseWheel speed in line 98 (and hit run again).  I have a fast mouseWheel, so I slow it a bit for nice zooming.  Also, adjust the eight 'm' numbers in line 135 (and press RUN) for different SH shapes.

Nothing innovative happening here on my part.  I'm just using other people's cool things... in various combinations.  No shaders this time.  No static textures.  Just diffuseColor of green and diffuseTexture of purple fire.  I tried some scaling of Jerome's SH mesh, too, and it worked great.  Beautiful and easy.

Jerome is endeavoring to learn about wrangling typescript, lately, and Deltakosh is nudging him in the approved directions.  I think paths, ribbons, tubes, and spherical harmonics... have a GREAT LOOKING future in Babylon.js!  Best of luck to everyone who is helping-with and working-on integration of these new toys.

 

Party on!

[jerome]

Hi you guys

 

@ Marvin : thank you, ... but I just ribonnized (applied a surface to) a series of points in space, computed with an equation given by Wingy.

 

@ Wingy : ttt, ttt, I'm no genius. Or tell it to my boss.

 

Your SH demo is really amazing ! :)

 

You'll probably call me ribbon maniac again but SH and tubeMesh are both just ribbonMesh different applications (didn't I tell  you this stuff was quite versatile ?).

 

I almost fixed the UV mapping in the ribbonMesh as I expect (it works but not as I want for closed ribbons), so Wingy you'll be able to texture your SH the classical way with no fragment shader soon.

Once it is OK, I do my big jump into TS world (although I started a little before, just to get used ) and try my first PR (gasp ).

 

As you said, I have already ideas to give the developer access to ribbon elements so he would deform/set them (colors, positions, textures) dynamically without using shaders neither knowing submesh entry points. Wait and see.

 

Concerning the tubeMesh... well, as it is just a ribbon application, maybe will I transform it instead in a tubeGeometry to be then just ribbonized if we need the mesh, else to be used for other purposes : to give a path to animate sprites along, etc.

Don't really know yet...

Let me know what you, readers, would prefer to get : a genuine tubeMesh or a ribbonizable tubeGeometry ?

[Wingnut]

I vote for both, of course. 

 

Your toolkit of mesh-stuff is really just that.  It's not a mesh.  It's a system of making meshes... via interchangeable functions.

 

Maybe, your 'toolkit' doesn't belong with BABYLON basic shapes.  Since the pieces are so versatile for many uses... maybe you need your own Tools area or other namespace.  Instead of making Babylon.Mesh.Createblahblah functions (which crushes the versatility of each piece)... you make a library of pieces and parts.  Then give many examples of how to USE those pieces to make nearly-unlimited mesh types.

 

In other words, you make very few 'create' functions that result in a shape.

 

Instead, you (could) introduce the BABYLON.Jmesh library and namespace.  Just a pile of user-callable little pieces and parts... functions... each very versatile and mix'n'match-able.  In the library's docs... you show folks how to use them to do cool stuff.

 

Maybe?  It is a bit hard to categorize your type of meshes.  I think they are different enough from basic shapes... to warrant a library of its own.  Jmesh library.  It travels with BJS... but it's YOUR section of BJS, Jerome.  Its YOUR namespace, and you will be in-charge of Jmesh source and docs.... forever.  Thoughts?

 

Meantime, here is another spherical harmonic demo.  Similar to the previous, but lots of random things happening.  Random shape, random firecolors, random diffuseColor... insane!  Zoom in! 

 

Just keep pressing the RUN button until you run out of drool.  SO much fun!!!

[jerome]

Waaaaoowww.. your random SH is wonderful :) !!!

I can't stop gazing at them and drooling, just wondering if a click more is worth it : will the next SH be better than the current one ? (hard questions in life, aren't they ? )

Maybe could you add some timer so the next random HS will spawn every 30" ? (and so I won't wonder )

 

Nice idea about your side library.

I probably will PR (if I succeed) only the createRibbon which is a really basic shape, far more basic actually than the sphere, the cube the torus, etc.

As it is versatile and parametric, it can be used to generate many other complex shapes (including spheres, cubes, torus, etc ).All these potential shapes can't be added in BJS as you said.

So a side lib just embedding the geometries to be applied to the ribbon, or other BJS basic shapes, would be cool.

I agree

[Wingnut]

Cool!

 

By the way, just because I thought-about and spoke-about this Jmesh library, does not mean I offered it.  I don't have the credentials or experience for that.  I don't know if it is wise, and I don't know if it is wanted by BJS admin.  It was just an idea. 

 

It is within the "Mesh" domain because it uses a blank Mesh with vertexData applied.  I don't know if that is pertinent.  It's all speculation on my part. 

[jerome]

I know it's just an idea.

 

I agree with you about the fact to keep the Mesh basic shape creation methods as light as possible.

And put all the derivated stuff somewhere else... 

Where is this somewhere else (or how is it called) may be for now not a really important question ... as it not even exists 

 

Ribbons are ultra basic, as they are only a series of triangles between two (or more) paths. Far more basic than a cube, a sphere... not even speaking about torus knots 

DK invited me to put them in the Mesh.VertexData module (iiihhaaaa, soon big dive into TS dark waters).

 

Everything useful or valuable constructed with ribbons (tube, etc) will go in this famous somewhere else (as the Truth  ).

[jerome]

Wingy,

 

If you accept, I will probably copy your random SH on some web page of my university webserver (may I'll add a timer to trigger the next SH). It's really beautiful and hypnotic.

Would you mind please ?

[iiceman]

Yeah, it's really cool, well done, both of you! I was wondering, could you make the mesh morph? Like not just triggering the next one but add some kind of animation to transform one SH into the next one? I mean the shape as well as the texture?

[marvin]

Wow! that is incredible Wingnut!

You did a wonderful job, it really is hypnotic.

[Wingnut]

Thanks for the nice words, guys, and feel free to copy and use any Wingnut stuff, always.  You guys know that I didn't write anything major.  I just assembled a scene from fantastic pieces from Deltakosh, Davrous, Meulta, Jerome, and those guys and gals who invented SH.  I just put a bunch of magic toys in a bowl, and stirred.    The only thing I contributed... was excitement and drool.

 

@iiceman... animating vertex "positions" is quite a challenge... but lots of us WANT it... so things might be done.  And deciding HOW to animate them, and then HOW to give the user a friendly command to control that animation per their desires... SUPER difficult. 

 

One way to see a morphing NOW... is to redraw the entire mesh once per frame (in the animation loop).  It's a gruesome and inefficient way to animate, but it works, and it lets you see a morphing.  Adjust the "m" numbers between each mesh render... likely by putting a Math.sin or Math.cos on one (or more) of the 8 values in the "m" array.  You might want to turn-off the random fire colors and random material colors... so you don't get a seizure while watching your morph, and to gain-back some lost FPS (due to inefficient animation method).  Make us a demo, iceman!  Animate an 'm' number 0-10-0 with a cosine. 

 

@Jerome... you can have my code, and my newborns, and my mother, and my guitars, and my car, and my house... and ANYTHING ELSE you desire.    The only problem with putting this on a timer... is that you can't stop and zoom-in explore the best meshes. A cool mesh might require 2-3 minutes of zooms and pans.... to view all of its coolness.    So you might need "hold" and "continue" buttons.  And it might be wise to print the "m" numbers to the screen, too.  This way, if you see a really fine mesh, you can push the hold button, and write down the "m" numbers for later use on other projects.

 

I heard a rumor that Deltakosh and Microsoft are building us a virtual reality environment (server) that we will each have a username-within, and a large chunk of byte quota to build a VR homestead (using one or many Babylon scenes)... and it has chat.... and avatars, and you can program in JS on the server!  WOW!

 

Ok, that's a bold-faced LIE!    But, if we ever DID build ourselves Babylon Bay virtual reality world, I think there would be a section along the beach called Meshville... a giant museum area of incrementally loaded/derived mesh... which can be toured while riding around in a cool golf cart!    It's a magic land indeed.  (yeeeeeah)

 

@Marvin, thanks for the nice words.  I agree.  SH is really nice (thanks again Jerome and fellow ribbonators).  It (and Babylon.js) do all the work of looking nice.  I just watch and drool like the rest of us.  I'm glad we have SH working.  It's sweet.

[jerome]

Wingy,

 

I'm trying to port your SH with the last ribbon implementation which has a dedicated texture implementation. They look quite different than yours in the playground, although they are nice too.

The texture is now stretched between curve points, so it is more continuous.

 

Almost done with morphing (works well without, so nice ), still a little bug in the chain  , the shapes won't finish at the right step : http://logiciels.iut-rodez.fr/proto/weathermap/test2/SH.html

 

[EDIT] I guess I understood the morph bug : m should be integers and I pass them as floats. I'll fix it soon [/EDIT]

[Wingnut]

Yeah, the way the fire is mapped in your demo... is excellent!  Yum!  droooooool.  But it leaves us with a dark area, probably due to the dark area at the top of a fire texture.  I should get off my lazy butt and make a new procedural texture called "vapors"... similar to fire but no dark areas.  (after a 2-year advanced shader learning curve)

 

Maybe I can farm it out to Meulta, God of procedural textures.