Merge pull request #23 from SaFrMo/shader-textures

Shader texture proof of concept

src/materials/CubeTexture.js

@@ -13,7 +13,7 @@ export default {
     onLoad: Function,
     onProgress: Function,
     onError: Function,
-    id: { type: String, default: 'envMap' },
+    name: { type: String, default: 'envMap' },
     refraction: Boolean,
     // todo: remove ?
     refractionRatio: { type: Number, default: 0.98 },
@@ -24,7 +24,7 @@ export default {
     watch(() => this.urls, this.refreshTexture);
   },
   unmounted() {
-    this.material.setTexture(null, this.id);
+    this.material.setTexture(null, this.name);
     this.texture.dispose();
   },
   methods: {
@@ -35,7 +35,7 @@ export default {
     },
     refreshTexture() {
       this.createTexture();
-      this.material.setTexture(this.texture, this.id);
+      this.material.setTexture(this.texture, this.name);
       if (this.refraction) {
         this.texture.mapping = CubeRefractionMapping;
         this.material.setProp('refractionRatio', this.refractionRatio);

src/materials/ShaderMaterial.js

@@ -9,6 +9,11 @@ export default {
     vertexShader: { type: String, default: defaultVertexShader },
     fragmentShader: { type: String, default: defaultFragmentShader },
   },
+  provide() {
+    return {
+      material: this,
+    };
+  },
   created() {
     this.createMaterial();
     ['vertexShader', 'fragmentShader'].forEach(p => {
@@ -29,7 +34,7 @@ export default {
     },
   },
   render() {
-    return [];
+    return this.$slots.default ? this.$slots.default() : [];
   },
   __hmrId: 'ShaderMaterial',
 };

src/materials/Texture.js

@@ -6,7 +6,8 @@ export default {
   inject: ['material'],
   emits: ['loaded'],
   props: {
-    id: { type: String, default: 'map' },
+    name: { type: String, default: 'map' },
+    uniform: { type: String, default: null },
     src: String,
     onLoad: Function,
     onProgress: Function,
@@ -25,7 +26,7 @@ export default {
     watch(() => this.src, this.refreshTexture);
   },
   unmounted() {
-    this.material.setTexture(null, this.id);
+    if (this.material && this.material.setTexture) this.material.setTexture(null, this.name);
     this.texture.dispose();
   },
   methods: {
@@ -38,7 +39,17 @@ export default {
     },
     refreshTexture() {
       this.createTexture();
-      this.material.setTexture(this.texture, this.id);
+      // handle standard material
+      if (this.material && this.material.setTexture) { this.material.setTexture(this.texture, this.name); }
+      // handle shader material
+      else if (this.material && this.material.material.type === "ShaderMaterial") {
+        // require a `uniform` prop so we know what to call the uniform
+        if (!this.uniform) {
+          console.warn('"uniform" prop required to use texture in a shader.')
+          return
+        }
+        this.material.uniforms[this.uniform] = { value: this.texture };
+      }
     },
     onLoaded() {
       if (this.onLoad) this.onLoad();