Jump to content

How to make a color/light effect on a plane


elkyu
 Share

Recommended Posts

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 ? ):
 
 
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
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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":[]}
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :D

Link to comment
Share on other sites

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 :D

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

Link to comment
Share on other sites

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

post-5453-0-74041900-1436172283.png

Link to comment
Share on other sites

@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*

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

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.

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

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...