add rAF/rVFC examples

kainino0x · toji · commit febd81a2e4d7 · 2022-03-16T11:49:18.000-07:00
diff --git a/spec/index.bs b/spec/index.bs
@@ -3378,12 +3378,49 @@ dictionary GPUExternalTextureDescriptor : GPUObjectDescriptorBase {
 </div>
 
 <div class="example">
-    Creating an external texture from a video element:
+    Rendering using an video element external texture at the page animation frame rate:
+
     <pre highlight="js">
-        const videoElement = document.querySelector('video');
-        const externalTexture = gpuDevice.importExternalTexture({
-            source: videoElement
-        });
+        const videoElement = document.createElement('video');
+        // ... set up videoElement, wait for it to be ready...
+
+        let externalTexture;
+
+        function frame() {
+            requestAnimationFrame(frame);
+
+            // Re-import only if necessary
+            if (!externalTexture || externalTexture.expired) {
+                externalTexture = gpuDevice.importExternalTexture({
+                    source: videoElement
+                });
+            }
+
+            // ... render using externalTexture...
+        }
+        requestAnimationFrame(frame);
+    </pre>
+</div>
+
+<div class="example">
+    Rendering using an video element external texture at the video's frame rate, if
+    `requestVideoFrameCallback` is available:
+
+    <pre highlight="js">
+        const videoElement = document.createElement('video');
+        // ... set up videoElement...
+
+        function frame() {
+            videoElement.requestVideoFrameCallback(frame);
+
+            // Always re-import, because we know the video frame has advanced
+            const externalTexture = gpuDevice.importExternalTexture({
+                source: videoElement
+            });
+
+            // ... render using externalTexture...
+        }
+        videoElement.requestVideoFrameCallback(frame);
     </pre>
 </div>
 
