Raymarching

Video Lecture

Section	Video Links
Raymarching

Description

We can use Signed Distance Fields (SDF) to define shapes and scenes, but if we want to view our SDF shapes in 3D, then we can use raymarching.

Raymarching will help us to calculate the distances to SDF shapes in 3D space. We will also be able to calculate the normal in which we can then use to calculate the lighting effects.

So in this first example, imagine a position in space, this is the camera position, and it is scanning a coordinate in a some direction, and the fragment shader will raymarch along that direction until it hits a surface. We can then use that information to color the returned pixel.

The Process Of Raymarching

The steps of raymarching are basically,

• March along a ray and check the distance to some potential object at each step.
• If the ray gets within a chosen surface distance tolerance, then we will assume that it has hit an object in the world space.
• It's is an optimized algorithm in the way it jumps forward each step at a distance equal to the nearest point of any SDF shape around it.

<>

Working Example

<>

Start Script

./src/main.ts

import './style.css'
import * as THREE from 'three/webgpu'
import {
  positionLocal,
  Fn,
  If,
  Loop,
  Break,
  float,
  vec2,
  vec3,
  min,
  max,
  length,
  normalize,
  cross,
  dot,
  time,
  sin,
  cos,
  abs,
  negate,
  uniform,
  atan,
} from 'three/tsl'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  53,
  window.innerWidth / window.innerHeight,
  0.1,
  10
)
camera.position.set(-5, 5, 4)

const renderer = new THREE.WebGPURenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
renderer.setAnimationLoop(animate)

window.addEventListener('resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.y = 0.25

const options = {
  zoom: 0.1,
  maxSteps: 256,
  surfaceDistance: 0.0001,
  cameraNear: 0.1,
  cameraFar: 128.0,
}

const cameraPosition = uniform(new THREE.Vector3())
const cameraTarget = uniform(new THREE.Vector3())
const zoom = uniform(options.zoom)
const maxSteps = uniform(options.maxSteps)
const surfaceDistance = uniform(options.surfaceDistance)
const cameraNear = uniform(options.cameraNear)
const cameraFar = uniform(options.cameraFar)

// @ts-ignore
const rotateAroundAxis = Fn(([position, axis, radians]) => {
  axis = normalize(axis)

  const cosTheta = cos(radians)
  const sinTheta = sin(radians)

  const rotatedPoint = position
    .mul(cosTheta)
    .add(cross(axis, position).mul(sinTheta))
    .add(axis.mul(dot(axis, position).mul(cosTheta.oneMinus())))

  return rotatedPoint
})

// @ts-ignore
const Sphere = Fn(([position, radius]) => {
  return length(position).sub(radius)
})

// @ts-ignore
const Ellipse = Fn(([position, scale]) => {
  const distance = position.div(scale)
  return length(distance)
    .sub(1)
    .mul(min(min(scale.x, scale.y), scale.z))
})

// @ts-ignore
const Torus = Fn(([position, majorRadius, minorRadius]) => {
  const distance = length(position.xz).sub(majorRadius)
  return length(vec2(distance, position.y)).sub(minorRadius)
})

// @ts-ignore
const Box = Fn(([position, dimensions]) => {
  const distance = abs(position).sub(dimensions)
  return length(max(distance, 0.0)) // better if you don't need internal calculations. E.g, intersect or subtraction
  //return length(max(distance, 0.0)).add(min(max(distance.x, distance.y), 0.0)) // for 2D SDF
  //return length(max(distance, 0.0)).add(min(max(distance.x, max(distance.y, distance.z)), 0.0)) // 3D SDF
})

// @ts-ignore
const Cylinder = Fn(([position, radius, height]) => {
  const distance = vec2(
    length(position.xz).sub(radius),
    position.y.abs().sub(height)
  )
  return length(max(distance, 0.0)).add(min(max(distance.x, distance.y), 0.0))
})

// @ts-ignore
const CorrugatedCylinder = Fn(([position, radius, height]) => {
  const angle = atan(position.x, position.z)
  const bumps = cos(angle.mul(8)).mul(float(0.15))
  const distance = vec2(
    length(position.xz).sub(radius).add(bumps),
    position.y.abs().sub(height)
  )
  return length(max(distance, 0.0)).add(min(max(distance.x, distance.y), 0.0))
})

// @ts-ignore
const IntersectedSphereBox = Fn(([position, radius]) => {
  const circle = length(position).sub(radius.add(0.33))
  const box = Box(position, vec3(radius))
  return max(circle, box)
})

// @ts-ignore
const SubtractedSphereBox = Fn(([position, radius]) => {
  const circle = length(position).sub(radius.add(0.33))
  const box = Box(position, vec3(radius))
  return max(negate(circle), box)
})

// @ts-ignore
const UnionedSphereBox = Fn(([position, radius]) => {
  const circle = length(position).sub(radius.add(0.33))
  const box = Box(position, vec3(radius))
  return min(circle, box)
})

// @ts-ignore
const sdfScene = Fn(([position]) => {
  //const t = time.mul(0.5)

  const sphere = Sphere(position.sub(vec3(0, 1, 0)), 1)
  const ellipse = Ellipse(position.sub(vec3(0, 1, 3)), vec3(1, 0.5, 1))
  const torus = Torus(position.sub(vec3(3, 1, 3)), 1, 0.5)
  const box = Box(position.sub(vec3(3, 1, 0)), vec3(1))
  // const cylinder = Cylinder(position.sub(vec3(3, 1, -3)), 1, 1)
  // const corrugatedCylinder = CorrugatedCylinder(position.sub(vec3(0, 1, -3)), 1, 1)
  // const intersectedSphereBox = IntersectedSphereBox(position.sub(vec3(-3, 1, -3)), 1)
  // const subtractedSphereBox = SubtractedSphereBox(position.sub(vec3(-3, 1, 0)), 1)
  // const unionedSphereBox = UnionedSphereBox(position.sub(vec3(-3, 1, 3)), 1)

  const distance = sphere.toVar()
  distance.assign(min(distance, ellipse))
  distance.assign(min(distance, torus))
  distance.assign(min(distance, box))
  // distance.assign(min(distance, cylinder))
  // distance.assign(min(distance, corrugatedCylinder))
  // distance.assign(min(distance, intersectedSphereBox))
  // distance.assign(min(distance, subtractedSphereBox))
  // distance.assign(min(distance, unionedSphereBox))

  return distance
})

// @ts-ignore
const getNormal = Fn(([position, distance]) => {
  const offset = vec2(0.025, 0)

  return normalize(
    distance.sub(
      vec3(
        sdfScene(position.sub(offset.xyy)),
        sdfScene(position.sub(offset.yxy)),
        sdfScene(position.sub(offset.yyx))
      )
    )
  )
})

// @ts-ignore
const main = Fn(() => {
  const p = positionLocal

  const rayOrigin = vec3(-5, 5, 4) //cameraPosition
  const lookAt = vec3(0, 5, 0) //cameraTarget

  const forward = normalize(lookAt.sub(rayOrigin))
  const rayDirection = normalize(p.add(forward.mul(zoom)))

  const accumulatedDistance = float(cameraNear).toVar()
  const distance = float(0).toVar()
  const position = vec3(0).toVar()

  // @ts-ignore
  Loop({ start: 0, end: maxSteps }, () => {
    position.assign(rayOrigin.add(rayDirection.mul(accumulatedDistance)))
    distance.assign(sdfScene(position))

    If(
      abs(distance)
        .lessThan(surfaceDistance)
        .or(accumulatedDistance.greaterThan(cameraFar)),
      () => {
        Break()
      }
    )

    accumulatedDistance.addAssign(distance)
  })

  const finalColour = getNormal(position, distance)

  return finalColour
})

scene.backgroundNode = main()

const gui = new GUI({ width: 600 })
gui
  .add(options, 'zoom', 0, 10, 0.001)
  .name('Zoom')
  .onChange((v) => {
    zoom.value = v
  })
gui
  .add(options, 'maxSteps', 1, 512, 1)
  .name('Raymarch Max Steps')
  .onChange((v) => {
    maxSteps.value = v
  })
gui
  .add(options, 'surfaceDistance', 0, 0.1, 0.0001)
  .name('Surface Distance')
  .onChange((v) => {
    surfaceDistance.value = v
  })
gui
  .add(options, 'cameraNear', 0.0001, 10, 0.1)
  .name('Camera Near')
  .onChange((v) => {
    cameraNear.value = v
  })
gui
  .add(options, 'cameraFar', 1, 512, 0.1)
  .name('Camera Far')
  .onChange((v) => {
    cameraFar.value = v
  })

function animate() {
  controls.update()

  cameraPosition.value.copy(camera.position)
  cameraTarget.value.copy(controls.target)

  renderer.render(scene, camera)
}

Final Script

./src/main.ts

import './style.css'
import * as THREE from 'three/webgpu'
import {
  positionLocal,
  Fn,
  If,
  Loop,
  Break,
  float,
  vec2,
  vec3,
  min,
  max,
  length,
  normalize,
  cross,
  dot,
  time,
  sin,
  cos,
  abs,
  negate,
  uniform,
  atan,
} from 'three/tsl'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  53,
  window.innerWidth / window.innerHeight,
  0.1,
  10
)
camera.position.set(-5, 5, 4)

const renderer = new THREE.WebGPURenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
renderer.setAnimationLoop(animate)

window.addEventListener('resize', function () {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.target.y = 0.25

const options = {
  zoom: 0.1,
  maxSteps: 256,
  surfaceDistance: 0.0001,
  cameraNear: 0.1,
  cameraFar: 256.0,
}

const cameraPosition = uniform(new THREE.Vector3())
const cameraTarget = uniform(new THREE.Vector3())
const zoom = uniform(options.zoom)
const maxSteps = uniform(options.maxSteps)
const surfaceDistance = uniform(options.surfaceDistance)
const cameraNear = uniform(options.cameraNear)
const cameraFar = uniform(options.cameraFar)

// @ts-ignore
const rotateAroundAxis = Fn(([position, axis, radians]) => {
  axis = normalize(axis)

  const cosTheta = cos(radians)
  const sinTheta = sin(radians)

  const rotatedPoint = position
    .mul(cosTheta)
    .add(cross(axis, position).mul(sinTheta))
    .add(axis.mul(dot(axis, position).mul(cosTheta.oneMinus())))

  return rotatedPoint
})

// @ts-ignore
const Sphere = Fn(([position, radius]) => {
  return length(position).sub(radius)
})

// @ts-ignore
const Ellipse = Fn(([position, scale]) => {
  const distance = position.div(scale)
  return length(distance)
    .sub(1)
    .mul(min(min(scale.x, scale.y), scale.z))
})

// @ts-ignore
const Torus = Fn(([position, majorRadius, minorRadius]) => {
  const distance = length(position.xz).sub(majorRadius)
  return length(vec2(distance, position.y)).sub(minorRadius)
})

// @ts-ignore
const Box = Fn(([position, dimensions]) => {
  const distance = abs(position).sub(dimensions)
  //return length(max(distance, 0.0)) // better if you don't need internal calculations. E.g, intersect or subtraction
  //return length(max(distance, 0.0)).add(min(max(distance.x, distance.y), 0.0)) // for 2D SDF
  return length(max(distance, 0.0)).add(
    min(max(distance.x, max(distance.y, distance.z)), 0.0)
  ) // 3D SDF
})

// @ts-ignore
const Cylinder = Fn(([position, radius, height]) => {
  const distance = vec2(
    length(position.xz).sub(radius),
    position.y.abs().sub(height)
  )
  return length(max(distance, 0.0)).add(min(max(distance.x, distance.y), 0.0))
})

// @ts-ignore
const CorrugatedCylinder = Fn(([position, radius, height]) => {
  const angle = atan(position.x, position.z)
  const bumps = cos(angle.mul(8).mul(sin(time))).mul(float(0.15))
  const distance = vec2(
    length(position.xz).sub(radius).add(bumps),
    position.y.abs().sub(height)
  )
  return length(max(distance, 0.0)).add(min(max(distance.x, distance.y), 0.0))
})

// @ts-ignore
const IntersectedSphereBox = Fn(([position, radius]) => {
  const circle = length(position).sub(radius.add(0.33))
  const box = Box(position, vec3(radius))
  return max(circle, box)
})

// @ts-ignore
const SubtractedSphereBox = Fn(([position, radius]) => {
  const circle = length(position).sub(radius.add(0.33))
  const box = Box(position, vec3(radius))
  return max(negate(circle), box)
})

// @ts-ignore
const UnionedSphereBox = Fn(([position, radius]) => {
  const circle = length(position).sub(radius.add(0.33))
  const box = Box(position, vec3(radius))
  return min(circle, box)
})

// @ts-ignore
const sdfScene = Fn(([position]) => {
  const t = time.mul(0.5)

  const sphere = Sphere(position.sub(vec3(0, 1, 0)), 1)
  const ellipse = Ellipse(
    rotateAroundAxis(position.sub(vec3(0, 1, 3)), vec3(1, 0.5, 0), t),
    vec3(1, 0.5, 1)
  )
  const torus = Torus(
    rotateAroundAxis(position.sub(vec3(3, 1, 3)), vec3(0.5, 0, 1), t),
    1,
    0.5
  )
  const box = Box(
    rotateAroundAxis(position.sub(vec3(3, 1, 0)), vec3(0, 0.5, 1), t),
    vec3(1)
  )
  const cylinder = Cylinder(
    rotateAroundAxis(position.sub(vec3(3, 1, -3)), vec3(1, 0, 1), t),
    1,
    1
  )
  const corrugatedCylinder = CorrugatedCylinder(
    rotateAroundAxis(position.sub(vec3(0, 1, -3)), vec3(1, 1, 0), t),
    1,
    1
  )
  const intersectedSphereBox = IntersectedSphereBox(
    rotateAroundAxis(position.sub(vec3(-3, 1, -3)), vec3(0.5, 0.5, 0.5), t),
    1
  )
  const subtractedSphereBox = SubtractedSphereBox(
    rotateAroundAxis(position.sub(vec3(-3, 1, 0)), vec3(0, 1, 1), t),
    1
  )
  const unionedSphereBox = UnionedSphereBox(
    rotateAroundAxis(position.sub(vec3(-3, 1, 3)), vec3(1, 1, 0.5), t),
    1
  )

  const distance = sphere.toVar()
  distance.assign(min(distance, ellipse))
  distance.assign(min(distance, torus))
  distance.assign(min(distance, box))
  distance.assign(min(distance, cylinder))
  distance.assign(min(distance, corrugatedCylinder))
  distance.assign(min(distance, intersectedSphereBox))
  distance.assign(min(distance, subtractedSphereBox))
  distance.assign(min(distance, unionedSphereBox))

  return distance
})

// @ts-ignore
const getNormal = Fn(([position, distance]) => {
  const offset = vec2(0.025, 0)

  return normalize(
    distance.sub(
      vec3(
        sdfScene(position.sub(offset.xyy)),
        sdfScene(position.sub(offset.yxy)),
        sdfScene(position.sub(offset.yyx))
      )
    )
  )
})

// @ts-ignore
const main = Fn(() => {
  const p = positionLocal

  const rayOrigin = cameraPosition
  const lookAt = cameraTarget

  const forward = normalize(lookAt.sub(rayOrigin))
  const rayDirection = normalize(p.add(forward.mul(zoom)))

  const accumulatedDistance = float(cameraNear).toVar()
  const distance = float(0).toVar()
  const position = vec3(0).toVar()

  // @ts-ignore
  Loop({ start: 0, end: maxSteps }, () => {
    position.assign(rayOrigin.add(rayDirection.mul(accumulatedDistance)))
    distance.assign(sdfScene(position))

    If(
      abs(distance)
        .lessThan(surfaceDistance)
        .or(accumulatedDistance.greaterThan(cameraFar)),
      () => {
        Break()
      }
    )

    accumulatedDistance.addAssign(distance)
  })

  const finalColour = getNormal(position, distance)

  return finalColour
})

scene.backgroundNode = main()

const gui = new GUI({ width: 600 })
gui
  .add(options, 'zoom', 0, 10, 0.001)
  .name('Zoom')
  .onChange((v) => {
    zoom.value = v
  })
gui
  .add(options, 'maxSteps', 1, 512, 1)
  .name('Raymarch Max Steps')
  .onChange((v) => {
    maxSteps.value = v
  })
gui
  .add(options, 'surfaceDistance', 0, 0.1, 0.0001)
  .name('Surface Distance')
  .onChange((v) => {
    surfaceDistance.value = v
  })
gui
  .add(options, 'cameraNear', 0.0001, 10, 0.1)
  .name('Camera Near')
  .onChange((v) => {
    cameraNear.value = v
  })
gui
  .add(options, 'cameraFar', 1, 512, 0.1)
  .name('Camera Far')
  .onChange((v) => {
    cameraFar.value = v
  })

function animate() {
  controls.update()

  cameraPosition.value.copy(camera.position)
  cameraTarget.value.copy(controls.target)

  renderer.render(scene, camera)
}