From 7141a3735b7e5048a242f7eab92acfd76bc6a634 Mon Sep 17 00:00:00 2001
From: Kai Ninomiya <kainino@chromium.org>
Date: Thu, 17 Feb 2022 16:07:37 -0800
Subject: [PATCH] add rAF/rVFC examples

---
 spec/index.bs | 47 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/spec/index.bs b/spec/index.bs
index fe0a3a94b0..7f7993cc2d 100644
--- a/spec/index.bs
+++ b/spec/index.bs
@@ -3372,12 +3372,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>