草庐IT

javascript - 在 WebGL 中将大图像上传到 GPU

coder 2024-07-20 原文

如何使用 WebGL 将大图像上传到 GPU 而不会卡住浏览器(想想高分辨率天空盒或纹理图集)？

起初我想寻找是否有办法让 texImage2D 异步执行它的操作(将图像上传到 GPU 是 IO-ish，对吧？)，但我找不到任何方法。 然后我尝试使用 texSubImage2D 上传适合 16 毫秒时间窗口的小块(我的目标是 60 fps)。但是 texSubImage2D 仅当您传入 ArrayBufferView 时才采用偏移量和宽度/高度参数 - 当传入 Image 对象时，您只能指定偏移量并且它将(我是猜测)上传整个图像。我想象先将图像绘制到 Canvas 上(将其作为缓冲区获取)与将整个图像上传到 GPU 一样慢。

这是我的意思的一个最小示例:http://jsfiddle.net/2v63f/3/ . 我用了大约 130 毫秒将此图像上传到 GPU。

与 jsfiddle 上的代码完全相同:

var canvas = document.getElementById('can');
var gl = canvas.getContext('webgl');

var image = new Image();
image.crossOrigin = "anonymous";
//image.src = 'http://i.imgur.com/9Tq28Qj.jpg?1';
image.src = 'http://i.imgur.com/G0qL97y.jpg'
image.addEventListener('load', function () {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);

    var now = performance.now();
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    console.log(performance.now() - now);
});

最佳答案

引用的图像似乎是 3840x1920

对于高分辨率天空盒，您通常可以放弃对 alpha channel 的需求，然后决定是否有其他像素格式结构可以在质量和数据大小之间提供合理的权衡。

指定的 RGBA 编码意味着这将需要 29,491,200 字节的数据传输后图像解码。我尝试使用 RGB 进行测试，丢弃了 alpha，但看到了类似的 111 毫秒传输时间。 假设您可以在使用前对图像进行预处理，并且只关心数据传输到 GPU 的测量时间，您可以对数据执行某种形式的有损编码或压缩，以减少您需要的带宽量转让。

一种更简单的编码方法是将数据大小减半，并使用 RGB 565 将数据发送到芯片。这会以颜色范围为代价将数据大小减少到 14,745,600 字节。

var buff = new Uint16Array(image.width*image.height);
//encode image to buffer
//on texture load-time, perform the following call
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, image.width, image.height, 0, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, buff);

假设您可以确认支持 S3TC 扩展 (https://developer.mozilla.org/en-US/docs/Web/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc)，您还可以以 DXT1 格式存储和下载纹理，并将内存传输要求降低到 3,686,400 字节。 似乎任何形式的 S3TC 都会导致相同的 RGB565 颜色范围减少。

var ext = (
  gl.getExtension("WEBGL_compressed_texture_s3tc") ||
  gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") ||
  gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc")
);

gl.compressedTexImage2D(gl.TEXTURE_2D, 0, ext.COMPRESSED_RGB_S3TC_DXT1_EXT, image.width, image.height, 0, buff);

大多数 block 压缩会降低近距离的图像质量，但可以提供更丰富的远距离图像。 如果您近距离需要高分辨率，则最初可以加载较低分辨率或压缩纹理以用作较差的 LOD 远景 View ，并且可以在接近相关纹理时加载较高分辨率的较小子集。

在我在 http://jsfiddle.net/zy8hkby3/2/ 的琐碎测试中，纹理有效负载大小的减少会导致数据传输的时间要求呈指数级下降，但这很可能取决于 GPU。

关于javascript - 在 WebGL 中将大图像上传到 GPU，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25106352/

大图传到imagecodesectionjavascriptwebgl

有关javascript - 在 WebGL 中将大图像上传到 GPU的更多相关文章

  1. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

  2. ruby - 在 Ruby 中将整数格式化为固定长度的字符串 - 2

    有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案 如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的

  3. ruby - 无法在 Ruby 中将 ffmpeg 作为子进程运行 - 2

    我正在尝试使用以下代码通过将ffmpeg实用程序作为子进程运行并获取其输出并解析它来确定视频分辨率:IO.popen'ffmpeg-i'+path_to_filedo|ffmpegIO|#myparsegoeshereend...但是ffmpeg输出仍然连接到标准输出并且ffmepgIO.readlines是空的。ffmpeg实用程序是否需要一些特殊处理？或者还有其他方法可以获得ffmpeg输出吗？我在WinXP和FedoraLinux下测试了这段代码-结果是一样的。 最佳答案 要跟进mouviciel的评论，您需要使用类似pope

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 如何将大于 5GB 的文件上传到 Amazon S3？ - 2

    我目前正在使用带有Carrierwavegem的Rails3.2将文件上传到AmazonS3。现在我需要能够处理用户提交的大于5GB的文件，同时仍然使用Carrierwavegem。Carrierwave或Fog是否有任何其他gem或分支可以处理5GB以上的文件上传到S3？编辑:我不想重写一个完整的Rails上传解决方案，所以像这样的链接没有帮助:https://gist.github.com/908875. 最佳答案 我想出了如何做到这一点，并且现在可以正常工作了。在正确的config/environment文件中，添加以下内容以

  6. ruby - 如何在 Ruby 中将负整数转换为二进制 - 2

    问题1:我无法通过以下方式找到将负整数转换为二进制的方法。我应该像这样转换它。-3=>"11111111111111111111111111111101"我在下面试过:sprintf('%b',-3)=>"..101"#..appearsanddoesnotshow111111bit.-3.to_s(2)=>"-11"#Thisjustadds-tothebinaryofthepositiveinteger3.问题2:有趣的是，如果我使用在线转换器，它告诉我-3的二进制是“0010110100110011”。"11111111111111111111111111111101"和"001

  7. ruby - 在 Ruby 中将转义的 unicode (\u008E) 转换为重音字符 (Ž)？ - 2

    我遇到了一个非常困难的时期:#containedwithin:"MA\u008EEIKIAI"#shouldbe"MAŽEIKIAI"#natureofstring$pstring3"MA\u008EEIKIAI"$putsstring3MAEIKIAI$string3.inspect"\"MA\\u008EEIKIAI\""$string3.bytes#关于从哪里开始的任何想法？注意:这不是我的previousquestion的副本. 最佳答案 \u008E表示代码点为8e(十六进制)的unicode字符出现在字符串中的那个位置。

  8. arrays - 如何在下面的示例中将两个值数组分组为 n 个值数组？ - 2

    我已经有很多两个值数组，例如下面的例子ary=[[1,2],[2,3],[1,3],[4,5],[5,6],[4,7],[7,8],[4,8]]我想把它们分组到[1,2,3],[4,5],[5,6],[4,7,8]因为意思是1和2有关系，2和3有关系，1和3有关系，所以1,2,3都有关系我如何通过ruby​​库或任何算法来做到这一点？ 最佳答案 这是基本Bron–Kerboschalgorithm的Ruby实现:classGraphdefinitialize(edges)@edges=edgesenddeffind_maximum_

  9. ruby - 如何在 Ruby 中将变量用作变量名？ - 2

    我怎样才能使下面的代码工作，以便两个puts都显示1？video=[]name="video"name[0]=1putsname[0]#givesme1putsvideo[0]#givesmenil 最佳答案 您可以使用eval使其工作:eval"#{name}[0]=1"不过我强烈反对这样做。在大多数情况下，你认为你需要做类似的事情，你应该使用HashMap。喜欢:context={"video"=>[]}name="video"context[name][0]=1 关于ruby-如何

  10. ruby-on-rails - 如何在 Ruby on Rails 中将数组持久保存到数据库？ - 2

    我正在尝试将一个数组的数组保存到我在Rails中的SQLite数据库中。现在，我有一个可以容纳这样一个数组的对象，并且实例似乎可以毫无问题地保存。但是，它显然没有保存到数据库中——当我在与创建数组的View不同的View中调用My_Object.array上的函数时，结果为nil并且不起作用。例如:classMy_Object当我调用My_Object.new(:array=>[[1,2,3],[4,5,6]])时，一切似乎都正常工作，但我不能在其他任何地方访问:array属性，结果都是nil。有什么想法吗？ 最佳答案 首先在您的表

随机推荐