为动画重采样 HTMLImageElement
Resampling HTMLImageElement for animation
可以对 HTMLVideoElement 重新采样,以便随着时间的推移将不同的帧放入纹理中。
例如,如图https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
但是,将动画 gif 加载到 HTMLImageElement 时,重新采样不会显示更新后的纹理。即使图像安装在 dom 上并且该副本上显示不同的框架也是如此。
是否有在 webgl 中显示动画 gif 的标准方法,或者必须在运行时以某种方式将其重写为 spritesheet(或一系列纹理)?
GIF 不会自动使用 WebGL(或常规 canvas 动画)并且没有标准的方法来执行此操作。
与视频元素相反,GIF 图像将仅通过 drawImage()
绘制 第一个 帧,而绘制视频元素将绘制当前帧。这部分是因为我们实际上无法通过 API 访问任何图像的帧(这也适用于动画 PNG 文件,又名 APNG)并且动画图像将仅作为内部过程进行处理浏览器的自由裁量权,并且仅在 DOM.
中
对于视频元素,尽管我们确实可以访问 "frames",即通过 currentTime
访问时间,所以这有点暗示我们想要处理我们看到的或当前存在的内容时间.
不过,您必须手动为 GIF 图像制作动画。这意味着您必须首先将每个帧提取为单独的 images/buffers,然后以您选择的速率显示它们。浏览器在这里帮不了你一点忙,但你可以通过手动解析文件格式来做到这一点。
当然,这可能有点乏味,但幸运的是有人已经完成了所有的提升和艰苦的工作。例如 gifuct(我自己没有测试过,但也有其他的)将允许你从 GIF
中提取每一帧
然后将您从中获得的每一帧渲染到帧缓冲区中,并以您选择的帧速率上传到 GPU。
或:
- pre-process 将 GIF 转换为您提到的 spritesheet
- 或将其作为图像序列加载
- 或将 GIF 转换为视频(这甚至可以减少总大小)
作为一个无耻的插件,如果你应该考虑 APNG 而不是:我已经制作了 apng-parser 对 APNG 文件做同样的事情。
我的建议 虽然是将 GIF/APNG 转换为视频文件,它可以免费提供动画功能,可能文件更小,可以长时间缓冲和流式传输动画,包含的代码更少,通常只处理一个文件(您可能必须为旧浏览器提供不同的视频格式)。 FFMpeg 等免费软件可以帮助您进行转换。
可以对 HTMLVideoElement 重新采样,以便随着时间的推移将不同的帧放入纹理中。
例如,如图https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
但是,将动画 gif 加载到 HTMLImageElement 时,重新采样不会显示更新后的纹理。即使图像安装在 dom 上并且该副本上显示不同的框架也是如此。
是否有在 webgl 中显示动画 gif 的标准方法,或者必须在运行时以某种方式将其重写为 spritesheet(或一系列纹理)?
GIF 不会自动使用 WebGL(或常规 canvas 动画)并且没有标准的方法来执行此操作。
与视频元素相反,GIF 图像将仅通过 drawImage()
绘制 第一个 帧,而绘制视频元素将绘制当前帧。这部分是因为我们实际上无法通过 API 访问任何图像的帧(这也适用于动画 PNG 文件,又名 APNG)并且动画图像将仅作为内部过程进行处理浏览器的自由裁量权,并且仅在 DOM.
对于视频元素,尽管我们确实可以访问 "frames",即通过 currentTime
访问时间,所以这有点暗示我们想要处理我们看到的或当前存在的内容时间.
不过,您必须手动为 GIF 图像制作动画。这意味着您必须首先将每个帧提取为单独的 images/buffers,然后以您选择的速率显示它们。浏览器在这里帮不了你一点忙,但你可以通过手动解析文件格式来做到这一点。
当然,这可能有点乏味,但幸运的是有人已经完成了所有的提升和艰苦的工作。例如 gifuct(我自己没有测试过,但也有其他的)将允许你从 GIF
中提取每一帧然后将您从中获得的每一帧渲染到帧缓冲区中,并以您选择的帧速率上传到 GPU。
或:
- pre-process 将 GIF 转换为您提到的 spritesheet
- 或将其作为图像序列加载
- 或将 GIF 转换为视频(这甚至可以减少总大小)
作为一个无耻的插件,如果你应该考虑 APNG 而不是:我已经制作了 apng-parser 对 APNG 文件做同样的事情。
我的建议 虽然是将 GIF/APNG 转换为视频文件,它可以免费提供动画功能,可能文件更小,可以长时间缓冲和流式传输动画,包含的代码更少,通常只处理一个文件(您可能必须为旧浏览器提供不同的视频格式)。 FFMpeg 等免费软件可以帮助您进行转换。