Worley Noise Generation

cpu-3d.js

import * as THREE from 'three'
import vertexShader from './shaders/vertex-shader.glsl'
import fragmentShader from './shaders/generator-shader.glsl'

export class WorleyNoiseAtlas extends THREE.Data3DTexture {
  constructor(renderer) {
    const camera = new THREE.OrthographicCamera()

    const geometry = new THREE.BufferGeometry()
    geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([-1, -1, 3, -1, -1, 3]), 2))
    geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array([0, 0, 2, 0, 0, 2]), 2))

    const material = new THREE.ShaderMaterial({
      uniforms: {
        zLevel: { value: 0.0 },
        numCells: { value: 2.0 },
      },
      vertexShader,
      fragmentShader,
    })

    const mesh = new THREE.Mesh(geometry, material)
    mesh.frustumCulled = false

    const resolution = 32
    const layers = 64
    const layerSize = 4 * resolution * resolution

    const rt = new THREE.WebGLRenderTarget(resolution, resolution)
    const data = new Uint8Array(layers * layerSize)
    const pixelBuffer = new Uint8Array(layerSize)

    for (let i = 0; i < layers; i++) {
      mesh.material.uniforms.zLevel.value = i / 4

      renderer.setRenderTarget(rt)
      renderer.render(mesh, camera)

      renderer.readRenderTargetPixels(rt, 0, 0, resolution, resolution, pixelBuffer)
      renderer.setRenderTarget(null)

      const offset = i * layerSize
      data.set(pixelBuffer, offset)
    }

    super(data, resolution, resolution, layers)
    this.minFilter = THREE.LinearFilter
    this.magFilter = THREE.LinearFilter
    this.wrapS = THREE.RepeatWrapping
    this.wrapT = THREE.RepeatWrapping
    this.wrapR = THREE.RepeatWrapping
    this.needsUpdate = true
  }
}

gpu-3d.js

import * as THREE from 'three'
import vertexShader from './shaders/vertex-shader.glsl'
import fragmentShader from './shaders/generator-shader.glsl'

export class WorleyNoiseAtlas extends THREE.Data3DTexture {
  constructor(renderer) {
    const camera = new THREE.OrthographicCamera()

    const geometry = new THREE.BufferGeometry()
    geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([-1, -1, 3, -1, -1, 3]), 2))
    geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array([0, 0, 2, 0, 0, 2]), 2))

    const material = new THREE.ShaderMaterial({
      uniforms: {
        zLevel: { value: 0.0 },
        numCells: { value: 2.0 },
      },
      vertexShader,
      fragmentShader,
    })

    const mesh = new THREE.Mesh(geometry, material)
    mesh.frustumCulled = false

    const resolution = 32
    const layers = 64

    const rt = new THREE.WebGL3DRenderTarget(resolution, resolution, layers)
    super(null, resolution, resolution, layers)
    this.minFilter = THREE.LinearFilter
    this.magFilter = THREE.LinearFilter
    this.wrapS = THREE.RepeatWrapping
    this.wrapT = THREE.RepeatWrapping
    this.wrapR = THREE.RepeatWrapping
    this.needsUpdate = true
    rt.texture = this

    for (let i = 0; i < layers; i++) {
      mesh.material.uniforms.zLevel.value = i / 4

      renderer.setRenderTarget(rt, i)
      renderer.render(mesh, camera)
      renderer.setRenderTarget(null)
    }
  }
}