A WebGL context gives browser scripts access to GPU-backed rendering. For video effects, it replaces a canvas’s ordinary 2D context and provides the low-level path needed to run shader code. section 15.3
Filtered camera video
A Web Component can expose a WebGL video element with camera input, canvas display, and a selected filter such as sepia, greyscale, or Sobel edge detection. The component hides much of the context and shader setup. section 15.3
Listing 15.18. WebGL video component demo
<html>
<head>
<title>Demo: Copy to Canvas</title>
<script #1
type="module"
src="../glvideo.js">
</script>
<style>
wcia-glvideo { #2
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<h2>Demo: Apply WebGL Filter</h2>
<p>
Apply WebGL Filter - possible glfilters are "sepia",
"greyscale", "sobel_edge_detection", "freichen_edge_detection",
"freichen_inverted", and "sobel_inverted"
</p>
<wcia-glvideo #3
useCamera
useCanvasForDisplay
canvasRefreshInterval="10"
useWebGL='{"filter": "freichen_inverted"}'> #4
</wcia-glvideo>
</body>
</html>
Inspect the complete WebGL video component demo, including camera attributes, canvas display, refresh timing, and available filter names. section 15.3
Listing 15.19. Custom shaders used in the WebGL video component
<html>
<head>
<script type="module" src="../glvideo.js"></script>
<script #1
id="2d-vertex-shader"
type="x-shader/x-vertex">
// Use any shader here, or the Vertex shader included in Listing 15.1
</script>
<script #2
id="2d-fragment-shader"
type="x-shader/x-fragment">
// Use any shader here, or the Fragment shader included in Listing 15.1
</script>
<style>
wcia-glvideo { #3
width: 640px;
height: 480px;
}
</style>
</head>
<body>
<wcia-glvideo #4
useCamera
useWebGL
useCanvasForDisplay
canvasRefreshInterval="10">
</wcia-glvideo>
<script type="module">
import Shaders from '../filters/webgl/shaders.js';
import Constants from '../filters/webgl/constants.js';
var video = document.querySelector('wcia-glvideo');
video.webglProperties.vertexShader =
document.getElementById('2d-vertex-shader').text; #6
video.webglProperties.fragmentShader =
document.getElementById('2d-fragment-shader').text;
</script>
</body>
</html>
Inspect how custom vertex and fragment shaders are supplied to the WebGL video component. section 15.3
