Jump to content

How to do this specific 3D Visualization using Babylon?


Recommended Posts

Hello Scotty, 

I'm not aware of any project using this kind of representation, but it is surely possible!
I would use a ribbon to do it : you have plenty of documentation here: 


And even more examples created by the community here: http://doc.babylonjs.com/playground?q=ribbon

God luck !

Link to comment
Share on other sites

I would simply translate the UVs of a planer mesh on a single axis with the data you want to visualize. And for the ground mesh, I would use a dynamic texture to represent the translation of the mesh you are deforming in color based upon the data passed through the deforming mesh above.


Link to comment
Share on other sites

alternative option 




all math function with lowercase use Webgl math struct

noise ( vec3()) for random

'time' if you have animation  : sin(X+time*0.1)

var box = BABYLON.Mesh.CreateBox("a", 50,    scene); 
     var plan  = BABYLON.Mesh.CreateGround("a", 50, 50, 350, scene);
 	 DrawSurface('log(X*Y)*2.+sin(Y*10.)', box, plan);


rotation sample

r_y ( vector , angle , center )


X =>  r_y(vec3(X,0.,Y),angle,vec3(0.)).x

Y => r_y(vec3(X,0.,Y),angle,vec3(0.)).z

Link to comment
Share on other sites

um yeah its kind mathy, but not reeallly high level stuff...  honestly just messing with Math.cos and Math.sin on a x and z coordinate that modifies the y can make some really interesting output.

To get more control you would really need to know your trig, or work with noises and pseudo random numbers.

The shader is a simple angular clamp and elevation GLSL shader, to get that color.

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