我正在尝试从服务器下载 16 位图像数据并将其推送到 WebGL 纹理中，而无需浏览器插件。 texImage2d 将使用:ImageData、HTMLImageElement、HTMLCanvasElement 或 HTMLVideoElement。我正在寻找一些可以将 16 位 TIFF 或类似(hdf5 等)图像数据解码为这些对象类型之一的 javascript(库或代码示例)。
我可以通过使用 an 加载 PNG 来实现每 channel 8 位 RGB，但这不适用于每 channel 16 位数据，因为没有任何“标准”浏览器支持的图像格式是 16 位的。
最佳答案
如果合并两个 PNG 图像，一个高 8 位，第二个低 8 位，我认为应该是:
highp vec4 texCol = texture2D(tex_low, vec2(vTexCoord.s, vTexCoord.t)) * (1.0 / 257.0);
texCol += texture2D(tex_up, vec2(vTexCoord.s, vTexCoord.t)) * (256.0 / 257.0);
在每 channel 8 位中，RGB 颜色的范围从 0 到 255 = 2^8 - 1。
在每 channel 16 位中，RGB 颜色的范围从 0 到 65535 = 2^16 - 1 = 255*257。
解释
WebGL 使用从 0 到 1 的颜色值，并通过将 8 位颜色值除以 255 得到它。所以除以值属于 <0,1> 范围。
在每 channel 16 位的情况下，我们希望将其除以 65535 以获得 <0,1> 范围内的正确数字。
我们想要的是将 16 位颜色值缩小到范围 <0,1>。
设 low 和 up 为 0..255 范围内的颜色值。 up 是高 8 位，low 是低 8 位。
要获得 16 位值，我们可以计算:low + up*256。现在我们的数字在 0..65535 范围内。要从范围 <0,1> 中获取值，我们将它除以 65535。请注意，WebGL 使用范围 <0,1> 中的颜色值工作，它是 Lw=low/255 和 Uw =向上/255。所以，我们不必乘以 255 再除以 65535，因为 65535 = 255*257。相反，我们只除以 257。
我也找不到任何软件将 16 位/ channel 图像拆分为两个 8 位/ channel 图像，所以这是我的代码，请随意使用它，它将 16 位/ channel Tiff 拆分为两个 8 位/ channel PNG:
关于javascript - 希望在 Javascript/WebGL 中访问 16 位图像数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6413744/