Rolento

Apply Height Map To Shape?

22 posts in this topic

Hi All

Im pretty sure this cant be done but I will ask anyway.  Is it possible to apply a height map to a shape (mesh model).  For example:

http://www.babylonjs-playground.com/#RF9W9#398

The above PG provides a simple 3D mesh model with a ground texture applied.  Is it possible to apply a height map to the 3D mesh model for added realism?

If this is possible I can see lots of applications whereby 3D objects could have height maps applied that enable them to be more representative of the real world (e.g. in the above PG example a height map with small undulations would make the gound appear much more realistic - i.e. better than using a bump map).

I can envisage that the potential drawback is that if all objects in a 3D game scene used this technique there would be significantly more facets to process, that said the game designer would just need to be more restrictive over what objects have the height map applied.

Anyway, put me out of my misery - does this feature exist!? :)

Share this post


Link to post
Share on other sites

Hi Deltakosh

Wow, it has been done - I did not know the term "Displacement Map" - Perfect! (BabylonJS - continues to surprise me!) :)

I have some questions if you would'nt mind answering:

1) How do you tile a displacement map - e.g. how would I apply a displacement map (e.g. textures/grassn.png) to my geometry: http://www.babylonjs-playground.com/#RF9W9#398 ?  i.e. I dont want the displacement map to be streteched

2) Can I use a standard normal/bump map image for the displacement map? (i.e. are these image files the same format - I think yes?)

Thanks

Share this post


Link to post
Share on other sites

Hi Deltakosh

I thought I would play with parallax bump mapping first, but I have encountered a strange problem:

http://www.babylonjs-playground.com/#RF9W9#406

If you look at the above PG you can see that the brick texture for some reaosn is applied to the shape at an angle, but it should be horizontally aligned - right?  Could you possibly explain what I am doing wrong?  My guess is that it is something to do with the way in which the texture is wrapped around the mesh model - but I have no idea how to resolve the issue...

Any ideas?

Share this post


Link to post
Share on other sites

@Rolento I didn't forget about the other issue you have, I'll definitely take a look, I hope tomorrow. 

Considering this one, are you sure the Vertices Normals are all good? Because we I see this result, I have doubts.

Share this post


Link to post
Share on other sites

Ni Nockawa

Thanks again for looking into my problem.  I have done some experimenting and there is something I am potentially doing wrong / hence not understanding.  I have created a simple square shape and extruded it:

http://www.babylonjs-playground.com/#RF9W9#408

* see lines 83 ~ 88

If you look at the completed rendition you can see that the applied texture is at a slight slant (meaning the issue I reported in my original post is present).  If however I change the geometry such that I dont close shape face then I "thouhgt" everything is ok - but on closer inspection you can see that there is a sight misalignment of the texture (see below):

http://www.babylonjs-playground.com/#RF9W9#407

* see line 88 (commented out)

Any idea as to what is happening here?

Thanks

 

Share this post


Link to post
Share on other sites

> @Rolento I didn't forget about the other issue you have, I'll definitely take a look, I hope tomorrow. 

BTW - I know you are no doubt ultra busy - so any help you provide (whenever that might be) is always appreciated!

Share this post


Link to post
Share on other sites

I was going to call Jerome to the rescue but looks like he's faster than me! :)

Yes, I'm definitely busy, specially on the Canvas2D side, and I have bunch of bugs/requests that came at the same time as yours, it was so quiet before and I'm suddenly dealing with many things.

It would be nice to have a debug tools that displays the normal, tangent and co tangent of vertices.

@jerome there's no such thing I guess? Maybe one could do it using the LinesMesh class, don't you think?

Share this post


Link to post
Share on other sites

Great!!! @Rolento can you use the ShowNormals js code to display the normal of your shape (and possibly the tangent and co-tangent), we'll know for sure if the issue comes for here or not.

Thanks

Share this post


Link to post
Share on other sites

showPath3D shows everything : the normal, the tangent and the binormal at once

Share this post


Link to post
Share on other sites

Hi Guys

I have added the showPath3D() function to try and shed some light on the situation:

http://www.babylonjs-playground.com/#RF9W9#410

I experimented with CAP on / off and it definetely has an affect on the alignment of the textures.  Looking at the path 3D  tangent, normal and bi-normal it looks ok to me (am I missing something?).  

Share this post


Link to post
Share on other sites

The Parallax is ok if you disable useParallaxOcclusion. I'll definitely take a look tomorrow, it's my top priority now, but I won't be able to look for too long, I hope I can solve all your issue at once, which is this one and the mirror rendering.

Don't investigate further, you've done enough already, thank you!

Share this post


Link to post
Share on other sites

Hi Guys

It might be worth you looking at the original issue I posted in the below PG (as it shows the issue more clearly):

http://www.babylonjs-playground.com/#RF9W9#406

* see lines; 88, 104, 105

From what I can see this is a problem linked to adding a CAP to the extrusion as Jerome reported...  Fingers crossed it is easy to fix...

Share this post


Link to post
Share on other sites

ok, I had a look at this and I think I found the problem :

The extrusion is only a ribbon applied to a geometry, and this geometry is just the model shape replicated (a rotated, if needed) along an axis path.

Remember that, for now, the uvs are automatically computed for the ribbon to be stretched on its whole geometry.

If there's no starting cap, the geometry is only composed with all the shapes duplicated, so the unwrapped width and length keep the same.

If we add a starting cap, this cap being just two extra paths in the global ribbon geometry  (the shape scaled to zero and located at its barycenter for the first path and the copy of the original shape as a second path), the unwrapped height (following the axis path) is no longer constant for each shape edge... and the ribbon still stretches its texture on this weird geometry, what leads to this strange variation.

No idea about how to fix this the way it is currently designed.

I suggest for now that you don't use the extrusion cap parameter if you encounter this strange texturing and that you set your cap (build it from the same model shape with CreatePolygon)

Rolento likes this

Share this post


Link to post
Share on other sites

Hi @jerome

Thanks for the research and summary of the problem.  The workaround you suggest is quick and easy to implement, perfect. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.