three-base 1.0.81 → 1.0.82

package/lib/planeModal1/PlaneModal1.js

@@ -4,101 +4,173 @@
  * @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";
 // 平面模型弹窗
-export default class PlaneModal1 extends Mesh {
-    constructor(config = {}) {
-        super();
-        this.updata(config);
-        this.material.map = this.texture;
-        this.scale.set(10, 10, 10);
+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;
     }
-    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
-    material = new MeshBasicMaterial({
-        side: DoubleSide,
-        transparent: true,
-        alphaTest: 0.01
-    });
+    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*/];
+                }
+            });
+        });
+    };
     // 背景图
-    static img = (() => {
-        const img = new Image();
+    PlaneModal1.img = (function () {
+        var img = new Image();
         img.src = planeModalPNG;
         return img;
     })();
-    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" });
-    }
-}
+    return PlaneModal1;
+}(Mesh));
+export default PlaneModal1;

package/lib/shaders.js

@@ -6,115 +6,72 @@
  */
 import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2 } from "three";
 // https://github.com/mrdoob/three.js/pull/21358
-const _geometry = new BufferGeometry();
+var _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));
-class FullScreenQuad {
-    constructor() {
+var FullScreenQuad = /** @class */ (function () {
+    function FullScreenQuad() {
         this._mesh = new Mesh(_geometry);
     }
-    _mesh;
-    dispose() {
+    FullScreenQuad.prototype.dispose = function () {
         this._mesh.geometry.dispose();
-    }
-    render(renderer) {
+    };
+    FullScreenQuad.prototype.render = function (renderer) {
         renderer.render(this._mesh, orthographicCamera);
-    }
-    get material() {
-        return this._mesh.material;
-    }
-    set material(value) {
-        this._mesh.material = value;
-    }
-}
+    };
+    Object.defineProperty(FullScreenQuad.prototype, "material", {
+        get: function () {
+            return this._mesh.material;
+        },
+        set: function (value) {
+            this._mesh.material = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return FullScreenQuad;
+}());
 // 常用着色器及工具
 // 全屏渲染模型
-export const fullScreenMesh = new FullScreenQuad();
-export const orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+export var fullScreenMesh = new FullScreenQuad();
+export var orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
 // 清理着色器
-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);
-        }
-    `,
+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    ",
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,
     transparent: true
 });
 // 交集着色器提取相同的像素点
-export const intersectionShader = new ShaderMaterial({
+export var intersectionShader = new ShaderMaterial({
     uniforms: {
         map1: { value: null },
         map2: { value: null }, // 贴图纹理2
     },
-    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}
-        }
-    `,
+    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    "),
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true
 });
 // 拷贝着色器
-export const coptyShader = new ShaderMaterial({
+export var coptyShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         opacity: { value: 1.0 } // 透明度
     },
-    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;
-
-        }
-    `,
+    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    ",
     // blending: NoBlending, // 渲染时不与背景融合计算 直接替换
     depthTest: true,
     depthWrite: true,
     transparent: true,
 });
 // 描边着色器
-export const strokeShader = new ShaderMaterial({
+export var strokeShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         resolution: { value: new Vector2(512, 512) },
@@ -122,122 +79,23 @@ export const strokeShader = new ShaderMaterial({
         strokeColor: { value: new Color("#B2F2FF") },
         opacity: { value: 1.0 } // 透明度
     },
-    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();
-            }
-        `,
+    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        ",
     blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true
 });
 // 高斯模糊着色器 让颜色过渡更自然
-export const gaussBlurShader = new ShaderMaterial({
+export var gaussBlurShader = new ShaderMaterial({
     uniforms: {
         map: { value: null },
         opacity: { value: 1.0 },
         radius: { value: 3.0 },
         resolution: { value: new Vector2(512, 512) }, // 渲染器的分辨率
     },
-    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;
-		}
-	`,
+    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",
     blending: NoBlending,
     depthTest: false,
     depthWrite: false,