How to use the CopyShader function from three

Find comprehensive JavaScript three.CopyShader code examples handpicked from public code repositorys.

three.CopyShader is a built-in shader in the Three.js library that allows the renderer to copy pixels from one render target to another.

SSAAChunkedRender.js

54
55
56
57
58
59
60
61
62
63

module.exports = function (renderer, scene, camera, rt, fullWidth, fullHeight, chunkHeights, sampleLevel, render) {
    return new Promise((resolve) => {
        const jitterOffsets = JitterVectors[Math.max(0, Math.min(sampleLevel, 5))];
        const {autoClear} = renderer;
        const copyShader = THREE.CopyShader;
        const copyUniforms = THREE.UniformsUtils.clone(copyShader.uniforms);
        const copyMaterial = new THREE.ShaderMaterial({
            uniforms: copyUniforms,
            vertexShader: copyShader.vertexShader,

119

813

spotlightview_new.js

GitHub: audunsh/evince

815
816
817
818
819
820
821
822
823
824

}

this.materialCopy = new THREE.ShaderMaterial( {
	uniforms: THREE.UniformsUtils.clone( THREE.CopyShader.uniforms ),
	vertexShader: THREE.CopyShader.vertexShader,
	fragmentShader: THREE.CopyShader.fragmentShader,
	blending: THREE.NoBlending
} );
this.materialCopy.transparent = true;

+ 35 other calls in file

How does three.CopyShader work?

three.CopyShader is a shader program written in GLSL that is used in three.js to copy textures from one render target to another, typically used for post-processing effects. When rendering a 3D scene with post-processing effects, the scene is first rendered to a texture (render target) which can be further processed using shaders. This is where CopyShader comes in - it is used to copy the output of one render target to another. This can be useful when applying multiple effects to the same scene, each of which requires its own render target, as it allows the result of one effect to be fed as input to the next effect. The CopyShader program is typically used in combination with the EffectComposer class in three.js, which provides a simple interface for creating and chaining post-processing effects together.

OutlinePass.js

GitHub: 1anRobinson/JS_Engine

584
585
586
587
588
589
590
591
592

// copy material
if (THREE.CopyShader === undefined)
	console.error("THREE.OutlinePass relies on THREE.CopyShader");

var copyShader = THREE.CopyShader;

this.copyUniforms = THREE.UniformsUtils.clone(copyShader.uniforms);
this.copyUniforms["opacity"].value = 1.0;

+ 35 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import * as THREE from "three";

// Create the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a mesh with a shader material
const geometry = new THREE.BoxGeometry();
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
  },
  vertexShader: `
uniform float time;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
  fragmentShader: `
uniform float time;
void main() {
gl_FragColor = vec4(sin(time), cos(time), tan(time), 1.0);
}
`,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Create a render target for the output of the shader
const renderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth,
  window.innerHeight,
  {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
  }
);

// Create a plane to render the output of the shader onto
const planeGeometry = new THREE.PlaneGeometry(
  window.innerWidth,
  window.innerHeight
);
const planeMaterial = new THREE.ShaderMaterial({
  uniforms: {
    tDiffuse: { value: renderTarget.texture },
  },
  vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
  fragmentShader: `
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
gl_FragColor = texture2D(tDiffuse, vUv);
}
`,
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

// Render the scene to the render target
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);

// Copy the output of the render target to a texture using the CopyShader
const copyMaterial = new THREE.ShaderMaterial(THREE.CopyShader);
const copyUniforms = THREE.UniformsUtils.clone(copyMaterial.uniforms);
copyUniforms["tDiffuse"].value = renderTarget.texture;
const copyMesh = new THREE.Mesh(
  new THREE.PlaneGeometry(window.innerWidth, window.innerHeight),
  copyMaterial
);
copyMesh.material.uniforms = copyUniforms;
copyMesh.position.z = -1;
scene.add(copyMesh);

// Render the scene to the screen
renderer.setRenderTarget(null);
renderer.render(scene, camera);

In this example, the CopyShader is used to copy the output of the shader onto a texture, which is then rendered onto a plane. The CopyShader simply copies the input texture to the output texture without modifying it.

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About