Rolento Posted January 5, 2017 Share Posted January 5, 2017 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!? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 6, 2017 Share Posted January 6, 2017 Hello! are you referring to bump? http://doc.babylonjs.com/tutorials/Using_parallax_mapping Or displacement map? http://doc.babylonjs.com/classes/2.5/Mesh#applydisplacementmap-url-minheight-maxheight-onsuccess-rarr-void Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 6, 2017 Author Share Posted January 6, 2017 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 6, 2017 Share Posted January 6, 2017 1. You can control the displacement map positioning using mesh uv: https://github.com/BabylonJS/Babylon.js/blob/db69122500dc3048286ae68d1a0dab1e456bf561/src/Mesh/babylon.mesh.ts#L1420 2. It is a color map so greyscale can work but not normal map unfortunately Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 6, 2017 Author Share Posted January 6, 2017 Hi Deltakosh Thanks for the pointers - I will have a play. Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 7, 2017 Author Share Posted January 7, 2017 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? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 10, 2017 Share Posted January 10, 2017 Ping @Nockawa who did the parallax code Quote Link to comment Share on other sites More sharing options...
Nockawa Posted January 10, 2017 Share Posted January 10, 2017 @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. Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 11, 2017 Author Share Posted January 11, 2017 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 Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 11, 2017 Author Share Posted January 11, 2017 > @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! Quote Link to comment Share on other sites More sharing options...
jerome Posted January 11, 2017 Share Posted January 11, 2017 it seems related to the extrusion CAP with no cap : http://www.babylonjs-playground.com/#RF9W9#409 Quote Link to comment Share on other sites More sharing options...
Nockawa Posted January 11, 2017 Share Posted January 11, 2017 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? Quote Link to comment Share on other sites More sharing options...
jerome Posted January 11, 2017 Share Posted January 11, 2017 @nockawa the LineSystem would be the right tool to use imho. Such things already exist here : https://github.com/BabylonJS/UserFunctions I'll have a look at why the extrusion cap impacts the uvs settings... later, when I'm done with the facetData feature. Quote Link to comment Share on other sites More sharing options...
Nockawa Posted January 11, 2017 Share Posted January 11, 2017 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 Quote Link to comment Share on other sites More sharing options...
jerome Posted January 11, 2017 Share Posted January 11, 2017 showPath3D shows everything : the normal, the tangent and the binormal at once Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 11, 2017 Author Share Posted January 11, 2017 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?). Quote Link to comment Share on other sites More sharing options...
Nockawa Posted January 11, 2017 Share Posted January 11, 2017 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! Quote Link to comment Share on other sites More sharing options...
jerome Posted January 12, 2017 Share Posted January 12, 2017 lead : I'm not sure that the extrusion cap is given some uvs ... Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 12, 2017 Author Share Posted January 12, 2017 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... Quote Link to comment Share on other sites More sharing options...
jerome Posted January 12, 2017 Share Posted January 12, 2017 The starting CAP seems to be the culprit : NO CAP : http://www.babylonjs-playground.com/#RF9W9#411 CAP_ALL : http://www.babylonjs-playground.com/#RF9W9#412 CAP_START : http://www.babylonjs-playground.com/#RF9W9#413 CAP_END : http://www.babylonjs-playground.com/#RF9W9#414 I'll have a look at this...soon Quote Link to comment Share on other sites More sharing options...
jerome Posted January 16, 2017 Share Posted January 16, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
Rolento Posted January 17, 2017 Author Share Posted January 17, 2017 Hi @jerome Thanks for the research and summary of the problem. The workaround you suggest is quick and easy to implement, perfect. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.