Uniforms

Video Lecture

Section	Video Links
Uniform and UniformArray	SBCODE (Pay Per View)

×

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

• One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
• After successful purchase, the video will automatically start playing.
• You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
• Do not refresh the browser since it will invalidate the session.
• If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
• This Pay Per View option does not permit downloading this video for later viewing or sharing.
• All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

Uniforms are variables that we can create and use outside of the fragment shader. As each fragment is processed, it will have an identical copy of the value at that time.

In this lesson, we will create a GUI with several controls that allow us to modify the shader in real time using the TSL named imports of uniform and uniformArray.

Working Example

<>

Start Script

./src/main.ts

import './style.css'
import * as THREE from 'three/webgpu'
import {
  positionLocal,
  Fn,
  length,
  sin,
  time,
  vec3,
  pow,
  float,
  fract,
  max,
  abs,
} 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.z = 1

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.target.set(1, -1, 0)
controls.enableDamping = true

// const options = {
//   radius: 0.1,
// }

// const radius = uniform(options.radius)

const main = Fn(() => {
  const p = positionLocal.toVar()

  p.mulAssign(5)

  const radius = float(0.1)
  const intensity = 2

  const colours = [
    vec3(1.0, 0.05, 0.3),
    vec3(0.1, 0.4, 1.0),
    vec3(0.2, 1, 0.2),
  ]

  const finalColour = vec3().toVar()

  for (let i = 0; i < 3; i++) {
    p.mulAssign(sin(i).add(0.5))

    p.assign(fract(p).sub(0.5))

    const distance = length(p)

    distance.assign(sin(distance.mul(10).sub(time)))
    distance.assign(abs(distance))

    // glow equation = pow(radius/distance), intensity)
    distance.assign(pow(radius.div(distance), intensity))

    finalColour.assign(max(finalColour, colours[i].mul(distance)))
  }

  return finalColour
})

const material = new THREE.NodeMaterial()
material.fragmentNode = main()

const mesh = new THREE.Mesh(new THREE.PlaneGeometry(), material)
scene.add(mesh)

//scene.backgroundNode = main()

const gui = new GUI()
// gui.add(options, 'radius', 0, 1, 0.01).onChange((v) => {
//   radius.value = v
// })

function animate() {
  controls.update()

  renderer.render(scene, camera)
}

Final Script

./src/main.ts

import './style.css'
import * as THREE from 'three/webgpu'
import {
  positionLocal,
  Fn,
  length,
  sin,
  time,
  vec3,
  pow,
  //float,
  fract,
  max,
  uniform,
  abs,
  uniformArray,
} 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.z = 1

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.target.set(1, -1, 0)
controls.enableDamping = true

const options = {
  radius: 0.1,
  intensity: 2.0,
  zoom: 5.0,
  layerZoom: 0.5,
  rings: 10,
  colours: [
    new THREE.Color(1.0, 0.05, 0.3),
    new THREE.Color(0.1, 0.4, 1.0),
    new THREE.Color(0.2, 1, 0.2),
  ],
}

const radius = uniform(options.radius)
const intensity = uniform(options.intensity)
const zoom = uniform(options.zoom)
const layerZoom = uniform(options.layerZoom)
const rings = uniform(options.rings)
const colours = uniformArray(options.colours)

const main = Fn(() => {
  const p = positionLocal.toVar()

  p.mulAssign(zoom)

  //const radius = float(0.1)
  //const intensity = 2

  //const colours = [vec3(1.0, 0.05, 0.3), vec3(0.1, 0.4, 1.0), vec3(0.2, 1, 0.2)]

  const finalColour = vec3().toVar()

  for (let i = 0; i < 3; i++) {
    p.mulAssign(sin(i).add(layerZoom))

    p.assign(fract(p).sub(0.5))

    const distance = length(p)

    distance.assign(sin(distance.mul(rings).sub(time)))
    distance.assign(abs(distance))

    // glow equation = pow(radius/distance), intensity)
    distance.assign(pow(radius.div(distance), intensity))

    finalColour.assign(max(finalColour, colours.element(i).mul(distance)))
  }

  return finalColour
})

// const material = new THREE.NodeMaterial()
// material.fragmentNode = main()

// const mesh = new THREE.Mesh(new THREE.PlaneGeometry(), material)
// scene.add(mesh)

scene.backgroundNode = main()

const gui = new GUI()
gui.add(options, 'radius', 0, 1, 0.01).onChange((v) => {
  radius.value = v
})
gui.add(options, 'intensity', 0, 10, 0.01).onChange((v) => {
  intensity.value = v
})
gui.add(options, 'zoom', 0.2, 50, 0.01).onChange((v) => {
  zoom.value = v
})
gui.add(options, 'layerZoom', 0.1, 2, 0.01).onChange((v) => {
  layerZoom.value = v
})
gui.add(options, 'rings', 0, 50, 0.01).onChange((v) => {
  rings.value = v
})
gui.addColor(options.colours, 0)
gui.addColor(options.colours, 1)
gui.addColor(options.colours, 2)

function animate() {
  controls.update()

  renderer.render(scene, camera)
}