fix(example): clean up v10 demos

example/src/demos/default/FlushSync.tsx

@@ -5,7 +5,7 @@ const colors = ['orange', 'hotpink', 'cyan', 'lime', 'yellow', 'red', 'blue', 'p
 
 function Capture() {
   const [color, setColor] = useState(colors[0])
-  const { gl } = useThree()
+  const { renderer } = useThree()
   const wantToCapture = useRef(false)
 
   const handleClick = useCallback(() => {
@@ -20,11 +20,11 @@ function Capture() {
 
       // Takes a screenshot of the canvas and downloads it
       const link = document.createElement('a')
-      link.href = gl.domElement.toDataURL()
+      link.href = renderer.domElement.toDataURL()
       link.download = 'screenshot.png'
       link.click()
     }
-  }, [gl])
+  }, [renderer])
 
   return (
     <mesh onClick={handleClick} onAfterRender={captureScreenshot}>

example/src/demos/default/ResetProps.tsx

@@ -4,14 +4,14 @@ import { useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
 
 function AdaptivePixelRatio() {
-  const gl = useThree((state) => state.gl)
+  const renderer = useThree((state) => state.renderer)
   const current = useThree((state) => state.performance.current)
   const initialDpr = useThree((state) => state.viewport.initialDpr)
   const setDpr = useThree((state) => state.setDpr)
 
   // Restore initial pixelratio on unmount
   useEffect(() => {
-    const domElement = gl.domElement
+    const domElement = renderer.domElement
     return () => {
       setDpr(initialDpr)
       domElement.style.imageRendering = 'auto'
@@ -21,7 +21,7 @@ function AdaptivePixelRatio() {
   // Set adaptive pixelratio
   useEffect(() => {
     setDpr(current * initialDpr)
-    gl.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated'
+    renderer.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated'
   }, [current])
 
   return null

example/src/demos/webgpu/WebGPUMotionBlur.tsx

@@ -78,7 +78,7 @@ function AnimatedCharacter({ speed = 1 }: { speed?: number }) {
   const group = useRef<THREE.Group>(null!)
   const [model, setModel] = useState<THREE.Group | null>(cachedModel?.scene ?? null)
   const mixerRef = useRef<THREE.AnimationMixer | null>(cachedModel?.mixer ?? null)
-  const renderer = useThree((s) => s.gl) as unknown as THREE.WebGPURenderer
+  const renderer = useThree((state) => state.renderer)
 
   // Load GLTF model directly (not using drei's useGLTF for WebGPU compatibility)
   useEffect(() => {