three-base 1.0.82 → 1.0.84

package/lib/planeModal1/PlaneModal1.js

@@ -4,173 +4,101 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-09 19:15:35
  */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, PlaneGeometry } from "three";
 import planeModalPNG from "./planeModal.png";
 // 平面模型弹窗
-var PlaneModal1 = /** @class */ (function (_super) {
-    __extends(PlaneModal1, _super);
-    function PlaneModal1(config) {
-        if (config === void 0) { config = {}; }
-        var _this = _super.call(this) || this;
-        _this.geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
-        _this.material = new MeshBasicMaterial({
-            side: DoubleSide,
-            transparent: true,
-            alphaTest: 0.01
-        });
-        _this.canvas = (function () {
-            var canvas = document.createElement("canvas");
-            canvas.width = 660;
-            canvas.height = 481;
-            return canvas;
-        })();
-        _this.context = _this.canvas.getContext("2d");
-        _this.texture = new CanvasTexture(_this.canvas);
-        // 配置
-        _this._config = {
-            size: 10,
-            title: "PlaneModal1",
-            titleColor: "#ffffff",
-            texts: []
-            // [
-            //     {
-            //         text: "1",
-            //         color: "#ffff00",
-            //         size: 40
-            //     },
-            //     {
-            //         text: "2",
-            //         color: "#ff00ff",
-            //         size: 40
-            //     },
-            // ]
-        };
-        _this.updata(config);
-        _this.material.map = _this.texture;
-        _this.scale.set(10, 10, 10);
-        return _this;
+export default class PlaneModal1 extends Mesh {
+    constructor(config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.scale.set(10, 10, 10);
     }
-    PlaneModal1.prototype.updata = function (config) {
-        return __awaiter(this, void 0, void 0, function () {
-            var textPos, maxWidth;
-            var _this = this;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        Object.assign(this._config, config);
-                        //绘制背景
-                        this.context.clearRect(0, 0, 660, 481);
-                        _a.label = 1;
-                    case 1:
-                        if (!!PlaneModal1.img.complete) return [3 /*break*/, 3];
-                        return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 100); })];
-                    case 2:
-                        _a.sent();
-                        return [3 /*break*/, 1];
-                    case 3:
-                        // 设置大小
-                        this.scale.set(this._config.size, this._config.size, this._config.size);
-                        // this.context.fillStyle = "#00000088";
-                        // this.context.fillRect(0, 0, 660, 481);
-                        //绘制背景
-                        this.context.drawImage(PlaneModal1.img, 0, 0);
-                        // 绘制标题
-                        this.context.fillStyle = this._config.titleColor;
-                        this.context.font = '40px serif'; // 设置字体大小
-                        this.context.textAlign = "left";
-                        this.context.textBaseline = "top";
-                        this.context.fillText(this._config.title, 60, 72);
-                        textPos = new Vector2(60, 150);
-                        maxWidth = 530;
-                        // 绘制内容
-                        this._config.texts.map(function (_a) {
-                            var _b = _a.text, text = _b === void 0 ? "text" : _b, _c = _a.color, color = _c === void 0 ? "#ffffff" : _c, _d = _a.size, size = _d === void 0 ? 40 : _d;
-                            _this.context.fillStyle = color;
-                            _this.context.font = "".concat(size, "px serif"); // 设置字体大小
-                            _this.context.textAlign = "left";
-                            _this.context.textBaseline = "top";
-                            // 字符分隔为数组
-                            var arrText = text.split('');
-                            var line = '';
-                            for (var n = 0; n < arrText.length; n++) {
-                                var metrics = _this.context.measureText(line + arrText[n]);
-                                var testWidth = metrics.width;
-                                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
-                                    _this.context.fillText(line, textPos.x, textPos.y);
-                                    line = "";
-                                    textPos.y += size;
-                                }
-                                else {
-                                    line += arrText[n];
-                                }
-                            }
-                            _this.context.fillText(line, textPos.x, textPos.y);
-                            textPos.y += size;
-                        });
-                        this.texture.needsUpdate = true;
-                        this.dispatchEvent({ type: "loaded" });
-                        return [2 /*return*/];
-                }
-            });
-        });
-    };
+    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        transparent: true,
+        alphaTest: 0.01
+    });
     // 背景图
-    PlaneModal1.img = (function () {
-        var img = new Image();
+    static img = (() => {
+        const img = new Image();
         img.src = planeModalPNG;
         return img;
     })();
-    return PlaneModal1;
-}(Mesh));
-export default PlaneModal1;
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 660;
+        canvas.height = 481;
+        return canvas;
+    })();
+    context = this.canvas.getContext("2d");
+    texture = new CanvasTexture(this.canvas);
+    // 配置
+    _config = {
+        size: 10,
+        title: "PlaneModal1",
+        titleColor: "#ffffff",
+        texts: []
+        // [
+        //     {
+        //         text: "1",
+        //         color: "#ffff00",
+        //         size: 40
+        //     },
+        //     {
+        //         text: "2",
+        //         color: "#ff00ff",
+        //         size: 40
+        //     },
+        // ]
+    };
+    async updata(config) {
+        Object.assign(this._config, config);
+        //绘制背景
+        this.context.clearRect(0, 0, 660, 481);
+        while (!PlaneModal1.img.complete) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+        // 设置大小
+        this.scale.set(this._config.size, this._config.size, this._config.size);
+        // this.context.fillStyle = "#00000088";
+        // this.context.fillRect(0, 0, 660, 481);
+        //绘制背景
+        this.context.drawImage(PlaneModal1.img, 0, 0);
+        // 绘制标题
+        this.context.fillStyle = this._config.titleColor;
+        this.context.font = '40px serif'; // 设置字体大小
+        this.context.textAlign = "left";
+        this.context.textBaseline = "top";
+        this.context.fillText(this._config.title, 60, 72);
+        let textPos = new Vector2(60, 150);
+        let maxWidth = 530;
+        // 绘制内容
+        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
+            this.context.fillStyle = color;
+            this.context.font = `${size}px serif`; // 设置字体大小
+            this.context.textAlign = "left";
+            this.context.textBaseline = "top";
+            // 字符分隔为数组
+            var arrText = text.split('');
+            var line = '';
+            for (var n = 0; n < arrText.length; n++) {
+                var metrics = this.context.measureText(line + arrText[n]);
+                var testWidth = metrics.width;
+                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
+                    this.context.fillText(line, textPos.x, textPos.y);
+                    line = "";
+                    textPos.y += size;
+                }
+                else {
+                    line += arrText[n];
+                }
+            }
+            this.context.fillText(line, textPos.x, textPos.y);
+            textPos.y += size;
+        });
+        this.texture.needsUpdate = true;
+        this.dispatchEvent({ type: "loaded" });
+    }
+}

package/lib/shaders.js

@@ -6,72 +6,115 @@
  */
 import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2 } from "three";
 // https://github.com/mrdoob/three.js/pull/21358
-var _geometry = new BufferGeometry();
+const _geometry = new BufferGeometry();
 _geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
 _geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
-var FullScreenQuad = /** @class */ (function () {
-    function FullScreenQuad() {
+class FullScreenQuad {
+    constructor() {
         this._mesh = new Mesh(_geometry);
     }
-    FullScreenQuad.prototype.dispose = function () {
+    _mesh;
+    dispose() {
         this._mesh.geometry.dispose();
-    };
-    FullScreenQuad.prototype.render = function (renderer) {
+    }
+    render(renderer) {
         renderer.render(this._mesh, orthographicCamera);
-    };
-    Object.defineProperty(FullScreenQuad.prototype, "material", {
-        get: function () {
-            return this._mesh.material;
-        },
-        set: function (value) {
-            this._mesh.material = value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    return FullScreenQuad;
-}());
+    }
+    get material() {
+        return this._mesh.material;
+    }
+    set material(value) {
+        this._mesh.material = value;
+    }
+}
 // 常用着色器及工具
 // 全屏渲染模型
-export var fullScreenMesh = new FullScreenQuad();
-export var orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+export const fullScreenMesh = new FullScreenQuad();
+export const orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
 // 清理着色器
-export var clearShader = new ShaderMaterial({
-    vertexShader: "\n        varying vec2 vUv;\n        void main() {\n            vUv = uv;\n            gl_Position = vec4(position, 1.0);\n        }\n    ",
-    fragmentShader: "\n        void main() {\n            gl_FragColor = vec4(0.0);\n        }\n    ",
+export const clearShader = new ShaderMaterial({
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+        }
+    `,
+    fragmentShader: `
+        void main() {
+            gl_FragColor = vec4(0.0);
+        }
+    `,
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
     transparent: true
 });
 // 交集着色器提取相同的像素点
-export var intersectionShader = new ShaderMaterial({
+export const intersectionShader = new ShaderMaterial({
     uniforms: {
         map1: { value: null },
         map2: { value: null }, // 贴图纹理2
     },
-    vertexShader: "\n        ".concat(ShaderChunk.common, "\n        ").concat(ShaderChunk.logdepthbuf_pars_vertex, "\n        varying vec2 vUv;\n        void main() {\n            vUv = uv;\n            gl_Position = vec4(position, 1.0);\n            ").concat(ShaderChunk.logdepthbuf_vertex, "\n        }\n    "),
-    fragmentShader: "\n        ".concat(ShaderChunk.logdepthbuf_pars_fragment, "\n        uniform sampler2D map1;\n        uniform sampler2D map2;\n        varying vec2 vUv;\n        void main() {\n            if(texture2D(map1, vUv) ==  texture2D(map2, vUv)){\n                gl_FragColor = texture2D(map1, vUv);\n            }else{\n                discard;\n            }\n            ").concat(ShaderChunk.logdepthbuf_fragment, "\n        }\n    "),
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform sampler2D map1;
+        uniform sampler2D map2;
+        varying vec2 vUv;
+        void main() {
+            if(texture2D(map1, vUv) ==  texture2D(map2, vUv)){
+                gl_FragColor = texture2D(map1, vUv);
+            }else{
+                discard;
+            }
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true
 });
 // 拷贝着色器
-export var coptyShader = new ShaderMaterial({
+export const coptyShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         opacity: { value: 1.0 } // 透明度
     },
-    vertexShader: "\n        varying vec2 vUv;\n        void main() {\n            vUv = uv;\n            gl_Position = vec4(position, 1.0);\n        }\n    ",
-    fragmentShader: "\n        uniform sampler2D map;\n        uniform float opacity;\n        varying vec2 vUv;\n        void main() {\n\n            gl_FragColor = texture2D(map, vUv) * opacity;\n\n        }\n    ",
+    vertexShader: `
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = vec4(position, 1.0);
+        }
+    `,
+    fragmentShader: `
+        uniform sampler2D map;
+        uniform float opacity;
+        varying vec2 vUv;
+        void main() {
+
+            gl_FragColor = texture2D(map, vUv) * opacity;
+
+        }
+    `,
     // blending: NoBlending, // 渲染时不与背景融合计算 直接替换
     depthTest: true,
     depthWrite: true,
     transparent: true,
 });
 // 描边着色器
-export var strokeShader = new ShaderMaterial({
+export const strokeShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         resolution: { value: new Vector2(512, 512) },
@@ -79,23 +122,122 @@ export var strokeShader = new ShaderMaterial({
         strokeColor: { value: new Color("#B2F2FF") },
         opacity: { value: 1.0 } // 透明度
     },
-    vertexShader: "\n            varying vec2 vUv;\n            void main() {\n                vUv = uv;\n                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n            }\n        ",
-    fragmentShader: "\n            uniform sampler2D map;\n            uniform vec2 resolution;\n            uniform vec3 strokeColor; // \u63CF\u8FB9\u989C\u8272\n            uniform float strokeWidth; // \u63CF\u8FB9\u539A\u5EA6\n            uniform float opacity; // \u900F\u660E\u5EA6\n            \n            varying vec2 vUv;\n\n            // \u83B7\u53D6\u5F53\u524D\u53E0\u52A0vu\u5750\u6807\u504F\u79FB\u91CF\u7684\u989C\u8272\u503C\n            vec4 offsetColor(vec2 vu){\n                return texture2D(map, vUv + (vu * (strokeWidth / resolution) ) );\n            }\n\n            vec4 fragColor(){\n\n                vec4 currentColor = offsetColor(vec2(0.0, 0.0));\n\n                if(\n                    currentColor.a < min(0.2, opacity) && (\n                        offsetColor(vec2(0.0, 1.0)).a > 0.0 ||\n                        offsetColor(vec2(0.0, -1.0)).a > 0.0 ||\n                        offsetColor(vec2(1.0, 0.0)).a > 0.0 ||\n                        offsetColor(vec2(-1.0, 0.0)).a > 0.0 ||\n\n                        offsetColor(vec2(1.0) * 0.7).a > 0.0 ||\n                        offsetColor(vec2(-1.0) * 0.7).a > 0.0 ||\n                        offsetColor(vec2(-1.0, 1.0) * 0.7).a > 0.0 ||\n                        offsetColor(vec2(1.0, -1.0) * 0.7).a > 0.0\n                    )\n                ){\n                    return vec4( strokeColor, opacity);\n                }else{\n                    // discard;\n                    return offsetColor(vec2(0.0, 0.0));\n                }\n\n            }\n\n            void main() {\n                gl_FragColor = fragColor();\n            }\n        ",
+    vertexShader: `
+            varying vec2 vUv;
+            void main() {
+                vUv = uv;
+                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            }
+        `,
+    fragmentShader: `
+            uniform sampler2D map;
+            uniform vec2 resolution;
+            uniform vec3 strokeColor; // 描边颜色
+            uniform float strokeWidth; // 描边厚度
+            uniform float opacity; // 透明度
+            
+            varying vec2 vUv;
+
+            // 获取当前叠加vu坐标偏移量的颜色值
+            vec4 offsetColor(vec2 vu){
+                return texture2D(map, vUv + (vu * (strokeWidth / resolution) ) );
+            }
+
+            vec4 fragColor(){
+
+                vec4 currentColor = offsetColor(vec2(0.0, 0.0));
+
+                if(
+                    currentColor.a < min(0.2, opacity) && (
+                        offsetColor(vec2(0.0, 1.0)).a > 0.0 ||
+                        offsetColor(vec2(0.0, -1.0)).a > 0.0 ||
+                        offsetColor(vec2(1.0, 0.0)).a > 0.0 ||
+                        offsetColor(vec2(-1.0, 0.0)).a > 0.0 ||
+
+                        offsetColor(vec2(1.0) * 0.7).a > 0.0 ||
+                        offsetColor(vec2(-1.0) * 0.7).a > 0.0 ||
+                        offsetColor(vec2(-1.0, 1.0) * 0.7).a > 0.0 ||
+                        offsetColor(vec2(1.0, -1.0) * 0.7).a > 0.0
+                    )
+                ){
+                    return vec4( strokeColor, opacity);
+                }else{
+                    // discard;
+                    return offsetColor(vec2(0.0, 0.0));
+                }
+
+            }
+
+            void main() {
+                gl_FragColor = fragColor();
+            }
+        `,
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true
 });
 // 高斯模糊着色器 让颜色过渡更自然
-export var gaussBlurShader = new ShaderMaterial({
+export const gaussBlurShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         opacity: { value: 1.0 },
         radius: { value: 3.0 },
         resolution: { value: new Vector2(512, 512) }, // 渲染器的分辨率
     },
-    vertexShader: "\n\t\tvarying vec2 vUv;\n\t\tvoid main() {\n\t\t\tvUv = uv;\n\t\t\tgl_Position = vec4(position, 1.0);\n\t\t}\n\t",
-    fragmentShader: "\n\t\tuniform sampler2D map;\n\t\tuniform float opacity;\n\t\tuniform vec2 resolution;\n\t\tuniform float radius;\n\t\tvarying vec2 vUv;\n\n        vec4 offsetColor( vec2 uv){\n            return texture2D(map, vUv + (uv / resolution * radius) );\n        }\n\n        vec4 blurColor(){\n\n            vec4 leftColor = offsetColor( vec2(-1.0, 0.0) );\n\n            vec4 rightColor = offsetColor( vec2(1.0, 0.0) );\n\n            // \u5DE6\u53F3\u989C\u8272\u6DF7\u5408\n            vec4 leftRightColor = vec4( \n                mix( leftColor.rgb ,rightColor.rgb, rightColor.a / (leftColor.a + rightColor.a)),\n                (leftColor.a + rightColor.a) / 2.0\n            );\n\n            vec4 downColor =  offsetColor( vec2(0.0, -1.0));\n\n            vec4 upColor =  offsetColor( vec2(0.0, 1.0));\n\n            // \u4E0A\u4E0B\u989C\u8272\u6DF7\u5408\n            vec4 upDownColor = vec4(\n                mix( downColor.rgb, upColor.rgb, upColor.a / (downColor.a + upColor.a) ),\n                (downColor.a + upColor.a) / 2.0\n            );\n           \n            vec4 color = vec4(\n                mix( leftRightColor.rgb, upDownColor.rgb, upDownColor.a / (leftRightColor.a + upDownColor.a) ),\n                (leftRightColor.a + upDownColor.a) / 2.0\n            );\n                \n            return color;\n        }\n\n\t\tvoid main() {\n\t\t\tgl_FragColor = blurColor();\n            gl_FragColor.a *= opacity;\n\t\t}\n\t",
+    vertexShader: `
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+    fragmentShader: `
+		uniform sampler2D map;
+		uniform float opacity;
+		uniform vec2 resolution;
+		uniform float radius;
+		varying vec2 vUv;
+
+        vec4 offsetColor( vec2 uv){
+            return texture2D(map, vUv + (uv / resolution * radius) );
+        }
+
+        vec4 blurColor(){
+
+            vec4 leftColor = offsetColor( vec2(-1.0, 0.0) );
+
+            vec4 rightColor = offsetColor( vec2(1.0, 0.0) );
+
+            // 左右颜色混合
+            vec4 leftRightColor = vec4( 
+                mix( leftColor.rgb ,rightColor.rgb, rightColor.a / (leftColor.a + rightColor.a)),
+                (leftColor.a + rightColor.a) / 2.0
+            );
+
+            vec4 downColor =  offsetColor( vec2(0.0, -1.0));
+
+            vec4 upColor =  offsetColor( vec2(0.0, 1.0));
+
+            // 上下颜色混合
+            vec4 upDownColor = vec4(
+                mix( downColor.rgb, upColor.rgb, upColor.a / (downColor.a + upColor.a) ),
+                (downColor.a + upColor.a) / 2.0
+            );
+           
+            vec4 color = vec4(
+                mix( leftRightColor.rgb, upDownColor.rgb, upDownColor.a / (leftRightColor.a + upDownColor.a) ),
+                (leftRightColor.a + upDownColor.a) / 2.0
+            );
+                
+            return color;
+        }
+
+		void main() {
+			gl_FragColor = blurColor();
+            gl_FragColor.a *= opacity;
+		}
+	`,
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,