如何在 WebGL 的 texImage2D 中裁剪 HTMLVideoElement？

Posted 2023-02-25

【中文标题】如何在 WebGL 的 texImage2D 中裁剪 HTMLVideoElement？

【英文标题】：How to crop HTMLVideoElement in WebGL's texImage2D?

【发布时间】：2016-11-21 12:18:48

【问题描述】：

我正在使用 WebGL，我可以使用 texImage2D 成功地将视频元素渲染到 WebGL 上下文。但是，我现在尝试在渲染它之前裁剪这个视频元素。例如，我想取视频元素的上半部分并将其绘制在我的 GL 上下文的左半部分；下半部分在右半部分。

WebGL 1 中这种“裁剪操作”的最佳做法是什么？

我发现我可以调整viewport 以在左/右半部分渲染一些东西，但我似乎找不到如何裁剪。

如果texImage2D 支持视频元素的偏移和尺寸参数就好了，但事实并非如此。

也许我可以在纹理参数中调整它或其他什么？

【参考方案1】：

在 WebGL1 中，没有简单的方法可以在 texImage2D 级别进行裁剪。我建议你只是把整个视频帧放到1个纹理中，然后在渲染时使用纹理坐标来选择你想要在每个区域显示的纹理部分

【讨论】：

我用于 3d 插槽示例的原理相同：maximumroulette.com/welcome/3d_slot，使用搅拌机或任何 3d 应用程序进行建模和设置 textoreCord（UV 编辑器）。在 uv 编辑器中，您可以（裁剪）水平分割两部分。