Starting default shader material

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,
+    vertexShader: { type: String, default: defaultVertexShader },
-    fragmentShader: String,
+    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 [];
   },

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