Juliabulb

Video Lecture

Section	Video Links
Juliabulb

Description

We will practice concepts that we've already scene, but use a fractal algorithm known as the Juliabulb.

Working Example

<>

The Juliabulb Algorithm

The Juliabulb algorithm is very similar to the Mandelbulb algorithm, except that we have a constant position that we add the scaled position to.

- p.addAssign(position)
+ p.addAssign(this.juliaC)

Start Scripts

./src/SDFScene.ts

import {
  Break,
  float,
  If,
  Loop,
  normalize,
  uniform,
  vec2,
  vec3,
  Fn,
  positionLocal,
  abs,
  sin,
  cos,
  time
} from 'three/tsl'
import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js'
import ShadowMarcher from './ShadowMarcher'
import AmbientOcclusion from './AmbientOcclusion'
import { atmosphericScattering } from './AtmosphericScattering'
import Juliabulb from './Juliabulb'

export default class SDFScene {
  private static options = {
    maxSteps: 256,
    surfaceDistance: 0.0001,
    cameraNear: 0.1,
    cameraFar: 100.0
  }

  private static maxSteps = uniform(this.options.maxSteps)
  private static surfaceDistance = uniform(this.options.surfaceDistance)
  private static cameraNear = uniform(this.options.cameraNear)
  private static cameraFar = uniform(this.options.cameraFar)

  private static scene = Fn(([position]: [any]) => {
    return vec2(Juliabulb.scene(position), 0).toVar()
  })

  private static getNormal = Fn(
    ([position, distance]: [any, any]) => {
      const offset = vec2(0.0025, 0)

      return normalize(
        distance.sub(
          vec3(
            this.scene(position.sub(offset.xyy)).x,
            this.scene(position.sub(offset.yxy)).x,
            this.scene(position.sub(offset.yyx)).x
          )
        )
      )
    }
  )

  static render = Fn(([rayOrigin_immutable]: [any]) => {
    const rayOrigin = rayOrigin_immutable.toVar()

    const p = positionLocal

    const rayDirection = normalize(p).toVar()

    const t = time //.div(5)
    //const lightPosition = vec3(0, 50, this.cameraFar.negate())
    //const lightPosition = vec3(0, sin(t).mul(30).add(43), this.cameraFar.negate())
    const lightPosition = vec3(sin(t).mul(this.cameraFar), 50, cos(t).mul(this.cameraFar))
    //const lightPosition = vec3(sin(t).mul(this.cameraFar), sin(t).mul(40).add(50), cos(t).mul(this.cameraFar))
    const lightDirection = normalize(lightPosition.sub(p)).toVar()

    const skyColour = atmosphericScattering(p, normalize(lightPosition)).toVar()
    const finalColour = skyColour.toVar()

    const accumulatedDistance = float(this.cameraNear).toVar()

    const distance = vec2(0).toVar()
    const position = vec3(0).toVar()

    Loop({ start: 0, end: this.maxSteps, condition: '<' }, () => {
      position.assign(rayOrigin.add(rayDirection.mul(accumulatedDistance)))
      distance.assign(this.scene(position))

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

      accumulatedDistance.addAssign(distance.x.mul(0.6))
    })

    const normal = this.getNormal(position, distance.x).toVar()

    If(accumulatedDistance.lessThan(this.cameraFar), () => {
      finalColour.assign(Juliabulb.render(position, normal, rayDirection, lightPosition, lightDirection))
    })

    return finalColour
  })

  static setGUI(gui: GUI) {
    const folder = gui.addFolder('SDF Scene')
    folder
      .add(this.options, 'maxSteps', 1, 512, 1)
      .name('Raymarch Max Steps')
      .onChange((v) => {
        this.maxSteps.value = v
      })
    folder
      .add(this.options, 'surfaceDistance', 0, 0.01, 0.0001)
      .name('Surface Distance')
      .onChange((v) => {
        this.surfaceDistance.value = v
      })
    folder
      .add(this.options, 'cameraNear', 0.0001, 10, 0.1)
      .name('Camera Near')
      .onChange((v) => {
        this.cameraNear.value = v
      })
    folder
      .add(this.options, 'cameraFar', 1, 512, 0.1)
      .name('Camera Far')
      .onChange((v) => {
        this.cameraFar.value = v
      })
    folder.close()

    Juliabulb.setGUI(gui)
    ShadowMarcher.setGUI(gui)
    AmbientOcclusion.setGUI(gui)
  }
}

./src/Juliabulb.ts

import {
  clamp,
  cos,
  dot,
  float,
  Fn,
  sin,
  uniform,
  vec3,
  length,
  Loop,
  If,
  Break,
  acos,
  atan,
  pow,
  log,
  reflect,
  normalize,
  mix
} from 'three/tsl'
import GUI from 'three/examples/jsm/libs/lil-gui.module.min.js'
import AmbientOcclusion from './AmbientOcclusion'
import ShadowMarcher from './ShadowMarcher'
import { atmosphericScattering } from './AtmosphericScattering'
import { Vector3 } from 'three'

export default class Juliabulb {
  private static options = {
    power: 8,
    iterations: 8,
    juliaC: new Vector3(-0.8, 0.62, -0.07)
  }

  private static power = uniform(this.options.power)
  private static iterations = uniform(this.options.iterations)
  private static juliaC = uniform(this.options.juliaC)

  static scene = Fn(([position]: [any]) => {
    const p = position.toVar()

    const r = float(0).toVar()
    const dr = float(1).toVar()

    Loop({ start: 0, end: this.iterations, condition: '<' }, () => {
      r.assign(length(p))

      If(r.greaterThan(2), () => {
        Break()
      })

      // Update the derivative accumulator based on radius
      const r_pow = r.pow(this.power.sub(1.0))
      dr.assign(r_pow.mul(this.power).mul(dr).add(1.0))

      // Convert to spherical coordinates
      const theta = acos(clamp(p.z.div(r), -1.0, 1.0))
      const phi = atan(p.y, p.x)

      // Scale by the fractal power
      const pr = pow(r, this.power)
      theta.mulAssign(this.power)
      phi.mulAssign(this.power)

      // Convert back to cartesian
      p.assign(pr.mul(vec3(sin(theta).mul(cos(phi)), sin(theta).mul(sin(phi)), cos(theta))))

      // Add to the Julia vec3 constant
      p.addAssign(this.juliaC)
    })

    return log(r).mul(r).div(dr).mul(0.5)
  })

  static render = Fn(
    ([position, normal, rayDirection, lightPosition, lightDirection]: [
      any,
      any,
      any,
      any,
      any
    ]) => {
      const diffuse = clamp(dot(normal, lightDirection), 0.75, 1).toVar()
      const shadow = ShadowMarcher.render(position.add(normal.mul(0.001)), lightDirection, this.scene)
      const colour = atmosphericScattering(reflect(rayDirection, normal), normalize(lightPosition))
      colour.assign(mix(colour.mul(shadow), diffuse.mul(normal).mul(0.5).add(0.5), shadow))
      colour.mulAssign(AmbientOcclusion.render(position, normal, this.scene))

      return colour
    }
  )

  static setGUI(gui: GUI) {
    const folder = gui.addFolder('Juliabulb')
    folder.add(this.options.juliaC, 'x', -1.0, 1.0, 0.01).onChange((v) => (this.juliaC.value.x = v))
    folder.add(this.options.juliaC, 'y', -1.0, 1.0, 0.01).onChange((v) => (this.juliaC.value.y = v))
    folder.add(this.options.juliaC, 'z', -1.0, 1.0, 0.01).onChange((v) => (this.juliaC.value.z = v))
    folder
      .add(this.options, 'power', 2, 20, 0.1)
      .name('Power')
      .onChange((v) => {
        this.power.value = v
      })
    folder
      .add(this.options, 'iterations', 1, 20, 1)
      .name('Iterations')
      .onChange((v) => {
        this.iterations.value = v
      })
    //folder.close()
  }
}

Useful Links

Amoeba Juliabulb (shadertoy)