diff --git a/example/src/demos/default/FlushSync.tsx b/example/src/demos/default/FlushSync.tsx
index 37d451a6b3..7c4d66259c 100644
--- a/example/src/demos/default/FlushSync.tsx
+++ b/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}>
diff --git a/example/src/demos/default/ResetProps.tsx b/example/src/demos/default/ResetProps.tsx
index 034fc613c5..fd6c5bb8b0 100644
--- a/example/src/demos/default/ResetProps.tsx
+++ b/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
diff --git a/example/src/demos/webgpu/Fog.tsx b/example/src/demos/webgpu/Fog.tsx
deleted file mode 100644
index 519fbe3f97..0000000000
--- a/example/src/demos/webgpu/Fog.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useThree } from '@react-three/fiber/webgpu'
-import { useEffect } from 'react'
-import { useControls } from 'leva'
-import { useUniforms } from '@react-three/fiber/webgpu'
-import { useLocalNodes } from '@react-three/fiber/src/webgpu/hooks/useNodes'
-import { uniform, fog, color, float, positionView, triNoise3D, positionWorld, normalWorld } from 'three/tsl'
-
-export const Fog = () => {
-  const { scene } = useThree()
-
-  //* Leva Controls ==============================
-  const levaUniforms = useControls('Fog', {
-    // Colors - Sky gradient and fog color
-    skyColor: { value: '#f0f5f5', label: 'Sky Color' },
-    groundColor: { value: '#d0dee7', label: 'Fog Color' },
-
-    // Distance Fade - How fog appears based on camera distance
-    fogStart: { value: 0, min: 0, max: 100, step: 1, label: 'Fog Start Distance' },
-    fogEnd: { value: 50, min: 10, max: 200, step: 1, label: 'Fog End Distance' },
-
-    // Height Fog - Controls vertical fog distribution
-    fogHeight: { value: 0, min: -20, max: 20, step: 0.5, label: 'Fog Base Height' },
-    fogDensity: { value: 0.85, min: 0, max: 2, step: 0.01, label: 'Fog Density' },
-    fogFalloff: { value: 2, min: 0.5, max: 5, step: 0.1, label: 'Height Falloff' },
-    fogThickness: { value: 20, min: 1, max: 100, step: 1, label: 'Fog Layer Thickness' },
-
-    // Animated Noise - Adds moving/shifting fog effect
-    noiseSpeed: { value: 1.2, min: 0, max: 5, step: 0.1, label: 'Noise Animation Speed' },
-    noiseScale: { value: 0.01, min: 0.001, max: 0.1, step: 0.001, label: 'Noise Detail' },
-    noiseStrength: { value: 0.2, min: 0, max: 1, step: 0.01, label: 'Noise Strength' },
-  })
-
-  //* Apply Uniforms ==============================
-  useUniforms(levaUniforms, 'fog')
-
-  //* Create Fog Nodes ==============================
-  const { fogNode, backgroundNode } = useLocalNodes(({ uniforms }) => {
-    const u = uniforms.fog as UniformRecord
-
-    // Timer for animated noise
-    const timer = uniform(0).onFrameUpdate((frame) => frame.time)
-
-    // Colors
-    const skyColor = color(u.skyColor)
-    const groundColor = color(u.groundColor)
-
-    // Distance-based fog fade (closer = less fog, farther = more fog)
-    const distanceFade = positionView.z.negate().smoothstep(u.fogStart, u.fogEnd)
-
-    // Height-based fog calculation
-    // Fog is strongest at fogHeight, falls off above and below
-    const heightAboveFog = positionWorld.y.sub(u.fogHeight)
-    const heightFogAmount = float(u.fogThickness)
-      .sub(heightAboveFog)
-      .div(u.fogThickness)
-      .pow(u.fogFalloff)
-      .saturate()
-      .mul(u.fogDensity)
-
-    // Animated noise for fog variation (makes it look more natural/volumetric)
-    const noiseScaleA = u.noiseScale
-    const noiseScaleB = u.noiseScale.mul(2) // Second layer is 2x frequency
-    const fogNoiseA = triNoise3D(positionWorld.mul(noiseScaleA), u.noiseStrength, timer)
-    const fogNoiseB = triNoise3D(positionWorld.mul(noiseScaleB), u.noiseStrength, timer.mul(u.noiseSpeed))
-
-    const fogNoise = fogNoiseA.add(fogNoiseB).mul(groundColor)
-
-    // Combine distance fade + height fog for final fog amount
-    const finalFogAmount = distanceFade.mul(heightFogAmount)
-
-    // Final fog node (color + opacity)
-    const fogNode = fog(distanceFade.oneMinus().mix(groundColor, fogNoise), finalFogAmount)
-
-    // Background gradient (horizon to sky)
-    const backgroundNode = normalWorld.y.max(0).mix(groundColor, skyColor)
-
-    return {
-      fogNode,
-      backgroundNode,
-    }
-  })
-
-  //* Apply to Scene ==============================
-  useEffect(() => {
-    scene.fogNode = fogNode
-    scene.backgroundNode = backgroundNode
-  }, [scene, fogNode, backgroundNode])
-
-  return null
-}
diff --git a/example/src/demos/webgpu/WebGPUMotionBlur.tsx b/example/src/demos/webgpu/WebGPUMotionBlur.tsx
index a8c196c0ba..a681904207 100644
--- a/example/src/demos/webgpu/WebGPUMotionBlur.tsx
+++ b/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(() => {