Renderers

When building a graphics rendering library, it's important to ensure that it can work on a wide variety of devices, including those with limited graphics capabilities. The two available types of renderers are Canvas 2D and WebGL.

Canvas 2D

Canvas 2D is an API that offers a 2D drawing context for the HTML canvas element. It's simple to use and allows you to draw shapes, text, images, and other graphics directly onto a canvas. It has good performance for simple graphics operations.

WebGL

WebGL, is a graphics API that grants access to the user's computer's graphics hardware, making it possible for developers to produce advanced 3D graphics and animations straight in the web browser. WebGL is built on top of OpenGL, a widely used graphics API in game development and other graphics-heavy applications. It provides high-performance graphics rendering.

Post-processing

To reduce flickering in selfie segmentation, a post-processing operation can be applied using a temporal smoothing filter. However, this technique is only available with WebGL due to its access to previous frames rendered by the GPU. Ending in a difference between the Canvas2d and WebGL segmentation.

Hardware impact

If the user's computer lacks a GPU, both Canvas 2D and WebGL will still work, but the performance and rendering quality may differ. Canvas 2D graphics rendering is handled by the CPU, so performance is reliant on the complexity of the graphics being produced and the user's CPU. On the other hand, WebGL graphics rendering is designed to take advantage of GPU acceleration, so the absence of a GPU will result in a significant decrease in performance, particularly for complex graphics operations.

Default renderer

The failIfMajorPerformanceCaveat flag is an optional parameter that can be passed to the getContext() method when retrieving a canvas context. When set to true, the browser will fail to return a context that indicates limited or reduced capabilities. In this scenario, Canvas 2D is used by the library. Otherwise, good GPU performance can be expected, and WebGL will be chosen as the default renderer.

	high perfomance GPU	low performance GPU
Blur	webGL Fast	Canvas 2D
Virtual Background	webGL Precise	Canvas 2D

Selecting renderer

If you want to select explicitly the renderer, you can use the renderingOptions field of the config.

// 
const canvas2dProcessor = await createVonageMediaProcessor({
    transformerType: 'BackgroundBlur',
    renderingOptions: { 
        type: RenderingType.CANVAS
    }
});
const webglProcessor = await createVonageMediaProcessor({
    transformerType: 'BackgroundBlur',
    renderingOptions: { 
        type: RenderingType.WEBGL
    }
});