samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>UnrealBloomPass - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
		<p class="inheritance" translate="no"><a href="Pass.html">Pass</a> → </p>
	<h1 translate="no">UnrealBloomPass</h1>
		<section>
			<header>
				<div class="class-description"><p>This pass is inspired by the bloom pass of Unreal Engine. It creates a
mip map chain of bloom textures and blurs them with different radii. Because
of the weighted combination of mips, and because larger blurs are done on
higher mips, this effect provides good quality and performance.</p>
<p>When using this pass, tone mapping must be enabled in the renderer settings.</p>
<p>Reference:</p>
<ul>
<li><a href="https://docs.unrealengine.com/latest/INT/Engine/Rendering/PostProcessEffects/Bloom/" target="_blank" rel="noopener">Bloom in Unreal Engine</a></li>
</ul></div>
				<h2>Code Example</h2>
				<div translate="no"><pre><code class="language-js">const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
const bloomPass = new UnrealBloomPass( resolution, 1.5, 0.4, 0.85 );
composer.addPass( bloomPass );
</code></pre></div>
			</header>
			<article>
				<h2 class="subsection-title">Import</h2>
				<p><span translate="no">UnrealBloomPass</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank" rel="noopener">Installation#Addons</a>.</p>
				<pre><code class="language-js">import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';</code></pre>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="UnrealBloomPass" translate="no">new <a href="#UnrealBloomPass">UnrealBloomPass</a><span class="signature">( resolution : <span class="param-type"><a href="Vector2.html">Vector2</a></span>, strength : <span class="param-type">number</span>, radius : <span class="param-type">number</span>, threshold : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new Unreal Bloom pass.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>resolution</strong>
									</td>
									<td class="description last">
										<p>The effect's resolution.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>strength</strong>
									</td>
									<td class="description last">
										<p>The Bloom strength.</p>
										<p>Default is <code>1</code>.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>radius</strong>
									</td>
									<td class="description last">
										<p>The Bloom radius.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>threshold</strong>
									</td>
									<td class="description last">
										<p>The luminance threshold limits which bright areas contribute to the Bloom effect.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="clearColor" translate="no">.<a href="#clearColor">clearColor</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
					<div class="description">
						<p>The effect's clear color</p>
						<p>Default is <code>(0,0,0)</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="needsSwap" translate="no">.<a href="#needsSwap">needsSwap</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Overwritten to disable the swap.</p>
						<p>Default is <code>false</code>.</p>
					</div>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="Pass.html#needsSwap">Pass#needsSwap</a></dt>
						</dl>
				</div>
				<div class="member">
					<h3 class="name" id="radius" translate="no">.<a href="#radius">radius</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The Bloom radius.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="resolution" translate="no">.<a href="#resolution">resolution</a><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
					<div class="description">
						<p>The effect's resolution.</p>
						<p>Default is <code>(256,256)</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="strength" translate="no">.<a href="#strength">strength</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The Bloom strength.</p>
						<p>Default is <code>1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="threshold" translate="no">.<a href="#threshold">threshold</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The luminance threshold limits which bright areas contribute to the Bloom effect.</p>
					</div>
				</div>
				<h2 class="subsection-title">Methods</h2>
					<h3 class="name name-method" id="dispose" translate="no">.<a href="#dispose">dispose</a><span class="signature">()</span> </h3>
					<div class="method">
						<div class="description">
							<p>Frees the GPU-related resources allocated by this instance. Call this
method whenever the pass is no longer used in your app.</p>
						</div>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="Pass.html#dispose">Pass#dispose</a></dt>
						</dl>
					</div>
					<h3 class="name name-method" id="render" translate="no">.<a href="#render">render</a><span class="signature">( renderer : <span class="param-type"><a href="WebGLRenderer.html">WebGLRenderer</a></span>, writeBuffer : <span class="param-type"><a href="WebGLRenderTarget.html">WebGLRenderTarget</a></span>, readBuffer : <span class="param-type"><a href="WebGLRenderTarget.html">WebGLRenderTarget</a></span>, deltaTime : <span class="param-type">number</span>, maskActive : <span class="param-type">boolean</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Performs the Bloom pass.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>renderer</strong>
									</td>
									<td class="description last">
										<p>The renderer.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>writeBuffer</strong>
									</td>
									<td class="description last">
										<p>The write buffer. This buffer is intended as the rendering
destination for the pass.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>readBuffer</strong>
									</td>
									<td class="description last">
										<p>The read buffer. The pass can access the result from the
previous pass from this buffer.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>deltaTime</strong>
									</td>
									<td class="description last">
										<p>The delta time in seconds.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>maskActive</strong>
									</td>
									<td class="description last">
										<p>Whether masking is active or not.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="Pass.html#render">Pass#render</a></dt>
						</dl>
					</div>
					<h3 class="name name-method" id="setSize" translate="no">.<a href="#setSize">setSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Sets the size of the pass.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>width</strong>
									</td>
									<td class="description last">
										<p>The width to set.</p>
									</td>
								</tr>
								<tr>
									<td class="name">
										<strong>height</strong>
									</td>
									<td class="description last">
										<p>The height to set.</p>
									</td>
								</tr>
							</tbody>
						</table>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="Pass.html#setSize">Pass#setSize</a></dt>
						</dl>
					</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/postprocessing/UnrealBloomPass.js" translate="no" target="_blank" rel="noopener">examples/jsm/postprocessing/UnrealBloomPass.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>