From 5bd7bcc70fcf1494ac04b025347a25e365c26e61 Mon Sep 17 00:00:00 2001 From: Sander Moolin Date: Fri, 12 Mar 2021 09:29:10 -0500 Subject: [PATCH 1/5] Starting default shader material --- src/materials/ShaderMaterial.js | 12 ++++++++++-- src/tools.js | 16 ++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 43f4bc6..a2ce939 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -1,9 +1,12 @@ +import { ShaderMaterial } from 'three' +import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; + export default { inject: ['three', 'mesh'], props: { uniforms: Object, - vertexShader: String, - fragmentShader: String, + vertexShader: { type: String, default: defaultVertexShader }, + fragmentShader: { type: String, default: defaultFragmentShader }, }, created() { this.createMaterial(); @@ -13,6 +16,11 @@ export default { unmounted() { this.material.dispose(); }, + methods: { + createMaterial() { + this.material = new ShaderMaterial(propsValues(this.$props)); + }, + }, render() { return []; }, 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 From e9e2ac7bce621a77971f6dc87bb745d1eb6c8954 Mon Sep 17 00:00:00 2001 From: Sander Moolin Date: Fri, 12 Mar 2021 09:55:30 -0500 Subject: [PATCH 2/5] Uniforms working correctly --- src/materials/ShaderMaterial.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index a2ce939..4627cf0 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -1,10 +1,11 @@ import { ShaderMaterial } from 'three' +import { watch } from 'vue'; import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; export default { inject: ['three', 'mesh'], props: { - uniforms: Object, + uniforms: { type: Object, default: () => { } }, vertexShader: { type: String, default: defaultVertexShader }, fragmentShader: { type: String, default: defaultFragmentShader }, }, @@ -20,6 +21,16 @@ export default { createMaterial() { this.material = new ShaderMaterial(propsValues(this.$props)); }, + addWatchers() { + ['uniforms', 'vertexShader', 'fragmentShader'].forEach(p => { + watch(() => this[p], (value) => { + this.material[p] = value; + }, + // only watch deep on uniforms + { deep: p === 'uniforms' } + ); + }); + }, }, render() { return []; From 9183cabf6a29eab51739abf1aba079b6b16bc2aa Mon Sep 17 00:00:00 2001 From: Sander Moolin Date: Fri, 12 Mar 2021 15:11:23 -0500 Subject: [PATCH 3/5] Recreate material if vert/frag shaders change --- src/materials/ShaderMaterial.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 4627cf0..8c2b2de 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -25,6 +25,12 @@ export default { ['uniforms', 'vertexShader', 'fragmentShader'].forEach(p => { watch(() => this[p], (value) => { this.material[p] = value; + + if (p === 'vertexShader' || p === 'fragmentShader') { + // recreate material if we change either shader + this.material.dispose(); + this.createMaterial(); + } }, // only watch deep on uniforms { deep: p === 'uniforms' } From f29435f1faf5ccb0f482a244b0a7da44de09b596 Mon Sep 17 00:00:00 2001 From: Kevin LEVRON Date: Fri, 12 Mar 2021 22:30:56 +0100 Subject: [PATCH 4/5] export ShaderMaterial --- src/materials/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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'; From 8dab3a6b74a691ee212fcdd89f622b4b79689cad Mon Sep 17 00:00:00 2001 From: Kevin LEVRON Date: Fri, 12 Mar 2021 22:58:41 +0100 Subject: [PATCH 5/5] improve ShaderMaterial --- src/materials/ShaderMaterial.js | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js index 8c2b2de..a4ed919 100644 --- a/src/materials/ShaderMaterial.js +++ b/src/materials/ShaderMaterial.js @@ -1,18 +1,23 @@ -import { ShaderMaterial } from 'three' +import { ShaderMaterial } from 'three'; import { watch } from 'vue'; import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; export default { inject: ['three', 'mesh'], props: { - uniforms: { type: Object, default: () => { } }, + 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(); @@ -20,22 +25,7 @@ export default { methods: { createMaterial() { this.material = new ShaderMaterial(propsValues(this.$props)); - }, - addWatchers() { - ['uniforms', 'vertexShader', 'fragmentShader'].forEach(p => { - watch(() => this[p], (value) => { - this.material[p] = value; - - if (p === 'vertexShader' || p === 'fragmentShader') { - // recreate material if we change either shader - this.material.dispose(); - this.createMaterial(); - } - }, - // only watch deep on uniforms - { deep: p === 'uniforms' } - ); - }); + this.mesh.setMaterial(this.material); }, }, render() {