javascript - 如何在WebGL的texImage2D中裁剪HTMLVideoElement?

标签 javascript webgl crop

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

image1

WebGL 1 中此“裁剪操作”的最佳实践是什么?

我发现我可以调整 viewport在左/右半部分渲染某些内容,但我似乎找不到如何裁剪。

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

也许我可以在纹理参数或其他东西中调整它?

最佳答案

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

关于javascript - 如何在WebGL的texImage2D中裁剪HTMLVideoElement?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40720043/

相关文章:

javascript - 将图像存储在 Firebase Storage 中并将元数据保存在 Firebase Cloud Firestore(测试版)中

javascript - 单击按钮以显示或隐藏表格

javascript - 在网络浏览器中捕获图像

javascript - 云上的丑陋渲染

android - react 原生 : Crop image on Android

javascript - WPF WebBrowser 甚至在使用 ObjectForScripting 的单独线程上锁定 UI

javascript - Jquery 无法识别菜单包括

javascript - 如何在网页中同时传播数百个具有动画和交互式 webgl 上下文的小 Canvas ?

ios - 裁剪和调整从图库或相机中选择的图像

ruby-on-rails - Rails 3.0 在 Heroku 上使用 Paperclip 和 s3 进行图像裁剪