diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 43f4bc6..a4ed919 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -1,18 +1,33 @@ +import { ShaderMaterial } from 'three'; +import { watch } from 'vue'; +import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; + export default { inject: ['three', 'mesh'], props: { - uniforms: Object, - vertexShader: String, - fragmentShader: String, + uniforms: { type: Object, default: () => {} }, + vertexShader: { type: String, default: defaultVertexShader }, + fragmentShader: { type: String, default: defaultFragmentShader }, }, created() { this.createMaterial(); - this.mesh.setMaterial(this.material); - if (this.addWatchers) this.addWatchers(); + ['vertexShader', 'fragmentShader'].forEach(p => { + watch(() => this[p], () => { + // recreate material if we change either shader + this.material.dispose(); + this.createMaterial(); + }); + }); }, unmounted() { this.material.dispose(); }, + methods: { + createMaterial() { + this.material = new ShaderMaterial(propsValues(this.$props)); + this.mesh.setMaterial(this.material); + }, + }, render() { return []; }, diff --git a/src/materials/index.js b/src/materials/index.js index 87719ac..af0be33 100644 --- a/src/materials/index.js +++ b/src/materials/index.js @@ -3,10 +3,10 @@ export { default as LambertMaterial } from './LambertMaterial.js'; export { default as MatcapMaterial } from './MatcapMaterial.js'; export { default as PhongMaterial } from './PhongMaterial.js'; export { default as PhysicalMaterial } from './PhysicalMaterial.js'; +export { default as ShaderMaterial } from './ShaderMaterial.js'; export { default as StandardMaterial } from './StandardMaterial.js'; export { default as SubSurfaceMaterial } from './SubSurfaceMaterial.js'; export { default as ToonMaterial } from './ToonMaterial.js'; - export { default as Texture } from './Texture.js'; export { default as CubeTexture } from './CubeTexture.js'; diff --git a/src/tools.js b/src/tools.js index 428b97a..4e61729 100644 --- a/src/tools.js +++ b/src/tools.js @@ -73,3 +73,19 @@ function getMatcapFormatString(format) { return ''; } } + +// shader defaults +export const defaultVertexShader = ` +varying vec2 vUv; + +void main(){ + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); +}`; + +export const defaultFragmentShader = ` +varying vec2 vUv; + +void main() { + gl_FragColor = vec4(vUv.x, vUv.y, 0., 1.0); +}`; \ No newline at end of file