let refract
let bg
let amount
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL)
  amount = createSlider(0, 100, 50, 0.1)
  bg = createFramebuffer()
  refract = baseMaterialShader().modify(() => {
    const bgTex =
      uniformTexture(() => bg)
    const bgSize =
      uniformVec2(() => [bg.width, bg.height])
    const refractDist =
      uniformFloat(() => amount.value() / 800)
    let position = sharedVec3()
    let normal = sharedVec3()
    getCameraInputs((inputs) => {
      position = inputs.position
      normal = inputs.normal
      return inputs
    })
    getFinalColor(() => {
      let toSurface = -normalize(position)
      let reflected = reflect(
        toSurface,
        normalize(normal)
      )
      let coord = position.xy / bgSize + 0.5
      coord += reflected.xy * refractDist
      return getTexture(bgTex, coord)
    })
  })
}
function draw() {
  clear()
  bg.draw(() => {
    clear()
    drawParentToCanvas()
  })
  push()
  noStroke()
  shader(refract)
  sphere(min(width, height) * 0.45)
  pop()
}