How to make a color/light effect on a plane

[elkyu]

Hey,

I have a plane with a multitude of points which compose it, that constitute triangles.

 

I created an animation on this which made it move on the y axis.

 

But, my plane is uniform color so nothing is visible.

 

I would like to create an effect on my face like that (with light ? ):

 

http://playground.babylonjs.com/#CG2MJ#8

 

But on this example, it's a "ground" with a heightmap apply on.

 

I don't know if it's possible to apply a heightmap on the plane and combine it with a points animation.

 

I would like to create this effect but with a plane, not a ground

 

Thanks

[jahow]

Hey,

 

Do you want to actually modify your mesh (i.e. add bumps) in order for the light to reflect on it, or do you simply want to modify the color of your mesh's faces?

 

Also, what do you mean by "points animation"?

 

Thanks

 

PS: the best and quickest way to have your problem solved is reproducing it in a playground example, then it's much clearer for everyone and then someone can write the solution directly in your code!

[RaananW]

My first question would be - why not simply do it with a plane instead of a ground mesh? those two functions (flat shading and displacement maps) are both available to all meshes.

 

I guess there is something I am missing?

[elkyu]

My first question would be - why not simply do it with a plane instead of a ground mesh? those two functions (flat shading and displacement maps) are both available to all meshes.

 

I guess there is something I am missing?

I try to do the same with a plane but it's not working, I have a warning :

 

"BJS - Cannot call applyDisplacementMap: Given mesh is not complete. Position, Normal or UV are missing"

 

My plane is a Blender import, I think it's because the mesh is not updatable

[RaananW]

Well, the error message actually tells you exactly what's wrong - Something is missing.

My guess would be the UV coordinates. Positions are surely there. Normals can be easily calculated. UV should come from blender. Check that everything is there!

[elkyu]

How to put a file in the Babylon playground ? (for a blender import)

[RaananW]

You will have to enable CORS on your server and serve it from there. Or just simply attach it here and someone will be able to quickly tell you that the UVs or Normals are missing

You could do this as well - look inside your babylon file and make sure all properties are there. I am sadly not a blender expert (gryff, I started with the tutorials! :-) ) but I guess somewhere there you can make sure as well that everything is being exported correctly.

[elkyu]

I think UVs is missing, not normals

 

I can't upload the file I have an error "You aren't permitted to upload this kind of file"

 

So, I copy the content of the .babylon file :

{"autoClear":true,"clearColor":[0,0,0],"ambientColor":[0,0,0],"gravity":[0,-9.81,0],"materials":[],"multiMaterials":[],"skeletons":[],"meshes":[{"name":"Plane","id":"Plane","billboardMode":0,"position":[0,0,0],"rotation":[0,0,0],"scaling":[1,1,1],"isVisible":true,"isEnabled":true,"useFlatShading":false,"checkCollisions":false,"receiveShadows":false,"positions":[0.8603,0,0.8436,1,0,0.75,1,0,1,-0.0401,0,0.8269,0,0,1,-0.25,0,1,-0.25,0,-0.25,0,0,-0.25,-0.0702,0,-0.1036,0.6698,0,-0.2934,1,0,-0.25,1,0,0,0.3603,0,-0.1564,0.5,0,-0.25,0.5969,0,0.0835,0.4031,0,-0.6832,0.5,0,-0.5,0.3068,0,-0.5568,1,0,-0.75,1,0,-0.5,0.6598,0,-0.6905,-0.613,0,-0.1865,-0.5468,0,-0.3636,-0.5,0,0,-0.6531,0,-0.6665,-0.6103,0,-0.8402,-0.5,0,-0.5,-0.1003,0,-0.6731,-0.0501,0,-0.4198,-0.25,0,-0.5,-0.5,0,0.75,-0.5,0,1,-0.75,0,1,-0.4165,0,0.3035,-0.5501,0,0.5802,-0.75,0,0.5,-0.1404,0,0.1798,0,0,0.5,-0.25,0,0.5,0.4031,0,0.8168,0.5,0,1,0.25,0,1,0.5,0,0.25,0.5,0,0.5,0.2934,0,0.4131,0.8736,0,0.3904,1,0,0.25,1,0,0.5,0.6497,0,0.5769,0.75,0,0.0936,0.1531,0,0.3168,0.25,0,0,0.25,0,0.75,-0.3703,0,0.3035,-0.2066,0,-0.0869,-1,0,0.25,-0.8202,0,0.1464,-1,0,0,-0.75,0,0.0936,-1,0,0.75,-0.6932,0,0.6932,-0.2901,0,-0.6731,-0.5,0,-1,-0.25,0,-1,0,0,-1,-1,0,-0.75,-0.8603,0,-0.5902,-0.75,0,-1,-1,0,-0.25,0.75,0,-0.887,0.5,0,-1,0.75,0,-1,1,0,-1,0.1999,0,-0.7934,0.25,0,-1,-0.1932,0,0.6932,0.75,0,1,-1,0,0.5,-1,0,1,-1,0,-0.5,-1,0,-1],"normals":[0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0],"indices":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,42,45,48,49,45,42,49,11,46,50,44,37,51,50,36,51,14,42,3,52,41,37,44,52,43,39,52,33,53,38,23,54,53,54,8,36,55,56,35,57,58,56,58,23,33,59,60,32,35,60,59,34,30,60,61,29,26,62,63,61,63,64,27,65,24,66,67,24,65,67,62,25,21,58,57,66,21,68,66,26,22,15,69,20,70,71,69,72,18,69,27,73,17,64,74,73,74,70,15,7,12,51,17,12,7,17,16,13,9,49,14,16,20,9,19,10,9,6,54,23,29,6,22,28,7,6,30,75,5,38,75,30,37,3,75,39,0,76,48,0,39,48,47,1,76,0,2,75,3,5,54,6,8,49,9,11,51,12,14,73,15,17,69,18,20,58,21,23,66,24,26,61,27,29,60,30,32,56,33,35,53,36,38,52,39,41,50,42,44,48,45,47,43,42,48,14,49,42,45,49,46,36,50,37,8,51,36,50,51,42,4,3,41,3,37,52,44,43,52,34,33,38,33,23,53,53,54,36,77,55,35,55,57,56,56,58,33,78,59,32,77,35,59,35,34,60,25,61,26,25,62,61,61,63,27,79,65,66,80,67,65,24,67,25,68,21,57,79,66,68,21,66,22,16,15,20,15,70,69,71,72,69,28,27,17,27,64,73,73,74,15,8,7,51,28,17,7,12,17,13,13,9,14,13,16,9,20,19,9,22,6,23,26,29,22,29,28,6,31,30,5,34,38,30,38,37,75,40,39,76,43,48,39,0,48,1],"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":81,"indexStart":0,"indexCount":384}],"instances":[]}],"cameras":[],"lights":[],"shadowGenerators":[]}

[RaananW]

Look, you have the answer right in front of you.

As I assumed before - you are missing the UV coordinates. Look at the Babylon file - do you see positions? do you see normals? do you see uv? There, you have your answer... How to solve it? In Blender...

[elkyu]

Yes I saw that there was no UV map, I just put the code for you to see the file, if that helps ..

 

So, I'll see with blender if I can add the uv map (I know nothing about Blender)

[RaananW]

I wonder - does the mesh have a texture in blender? I guess adding a texture to it would for it to have uv coordinates. 

I also wonder (out loud) why the uvs are required at all. They don't seem obligatory... Technically, when no uv is found, 0 is used - https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.mesh.ts#L1029 . Anyone?

[gryff]

I'll see with blender if I can add the uv map (I know nothing about Blender)

 

1. Start a new Blender File.

2. Add a plane to the scene

3. Add a material to the plane

4. Now, in EDIT mode select all the vertices (toggle the A key until vertices are highlighted)

5 Go into TOP view

5. With all the vertices selected Mesh -> UV Unwrap -> Project From View (Bounds)

 

Now export as usual., the babylon  file will have UV co-ordinates.

 

cheers, gryff

[elkyu]

Thanks !

I'll try that as soon as I can.
I will keep you informed

[elkyu]

It's working.

I have the UV array on my babylon file and I can apply the heightmap on my plane ! 

But ! Like I said, I want to do an animation of all my points (vertices) on the y axis.

And, Because of convertToFlatShadedMesh() when I move a point it separates from the others. Like this : 

http://playground.babylonjs.com/#CG2MJ#11

But, I want all the faces stay together and it does not do a hole

It's possible ? If not, there is an other way to do the same without convertToFlatShadedMesh() (or without heightmap )?

[GameMonetize]

THis is possible. you just have to keep a list of vertices that share the same position and then when you want to move a specific vertex you also move all the "attached" vertices that share the same location

[jahow]

Well, since you converted your mesh to flat shaded, all the polygons have been separated from one another, so each point in your grid is actually composed of six different vertices, each belonging to a different polygon.

I managed to get it working in your PG, but this is very hacky (I did it completely based on trial & error)... http://playground.babylonjs.com/#CG2MJ#13

Also you'll need to check for grid borders, otherwise you'll end up with an out of bound index.

So yeah, modifying a flat shaded ground mesh is... painful

[Wingnut]

Nice job, Jahow.  It holds-up with backfacecull false and wireframe true, too.  Sweet!

I was going to go flat-shade the heightmap in http://playground.babylonjs.com/?14 (the heightmap demo) but he looks sick.  Looks like his light is pale... I thought I better let him sleep it off.  :/

[elkyu]

On 7/3/2015 at 11:25 AM, jahow said:

Well, since you converted your mesh to flat shaded, all the polygons have been separated from one another, so each point in your grid is actually composed of six different vertices, each belonging to a different polygon.

I managed to get it working in your PG, but this is very hacky (I did it completely based on trial & error)... http://playground.babylonjs.com/#CG2MJ#13

Also you'll need to check for grid borders, otherwise you'll end up with an out of bound index.

So yeah, modifying a flat shaded ground mesh is... painful

Hi !

Ok, If I have a vertices , I can find the other vertices with its value.

But Yes it's very ... painful ..

I'm not closed with this solution, If someone have a solution which can do the same effect without convert my mesh to flat shaded i'm listening ...

[jerome]

@elkyu : did I tell you that updatable ribbons were done for this ?

Yes, I did.

elkyu, please re-read the mail I wrote for you and re-read the related linked docs. Everything, including PG examples, is documented.

[iiceman]

Show us all the playground that belongs to the screenshot I say!

[jahow]

@elkyu : did I tell you that updatable ribbons were done for this ?

Yes, I did.

elkyu, please re-read the mail I wrote for you and re-read the related linked docs. Everything, including PG examples, is documented.

 

But... but... This is not flat shaded!! *hopes shattered*

[jerome]

hi,

 

here's a lead : http://www.babylonjs-playground.com/#AGDUB

I just build a ribbon 30 paths of 30 vectors each : line 15

Say, it is your plane you want to animate.

Note that this ribbon is updatable (parameter updatable set to true)

 

Now, line 34, I define a function to update the y coordinate of each vector.

You could have done your own here instead of mine : a sinus or cosinus according to the (i  - j)  modulus 3.

Feel free to change the way the vertices evolve ex : i * j, % 2, or cos(k + 0.1) or anything else fitting better your needs

 

That's all.

Now, I just call this function in the render loop and I call also the CreateRibbon() function, passing to it as last parameter the ribbon instance reference :

http://www.babylonjs-playground.com/#AGDUB#1

 

Now, if you've got the right material and the right light orientation, each face should enlight the wanted way.

 

This is just a lead to easily morph a mesh.

 

 

[EDIT] : it's better with scale.z instead of scale.y : http://www.babylonjs-playground.com/#AGDUB#4

[jerome]

funny waves : http://www.babylonjs-playground.com/#AGDUB#5

 

I just changed the offset computation

[elkyu]

Question, if I just have to find the right equipment/tool and the right light orientation, then I can keep my plane instead of the ribbon, no ?

 

If I don't convert in flat shaded, I don't have any problem for the animation .. 

[jahow]

Hey Elkyu, what about that: http://playground.babylonjs.com/#CG2MJ#14

The vertices altitude (y component) is updated based on the x and z values, so as long as you use a mesh oriented the same way, any mesh should work.

For some mysterious reason, the PG does not work (faces tear apart) one time out of two. Please reload if it happens. I think there's a bug that needs some love here... EDIT: this is just a matter of float precision, no BJS bug here.