Engraver text on mesh

[KrzysiekF]

Hi,

It is possible to add engraver text on my mesh / model? 

[Temechon]

Hi, 

You can take a look at displacement maps : http://www.babylonjs.com/Demos/DisplacementMap/

[KrzysiekF]

Hello,

Thank you for your reply. But can you explain me this a little bit more? I'm just starting to learn WebGL and Babylon.

Regards,

Krzysiek

[Wingnut]

Hiya K... welcome to the forum.  Perhaps my friend @Temechon won't mind my intervention, here.

http://www.babylonjs-playground.com/#UKFP6#3

Essentially, we start with a highly-subdivided Babylon GROUND... which is a plane with... well... lots of subdivisions.  I think these are sometimes called "patch grids".  In line 29, we make a ground grid... with 512 by 512 subdivisions.  It is a fairly hi-rez mesh.  This is needed so that our engraving has good "clarity" or "granularity".

Now for all the BAD news.    Nearly EVERYTHING in this playground example... had to be done "upside-down".  In line 22... hemispheric lights almost ALWAYS aim straight-up... 0, 1, 0.  This one aims straight down.    Line 24... the groundColor, which normally is used to color the BOTTOM of hemi-lit mesh... is used to color the TOP of your engraved panel.  Weird, huh?  We're just getting started.

Line 33... the displacement map minimum height = 0, and maximum height = -.5  ?  How goofy!

Line 34... AHA!  There is the reason.   The ground-grid needed to be inverted.... ie. flipped-over, to make the hand-writing be correctly oriented.  Without flipping the ground, the hand-writing was backwards.  This can likely be fixed by using a CreateGroundFromHeightMap... instead of an applyDisplacementMap.  You can experiment with that, as wanted, of course.  I wanted to show an example of Temechon's idea.

Some might say... "Hey Wingnut... why did you bother adding a StandardMaterial and doing material settings?  Why not leave it without material?" (lines 35, 38, 40).

Well, line 40 is important.  We are viewing the BOTTOM of the ground-grid, and we needed to give it some color/texture.  Sure, we might be able to get some color with light2.diffuse = someColor3 but... I decided not to try that... yet.    Remember... with light2... (the hemi).... the .groundColor is the top of the ground- grid, and the .diffuse is the bottom.  (Because of the unusual -Y direction of that light)   So... setting light2.diffuse might eliminate the need for having a material, and the need to set .backFaceCulling.  Maybe. 

Lastly, this is a lighting nightmare.    (a good challenge).   Light0 and light1 are twin v-opposing directionals... with .intensity of 30!!!  Holy crap!  That will burn your retinas into french fries right now, huh?    And still... our negatively-displaced engraved text "channel"... is quite dark. 

There's HOURS and HOURS of lighting fun to be had... trying to light that engraved text!  PARTY!

Don't forget THIS SECTION of our lights tutorial.  It says we can have more than 4 lights on a material!  All we need to do is set  groundgrid.material.maxsimultaneousLights = 10;

Yeah, with 10 (or more) directional lights... I think we can properly light ALL the "facets" of the engraved text "channel".  Maybe.  heh.  FUN!! 

Perhaps we could fill the channel with petrol, and start it burning?  Then the engraving would be well-lit, huh? 

Ten directional lights... grouped, and then spin the group of lights REAL sloooow... and the facets inside the text channel... should start to twinkle.  (Might need to increase the .specular on all lights, and increase (high-powered-color) the .specularColor on the material itself.

Did you know that the values within a BABYLON.Color3(here, here, here) don't NEED to be between 0 and 1?  You can put BIG FAT numbers in there!  I use blue values of 6 OFTEN!  DEMENTED!!!    Fun!

There's definitely some possibilities for sparkle, here.  Might need to change 512 to 1024... more facets to sparkle.  LOVE that sparkle! 

Hope this helps.  Holler as wanted... but have fun experimenting, first. Try modifying that playground, make some more saves, show us what you discover, if you wish.  Here are some more engraving images.  Good luck!

What's that?  You say you want another demented factoid about the upside-down ground-grid?  Ok, let's add light #3... a low powered pointLight.

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

Line 26... there it is... a point light working fine... except... umm... it MUST have a NEGATIVE Y value  (-80).  It is UNDER the groundgrid, yet it shines light atop it.  WOW!  What a "topsy-turvy" playground we have!

[KrzysiekF]

Hello @Wingnut

Thank you very much for your reply!!! It's so detailed.