threejs抗锯齿滤镜代码

以下是使用Three.js实现抗锯齿滤镜的代码：

首先，需要加载`EffectComposer`、`RenderPass`和`ShaderPass`依赖项：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';

然后，需要创建一个`EffectComposer`对象：

const composer = new EffectComposer(renderer);

接着，创建一个`RenderPass`对象：

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

然后，创建一个自定义的着色器程序：

const shader = {
  uniforms: {
    tDiffuse: { value: null },
    resolution: { value: new THREE.Vector2() }
  },

  vertexShader: `
    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform vec2 resolution;

    varying vec2 vUv;

    const float blurSize = 1.0 / 512.0;

    float rand(vec2 co) {
      return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
    }

    void main() {
      vec2 pixel = vec2(1.0, 1.0) / resolution.xy;
      float randX = rand(vUv + vec2(0.0, gl_FragCoord.y));
      float randY = rand(vUv + vec2(gl_FragCoord.x, 0.0));
      vec3 color = texture2D(tDiffuse, vUv).rgb;

      color += texture2D(tDiffuse, vUv + vec2(0.0, blurSize * randX)).rgb * 0.25;
      color += texture2D(tDiffuse, vUv - vec2(0.0, blurSize * randX)).rgb * 0.25;
      color += texture2D(tDiffuse, vUv + vec2(blurSize * randY, 0.0)).rgb * 0.25;
      color += texture2D(tDiffuse, vUv - vec2(blurSize * randY, 0.0)).rgb * 0.25;

      gl_FragColor = vec4(color, 1.0);
    }
  `
};

最后，创建一个`ShaderPass`对象，并将其添加到`EffectComposer`中：

const customPass = new ShaderPass(shader);
customPass.renderToScreen = true;
composer.addPass(customPass);

完整的代码如下：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';

const composer = new EffectComposer(renderer);

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

const shader = {
  uniforms: {
    tDiffuse: { value: null },
    resolution: { value: new THREE.Vector2() }
  },

  vertexShader: `
    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform vec2 resolution;

    varying vec2 vUv;

    const float blurSize = 1.0 / 512.0;

    float rand(vec2 co) {
      return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
    }

    void main() {
      vec2 pixel = vec2(1.0, 1.0) / resolution.xy;
      float randX = rand(vUv + vec2(0.0, gl_FragCoord.y));
      float randY = rand(vUv + vec2(gl_FragCoord.x, 0.0));
      vec3 color = texture2D(tDiffuse, vUv).rgb;

      color += texture2D(tDiffuse, vUv + vec2(0.0, blurSize * randX)).rgb * 0.25;
      color += texture2D(tDiffuse, vUv - vec2(0.0, blurSize * randX)).rgb * 0.25;
      color += texture2D(tDiffuse, vUv + vec2(blurSize * randY, 0.0)).rgb * 0.25;
      color += texture2D(tDiffuse, vUv - vec2(blurSize * randY, 0.0)).rgb * 0.25;

      gl_FragColor = vec4(color, 1.0);
    }
  `
};

const customPass = new ShaderPass(shader);
customPass.renderToScreen = true;
composer.addPass(customPass);