I want to make an energy shield effect, and hope its lighting part looks like this:
Now i have this kind of nosie texture:
https://nme.babylonjs.com/#X6TLN3
Based on it, i used remap block to take me one step closer to this effect:
https://nme.babylonjs.com/#R2H90R
But it added some gray color near the noise edge(lighten the base color will be more obvious)
So i’m wondering, is there a better way to implement this self-illuminated effect?
Hi @carolhmj ,
i just used the glow solution to get it done:
demo: https://playground.babylonjs.com/#PSYYLK#2
NME PG: Babylon.js Node Material Editor
Emmm, but it is not that cool as i wanted, the key point is: the light color is not bright enough when baseColor get darker.
For example:
This is ok:
but this is not:
And another problem is how can i map the hexagon effect on sphere surface well (the 2d uv problem), this is a little bit ugly:
I tried other sphere meshes(Geodesic and IcoSphere), but all of them can not help.
Hmm I tried playing with the effect a bit but haven’t got a good result, maybe @PatrickRyan has a better idea of what to do?
@kikoshoung, There is a challenge when you are trying to use a hexagon grid on a sphere, which is why soccer/footballs are hexagons mixed with pentagons to make the shapes work spherically:
If you were to create a hemisphere like you showed in your original post, you UV the geometry from a top-down planar projection unwrapped into a circle. This would allow you to pass a 2D hex grid onto the surface and what happens to the hexes around the bottom don’t matter because they don’t need to wrap.
If you want to have a full sphere, there is more work to do. The two methods I would suggest both require distorting the hex grid to get it to work. The first would be to UV your sphere like the hemisphere above where you place a seam around the equator and unwrap the two halves into circles from top and bottom. Make sure they are aligned and overlapping exactly. Then you need to create a hex texture that has distortion built into the image and aligns along the seam to reflect correctly. This is the more difficult path and basically you will need to experiment a lot to get the seams to work correctly. Below is an example of spherizing a hex grid. You would then need to redraw the lines at the edges to make them align as they reflect across the seam and still create a hexagon at the equator. This one is difficult, but if done correctly may give good results.
The other method requires a polysphere, or a normalized subdivided cube:
This will give you six “sides” that you can project a flat texture to. There are two issues with this method. The first is that a hex grid does not fit cleanly into a square for wrapping. You will get a rectangle if you try to outline a tiling section of a hex grid:
So you will need to stretch this section which will tile correctly back into a square for your texture which will cause some distortion. The other issue is that on a polysphere, the “corners” produce faces that are smaller than the ones toward the center of the side, which will also cause the hex grid to have distortions.
You will have to counter this affect by distorting the center of your texture to make the hexes smaller to compensate for the face size. In either case, you will need to create a hex grid that compensates for the distortion of the grid into a sphere, but these should at least be a step up from the pole distortion that you see in your images above. And depending on how much of the grid is showing (it appears you are using fresnel to block out some) you may not even notice some of the distortion even if you don’t adjust for it.
Hope this helps.
Ok, thanks, i will keep working on it.
