From 04fe79134003c47b2cb0a3c8b771e088f31281ea Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sun, 4 Oct 2020 22:23:00 +0200
Subject: [PATCH] wip

---
 src/components/demos/Demo3.vue     |  2 ++
 src/components/demos/Demo4.vue     |  2 +-
 src/components/examples/Matcap.vue | 14 +++++++++++
 src/components/sliders/Slider1.vue |  2 +-
 src/core/Renderer.js               | 40 ++++++------------------------
 src/effects/FXAAPass.js            | 26 +++++++++++++++++++
 src/effects/index.js               |  2 ++
 src/materials/CubeTexture.js       |  1 +
 src/materials/Texture.js           |  1 +
 9 files changed, 56 insertions(+), 34 deletions(-)
 create mode 100644 src/components/examples/Matcap.vue
 create mode 100644 src/effects/FXAAPass.js

diff --git a/src/components/demos/Demo3.vue b/src/components/demos/Demo3.vue
index 3a3094d..14f4661 100644
--- a/src/components/demos/Demo3.vue
+++ b/src/components/demos/Demo3.vue
@@ -5,6 +5,8 @@
       <AmbientLight color="#808080" />
       <PointLight color="#ff6000" />
       <PointLight ref="light" color="#0060ff" :intensity="0.5" />
+      <PointLight color="#ff6000" :intensity="0.5" :position="{ x: 100}" />
+      <PointLight color="#0000ff" :intensity="0.5" :position="{ x: -100}" />
 
       <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
         <BoxGeometry :width="2" :height="2" :depth="10" />
diff --git a/src/components/demos/Demo4.vue b/src/components/demos/Demo4.vue
index 73416d1..03a3eea 100644
--- a/src/components/demos/Demo4.vue
+++ b/src/components/demos/Demo4.vue
@@ -1,5 +1,5 @@
 <template>
-  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
+  <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" shadow>
     <Camera :position="{ z: 100 }" />
     <Scene>
       <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
diff --git a/src/components/examples/Matcap.vue b/src/components/examples/Matcap.vue
new file mode 100644
index 0000000..75a16a9
--- /dev/null
+++ b/src/components/examples/Matcap.vue
@@ -0,0 +1,14 @@
+<template>
+  <Renderer>
+    <Camera :position="{ x: 0, y: 0, z: 10 }" />
+    <Scene>
+      <Sphere>
+        <MatcapMaterial name="2E763A_78A0B7_B3D1CF_14F209" />
+      </Sphere>
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+export default {};
+</script>
diff --git a/src/components/sliders/Slider1.vue b/src/components/sliders/Slider1.vue
index f72bf70..a60ea78 100644
--- a/src/components/sliders/Slider1.vue
+++ b/src/components/sliders/Slider1.vue
@@ -1,5 +1,5 @@
 <template>
-  <Renderer ref="renderer">
+  <Renderer ref="renderer" antialias>
     <Camera ref="camera" :position="{ z: 150 }"></Camera>
     <Scene ref="scene">
     </Scene>
diff --git a/src/core/Renderer.js b/src/core/Renderer.js
index 1583753..eb4d301 100644
--- a/src/core/Renderer.js
+++ b/src/core/Renderer.js
@@ -3,38 +3,14 @@ import useThree from './useThree';
 
 export default {
   props: {
-    antialias: {
-      type: Boolean,
-      default: true,
-    },
-    alpha: {
-      type: Boolean,
-      default: false,
-    },
-    autoClear: {
-      type: Boolean,
-      default: true,
-    },
-    shadow: {
-      type: Boolean,
-      default: false,
-    },
-    orbitCtrl: {
-      type: [Boolean, Object],
-      default: false,
-    },
-    mouseMove: {
-      type: [Boolean, String],
-      default: false,
-    },
-    mouseRaycast: {
-      type: Boolean,
-      default: false,
-    },
-    resize: {
-      type: [Boolean, String, Element],
-      default: 'window',
-    },
+    antialias: Boolean,
+    alpha: Boolean,
+    autoClear: { type: Boolean, default: true },
+    mouseMove: { type: [Boolean, String], default: false },
+    mouseRaycast: { type: Boolean, default: false },
+    orbitCtrl: { type: [Boolean, Object], default: false },
+    resize: { type: [Boolean, String, Element], default: 'window' },
+    shadow: Boolean,
     width: String,
     height: String,
   },
diff --git a/src/effects/FXAAPass.js b/src/effects/FXAAPass.js
new file mode 100644
index 0000000..00ebb80
--- /dev/null
+++ b/src/effects/FXAAPass.js
@@ -0,0 +1,26 @@
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
+import EffectPass from './EffectPass.js';
+
+export default {
+  extends: EffectPass,
+  mounted() {
+    const pass = new ShaderPass(FXAAShader);
+    this.passes.push(pass);
+    this.pass = pass;
+
+    this.resize();
+    this.three.onAfterResize(this.resize);
+  },
+  unmounted() {
+    this.three.offAfterResize(this.resize);
+  },
+  methods: {
+    resize() {
+      const { resolution } = this.pass.material.uniforms;
+      resolution.value.x = 1 / this.three.size.width;
+      resolution.value.y = 1 / this.three.size.height;
+    },
+  },
+  __hmrId: 'FXAAPass',
+};
diff --git a/src/effects/index.js b/src/effects/index.js
index 3d7cc8f..69348a7 100644
--- a/src/effects/index.js
+++ b/src/effects/index.js
@@ -1,7 +1,9 @@
 export { default as EffectComposer } from './EffectComposer.js';
 export { default as RenderPass } from './RenderPass.js';
+
 export { default as BokehPass } from './BokehPass.js';
 export { default as FilmPass } from './FilmPass.js';
+export { default as FXAAPass } from './FXAAPass.js';
 export { default as HalftonePass } from './HalftonePass.js';
 export { default as SAOPass } from './SAOPass.js';
 export { default as UnrealBloomPass } from './UnrealBloomPass.js';
diff --git a/src/materials/CubeTexture.js b/src/materials/CubeTexture.js
index 352396f..e1ba9bb 100644
--- a/src/materials/CubeTexture.js
+++ b/src/materials/CubeTexture.js
@@ -23,6 +23,7 @@ export default {
     watch(() => this.urls, this.refreshTexture);
   },
   unmounted() {
+    this.material.setTexture(null, this.id);
     this.texture.dispose();
   },
   methods: {
diff --git a/src/materials/Texture.js b/src/materials/Texture.js
index 62359ff..7c77070 100644
--- a/src/materials/Texture.js
+++ b/src/materials/Texture.js
@@ -16,6 +16,7 @@ export default {
     watch(() => this.src, this.refreshTexture);
   },
   unmounted() {
+    this.material.setTexture(null, this.id);
     this.texture.dispose();
   },
   methods: {