@poggi/three-effects 0.0.1-alpha.0

package/BasePass.d.ts

@@ -0,0 +1,14 @@
+import { Scene } from 'three';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { Container } from '@poggi/three-core';
+export declare class BasePass {
+    private container;
+    composer: EffectComposer;
+    renderPass: RenderPass;
+    renderBeforeFunc?: () => void;
+    renderAfterFunc?: () => void;
+    constructor(container: Container, garden: Scene, msaa?: boolean);
+    colorCorrection(): void;
+    render(delta?: number): void;
+}

package/BasePass.js

@@ -0,0 +1,54 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { Vector2, WebGLRenderTarget, SRGBColorSpace, UnsignedByteType, RGBAFormat } from "three";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
+import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
+class BasePass {
+  //渲染后逻辑
+  constructor(container, garden, msaa) {
+    __publicField(this, "container");
+    __publicField(this, "composer");
+    __publicField(this, "renderPass");
+    __publicField(this, "renderBeforeFunc");
+    //渲染前逻辑
+    __publicField(this, "renderAfterFunc");
+    this.container = container;
+    const size = container.renderer.getDrawingBufferSize(new Vector2());
+    if (msaa) {
+      const renderTarget = new WebGLRenderTarget(size.width, size.height, {
+        samples: 4,
+        format: RGBAFormat,
+        type: UnsignedByteType,
+        colorSpace: SRGBColorSpace
+      });
+      this.composer = new EffectComposer(container.renderer, renderTarget);
+      this.composer.setSize(this.container.sizes.width, this.container.sizes.height);
+    } else {
+      this.composer = new EffectComposer(this.container.renderer);
+      this.composer.setSize(this.container.sizes.width, this.container.sizes.height);
+    }
+    const renderPass = new RenderPass(garden, this.container.camera);
+    this.composer.addPass(renderPass);
+    this.renderPass = renderPass;
+  }
+  // 色彩修正
+  colorCorrection() {
+    const outputpass = new OutputPass();
+    this.composer.addPass(outputpass);
+  }
+  render(delta) {
+    if (this.renderBeforeFunc)
+      this.renderBeforeFunc();
+    this.composer.render(delta);
+    if (this.renderAfterFunc)
+      this.renderAfterFunc();
+  }
+}
+export {
+  BasePass
+};

package/BloomPass.d.ts

@@ -0,0 +1,9 @@
+import { Container, Scene } from '@poggi/three-core';
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+import { BasePass } from './BasePass';
+import { IBloomParameter } from './types';
+declare const createBloomPass: (container: Container, garden: Scene, basePass: BasePass, parameter?: IBloomParameter) => {
+    bloomRender: () => void;
+    mixPass: ShaderPass;
+};
+export { createBloomPass, };

package/BloomPass.js

@@ -0,0 +1,69 @@
+import { MeshBasicMaterial, Layers, Vector2, ShaderMaterial, Mesh } from "@poggi/three-core";
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
+import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
+const darkMaterial = new MeshBasicMaterial({ color: "black" });
+const createBloomPass = function(container, garden, basePass, parameter) {
+  const bloomLayer = new Layers();
+  bloomLayer.set((parameter == null ? void 0 : parameter.layer) || 1);
+  const bloomPass = new UnrealBloomPass(
+    new Vector2(container.sizes.width, container.sizes.height),
+    (parameter == null ? void 0 : parameter.strength) || 1,
+    (parameter == null ? void 0 : parameter.radius) || 0.4,
+    (parameter == null ? void 0 : parameter.threshold) || 0
+  );
+  const bloomComposer = new EffectComposer(container.renderer);
+  bloomComposer.renderToScreen = false;
+  bloomComposer.addPass(basePass.renderPass);
+  bloomComposer.addPass(bloomPass);
+  const mixPass = new ShaderPass(
+    new ShaderMaterial({
+      uniforms: {
+        baseTexture: { value: null },
+        bloomTexture: { value: bloomComposer.renderTarget2.texture }
+      },
+      vertexShader: `
+        varying vec2 vUv;
+        void main() {
+          vUv = uv;
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }
+      `,
+      fragmentShader: `
+        uniform sampler2D baseTexture;
+        uniform sampler2D bloomTexture;
+        varying vec2 vUv;
+        void main() {
+          gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
+        }
+      `,
+      defines: {}
+    }),
+    "baseTexture"
+  );
+  mixPass.needsSwap = true;
+  basePass.composer.addPass(mixPass);
+  const materials = {};
+  const bloomRender = function() {
+    garden.traverse((child) => {
+      if (child instanceof Mesh && bloomLayer.test(child.layers) === false) {
+        materials[child.uuid] = child.material;
+        child.material = darkMaterial;
+      }
+    });
+    bloomComposer.render();
+    garden.traverse((child) => {
+      if (child instanceof Mesh && materials[child.uuid]) {
+        child.material = materials[child.uuid];
+        delete materials[child.uuid];
+      }
+    });
+  };
+  return {
+    bloomRender,
+    mixPass
+  };
+};
+export {
+  createBloomPass
+};

package/OutlinePass.d.ts

@@ -0,0 +1,7 @@
+import { Container, Object3D, Scene } from '@poggi/three-core';
+import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
+import { IOutlineParameter } from './types';
+declare const createOutlinePass: (container: Container, garden: Scene, parameter?: IOutlineParameter) => OutlinePass | undefined;
+declare const addObjectsToOutline: (outlinePass: OutlinePass, objs: Object3D | Object3D[]) => void;
+declare const removeFromOutline: (outlinePass: OutlinePass, obj: Object3D) => void;
+export { OutlinePass, createOutlinePass, addObjectsToOutline, removeFromOutline };

package/OutlinePass.js

@@ -0,0 +1,48 @@
+import { Vector2 } from "@poggi/three-core";
+import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
+import { OutlinePass as OutlinePass2 } from "three/examples/jsm/postprocessing/OutlinePass.js";
+import { Console } from "@poggi/utils";
+const createOutlinePass = function(container, garden, parameter = {}) {
+  if (!container.camera) {
+    Console.error("[@poggi/three-effects]: OutlinePass: 还未挂载摄像机");
+    return;
+  }
+  let resolution, outlinePass;
+  resolution = new Vector2(container.sizes.width, container.sizes.height);
+  outlinePass = new OutlinePass(resolution, garden, container.camera);
+  outlinePass.edgeStrength = parameter.edgeStrength || 10;
+  if (parameter.edgeGlow)
+    outlinePass.edgeGlow = parameter.edgeGlow;
+  outlinePass.edgeThickness = parameter.edgeThickness || 4;
+  if (parameter.pulsePeriod)
+    outlinePass.pulsePeriod = parameter.pulsePeriod;
+  outlinePass.visibleEdgeColor.setHex(parameter.visibleEdgeColor || 65280);
+  outlinePass.hiddenEdgeColor.setHex(parameter.hiddenEdgeColor || 16701184);
+  return outlinePass;
+};
+const addObjectsToOutlineSingle = function(outlinePass, obj) {
+  const idx = outlinePass.selectedObjects.findIndex((item) => item.uuid === obj.uuid);
+  if (idx !== -1) {
+    outlinePass.selectedObjects.splice(idx);
+  }
+  outlinePass.selectedObjects.push(obj);
+};
+const addObjectsToOutline = function(outlinePass, objs) {
+  if (Array.isArray(objs)) {
+    objs.forEach((item) => {
+      addObjectsToOutlineSingle(outlinePass, item);
+    });
+  } else {
+    addObjectsToOutlineSingle(outlinePass, objs);
+  }
+};
+const removeFromOutline = function(outlinePass, obj) {
+  const idx = outlinePass.selectedObjects.findIndex((item) => item.uuid === obj.uuid);
+  idx !== -1 && outlinePass.selectedObjects.splice(idx, 1);
+};
+export {
+  OutlinePass2 as OutlinePass,
+  addObjectsToOutline,
+  createOutlinePass,
+  removeFromOutline
+};

package/antiAliasPass.d.ts

@@ -0,0 +1,4 @@
+import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';
+import { FXAAPass } from 'three/examples/jsm/postprocessing/FXAAPass.js';
+import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass.js';
+export { SMAAPass, FXAAPass, SSAARenderPass, };

package/index.d.ts

@@ -0,0 +1,5 @@
+export * from './BasePass';
+export * from './OutlinePass';
+export * from './BloomPass';
+export * from './antiAliasPass';
+export * from 'three/examples/jsm/postprocessing/SSRPass.js';

package/index.js

@@ -0,0 +1,19 @@
+import { BasePass } from "./BasePass.js";
+import { addObjectsToOutline, createOutlinePass, removeFromOutline } from "./OutlinePass.js";
+import { createBloomPass } from "./BloomPass.js";
+import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
+import { FXAAPass } from "three/examples/jsm/postprocessing/FXAAPass.js";
+import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass.js";
+export * from "three/examples/jsm/postprocessing/SSRPass.js";
+import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
+export {
+  BasePass,
+  FXAAPass,
+  OutlinePass,
+  SMAAPass,
+  SSAARenderPass,
+  addObjectsToOutline,
+  createBloomPass,
+  createOutlinePass,
+  removeFromOutline
+};

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@poggi/three-effects",
+  "version": "0.0.1-alpha.0",
+  "type": "module",
+  "main": "./index.js",
+  "description": "三维后期特效",
+  "author": "poggi",
+  "license": "MIT",
+  "typings": "./index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "three": "^0.185.1"
+  },
+  "peerDependencies": {
+    "@poggi/three-core": "0.0.1-alpha.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/types.d.ts

@@ -0,0 +1,19 @@
+export declare enum EAntiAlias {
+    SSAA = 0,
+    FXAA = 1,
+    SMAA = 2
+}
+export interface IOutlineParameter {
+    edgeStrength?: number;
+    edgeGlow?: number;
+    edgeThickness?: number;
+    pulsePeriod?: number;
+    visibleEdgeColor?: number;
+    hiddenEdgeColor?: number;
+}
+export interface IBloomParameter {
+    layer?: number;
+    strength?: number;
+    radius?: number;
+    threshold?: number;
+}