Webgl動畫紋理性能與畫布drawImage性能

Question

我正在開始一個項目，在該項目中，我想從單個視頻中切出部分並將這些部分重新繪制到屏幕上的不同對象上。 我知道我可以通過使用drawImage將視頻的各部分重新繪制到canvas元素上來做到這一點。 在進行研究時，似乎可以對WebGL中的動畫紋理進行相同的操作。 有誰知道通過使用WebGL動畫紋理而不是drawImage可以提高性能嗎？

Answer 1

WebGL在2D畫布性能方面具有優勢，但是，由於您要處理視頻，因此問題在於使用WebGL是否有任何意義。

考慮到NTSC世界中的視頻很少會超過30 FPS（PAL 25 fps），因此您將有很好的時間預算來對視頻進行切片和重新繪制。 同樣考慮到drawImage是一個非常快速的操作，並且還具有硬件支持（並且可以不使用），因此您可以權衡這些因素， drawImage被不適用於所有硬件（例如低端消費者和較舊的硬件）的WebGL所困擾，並支持它有所不同（在撰寫本文時）。

在這種情況下，我最初會堅持使用2D畫布。 如果需要將切片包裝和投影到3D對象上，則2D畫布不是最佳選擇。 您可以直接在畫布元素上對某些事物使用CSS 3D變換，例如四邊形變換。 如果需要不同的轉換，只需使用不同的畫布元素，每個畫布元素代表一個切片。

順便說一句。 是創建一個屏幕外畫布，您首先將其繪制到該畫布上。 這樣，您不必從正在運行的視頻中獲取元素，這可能是一項昂貴的操作，具體取決於瀏覽器將如何獲取視頻位圖數據。

一個例子：

 var ctx = canvas.getContext('2d'), sw = 32, frame = document.createElement("canvas"), // "frame buffer" fctx = frame.getContext("2d"); frame.width = 500; frame.height = 280; video.addEventListener("playing", sliceAndDice, false); function sliceAndDice() { fctx.drawImage(video, 0, 0); // video to "frame buffer" to make it more smooth // some misc slicing for(var x = 0; x < frame.width; x += sw) { var y = Math.sin(x*1.5) * sw + 20; ctx.drawImage(frame, x , 0, sw, frame.height, // source slice x * 1.1, y, sw, frame.height); // dest. slice } requestAnimationFrame(sliceAndDice); } 

 <canvas id="canvas" width=560 height=320></canvas> <video style="display:none" id="video" width="500" height="280" preload="auto" autoplay="true"> <source src="//clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> <source src="//clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm"> <source src="//clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"> </video> 

一個具有320個切片的替代演示，您可以僅用2D畫布將其推開很多：

 var ctx = canvas.getContext('2d'), frame = document.createElement("canvas"), // "frame buffer" fctx = frame.getContext("2d"), dlt = 0; frame.width = video.width; frame.height = video.height; video.addEventListener("playing", sliceAndDice, false); function sliceAndDice() { fctx.drawImage(video, 0, 0); // video to frame buffer to make it smoother // some misc slicing for(var x = 0, y; x < frame.width; x++) { y = Math.sin(x*32+dlt) * 3 + 10; // "random" y pos. ctx.drawImage(frame, x, 0, 1, frame.height, // source slice x, y, 1, frame.height); // dest. slice } dlt += 0.2; requestAnimationFrame(sliceAndDice); }; 

 <canvas id="canvas" width=560 height=320></canvas> <video style="display:none" id="video" width="500" height="280" preload="auto" autoplay="true"> <source src="//clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> <source src="//clips.vorwaerts-gmbh.de/big_buck_bunny.webm"type="video/webm"> <source src="//clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"> </video>