用于渲染视频的 2d 上下文与 WebGL答案

【问题标题】：2d Context vs WebGL for Rendering Video用于渲染视频的 2d 上下文与 WebGL
【发布时间】：2016-04-18 10:08:33
【问题描述】：

我目前正在使用CanvasRenderingContext2D.drawImage() 将来自 RTC 媒体流的视频绘制到画布上。不幸的是，这会占用大量 CPU 资源。

使用WebGLRenderingContext 执行此操作会更好吗？（硬件加速？）如果是，具体如何处理，最好不创建中间视频元素？

【问题讨论】：

你在对图像进行一些处理吗？ drawImage 应该已经是硬件加速的，并且不应该占用太多 CPU。我不太了解 webGL，但在我看来，您必须为每个视频帧创建一个纹理，而且我认为创建纹理不是在 GPU 上进行的。但是我又一次对 webGL 不够了解，所以请等待该领域的一些权威声音。
无处理，但需要显示多达 12 个 RTC 媒体流。通过 Web Audio API 可以很好地处理音频。
啊 12 可能很多。

标签： html video canvas webgl

【解决方案1】：

如果您已经在 3d 空间中，则无需 2d 上下文使用 WebGL 来渲染视频。

“不幸的是，这占用了相当多的 CPU 资源” - 我来宾您正在使用特殊的画布来接收 rtc 媒体流。如果画布在身体的某处可见，则您可以加倍（cpu）工作。

视频纹理示例（此代码取自 visual-js 项目）您需要稍作调整...参见：

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 project

例子： https://maximumroulette.com/webgl2/examples.html

【讨论】：