three.js后期处理-1.自定义后期处理通道

three.js后期处理-1.自定义后期处理通道

import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass";

const effectComposer = new EffectComposer(helper.renderer, renderTarget);

const renderPass = new RenderPass(helper.scene, helper.camera);
effectComposer.addPass(renderPass);


const shaderPass = new ShaderPass(
     new THREE.ShaderMaterial({
         vertexShader: `
         varying vec2 vUv;
         void main() {
         vUv = uv;
             vec4 viewPosition = modelViewMatrix * vec4(position, 1.0);
             gl_Position = projectionMatrix * viewPosition;
         }`,
         fragmentShader: `
         uniform sampler2D myShaderPass;
         uniform sampler2D texture1;
         varying vec2 vUv;

         float random(vec2 st)
         {
             return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
         }

         void main() {
             vec3 color = texture2D(myShaderPass, vUv).rgb;
             vec3 color1 = texture2D(texture1, vUv).rgb;
             if(color.r == 0.){
                 color =  color1;
             }
             
             gl_FragColor = vec4(color, 1.0);
         }`,
         uniforms: {
             myShaderPass: { value: null },
             texture1: {
                 value: new THREE.TextureLoader().load(
                     "https://img1.baidu.com/it/u=2497345249,3609845312&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681664400&t=365d2d828632d4e2e6162c2a0d3c8c46"
                 ),
             },
         },
     }),
     "myShaderPass"
 );
 effectComposer.addPass(shaderPass);

const render = () => {
  effectComposer.render();
};

 const box = new THREE.Mesh(
  new THREE.BoxGeometry(10, 10, 10),
    new THREE.MeshStandardMaterial({ color: "#5511ff" })
);
scene.add(box)