How to do this specific 3D Visualization using Babylon?

[Scotty]

Hi,

I trying to evaluate the possibilities of using Babylon to render a surface like the one attached in this post. Has anyone already done this kind of visualization using Babylon before? 

--Scotty

[Temechon]

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: 

http://doc.babylonjs.com/tutorials/Parametric_Shapes
http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#ribbon
http://doc.babylonjs.com/tutorials/Ribbon_Tutorial

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

God luck !

[jerome]

the Ribbon is your friend for this kind of goal

[dbawel]

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.

DB

[NasimiAsl]

alternative option 

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

http://www.babylonjs-playground.com/#MBIEI#11

f(X,Y)

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);
		  
		  

http://www.babylonjs-playground.com/#MBIEI#20

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

[NasimiAsl]

http://www.babylonjs-playground.com/#MBIEI#27

 

[adam]

@Pryme8 didn't you do something like this?

 

[Pryme8]

Search for TERIABLE and das noise

[V!nc3r]

Sometimes i would like to be good at maths to do somes funny things like this

[NasimiAsl]

All about vector not too math

 

[Pryme8]

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.