2d Context与WebGL渲染视频 [英] 2d Context vs WebGL for Rendering Video
问题描述
我目前正在使用 CanvasRenderingContext2D.drawImage()
将来自RTC媒体流的视频绘制到画布上。不幸的是,这占用了大量CPU资源。
I am currently using the CanvasRenderingContext2D.drawImage()
to draw video coming from a RTC mediastream to a canvas. Unfortunately, this takes up considerable CPU resources.
使用 WebGLRenderingContext
这样做是否会更高效? (硬件加速?)如果是,一个人如何精确地处理这一问题,最好不要创建中间视频元素?
Would it be more performant to do this using a WebGLRenderingContext
? (Hardware acceleration?) If yes, how exactly does one handle this, preferably without creating an in-between video element?
推荐答案
如果您已经在3d空间中,则无需2d上下文使用WebGL渲染视频。
No need for 2d Context use WebGL for rendering video if you are already in 3d space.
不幸的是,这占用了大量CPU资源-我为您介绍您正在使用特殊的画布来接收rtc媒体流。如果画布在身体某处可见,则您可以进行双重(cpu)工作。
"Unfortunately, this takes up considerable CPU resources" - I guest you are using special canvas to receive rtc media stream . If canvas is visible somewhere on body you double (cpu) job.
视频纹理示例(此代码取自visual-js项目)您将需要一点适应性...请参阅:
Example for video texture (this code is taken from visual-js project ) You will need a little adapt... See :
function VIDEO_TEXTURE (monitor_ ) {
var ROOT = this;
ROOT.LOADED = function() {};
ROOT.video = document.getElementById( monitor_ );
var DIV_CONTENT_STREAMS = document.getElementById( 'HOLDER_STREAMS' );
ROOT.videoImage = document.createElement('canvas');
ROOT.videoImage.id = monitor_ + "IMAGE_";
ROOT.videoImage.setAttribute('width', '640px' );
ROOT.videoImage.setAttribute('height', '480px' );
DIV_CONTENT_STREAMS.appendChild(ROOT.videoImage);
ROOT.videoImageContext = ROOT.videoImage.getContext( '2d' );
ROOT.videoImageContext.fillStyle = '#0000FF';
ROOT.videoImageContext.fillRect( 0, 0, ROOT.videoImage.width, ROOT.videoImage.height );
ROOT.videoTexture = new THREE.Texture( ROOT.videoImage );
ROOT.videoTexture.minFilter = THREE.LinearFilter;
ROOT.videoTexture.magFilter = THREE.LinearFilter;
ROOT.movieMaterial = new THREE.MeshBasicMaterial( {
map: ROOT.videoTexture,
overdraw: true,
side: THREE.DoubleSide
});
var movieGeometry = new THREE.PlaneGeometry( 1000, 1000, 1, 1 );
ROOT.movieScreen = new THREE.Mesh( movieGeometry, ROOT.movieMaterial );
ROOT.movieScreen.position.set(0, 500, 1000);
scene.add(ROOT.movieScreen);
ROOT.AUTO_UPDATE = function() {
//ROOT.video.play();
if ( ROOT.video.readyState === ROOT.video.HAVE_ENOUGH_DATA )
{
ROOT.videoImageContext.drawImage( ROOT.video, 0, 0, ROOT.videoImage.width, ROOT.videoImage.height );
if ( ROOT.videoTexture )
ROOT.videoTexture.needsUpdate = true;
}
};
console.log('Video 3d canvas texture created.');
PROGRAM.AUTO_UPDATE.push(ROOT);
}
// Usage :
VIDEO_MATERIAL = new VIDEO_TEXTURE(tag_element_video_rtc_remote)
尝试一下:
> https://maximumroulette.com/welcome/3d_slot/
webGL2开源 git项目
示例:
https://maximumroulette.com/webgl2/ examples.html
这篇关于2d Context与WebGL渲染视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!