J'essaie de télécharger des données d'image 16 bits à partir d'un serveur et de la pousser à une texture WebGL sans plug-ins de navigateur. Teximage2D fonctionnera avec: imagétata, htmlimageelement, htmlcanvaseplement ou htmlvideoElement. Je cherche du JavaScript (une bibliothèque ou un échantillon de code) qui peut décoder des données de TIFF 16 bits ou similaires (HDF5, etc.) dans l'un de ces types d'objets.
Je n'ai aucun problème à faire cela est de 8 bits par canal RVB en utilisant un PNG pour charger un PNG, mais cela ne fonctionne pas avec des données de 16 bits par canal, car il n'y a pas de formats d'image "standard" prises en charge de navigateur qui sont 16 bits.
3 Réponses :
Je ne pense pas que les navigateurs principaux prennent en charge de manière native tout format d'image de 16 bits / canaux pour le moment.
Un moyen d'obtenir le même effet serait de créer deux images PNG, une avec les 8 premiers bits de chaque canal de couleur dans l'image et une avec les 8 bits inférieurs.
Ensuite, liez les images comme deux textures et combinez les valeurs de votre shader, par exemple (Remarque: vous avez besoin de précision Highp pour représenter vos données correctement dans une plage de 16 bits) Une autre méthode n'est possible que si les textures de points flottants sont prises en charge dans votre navigateur cible. Dans le navigateur, vous allez, dans le navigateur, combinez les deux images PNG en une texture à virgule flottante puis accédez à celle normalement. Cela peut ne pas être plus rapide et utilisera probablement deux fois la quantité de mémoire de texture.
J'ai fait quelque chose de similaire mais utilisé un PNG RVB et j'ai codé les 2 octets dans les canaux R et G puis décodés dans le shader.
Bonne suggestion @Trevor. Depuis que j'ai répondu à cette question, je l'ai fait exactement de cette façon. C'est probablement beaucoup plus efficace que de faire deux lectures de texture.
Quelqu'un peut-il donner un exemple concret de cela? J'apprécierais que beaucoup!
En cas de combinaison de deux images PNG, une avec les 8 bits TOP et la seconde avec les bas bits 8 bits, je pense que cela devrait être: en 8 bits par canal couleurs RVB va aller de 0 à 255 = 2 ^ 8 - 1. WebGL fonctionne à l'aide de valeurs de couleur de 0 à 1 et fait En divisant la valeur de couleur 8 bits par 255. La valeur divisée appartient donc à la plage <0,1>. Ce que nous voulons est une valeur de couleur 16 bits réduite à la plage <0,1 >. De plus, je n'ai pas pu trouver de logiciel pour scinder l'image 16 bits / canaux en une image de 8 bits / canaux. Voici donc mon code, n'hésitez pas à l'utiliser, il se divise 16 bits / canal TIFF en deux pngs 8 bits / canaux:
Dans 16 bits par canal, les couleurs RGB vont de 0 à 65535 = 2 ^ 16 - 1 = 255 * 257. Explication
En cas de 16 bits par canal, nous souhaitons la diviser par 65535 pour obtenir le numéro approprié de la plage <0,1>.
Laissez faible et up être la valeur de couleur de la plage 0..255. up est le top 8 bits et bas est faible 8 bits.
Pour obtenir une valeur de 16 bits, nous pouvons calculer: bas + up * 256 . Maintenant, nous avons numéro dans la plage 0..65535. Pour obtenir la valeur de la plage <0,1>, nous le divisons en 65535. Notez que WebGL fonctionne à l'aide de valeurs de couleur à partir de la plage <0,1>, il est lw = faible / 255 et uw = up / 255 . Nous n'avons donc pas besoin de la multiplier par 255 et de la diviser par 65535 parce que 65535 = 255 * 257. Au lieu de cela, nous divisons simplement par 257. 
C'est contre-intuitif, mais correct! Vaut définitivement +1.
pngtoy est une jolie bibliothèque vedette pour extraire des morceaux PNG de presque toutes les profondeurs et modes de canaux avec JavaScript ( Vraiment côté client / sans nœud.js, juste promis.js dépendances). La méthode de décodage retournera le tampon souhaité. Voici un exemple de 16 bits GreyScale PNG (16 bits RVB devrait fonctionner aussi bien):
On dirait que les liens brisés - essayez cela à la place Github.com/neshume/pngtoy