Starter template for ogl with vite, vite-plugin-glsl and tweakpane. Provides a simple setup with typescirpt, orbit controls, post processing, shader hot module reload and bundle splitting in production.

ogl-starter.netlify.app#debug

yarn && yarn dev

There are 4 functions provided to make development easier

load Add a new promise to suspend the scene from rendering

load(new Promise((resolve) => {
  const texture = TextureLoader.load(gl, { src: '/noise.png' })
  program.uniforms.uMap.value = texture

  resolve(true)
}))

onLoad Gets invoced after all load promises are resolved

onLoad(() =>{
  document.querySelector("#loader").style.visiblity = "hidden"
})

onFrame Gets called every tick, provides deltaTime

onFrame((time, deltaTime) => {
  mesh.rotation.x = time
})

onDebug Provides access to tweakpane. In production this gets called by adding #debug to your url. This enables splitting tweakpane from the main bundle and lazy loading it.

onDebug(gui => {
  const folder = gui.addFolder({ title: 'Shape' })
})