@takram/three-geospatial 0.8.0 → 0.9.1

package/src/webgpu/TemporalAntialiasNode.ts

@@ -20,7 +20,6 @@ import {
   mix,
   screenCoordinate,
   screenUV,
-  select,
   sqrt,
   step,
   struct,
@@ -77,8 +76,15 @@ function isSupportedCamera(camera: Camera): camera is SupportedCamera {
   )
 }
 
+interface RenderPipelineContext {
+  context: {
+    onBeforeRenderPipeline?: () => void
+    onAfterRenderPipeline?: () => void
+  }
+}
+
 interface PostProcessingContext {
-  context?: {
+  context: {
     onBeforePostProcessing?: () => void
     onAfterPostProcessing?: () => void
   }
@@ -101,11 +107,9 @@ const clipAABB = /*#__PURE__*/ FnLayout({
   const vUnit = vClip.xyz.div(eClip)
   const absUnit = vUnit.abs().toConst()
   const maxUnit = max(absUnit.x, absUnit.y, absUnit.z).toConst()
-  return select(
-    maxUnit.greaterThan(1),
-    vec4(pClip, current.a).add(vClip.div(maxUnit)),
-    history
-  )
+  return maxUnit
+    .greaterThan(1)
+    .select(vec4(pClip, current.a).add(vClip.div(maxUnit)), history)
 })
 
 const varianceOffsets = [
@@ -166,12 +170,17 @@ const currentDepthStruct = /*#__PURE__*/ struct({
 })
 
 const getCurrentDepth = /*#__PURE__*/ FnVar(
-  (depthNode: TextureNode, inputCoord: Node<'ivec2'>) => {
+  (depthNode: TextureNode, inputCoord: Node<'ivec2'>) => builder => {
     const closestCoord = ivec2(0).toVar()
     const closestDepth = float(1).toVar()
     for (const [x, y] of neighborOffsets) {
       const neighbor = inputCoord.add(ivec2(x, y)).toConst()
-      const depth = depthNode.load(neighbor).r.toConst()
+      let depth = depthNode.load(neighbor).r
+      if (builder.renderer.reversedDepthBuffer) {
+        depth = depth.oneMinus()
+      }
+      depth = depth.toConst()
+
       If(depth.lessThan(closestDepth), () => {
         closestCoord.assign(neighbor)
         closestDepth.assign(depth)
@@ -181,7 +190,7 @@ const getCurrentDepth = /*#__PURE__*/ FnVar(
   }
 )
 
-const subpixelCorrection = FnVar(
+const subpixelCorrection = /*#__PURE__#*/ FnVar(
   (velocityUV: Node<'vec2'>, textureSize: Node<'ivec2'>): Node<'float'> => {
     const velocityTexel = velocityUV.mul(textureSize)
     const phase = velocityTexel.fract().abs()
@@ -236,18 +245,17 @@ export class TemporalAntialiasNode extends TempNode {
   velocityThreshold = uniform(0.1)
   depthError = uniform(0.001)
 
-  // Static options:
   debugShowRejection = false
 
   private readonly textureNode: TextureNode
 
-  private resolveRT = this.createRenderTarget('Resolve')
-  private historyRT = this.createRenderTarget('History')
+  private resolveRT = this.createRenderTarget('resolve')
+  private historyRT = this.createRenderTarget('history')
   private previousDepthTexture?: DepthTexture
   private readonly resolveMaterial = new NodeMaterial()
   private readonly mesh = new QuadMesh()
   private rendererState?: RendererUtils.RendererState
-  private needsSyncPostProcessing = false
+  private needsSyncRenderPipeline = false
   private needsClearHistory = false
 
   private readonly resolveNode = texture(this.resolveRT.texture)
@@ -263,6 +271,10 @@ export class TemporalAntialiasNode extends TempNode {
     camera: Camera
   ) {
     super('vec4')
+    this.updateBeforeType = NodeUpdateType.FRAME
+    this.resolveMaterial.name = 'TemporalAntialias_resolve'
+    this.mesh.name = 'TemporalAntialias'
+
     this.inputNode = inputNode
     this.depthNode = depthNode
     this.velocityNode = velocityNode
@@ -272,8 +284,6 @@ export class TemporalAntialiasNode extends TempNode {
     this.camera = camera
 
     this.textureNode = outputTexture(this, this.resolveRT.texture)
-
-    this.updateBeforeType = NodeUpdateType.FRAME
   }
 
   override customCacheKey(): number {
@@ -292,7 +302,7 @@ export class TemporalAntialiasNode extends TempNode {
     texture.generateMipmaps = false
 
     const typeName = (this.constructor as typeof Node).type
-    texture.name = name != null ? `${typeName}.${name}` : typeName
+    texture.name = name != null ? `${typeName}_${name}` : typeName
 
     return renderTarget
   }
@@ -402,7 +412,7 @@ export class TemporalAntialiasNode extends TempNode {
     this.swapBuffers()
 
     // Don't jitter the camera in subsequent render passes if any:
-    if (this.needsSyncPostProcessing) {
+    if (this.needsSyncRenderPipeline) {
       this.clearViewOffset()
     }
   }
@@ -411,7 +421,7 @@ export class TemporalAntialiasNode extends TempNode {
     const getPreviousDepth = (uv: Node<'vec2'>): Node<'float'> => {
       const { previousDepthNode: depthNode } = this
       const depth = depthNode
-        .load(ivec2(uv.mul(textureSize(depthNode)).sub(0.5)))
+        .load(ivec2(uv.mul(depthNode.size()).sub(0.5)))
         .toConst()
       return renderer.logarithmicDepthBuffer
         ? logarithmicToPerspectiveDepth(
@@ -419,7 +429,9 @@ export class TemporalAntialiasNode extends TempNode {
             cameraNear(this.camera),
             cameraFar(this.camera)
           )
-        : depth
+        : renderer.reversedDepthBuffer
+          ? depth.oneMinus()
+          : depth
     }
 
     return Fn(() => {
@@ -485,7 +497,7 @@ export class TemporalAntialiasNode extends TempNode {
         // Reference: https://github.com/simco50/D3D12_Research/
         const temporalAlpha = mix(
           this.temporalAlpha,
-          0.8,
+          0.4,
           subpixelCorrection(velocityUVW.xy, textureSize(this.inputNode))
         ).saturate()
 
@@ -501,16 +513,23 @@ export class TemporalAntialiasNode extends TempNode {
   }
 
   override setup(builder: NodeBuilder): unknown {
-    const { context } = (builder.context.postProcessing ??
-      {}) as PostProcessingContext
-    if (context != null) {
-      const { onBeforePostProcessing } = context
-      context.onBeforePostProcessing = () => {
-        onBeforePostProcessing?.()
-        const size = builder.renderer.getDrawingBufferSize(sizeScratch)
-        this.setViewOffset(size.width, size.height)
-      }
-      this.needsSyncPostProcessing = true
+    // We have to take care of the renaming of PostProcessing to RenderPipeline
+    // in r183, as well as changes to property fields in the context.
+    const onBeforeRenderPipeline = (): void => {
+      const size = builder.renderer.getDrawingBufferSize(sizeScratch)
+      this.setViewOffset(size.width, size.height)
+    }
+    if (builder.context.renderPipeline != null) {
+      const { context } = builder.context
+        .renderPipeline as RenderPipelineContext
+      context.onBeforeRenderPipeline = onBeforeRenderPipeline
+      this.needsSyncRenderPipeline = true
+    }
+    if (builder.context.postProcessing != null) {
+      const { context } = builder.context
+        .postProcessing as PostProcessingContext
+      context.onBeforePostProcessing = onBeforeRenderPipeline
+      this.needsSyncRenderPipeline = true
     }
 
     const { resolveMaterial } = this

package/src/webgpu/accessors.ts

@@ -1,5 +1,17 @@
-import { Vector3, type Camera } from 'three'
-import { reference, uniform } from 'three/tsl'
+import type { Camera, Vector3 } from 'three'
+import {
+  cameraFar as cameraFarTSL,
+  cameraNear as cameraNearTSL,
+  cameraPosition,
+  cameraProjectionMatrix,
+  cameraProjectionMatrixInverse,
+  cameraViewMatrix,
+  cameraWorldMatrix,
+  Fn,
+  positionView,
+  reference,
+  uniform
+} from 'three/tsl'
 import type { UniformNode } from 'three/webgpu'
 
 import type { Node } from './node'
@@ -23,43 +35,67 @@ function getCache<T extends {}, U extends {}>(
   return (cache[name] ??= callback()) as U
 }
 
-export const projectionMatrix = (camera: Camera): Node<'mat4'> =>
-  getCache(camera, 'projectionMatrix', () =>
-    reference('projectionMatrix', 'mat4', camera).setName('projectionMatrix')
-  )
+export const projectionMatrix = (camera?: Camera | null): Node<'mat4'> =>
+  camera != null
+    ? getCache(camera, 'projectionMatrix', () =>
+        reference('projectionMatrix', 'mat4', camera).setName(
+          'projectionMatrix'
+        )
+      )
+    : cameraProjectionMatrix
 
-export const viewMatrix = (camera: Camera): Node<'mat4'> =>
-  getCache(camera, 'viewMatrix', () =>
-    reference('matrixWorldInverse', 'mat4', camera).setName('viewMatrix')
-  )
+export const viewMatrix = (camera?: Camera | null): Node<'mat4'> =>
+  camera != null
+    ? getCache(camera, 'viewMatrix', () =>
+        reference('matrixWorldInverse', 'mat4', camera).setName('viewMatrix')
+      )
+    : cameraViewMatrix
 
-export const inverseProjectionMatrix = (camera: Camera): Node<'mat4'> =>
-  getCache(camera, 'inverseProjectionMatrix', () =>
-    reference('projectionMatrixInverse', 'mat4', camera).setName(
-      'inverseProjectionMatrix'
-    )
-  )
+export const inverseProjectionMatrix = (
+  camera?: Camera | null
+): Node<'mat4'> =>
+  camera != null
+    ? getCache(camera, 'inverseProjectionMatrix', () =>
+        reference('projectionMatrixInverse', 'mat4', camera).setName(
+          'inverseProjectionMatrix'
+        )
+      )
+    : cameraProjectionMatrixInverse
 
-export const inverseViewMatrix = (camera: Camera): Node<'mat4'> =>
-  getCache(camera, 'inverseViewMatrix', () =>
-    reference('matrixWorld', 'mat4', camera).setName('inverseViewMatrix')
-  )
+export const inverseViewMatrix = (camera?: Camera | null): Node<'mat4'> =>
+  camera != null
+    ? getCache(camera, 'inverseViewMatrix', () =>
+        reference('matrixWorld', 'mat4', camera).setName('inverseViewMatrix')
+      )
+    : cameraWorldMatrix // TODO: Not always
 
-export const cameraPositionWorld = (camera: Camera): UniformNode<Vector3> =>
-  getCache(camera, 'cameraPositionWorld', () =>
-    uniform(new Vector3())
-      .setName('cameraPositionWorld')
-      .onRenderUpdate((_, { value }) => {
-        value.setFromMatrixPosition(camera.matrixWorld)
-      })
-  )
+export const cameraPositionWorld = (
+  camera?: Camera | null
+): UniformNode<Vector3> =>
+  camera != null
+    ? getCache(camera, 'cameraPositionWorld', () =>
+        uniform('vec3')
+          .setName('cameraPositionWorld')
+          .onRenderUpdate((_, { value }) => {
+            value.setFromMatrixPosition(camera.matrixWorld)
+          })
+      )
+    : cameraPosition
 
-export const cameraNear = (camera: Camera): Node<'float'> =>
-  getCache(camera, 'cameraNear', () =>
-    reference('near', 'float', camera).setName('cameraNear')
-  )
+export const cameraNear = (camera?: Camera | null): Node<'float'> =>
+  camera != null
+    ? getCache(camera, 'cameraNear', () =>
+        reference('near', 'float', camera).setName('cameraNear')
+      )
+    : cameraNearTSL
 
-export const cameraFar = (camera: Camera): Node<'float'> =>
-  getCache(camera, 'cameraFar', () =>
-    reference('far', 'float', camera).setName('cameraFar')
-  )
+export const cameraFar = (camera?: Camera | null): Node<'float'> =>
+  camera != null
+    ? getCache(camera, 'cameraFar', () =>
+        reference('far', 'float', camera).setName('cameraFar')
+      )
+    : cameraFarTSL
+
+export const viewZ = Fn((): Node<'float'> => positionView.z)
+  .once()()
+  .toVar('viewZ')

package/src/webgpu/debug.ts

@@ -6,65 +6,56 @@ import { QuadGeometry } from '../QuadGeometry'
 
 async function debugShader(
   renderer: Renderer,
-  mesh: Mesh
-): Promise<
-  Awaited<{
-    fragmentShader: string | null
-    vertexShader: string | null
-  }>
-> {
-  return await renderer.debug
-    .getShaderAsync(new Scene(), new Camera(), mesh)
-    .then(result => {
-      return result
-    })
-    .catch((error: unknown) => {
-      console.error(error)
-      return { fragmentShader: null, vertexShader: null }
-    })
+  material: NodeMaterial
+): Promise<{
+  vertexShader: string | null
+  fragmentShader: string | null
+}> {
+  const mesh = new Mesh(new QuadGeometry(), material)
+  try {
+    return await renderer.debug.getShaderAsync(new Scene(), new Camera(), mesh)
+  } catch (error: unknown) {
+    console.error(error)
+    return { vertexShader: null, fragmentShader: null }
+  } finally {
+    mesh.geometry.dispose()
+  }
 }
 
-export function debugFragmentNode(
+export async function debugMaterial(
   renderer: Renderer,
   material: NodeMaterial
-): void {
-  const mesh = new Mesh(new QuadGeometry(), material)
-  void debugShader(renderer, mesh)
-    .then(result => {
-      console.log(result.fragmentShader)
-    })
-    .finally(() => {
-      mesh.geometry.dispose()
-    })
+): Promise<string | null> {
+  const { vertexShader, fragmentShader } = await debugShader(renderer, material)
+  return vertexShader != null && fragmentShader != null
+    ? `// Vertex shader\n\n${vertexShader}\n// Fragment shader\n\n${fragmentShader}`
+    : null
 }
 
-export function debugVertexNode(
+export async function debugVertexNode(
   renderer: Renderer,
   material: NodeMaterial
-): void {
-  const mesh = new Mesh(new QuadGeometry(), material)
-  void debugShader(renderer, mesh)
-    .then(result => {
-      console.log(result.vertexShader)
-    })
-    .finally(() => {
-      mesh.geometry.dispose()
-    })
+): Promise<string | null> {
+  return (await debugShader(renderer, material)).vertexShader
+}
+
+export async function debugFragmentNode(
+  renderer: Renderer,
+  material: NodeMaterial
+): Promise<string | null> {
+  return (await debugShader(renderer, material)).fragmentShader
 }
 
-export function debugNode(renderer: Renderer, node: Node): void {
+export async function debugNode(
+  renderer: Renderer,
+  node: Node
+): Promise<string | null> {
   const material = new NodeMaterial()
   material.vertexNode = vec4(positionGeometry.xy, 0, 1)
-  material.fragmentNode = node
-  const mesh = new Mesh(new QuadGeometry(), material)
-  void debugShader(renderer, mesh)
-    .then(result => {
-      console.log(result.fragmentShader)
-    })
-    .finally(() => {
-      material.dispose()
-      mesh.geometry.dispose()
-    })
+  material.fragmentNode = node.toConst('debugNode')
+  const shader = await debugShader(renderer, material)
+  material.dispose()
+  return shader.fragmentShader
 }
 
 export function hookFunction<

package/src/webgpu/events.ts

@@ -0,0 +1,18 @@
+import { OnBeforeObjectUpdate, OnObjectUpdate } from 'three/tsl'
+import { NodeUpdateType, type Node, type NodeFrame } from 'three/webgpu'
+
+// TODO: File a PR for these:
+
+export const OnFrameUpdate = (callback: (frame: NodeFrame) => void): Node => {
+  const node = OnObjectUpdate(callback)
+  node.updateType = NodeUpdateType.NONE
+  return node
+}
+
+export const OnBeforeFrameUpdate = (
+  callback: (frame: NodeFrame) => void
+): Node => {
+  const node = OnBeforeObjectUpdate(callback)
+  node.updateBeforeType = NodeUpdateType.FRAME
+  return node
+}

package/src/webgpu/index.ts

@@ -1,6 +1,8 @@
 export * from './accessors'
+export * from './CascadedShadowMapsNode'
 export * from './debug'
 export * from './DownsampleThresholdNode'
+export * from './events'
 export * from './FnLayout'
 export * from './FnVar'
 export * from './GaussianBlurNode'
@@ -16,6 +18,8 @@ export * from './OutputTexture3DNode'
 export * from './OutputTextureNode'
 export * from './sampling'
 export * from './ScreenSpaceShadowNode'
+export * from './STBNTextureNode'
+export * from './StorageTexture3DNode'
 export * from './TemporalAntialiasNode'
 export * from './transformations'
 export * from './utils'

package/src/webgpu/math.ts

@@ -1,8 +1,110 @@
-import { dot, If, sqrt, struct, vec2, vec4 } from 'three/tsl'
+import {
+  bool,
+  bvec2,
+  bvec3,
+  bvec4,
+  dot,
+  If,
+  overloadingFn,
+  sqrt,
+  struct,
+  uvec2,
+  uvec3,
+  uvec4,
+  vec2
+} from 'three/tsl'
 
+import { FnLayout } from './FnLayout'
 import { FnVar } from './FnVar'
 import type { Node } from './node'
 
+const bvec2Not = /*#__PURE__*/ FnLayout({
+  name: 'bvec2Not',
+  type: 'bvec2',
+  inputs: [{ name: 'x', type: 'bvec2' }]
+})(([x]) => x.notEqual(bool(true)))
+
+const bvec3Not = /*#__PURE__*/ FnLayout({
+  name: 'bvec3Not',
+  type: 'bvec3',
+  inputs: [{ name: 'x', type: 'bvec3' }]
+})(([x]) => x.notEqual(bool(true)))
+
+const bvec4Not = /*#__PURE__*/ FnLayout({
+  name: 'bvec4Not',
+  type: 'bvec4',
+  inputs: [{ name: 'x', type: 'bvec4' }]
+})(([x]) => x.notEqual(bool(true)))
+
+// WORKAROUND: PR on this https://github.com/mrdoob/three.js/pull/33442
+export const bvecNot = /*#__PURE__*/ overloadingFn([
+  bvec2Not,
+  bvec3Not,
+  bvec4Not
+])
+
+const bvec2And = /*#__PURE__*/ FnLayout({
+  name: 'bvec2And',
+  type: 'bvec2',
+  inputs: [
+    { name: 'x', type: 'bvec2' },
+    { name: 'y', type: 'bvec2' }
+  ]
+})(([x, y]) => bvec2(uvec2(x).mul(uvec2(y))))
+
+const bvec3And = /*#__PURE__*/ FnLayout({
+  name: 'bvec3And',
+  type: 'bvec3',
+  inputs: [
+    { name: 'x', type: 'bvec3' },
+    { name: 'y', type: 'bvec3' }
+  ]
+})(([x, y]) => bvec3(uvec3(x).mul(uvec3(y))))
+
+const bvec4And = /*#__PURE__*/ FnLayout({
+  name: 'bvec4And',
+  type: 'bvec4',
+  inputs: [
+    { name: 'x', type: 'bvec4' },
+    { name: 'y', type: 'bvec4' }
+  ]
+})(([x, y]) => bvec4(uvec4(x).mul(uvec4(y))))
+
+export const bvecAnd = /*#__PURE__*/ overloadingFn([
+  bvec2And,
+  bvec3And,
+  bvec4And
+])
+
+const bvec2Or = /*#__PURE__*/ FnLayout({
+  name: 'bvec2Or',
+  type: 'bvec2',
+  inputs: [
+    { name: 'x', type: 'bvec2' },
+    { name: 'y', type: 'bvec2' }
+  ]
+})(([x, y]) => uvec2(x).add(uvec2(y)).notEqual(0))
+
+const bvec3Or = /*#__PURE__*/ FnLayout({
+  name: 'bvec3Or',
+  type: 'bvec3',
+  inputs: [
+    { name: 'x', type: 'bvec3' },
+    { name: 'y', type: 'bvec3' }
+  ]
+})(([x, y]) => uvec3(x).add(uvec3(y)).notEqual(0))
+
+const bvec4Or = /*#__PURE__*/ FnLayout({
+  name: 'bvec4Or',
+  type: 'bvec4',
+  inputs: [
+    { name: 'x', type: 'bvec4' },
+    { name: 'y', type: 'bvec4' }
+  ]
+})(([x, y]) => uvec4(x).add(uvec4(y)).notEqual(0))
+
+export const bvecOr = /*#__PURE__*/ overloadingFn([bvec2Or, bvec3Or, bvec4Or])
+
 // Reference: https://iquilezles.org/articles/intersectors/
 
 export const raySphereIntersection = /*#__PURE__*/ FnVar(
@@ -15,7 +117,7 @@ export const raySphereIntersection = /*#__PURE__*/ FnVar(
     const a = rayOrigin.sub(center)
     const b = dot(rayDirection, a)
     const c = dot(a, a).sub(radius.pow2())
-    const discriminant = b.pow2().sub(c).toVar()
+    const discriminant = b.pow2().sub(c).toConst()
 
     const intersection = vec2(-1)
     If(discriminant.greaterThanEqual(0), () => {
@@ -26,10 +128,10 @@ export const raySphereIntersection = /*#__PURE__*/ FnVar(
   }
 )
 
-export const raySpheresIntersectionsStruct = /*#__PURE__*/ struct(
-  { near: 'vec4', far: 'vec4' },
-  'raySpheresIntersections'
-)
+export const raySpheresIntersectionsStruct = /*#__PURE__*/ struct({
+  near: 'vec4',
+  far: 'vec4'
+})
 
 // Derive ray-sphere intersections with multiple radii at once:
 export const raySpheresIntersections = /*#__PURE__*/ FnVar(
@@ -42,15 +144,14 @@ export const raySpheresIntersections = /*#__PURE__*/ FnVar(
     const a = rayOrigin.sub(center)
     const b = dot(rayDirection, a)
     const c = dot(a, a).sub(radii.pow2())
-    const discriminant = b.pow2().sub(c).toVar()
+    const discriminant = b.pow2().sub(c).toConst()
 
-    const near = vec4(-1)
-    const far = vec4(-1)
-    If(discriminant.greaterThanEqual(0), () => {
-      const Q = sqrt(discriminant)
-      near.assign(b.negate().sub(Q))
-      far.assign(b.negate().add(Q))
-    })
+    // Reference: https://github.com/GameTechDev/OutdoorLightScattering/blob/master/fx/Common.fxh#L148
+    const mask = vec2(discriminant.greaterThanEqual(0)).toConst()
+    const inverseMask = mask.oneMinus().toConst()
+    const Q = sqrt(discriminant.max(0)).toConst()
+    const near = mask.mul(b.negate().sub(Q)).sub(inverseMask)
+    const far = mask.mul(b.negate().add(Q)).sub(inverseMask)
     return raySpheresIntersectionsStruct(near, far)
   }
 )
@@ -69,7 +170,7 @@ export const rayEllipsoidIntersection = /*#__PURE__*/ FnVar(
     const discriminant = b
       .pow2()
       .sub(a.mul(c.sub(1)))
-      .toVar()
+      .toConst()
 
     const intersections = vec2(-1)
     If(discriminant.greaterThanEqual(0), () => {

package/src/webgpu/sampling.ts

@@ -1,16 +1,50 @@
-import { add, sub, textureSize, vec2 } from 'three/tsl'
-import type { TextureNode } from 'three/webgpu'
+import { add, ivec2, ivec4, sub, uv, vec2, vec4 } from 'three/tsl'
+import type { ConstNode, TextureNode } from 'three/webgpu'
 
+import { reinterpretType } from '../types'
 import { FnVar } from './FnVar'
 import type { Node } from './node'
 
+const components = ['x', 'y', 'z', 'w'] as const
+
+// WORKAROUND: TextureNode doesn't have gather() yet.
+// See: https://www.w3.org/TR/WGSL/#texturegather
+export const textureGather = /*#__PURE__*/ FnVar(
+  (
+    textureNode: TextureNode,
+    uvNode: Node<'vec2'>,
+    component = 0
+  ): Node<'vec4'> => {
+    let componentValue
+    if (typeof component === 'number') {
+      componentValue = component
+    } else if ((component as any)?.isConstNode === true) {
+      reinterpretType<ConstNode<number>>(component)
+      componentValue = component.value
+    } else {
+      throw new Error('Component must be a constant.')
+    }
+
+    const size = textureNode.size()
+    const coord = ivec2(uvNode.mul(size).sub(0.5).floor()).toConst()
+    const i = ivec4(coord, coord.add(1)).toConst()
+    const c = components[componentValue] // element() fails for depth textures
+    return vec4(
+      textureNode.load(i.xw)[c], // min, max
+      textureNode.load(i.zw)[c], // max, max
+      textureNode.load(i.zy)[c], // max, min
+      textureNode.load(i.xy)[c] // min, min
+    )
+  }
+)
+
 // 9-taps version of Catmull-Rom sampling.
 // Reference: https://gist.github.com/TheRealMJP/c83b8c0f46b63f3a88a5986f4fa982b1
 export const textureCatmullRom = /*#__PURE__*/ FnVar(
-  (textureNode: TextureNode, uv: Node<'vec2'>): Node<'vec4'> => {
-    const size = vec2(textureSize(textureNode))
+  (textureNode: TextureNode, uvNode: Node<'vec2'> = uv()): Node<'vec4'> => {
+    const size = vec2(textureNode.size())
     const texelSize = size.reciprocal()
-    const position = uv.mul(size)
+    const position = uvNode.mul(size)
     const centerPosition = position.sub(0.5).floor().add(0.5)
 
     // Compute the fractional offset from our starting texel to our original