π¨ Hot shader replacement and in-browser error handling (Webpack only)
- webpack >= 3 (examples works on version 3, 4 & 5)
- @internet/hmr webpack loader to wrap your shaders in a hmr special object
- glslify-loader is recommended to load your shader
- three.js and regl are officialy supported but you can easily use it with another webgl library
# using npm $ npm install --save @internet/hotmaterial # using yarn $ yarn add @internet/hotmaterial
import hotmaterial from '@internet/hotmaterial/three' // import the three implementation const program = hotmaterial( // Your vertex shader - use the @internet/hmr loader as inline loader require('@internet/hmr!./shader.vert'), // Your fragment shader - use the @internet/hmr loader as inline loader require('@internet/hmr!./shader.frag'), // Options (see below) {} ) const geometry = new THREE.PlaneBufferGeometry() // Decorate your three Material with the program function // Do not declare vertexShader and fragmentShader in the Three Material. // hotmaterial will automatically set and reload shader source const material = program(new THREE.RawShaderMaterial({ uniforms: { time: { type: 'f', value: 0 } } })) const mesh = new THREE.Mesh(geometry, material)
import regl from 'regl' import hotmaterial from '@internet/hotmaterial' const program = hotmaterial( // Your vertex shader - use the @internet/hmr loader as inline loader require('@internet/hmr!./shader.vert'), // Your fragment shader - use the @internet/hmr loader as inline loader require('@internet/hmr!./shader.frag'), // Options (see below) {} ) const draw = regl({ frag: program.frag, // frag is a function returning the current fragment shader source vert: program.vert, // vert is a function returning the current vertex shader source attributes: { position: [ -2, 0, 0, -2, 2, 2 ] }, count: 3 })
vertis a function returning the current vertex shader sourcefragis a function returning the current fragment shader source
- Default:
false - Set it to
trueto disable all reloading / code validation features.
- Default:
null - Called before any shader updates, with the shader source as first argument
- Use this to return a modified shaded content before the validation step
- Default:
null - Called after a valid shader update, with vertex and fragment shader as first and second args.
- DidUpdate is only called when shaders are valids (and just after setup)
- You can use it for custom implementations of
hot material
- Same as
willUpdateproperty but called only before a vertex shader update
- Same as
willUpdateproperty but called only before a fragment shader update
- Same as
didUpdateproperty but called only after a fragment shader update
- Same as
didUpdateproperty but called only after a vertex shader update
Use willUpdate, fragWillUpdate and vertWillUpdate to customize shader code before any update from hotmaterial
import injectDefines from 'glsl-inject-defines' import hotmaterial from 'hotmaterial' const program = hotmaterial( require('@internet/hmr!./shader.vert'), require('@internet/hmr!./shader.frag'), { fragWillUpdate: (fragment) => injectDefines(fragment, { PI: 3.14 }) } )
$ npm run example:regl $ npm run example:three
MIT.
hotmaterial is a package of the @internet npm scope.
@internet is a collection of opinionated and interoperables front-end npm ES6 modules, with minimal external dependencies.