three-base 2.0.1 → 2.0.2

package/pass/stroke_pass.js

@@ -0,0 +1,190 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 00:35:17
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 02:33:28
+ */
+import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
+import FullScreenQuad from "./FullScreenQuad";
+// 选中对象的纹理
+const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+// 由于不能同时读写自己的纹理 
+const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+// 所以需要用2个模糊纹理相互读写
+const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+const size = new Vector2();
+// 创建一个渲染工具 用于处理纹理
+const fsQuad = new FullScreenQuad(); // 渲染辅助器
+// 描边着色器
+const blurShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        color: { value: new Color("#0f0") },
+        width: { value: 1.0 },
+        opacity: { value: 1.0 },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) },
+        offset: {
+            value: [
+                new Vector2(0.000, 1.000),
+                new Vector2(0.259, 0.966),
+                new Vector2(0.500, 0.866),
+                new Vector2(0.707, 0.707),
+                new Vector2(0.866, 0.500),
+                new Vector2(0.966, 0.259),
+                new Vector2(1.000, 0.000),
+                new Vector2(0.966, -0.259),
+                new Vector2(0.866, -0.500),
+                new Vector2(0.707, -0.707),
+                new Vector2(0.500, -0.866),
+                new Vector2(0.259, -0.966),
+                new Vector2(0.000, -1.000),
+                new Vector2(-0.259, -0.966),
+                new Vector2(-0.500, -0.866),
+                new Vector2(-0.707, -0.707),
+                new Vector2(-0.866, -0.500),
+                new Vector2(-0.966, -0.259),
+                new Vector2(-1.000, -0.000),
+                new Vector2(-0.966, 0.259),
+                new Vector2(-0.866, 0.500),
+                new Vector2(-0.707, 0.707),
+                new Vector2(-0.500, 0.866),
+                new Vector2(-0.259, 0.966)
+            ]
+        }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D tDiffuse;
+		uniform vec3 color;
+		uniform float width;
+		uniform float opacity;
+		uniform vec2 resolution;
+		uniform vec2 offset[24];
+		varying vec2 vUv;
+		vec2 piexl = resolution * width; // 描边厚度
+
+		vec4 stroke(){
+			vec4 blurColor = vec4(0.0);
+			vec4 Color = vec4(0.0);
+			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
+			for (int i = 0; i < 24; i++ ) {
+				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
+				if (Color.a > 0.0) {
+					blurColor += Color;
+				}
+			}
+			if (blurColor.a < 0.001) {
+				return vec4(0.0);
+			} else {
+				return vec4(color, opacity);
+			}
+		}
+		void main() {
+			vec4 Color = texture2D(tDiffuse, vUv);
+			if (Color.a > 0.0 || width == 0.0) {
+				gl_FragColor = Color;
+			} else {
+				gl_FragColor = stroke();
+			}
+		}`,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 过滤着色器
+const filterSelectShader = new RawShaderMaterial({
+    uniforms: {
+        selectTexture: { value: null },
+        blurTexture: { value: null }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D selectTexture;
+		uniform sampler2D blurTexture;
+		varying vec2 vUv;
+
+		void main() {
+			gl_FragColor = texture2D(blurTexture, vUv);
+			gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
+		}
+	`,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 场景对象
+const scene = new Scene();
+// 对象描边
+export default function stroke_pass(renderer, camera, object3d) {
+    const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
+    if (!stroke_enable) {
+        return;
+    }
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    selectTextureTarget.setSize(size.x, size.y);
+    blur1TextureTarget.setSize(size.x, size.y);
+    blur2TextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(object3d, camera);
+    // 设置描边着色器的分辨率
+    blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
+    //描边颜色
+    blurShader.uniforms.color.value.set(stroke_color);
+    blurShader.uniforms.width.value = stroke_width / 4;
+    //一次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //二次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //三次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //四次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    // 还原帧缓冲区 减去原始纹理保留描边
+    renderer.setRenderTarget(originRenderTarget);
+    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
+    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
+    fsQuad.render(renderer, filterSelectShader);
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/pass/stroke_pass.ts

@@ -0,0 +1,211 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-05-09 00:35:17 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-05-09 02:33:28
+ */
+
+import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending } from "three";
+import FullScreenQuad from "./FullScreenQuad";
+
+// 选中对象的纹理
+const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+
+// 由于不能同时读写自己的纹理 
+const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+
+// 所以需要用2个模糊纹理相互读写
+const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+
+const size = new Vector2();
+
+// 创建一个渲染工具 用于处理纹理
+const fsQuad = new FullScreenQuad(); // 渲染辅助器
+
+// 描边着色器
+const blurShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        color: { value: new Color("#0f0") }, // 没有被挡住的地方的颜色绿色
+        width: { value: 1.0 },
+        opacity: { value: 1.0 },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) }, // 渲染器的分辨率
+        offset: {
+            value: [
+                new Vector2(0.000, 1.000),
+                new Vector2(0.259, 0.966),
+                new Vector2(0.500, 0.866),
+                new Vector2(0.707, 0.707),
+                new Vector2(0.866, 0.500),
+                new Vector2(0.966, 0.259),
+                new Vector2(1.000, 0.000),
+                new Vector2(0.966, -0.259),
+                new Vector2(0.866, -0.500),
+                new Vector2(0.707, -0.707),
+                new Vector2(0.500, -0.866),
+                new Vector2(0.259, -0.966),
+                new Vector2(0.000, -1.000),
+                new Vector2(-0.259, -0.966),
+                new Vector2(-0.500, -0.866),
+                new Vector2(-0.707, -0.707),
+                new Vector2(-0.866, -0.500),
+                new Vector2(-0.966, -0.259),
+                new Vector2(-1.000, -0.000),
+                new Vector2(-0.966, 0.259),
+                new Vector2(-0.866, 0.500),
+                new Vector2(-0.707, 0.707),
+                new Vector2(-0.500, 0.866),
+                new Vector2(-0.259, 0.966)
+            ]
+        }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D tDiffuse;
+		uniform vec3 color;
+		uniform float width;
+		uniform float opacity;
+		uniform vec2 resolution;
+		uniform vec2 offset[24];
+		varying vec2 vUv;
+		vec2 piexl = resolution * width; // 描边厚度
+
+		vec4 stroke(){
+			vec4 blurColor = vec4(0.0);
+			vec4 Color = vec4(0.0);
+			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
+			for (int i = 0; i < 24; i++ ) {
+				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
+				if (Color.a > 0.0) {
+					blurColor += Color;
+				}
+			}
+			if (blurColor.a < 0.001) {
+				return vec4(0.0);
+			} else {
+				return vec4(color, opacity);
+			}
+		}
+		void main() {
+			vec4 Color = texture2D(tDiffuse, vUv);
+			if (Color.a > 0.0 || width == 0.0) {
+				gl_FragColor = Color;
+			} else {
+				gl_FragColor = stroke();
+			}
+		}`,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+
+// 过滤着色器
+const filterSelectShader = new RawShaderMaterial({
+    uniforms: {
+        selectTexture: { value: null },
+        blurTexture: { value: null }
+    },
+    vertexShader: `
+		attribute vec3 position;
+		attribute vec2 uv;
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+    fragmentShader: `
+		#ifdef GL_ES
+			precision highp float;
+		#endif
+		uniform sampler2D selectTexture;
+		uniform sampler2D blurTexture;
+		varying vec2 vUv;
+
+		void main() {
+			gl_FragColor = texture2D(blurTexture, vUv);
+			gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
+		}
+	`,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+
+// 场景对象
+const scene = new Scene();
+
+// 对象描边
+export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D) {
+
+    const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
+    if (!stroke_enable) {
+        return;
+    }
+
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    selectTextureTarget.setSize(size.x, size.y);
+    blur1TextureTarget.setSize(size.x, size.y);
+    blur2TextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(object3d, camera);
+
+    // 设置描边着色器的分辨率
+    blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
+    //描边颜色
+    blurShader.uniforms.color.value.set(stroke_color);
+    blurShader.uniforms.width.value = stroke_width / 4;
+
+    //一次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    //二次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    //三次描边
+    renderer.setRenderTarget(blur1TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    //四次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+
+    // 还原帧缓冲区 减去原始纹理保留描边
+    renderer.setRenderTarget(originRenderTarget);
+    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.blurTexture.value = blur2TextureTarget.texture;
+    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
+    fsQuad.render(renderer, filterSelectShader);
+
+
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/shaders.d.ts

@@ -0,0 +1,17 @@
+import { Mesh, OrthographicCamera, ShaderMaterial, WebGLRenderer } from "three";
+declare class FullScreenQuad {
+    constructor();
+    _mesh: Mesh;
+    dispose(): void;
+    render(renderer: WebGLRenderer): void;
+    get material(): import("three").Material | import("three").Material[];
+    set material(value: import("three").Material | import("three").Material[]);
+}
+export declare const fullScreenMesh: FullScreenQuad;
+export declare const orthographicCamera: OrthographicCamera;
+export declare const clearShader: ShaderMaterial;
+export declare const intersectionShader: ShaderMaterial;
+export declare const coptyShader: ShaderMaterial;
+export declare const strokeShader: ShaderMaterial;
+export declare const gaussBlurShader: ShaderMaterial;
+export {};

package/shaders.js

@@ -0,0 +1,245 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2022-03-24 16:38:35
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2022-04-02 18:28:38
+ */
+import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2 } from "three";
+// https://github.com/mrdoob/three.js/pull/21358
+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));
+class FullScreenQuad {
+    constructor() {
+        this._mesh = new Mesh(_geometry);
+    }
+    _mesh;
+    dispose() {
+        this._mesh.geometry.dispose();
+    }
+    render(renderer) {
+        renderer.render(this._mesh, orthographicCamera);
+    }
+    get material() {
+        return this._mesh.material;
+    }
+    set material(value) {
+        this._mesh.material = value;
+    }
+}
+// 常用着色器及工具
+// 全屏渲染模型
+export const fullScreenMesh = new FullScreenQuad();
+export const 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);
+        }
+    `,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 交集着色器提取相同的像素点
+export const 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}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+// 拷贝着色器
+export const 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;
+
+        }
+    `,
+    // blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+// 描边着色器
+export const strokeShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null },
+        resolution: { value: new Vector2(512, 512) },
+        strokeWidth: { value: 1.0 },
+        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();
+            }
+        `,
+    blending: NoBlending,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+// 高斯模糊着色器 让颜色过渡更自然
+export const 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;
+		}
+	`,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});