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.
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' })
})