wgsl-noise Demo

// Welcome to the 'wgsl-noise' demo!

// You can find shader code in the 'shaderSource.js' tab.

// Find 'wgsl-noise' here:

//   GitHub: https://github.com/ZRNOF/wgsl-noise

//   NPM: https://www.npmjs.com/package/wgsl-noise

// 

// 'wgsl-noise' features GLSL-to-WGSL-converted noise functions from 'webgl-noise'.

// Big thank you to Stefan Gustavson for the help!

// 

// Check out the noise sources:

//   ashima/webgl-noise: https://github.com/ashima/webgl-noise

//   stegu/webgl-noise: https://github.com/stegu/webgl-noise

//   psrdnoise: https://github.com/stegu/psrdnoise

// 

// This demo uses 'Tweakpane' for GUI, with 'Drage' for draggable Tweakpane.

// I use my 'Orton' as WebGPU tool.

// 

// Tweakpane by Hiroki Kokubun: https://github.com/cocopon/tweakpane

// Drage by Zaron Chen: https://github.com/ZRNOF/Drage

// Orton by Zaron Chen: https://github.com/ZRNOF/Orton

​

import { Orton, Data, } from "https://cdn.jsdelivr.net/npm/orton@0.0.0/dist/Orton.min.js"

import { vert, frag } from "./shaderSource.js"

import { PARAMS, pane } from "./panel.js"

​

const canvas = document.querySelector("canvas")

​

async function main() {

  const O = await Orton.init(canvas)

  const device = O.device

  O.context.configure({

    device,

    format: O.preferredFormat,

  })

​

  // prettier-ignore

  const position = [

  [-1, -1],

  [ 1, -1],

  [ 1,  1],

​

  [ 1,  1],

  [-1,  1],

  [-1, -1],

]

  const positionData = Data(position, "f32")

  const positionBuffer = O.Buffer(device, {

    size: positionData.byteLength,

    usage: ["VERTEX", "COPY_DST"],

  })

  O.queue.writeBuffer(positionBuffer, 0, positionData)

  const positionAttribute = O.createVertexAttribute({

    format: "float32x2",

    offset: 0,

    shaderLocation: 0,

  })

  const positionBufferLayout = O.createVertexBufferLayout({

    arrayStride: 8,

    attributes: [positionAttribute],

  })

​

  const noiseTypeData = Data(1, "i32")

  const noiseTypeUniformBuffer = O.Buffer(device, {

    label: "noiseType uniform",

    size: noiseTypeData.byteLength,

    usage: ["UNIFORM", "COPY_DST"],

  })

  O.queue.writeBuffer(noiseTypeUniformBuffer, 0, noiseTypeData)

  const noiseTypeUniformBinding = O.Binding({

    type: "uniform",

    visibility: ["FRAGMENT"],

    buffer: noiseTypeUniformBuffer,

  })

​

  const scaleData = Data(1)

  const scaleUniformBuffer = O.Buffer(device, {

    label: "scale uniform",

    size: scaleData.byteLength,

    usage: ["UNIFORM", "COPY_DST"],

  })

  O.queue.writeBuffer(scaleUniformBuffer, 0, scaleData)

  const scaleUniformBinding = O.Binding({

    type: "uniform",

    visibility: ["FRAGMENT"],

    buffer: scaleUniformBuffer,

  })

​

  const translateData = Data(4)

  const translateUniformBuffer = O.Buffer(device, {

    label: "translate uniform",

    size: translateData.byteLength,

    usage: ["UNIFORM", "COPY_DST"],

  })

  O.queue.writeBuffer(translateUniformBuffer, 0, translateData)

  const translateUniformBinding = O.Binding({

    type: "uniform",

    visibility: ["FRAGMENT"],

    buffer: translateUniformBuffer,

  })

​

  const periodData = Data(4)

  const periodUniformBuffer = O.Buffer(device, {

    label: "period uniform",

    size: periodData.byteLength,

    usage: ["UNIFORM", "COPY_DST"],

  })

  O.queue.writeBuffer(periodUniformBuffer, 0, periodData)

  const periodUniformBinding = O.Binding({

    type: "uniform",

    visibility: ["FRAGMENT"],

    buffer: periodUniformBuffer,

  })

​

  const normalizeData = Data(1)

  const normalizeUniformBuffer = O.Buffer(device, {

    label: "normalize uniform",

    size: normalizeData.byteLength,

    usage: ["UNIFORM", "COPY_DST"],

  })

  O.queue.writeBuffer(normalizeUniformBuffer, 0, normalizeData)

  const normalizeUniformBinding = O.Binding({

    type: "uniform",

    visibility: ["FRAGMENT"],

    buffer: normalizeUniformBuffer,

  })

​

  const BindGroup = O.BindGroup(device, [

    noiseTypeUniformBinding,

    scaleUniformBinding,

    translateUniformBinding,

    periodUniformBinding,

    normalizeUniformBinding,

  ])

​

  const renderPipeline = O.RenderPipeline(device, {

    layout: O.PipelineLayout(device, [BindGroup.layout]),

    vertex: O.Shader.Vertex(device, {

      code: vert,

      buffers: [positionBufferLayout],

    }),

    fragment: O.Shader.Fragment(device, {

      code: frag,

      targets: [{ format: O.preferredFormat }],

    }),

  })

​

  const Velocity = {

    x: 1 / 60,

    y: 1 / 60,

    z: 1 / 60,

    w: 1 / 60,

  }

  const adjustVel = (v, t, min, max) => (t > max || t < min ? -v : v)

​

  const render = () => {

    noiseTypeData[0] = PARAMS.Noise

    device.queue.writeBuffer(noiseTypeUniformBuffer, 0, noiseTypeData.buffer)

​

    scaleData[0] = PARAMS.Scale

    device.queue.writeBuffer(scaleUniformBuffer, 0, scaleData.buffer)

​

    Velocity.x = adjustVel(Velocity.x, PARAMS.Translate.x, -5, 5)

    Velocity.y = adjustVel(Velocity.y, PARAMS.Translate.y, -5, 5)

    Velocity.z = adjustVel(Velocity.z, PARAMS.Translate.z, -5, 5)

    Velocity.w = adjustVel(Velocity.w, PARAMS.Translate.w, -5, 5)

    PARAMS.Translate.x += Velocity.x * PARAMS.Animation.x

    PARAMS.Translate.y += Velocity.y * PARAMS.Animation.y

    PARAMS.Translate.z += Velocity.z * PARAMS.Animation.z

    PARAMS.Translate.w += Velocity.w * PARAMS.Animation.w

    translateData[0] = PARAMS.Translate.x

    translateData[1] = PARAMS.Translate.y

    translateData[2] = PARAMS.Translate.z

    translateData[3] = PARAMS.Translate.w

    device.queue.writeBuffer(translateUniformBuffer, 0, translateData.buffer)

​

    periodData[0] = PARAMS.Period.x

    periodData[1] = PARAMS.Period.y

    periodData[2] = PARAMS.Period.z

    periodData[3] = PARAMS.Period.w

    device.queue.writeBuffer(periodUniformBuffer, 0, periodData.buffer)

    normalizeData[0] = PARAMS.Normalize ? 1 : 0

    device.queue.writeBuffer(normalizeUniformBuffer, 0, normalizeData.buffer)

​

    const commandEncoder = O.CommandEncoder(device)

​

    const renderPassDescriptor = O.createRenderPassDescriptor({

      colorAttachments: [

        {

          clearValue: [0, 0, 0, 1],

          loadOp: "clear",

          storeOp: "store",

          view: O.createView(),

        },

      ],

    })

​

    O.beginRenderPass(commandEncoder, renderPassDescriptor)

      .setPipeline(renderPipeline)

      .setVertexBuffer(0, positionBuffer)

      .setBindGroup(0, BindGroup.bindGroup)

      .draw(position.length)

      .end()

​

    O.queue.submit([commandEncoder.finish()])

​

    pane.refresh()

​

    requestAnimationFrame(render)

  }

​

  render()

}

​

main()