Facebook '3d' textures

1

Any google search brings up FB’s adoption of them en-mass so it’s an easy way to immediately make the effects understandable.

I’ve got some of these images which of course are 2D with a depth-map encoded in the Alpha channel. Some phones support taking these kinds of images as well usually by selecting ‘portrait mode’.

The depth-map is a 2.5D sort of projection that I’m could be used as the basis of a mesh (possibly?). I’ve hunted through the CGE docs and all I can find relating to depth maps is their use as a shadow mask.

I think that if these textures could be applied to a flat face on some UI element then some really cool possibilities exist. One example would be the user uploading such an image to a leader-board which would then be displayed as an avatar.

I imagine that creating the texture from a real 3D model would lend itself to the ability to use the same kind of effect on normal UI elements like buttons etc.

I thought I’d ask your opinion on the whole concept as faking 3D in a 3D engine sorta sounds counter-productive unless applied in context to a UI element.

If it’s not as crazy as it sounds and is not too hard to implement it’d worth writing…

2

  1. If you have an image, that in alpha channel keeps “depth” information -> it’s very easy to render it as a real 3D object, with real heights, using Castle Game Engine.

    Just use a flat grid (“grid” as in “Blender grid”, which is just a decimated quad). Then use image alpha information as a height map. You can modify these heights using a shader effect. I made a demo showing this: https://github.com/castle-engine/demo-models/blob/master/compositing_shaders/terrain_heights_from_texture.x3dv

    (To view it, it’s best to clone the whole demo-models repository from https://github.com/castle-engine/demo-models/ and then open with view3dscene the model in compositing_shaders/ subdir. )

    P.S. The bounding box of such shape still reflects the flat plane. This can be fixed by setting Shape explicit bbox, however in this case the Shape is automatically created from glTF object. If this will ever be a problem, I’ll add handling of X3D Group.bboxXxx fields to counteract this.

terrain_heights_from_texture_1
terrain_heights_from_texture_11536×864 163 KB
terrain_heights_from_texture_0
terrain_heights_from_texture_01536×864 190 KB

  1. Another possible use is to create normal map from the height map. GIMP normalmap plugin can do it.

    You can then create a normalmap texture with heightmap in the alpha channel, and use it for a very cool bump mapping variant “steep parallax bump-mapping with self-shadowing”. The demo is on https://github.com/castle-engine/demo-models/blob/master/bump_mapping/steep_parallax_lion.wrl (again it’s best to clone the whole demo-models, and then open this file with view3dscene; use “Edit -> Lights Editor” in view3dcene to play with light source position, move it around and you will see shadows).

    The way to specify normal maps is documented on https://castle-engine.io/x3d_implementation_texturing_extensions.php . Actually it shows 2 ways, using CommonSurfaceShader.normalTexture and using Appearance.normalMap in X3D. The new X3D 4.0, which I’m working on (just had a big presentation about it yesterday, https://github.com/michaliskambi/x3d-tests/wiki/X3D-version-4:-New-features-of-materials,-lights-and-textures ) introduces another way to specify it, which will be the future: Material.normalTexture. CGE already implements it :slight_smile:

    For now I would say to use the old method, so fields Appearance.normalMap and Appearance.heightMapScale. The new method will become the documented and advised method soon.

    I will talk about X3D 4.0 more in some news posts, and also the video from my yesterday talk should be available publicly in the upcoming week. I actually showed this steep parallax demo during this demo :slight_smile:

3

Cool,

Looks like my idea of possibly stupid questions ain’t so pointless after all :slight_smile:

I’ll play with the stuff in a bit