How to use the Pass function from three
Find comprehensive JavaScript three.Pass code examples handpicked from public code repositorys.
three.Pass is a shader material in the Three.js library that does nothing but pass the rendered output to the screen without applying any further effects or transformations.
466 467 468 469 470 471 472 473 474 475 476 477 478 479 480}); } this.fsQuad = new THREE.Pass.FullScreenQuad(this.material); }; THREE.ShaderPass.prototype = Object.assign(Object.create(THREE.Pass.prototype), {
0
0
1+ 35 other calls in file
160 161 162 163 164 165 166 167 168 169// if set to true, the result of the pass is rendered to screen this.renderToScreen = false; }; Object.assign( THREE.Pass.prototype, { setSize: function( width, height ) {}, render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
002+ 8 other calls in file
How does three.Pass work?
three.Pass is a shader material in the Three.js library that can be used to render a scene without applying any additional effects or transformations. This material is typically used as part of a post-processing pipeline to display the final output of the scene.
The three.Pass material simply takes the rendered output from the previous step in the pipeline and passes it through to the screen. This allows the previous effects to be applied to the scene while leaving the final output untouched.
When used as part of a post-processing pipeline, the three.Pass material is typically applied as the final step in the pipeline, after all other effects have been applied. This allows the final output of the scene to be displayed without any further processing.
For example, we could use three.Pass as the final step in a post-processing pipeline that applies bloom and color correction effects:
javascript// Create the render target and scene
const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
const scene = new THREE.Scene();
// Add some objects to the scene
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create the post-processing pipeline
const composer = new THREE.EffectComposer(renderer, renderTarget);
const bloomPass = new THREE.BloomPass();
composer.addPass(bloomPass);
const colorCorrectionPass = new THREE.ShaderPass(THREE.ColorCorrectionShader);
composer.addPass(colorCorrectionPass);
const finalPass = new THREE.ShaderPass(THREE.Pass);
composer.addPass(finalPass);
// Render the scene
composer.render();
In this example, we create a post-processing pipeline that applies a bloom effect and color correction effect to the scene, then renders the final output using the three.Pass material. We create a THREE.EffectComposer object to manage the post-processing pipeline, add a THREE.BloomPass to create a bloom effect, a THREE.ShaderPass with a color correction shader to adjust the color balance of the scene, and finally a THREE.ShaderPass with THREE.Pass material to display the final output.
This is just one example of how three.Pass can be used in Three.js to display the final output of a scene. The material provides a simple way to pass the rendered output through to the screen without applying any additional effects or transformations.
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 31const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0xffffff }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); const composer = new THREE.EffectComposer(renderer); const renderPass = new THREE.RenderPass(scene, camera); composer.addPass(renderPass); const finalPass = new THREE.ShaderPass(THREE.Pass); composer.addPass(finalPass); function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.01; composer.render(); } animate();
In this example, we create a simple scene with a rotating cube and use three.Pass to display the final output. We create a THREE.EffectComposer object to manage the post-processing pipeline and add a THREE.RenderPass to render the scene. We then add a THREE.ShaderPass with THREE.Pass material as the final pass in the pipeline. The THREE.RenderPass renders the scene as normal, and the THREE.ShaderPass with THREE.Pass material simply passes the output through to the screen without applying any additional effects or transformations. We then use composer.render() to render the final output of the scene with the post-processing pipeline. This example is a simple demonstration of how three.Pass can be used to display the final output of a scene without applying any additional effects or transformations. In more complex scenarios, three.Pass can be used as part of a post-processing pipeline to combine multiple effects and render the final output of the scene.
three.Vector3 is the most popular function in three (22341 examples)