1
0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00

improve ShaderMaterial

This commit is contained in:
Kevin LEVRON 2021-03-12 22:58:41 +01:00 committed by GitHub
parent f29435f1fa
commit 8dab3a6b74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,4 @@
import { ShaderMaterial } from 'three' import { ShaderMaterial } from 'three';
import { watch } from 'vue'; import { watch } from 'vue';
import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js'; import { propsValues, defaultFragmentShader, defaultVertexShader } from '../tools.js';
@ -11,8 +11,13 @@ export default {
}, },
created() { created() {
this.createMaterial(); this.createMaterial();
this.mesh.setMaterial(this.material); ['vertexShader', 'fragmentShader'].forEach(p => {
if (this.addWatchers) this.addWatchers(); watch(() => this[p], () => {
// recreate material if we change either shader
this.material.dispose();
this.createMaterial();
});
});
}, },
unmounted() { unmounted() {
this.material.dispose(); this.material.dispose();
@ -20,22 +25,7 @@ export default {
methods: { methods: {
createMaterial() { createMaterial() {
this.material = new ShaderMaterial(propsValues(this.$props)); this.material = new ShaderMaterial(propsValues(this.$props));
}, this.mesh.setMaterial(this.material);
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' }
);
});
}, },
}, },
render() { render() {