Discussion :

[schnee]

Bonjour,
Depuis quelques années, les téléphones cellulaires sont capables de prendre des photos en 3D.
Pour ça ils utilisent un second objectif et crée une image de profondeur représentée par des niveaux de gris.
Il est possible d'afficher de telles images dans Facebook et l'effet est assez intéressant.
Par exemple ici : https://www.facebook.com/photo/?fbid=10223602236858702&__cft__[0]=AZWhhbFJYdfg5mxNL5W4f-FKgRwvt5fEGXZ727g56CWiLYpX5C2PCHMHIFWEW-wChq7vOcd1O3aG9L3cAvnDbY2BtoVwDQEI_z35P2UTZS3AtGd_F1ow6kLw_MksWrTiHU6soF9mR32Ex5XweXF-QfFww2jXYPRYNpPeIN5iydQpEtKkLZxXcNuqBFAeEjCXNu4&__tn__=H-R

On peut voir l'effet 3D avec Chrome ou Firefox sans avoir à installer une extension. Ma question :
Est-ce que qqun pourrait me dire comment on peut créer de telles images dans un son propre site Web sans passer par Facebook ?
Autrement dit : comment fait Facebook ?

[Mat.M]

Est-ce que qqun pourrait me dire comment on peut créer de telles images dans un son propre site Web sans passer par Facebook ?
Autrement dit : comment fait Facebook ?[/B]

c'est certainement possible mais il faut une bibliothèque de code capable de lire une photo en 3d.
Après il faudrait préciser la techno ( Php , Javascript ? ) utilisée dans son propre site web.
Sinon il faut faire tout par soi-même lire le fichier image pixel par pixel et effectuer un rendu voxel

[NoSmoking]

Bonjour,

On peut voir l'effet 3D avec Chrome ou Firefox sans avoir à installer une extension

perso je ne vois pas de 3D mais une image de fond qui se déplace, en suivant la position de la souris, derrière une image en premier plan.
En gros c'est un « effet de parallaxe ».

[schnee]

Après il faudrait préciser la techno ( Php , Javascript ? ) utilisée dans son propre site web.

C'est justement l'objet de ma question : quel est la librairie qui permet de faire ça ?
Mais il y a deux phases à considérer :
1° préparer le fichier adéquat côté serveur,
2° ça doit nécessiter qqch côté client pour l'affichage, mais quoi ?
Quand on regarde le source d'une page FB, on ne voit strictement que des appels à des fichiers Javascript. Il doit y avoir une procédure Javascript qui capte la position de la souris et déforme l'image en conséquence. Est-ce que qqun connaît une librairie JS qui fait ça ?

[schnee]

Bonjour,

perso je ne vois pas de 3D mais une image de fond qui se déplace, en suivant la position de la souris, derrière une image en premier plan.
En gros c'est un « effet de parallaxe ».

Exact, c'est pour ça que j'ai parlé d'un « effet 3D » et non d'une image en 3D.
L'exemple que j'ai choisi n'a pratiquement que deux plans, mais la profondeur mesurée par l'appareil photo peut comporter 256 niveaux, pour certaines images de paysages on peut obtenir un effet intéressant.
Mais à part FB, on ne voit encore nulle part ce genre d'image, bizarre quand même.

[Mat.M]

Quand on regarde le source d'une page FB, on ne voit strictement que des appels à des fichiers Javascript. Il doit y avoir une procédure Javascript qui capte la position de la souris et déforme l'image en conséquence. Est-ce que qqun connaît une librairie JS qui fait ça ?

à mon avis FB doit exécuter par derrière soit un servlet en Java soit un web service .NET soit carrément un exécutable en C++ qui renvoie au navigateur une image calculée.
Le problème des servlets/applet java c'est qu'il faut une JVM avec pour les faire tourner.
Sinon vous pouvez jeter un coup d'oeil à Babylon Js en Javascript qui utilise webgl par derrière.
Mais il faudra écrire l'algorithme de rendu en 3d.

[schnee]

à mon avis FB doit exécuter par derrière soit un servlet en Java soit un web service .NET soit carrément un exécutable en C++ qui renvoie au navigateur une image calculée.

Ce que je sais, c'est que l'image contient la photo classique plus une image de la même scène en 256 niveaux de gris. Pour chaque pixel, le niveau de gris est calculé en fonction de la distance. On appelle ça « heightmap ».
L'image est calculée une fois pour toute sur le serveur. L'effet 3D ne peut être produit que chez le client, à chaque pixel de déplacement de la souris l'image est immédiatement ajustée, impossible de faire ça en temps réel sur le serveur. L'image est une extension du format PNG. Quand on store l'image sur son ordinateur, on a un fichier PNG, mais aucun visionneur d'image n'est capable la lire.
Côté client, ça ne peut être fait qu'en Javascript, ça ne nécessite plugin, extension, Java client ou autre.

Sinon vous pouvez jeter un coup d'oeil à Babylon Js en Javascript qui utilise webgl par derrière.
Mais il faudra écrire l'algorithme de rendu en 3d.

Mais il doit bien exister une librairie déjà faite qui fait ça. Ce sont quand même les fabricants de téléphones qui utilisent ce standard d'image avec profondeur en niveaux de gris. FB n'a quand même pas le monopole là dessus.

[NoSmoking]

Mais il doit bien exister une librairie déjà faite qui fait ça.

Il existe effectivement des bibliothèques qui traitent ce genre d'images comme par exemple PixiJS.

Un exemple de réalisation : Perspective effect with PIXI.JS.