javascript - 在浏览器中加载浮点图像并将其用作 WebGL 中的纹理

标签 javascript image browser floating-point webgl

我需要在纹理中存储一些(经度=红色,纬度=绿色,时间=蓝色,日期=ALPHA)信息,然后在数据可视化原型(prototype)共享的片段中进行一些查询。所有值均标准化为 [0,1]。

我正在使用 java 创建 PNG 文件,但是有没有办法可以创建 float PNG 文件并将其加载到浏览器中。

我想将它们作为二进制文件读取,但我还不太熟悉网络技术。我为此感到抱歉。

另一个想法是使用 2 个 channel ,这样我就有 16 位精度。我猜这会让事情变得更加复杂,这个原型(prototype)的截止日期是 12 月 15 日。

到目前为止,除了这个之外,一旦我解决了这个问题,我就可以更改 webGL 中的纹理格式。

最佳答案

据我所知,没有浏览器支持浮点纹理 -> WebGL。据我所知,Safari 是唯一加载浮点纹理的浏览器,Safari 只能以 TIFF 格式加载,但我不相信它会将这些作为 float 据传递到 WebGL 中。

我知道的唯一方法是您自己解压数据并使用gl.texImage2D(target, level, internalFormat, width, height, 0, format, gl.FLOAT, someFloat32ArrayBufferYouMade)上传。

如何填充数组缓冲区取决于您。你可以编写自己的PNG解压缩器(我不知道PNG支持 float )。如果我是你,我只会使用未压缩的二进制文件并通过 XHR 二进制请求下载,只是为了让某些东西正常工作。然后您可以稍后进行压缩和解压缩。

使用 2 个或更多 channel 来获得更高分辨率而不使用浮点纹理的想法也是一种常见的解决方案。

关于javascript - 在浏览器中加载浮点图像并将其用作 WebGL 中的纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33994950/

相关文章:

html - 存储数据客户端的框架

javascript - 如何在ajax调用上执行 Controller 方法?

javascript - 为什么 javascript 看不到 style.filter 属性?

android - 使用 spannablestring 在文本左侧附加图像

c# - 如何在 C# 中创建带圆角的图像?

javascript - JSONP 请求中可以提交的内容是否有限制?

javascript - Chrome JavaScript 错误

javascript - 如何获取Referrer URL的标题

javascript - 有人可以解释这个 OOP javascript 结构吗

javascript - 如何完全阻止通过 HTTP 提供的资源的图像缓存