Merge pull request #19 from SaFrMo/shader-material

Shader material

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,
+    uniforms: { type: Object, default: () => {} },
-    vertexShader: String,
+    vertexShader: { type: String, default: defaultVertexShader },
-    fragmentShader: String,
+    fragmentShader: { type: String, default: defaultFragmentShader },
   },
   created() {
     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() {
     this.material.dispose();
   },
+  methods: {
+    createMaterial() {
+      this.material = new ShaderMaterial(propsValues(this.$props));
+      this.mesh.setMaterial(this.material);
+    },
+  },
   render() {
     return [];
   },

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';

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);
+}`;