| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Renderer - 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>
- <h1 translate="no">Renderer</h1>
- <section>
- <header>
- <div class="class-description"><p>Base class for renderers.</p></div>
- </header>
- <article>
- <div class="container-overview">
- <h2>Constructor</h2>
- <h3 class="name name-method" id="Renderer" translate="no">new <a href="#Renderer">Renderer</a><span class="signature">( backend : <span class="param-type"><a href="Backend.html">Backend</a></span>, parameters : <span class="param-type"><a href="Renderer.html#~Options">Renderer~Options</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Constructs a new renderer.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>backend</strong>
- </td>
- <td class="description last">
- <p>The backend the renderer is targeting (e.g. WebGPU or WebGL 2).</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>parameters</strong>
- </td>
- <td class="description last">
- <p>The configuration parameter.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <h2 class="subsection-title">Properties</h2>
- <div class="member">
- <h3 class="name" id="alpha" translate="no">.<a href="#alpha">alpha</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the default framebuffer should be transparent or opaque.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="autoClear" translate="no">.<a href="#autoClear">autoClear</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the renderer should automatically clear the current rendering target
- before execute a <code>render()</code> call. The target can be the canvas (default framebuffer)
- or the current bound render target (custom framebuffer).</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="autoClearColor" translate="no">.<a href="#autoClearColor">autoClearColor</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>When <code>autoClear</code> is set to <code>true</code>, this property defines whether the renderer
- should clear the color buffer.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="autoClearDepth" translate="no">.<a href="#autoClearDepth">autoClearDepth</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>When <code>autoClear</code> is set to <code>true</code>, this property defines whether the renderer
- should clear the depth buffer.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="autoClearStencil" translate="no">.<a href="#autoClearStencil">autoClearStencil</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>When <code>autoClear</code> is set to <code>true</code>, this property defines whether the renderer
- should clear the stencil buffer.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="backend" translate="no">.<a href="#backend">backend</a><span class="type-signature"> : <a href="Backend.html">Backend</a></span> </h3>
- <div class="description">
- <p>A reference to the current backend.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="contextNode" translate="no">.<a href="#contextNode">contextNode</a><span class="type-signature"> : <a href="ContextNode.html">ContextNode</a></span> </h3>
- <div class="description">
- <p>A global context node that stores override nodes for specific transformations or calculations.
- These nodes can be used to replace default behavior in the rendering pipeline.</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>value</strong>
- <br>
- <span class="param-type">Object</span>
- </td>
- <td class="description last">
- <p>The context value object.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="member">
- <h3 class="name" id="coordinateSystem" translate="no">.<a href="#coordinateSystem">coordinateSystem</a><span class="type-signature"> : number</span> <span class="type-signature">(readonly) </span></h3>
- <div class="description">
- <p>The coordinate system of the renderer. The value of this property
- depends on the selected backend. Either <code>THREE.WebGLCoordinateSystem</code> or
- <code>THREE.WebGPUCoordinateSystem</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="currentColorSpace" translate="no">.<a href="#currentColorSpace">currentColorSpace</a><span class="type-signature"> : string</span> </h3>
- <div class="description">
- <p>The current color space of the renderer. When not producing screen output,
- the color space is always the working color space.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="currentSamples" translate="no">.<a href="#currentSamples">currentSamples</a><span class="type-signature"> : number</span> </h3>
- <div class="description">
- <p>The current number of samples used for multi-sample anti-aliasing (MSAA).</p>
- <p>When rendering to a custom render target, the number of samples of that render target is used.
- If the renderer needs an internal framebuffer target for tone mapping or color space conversion,
- the number of samples is set to 0.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="currentToneMapping" translate="no">.<a href="#currentToneMapping">currentToneMapping</a><span class="type-signature"> : number</span> </h3>
- <div class="description">
- <p>The current tone mapping of the renderer. When not producing screen output,
- the tone mapping is always <code>NoToneMapping</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="debug" translate="no">.<a href="#debug">debug</a><span class="type-signature"> : <a href="global.html#DebugConfig">DebugConfig</a></span> </h3>
- <div class="description">
- <p>The renderer's debug configuration.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="depth" translate="no">.<a href="#depth">depth</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the default framebuffer should have a depth buffer or not.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="domElement" translate="no">.<a href="#domElement">domElement</a><span class="type-signature"> : HTMLCanvasElement | OffscreenCanvas</span> </h3>
- <div class="description">
- <p>A reference to the canvas element the renderer is drawing to.
- This value of this property will automatically be created by
- the renderer.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="highPrecision" translate="no">.<a href="#highPrecision">highPrecision</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Enables or disables high precision for model-view and normal-view matrices.
- When enabled, will use CPU 64-bit precision for higher precision instead of GPU 32-bit for higher performance.</p>
- <p>NOTE: 64-bit precision is not compatible with <code>InstancedMesh</code> and <code>SkinnedMesh</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="highPrecision" translate="no">.<a href="#highPrecision">highPrecision</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Returns whether high precision is enabled or not.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="info" translate="no">.<a href="#info">info</a><span class="type-signature"> : <a href="Info.html">Info</a></span> </h3>
- <div class="description">
- <p>Holds a series of statistical information about the GPU memory
- and the rendering process. Useful for debugging and monitoring.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="initialized" translate="no">.<a href="#initialized">initialized</a> <span class="type-signature">(readonly) </span></h3>
- <div class="description">
- <p>Returns whether the renderer has been initialized or not.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="inspector" translate="no">.<a href="#inspector">inspector</a><span class="type-signature"> : <a href="InspectorBase.html">InspectorBase</a></span> </h3>
- <div class="description">
- <p>The inspector instance. The inspector can be any class that extends from <code>InspectorBase</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="isOutputTarget" translate="no">.<a href="#isOutputTarget">isOutputTarget</a> </h3>
- <div class="description">
- <p>Returns <code>true</code> if the rendering settings are set to screen output.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="isRenderer" translate="no">.<a href="#isRenderer">isRenderer</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
- <div class="description">
- <p>This flag can be used for type testing.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="library" translate="no">.<a href="#library">library</a><span class="type-signature"> : <a href="NodeLibrary.html">NodeLibrary</a></span> </h3>
- <div class="description">
- <p>The node library defines how certain library objects like materials, lights
- or tone mapping functions are mapped to node types. This is required since
- although instances of classes like <code>MeshBasicMaterial</code> or <code>PointLight</code> can
- be part of the scene graph, they are internally represented as nodes for
- further processing.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="lighting" translate="no">.<a href="#lighting">lighting</a><span class="type-signature"> : <a href="Lighting.html">Lighting</a></span> </h3>
- <div class="description">
- <p>A map-like data structure for managing lights.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="logarithmicDepthBuffer" translate="no">.<a href="#logarithmicDepthBuffer">logarithmicDepthBuffer</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether logarithmic depth buffer is enabled or not.</p>
- <p>Default is <code>false</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="needsFrameBufferTarget" translate="no">.<a href="#needsFrameBufferTarget">needsFrameBufferTarget</a> </h3>
- <div class="description">
- <p>Returns <code>true</code> if a framebuffer target is needed to perform tone mapping or color space conversion.
- If this is the case, the renderer allocates an internal render target for that purpose.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="onDeviceLost" translate="no">.<a href="#onDeviceLost">onDeviceLost</a><span class="type-signature"> : function</span> </h3>
- <div class="description">
- <p>A callback function that defines what should happen when a device/context lost occurs.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="opaque" translate="no">.<a href="#opaque">opaque</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the renderer should render opaque render objects or not.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="outputColorSpace" translate="no">.<a href="#outputColorSpace">outputColorSpace</a><span class="type-signature"> : string</span> </h3>
- <div class="description">
- <p>Defines the output color space of the renderer.</p>
- <p>Default is <code>SRGBColorSpace</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="samples" translate="no">.<a href="#samples">samples</a><span class="type-signature"> : number</span> </h3>
- <div class="description">
- <p>The number of samples used for multi-sample anti-aliasing (MSAA).</p>
- <p>Default is <code>0</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="shadowMap" translate="no">.<a href="#shadowMap">shadowMap</a><span class="type-signature"> : <a href="global.html#ShadowMapConfig">ShadowMapConfig</a></span> </h3>
- <div class="description">
- <p>The renderer's shadow configuration.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="sortObjects" translate="no">.<a href="#sortObjects">sortObjects</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the renderer should sort its render lists or not.</p>
- <p>Note: Sorting is used to attempt to properly render objects that have some degree of transparency.
- By definition, sorting objects may not work in all cases. Depending on the needs of application,
- it may be necessary to turn off sorting and use other methods to deal with transparency rendering
- e.g. manually determining each object's rendering order.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="stencil" translate="no">.<a href="#stencil">stencil</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the default framebuffer should have a stencil buffer or not.</p>
- <p>Default is <code>false</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="toneMapping" translate="no">.<a href="#toneMapping">toneMapping</a><span class="type-signature"> : number</span> </h3>
- <div class="description">
- <p>Defines the tone mapping of the renderer.</p>
- <p>Default is <code>NoToneMapping</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="toneMappingExposure" translate="no">.<a href="#toneMappingExposure">toneMappingExposure</a><span class="type-signature"> : number</span> </h3>
- <div class="description">
- <p>Defines the tone mapping exposure.</p>
- <p>Default is <code>1</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="transparent" translate="no">.<a href="#transparent">transparent</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the renderer should render transparent render objects or not.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="xr" translate="no">.<a href="#xr">xr</a><span class="type-signature"> : <a href="XRManager.html">XRManager</a></span> </h3>
- <div class="description">
- <p>The renderer's XR manager.</p>
- </div>
- </div>
- <h2 class="subsection-title">Methods</h2>
- <h3 class="name name-method" id="clear" translate="no">.<a href="#clear">clear</a><span class="signature">( color : <span class="param-type">boolean</span>, depth : <span class="param-type">boolean</span>, stencil : <span class="param-type">boolean</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Performs a manual clear operation. This method ignores <code>autoClear</code> properties.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>color</strong>
- </td>
- <td class="description last">
- <p>Whether the color buffer should be cleared or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>depth</strong>
- </td>
- <td class="description last">
- <p>Whether the depth buffer should be cleared or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>stencil</strong>
- </td>
- <td class="description last">
- <p>Whether the stencil buffer should be cleared or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="clearAsync" translate="no">.<a href="#clearAsync">clearAsync</a><span class="signature">( color : <span class="param-type">boolean</span>, depth : <span class="param-type">boolean</span>, stencil : <span class="param-type">boolean</span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Async version of <a href="Renderer.html#clear">Renderer#clear</a>.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>color</strong>
- </td>
- <td class="description last">
- <p>Whether the color buffer should be cleared or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>depth</strong>
- </td>
- <td class="description last">
- <p>Whether the depth buffer should be cleared or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>stencil</strong>
- </td>
- <td class="description last">
- <p>Whether the stencil buffer should be cleared or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the clear operation has been executed.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="clearColor" translate="no">.<a href="#clearColor">clearColor</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Performs a manual clear operation of the color buffer. This method ignores <code>autoClear</code> properties.</p>
- </div>
- </div>
- <h3 class="name name-method" id="clearColorAsync" translate="no">.<a href="#clearColorAsync">clearColorAsync</a><span class="signature">()</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Async version of <a href="Renderer.html#clearColor">Renderer#clearColor</a>.</p>
- </div>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the clear operation has been executed.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="clearDepth" translate="no">.<a href="#clearDepth">clearDepth</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Performs a manual clear operation of the depth buffer. This method ignores <code>autoClear</code> properties.</p>
- </div>
- </div>
- <h3 class="name name-method" id="clearDepthAsync" translate="no">.<a href="#clearDepthAsync">clearDepthAsync</a><span class="signature">()</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Async version of <a href="Renderer.html#clearDepth">Renderer#clearDepth</a>.</p>
- </div>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the clear operation has been executed.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="clearStencil" translate="no">.<a href="#clearStencil">clearStencil</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Performs a manual clear operation of the stencil buffer. This method ignores <code>autoClear</code> properties.</p>
- </div>
- </div>
- <h3 class="name name-method" id="clearStencilAsync" translate="no">.<a href="#clearStencilAsync">clearStencilAsync</a><span class="signature">()</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Async version of <a href="Renderer.html#clearStencil">Renderer#clearStencil</a>.</p>
- </div>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the clear operation has been executed.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="compile" translate="no">.<a href="#compile">compile</a><span class="signature">( scene : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span>, targetScene : <span class="param-type"><a href="Scene.html">Scene</a></span> )</span><span class="type-signature"> : function</span> </h3>
- <div class="method">
- <div class="description">
- <p>Alias for <code>compileAsync()</code>.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene or 3D object to precompile.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera that is used to render the scene.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>targetScene</strong>
- </td>
- <td class="description last">
- <p>If the first argument is a 3D object, this parameter must represent the scene the 3D object is going to be added.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the compile has been finished.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="compileAsync" translate="no">.<a href="#compileAsync">compileAsync</a><span class="signature">( scene : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span>, targetScene : <span class="param-type"><a href="Scene.html">Scene</a></span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Compiles all materials in the given scene. This can be useful to avoid a
- phenomenon which is called "shader compilation stutter", which occurs when
- rendering an object with a new shader for the first time.</p>
- <p>If you want to add a 3D object to an existing scene, use the third optional
- parameter for applying the target scene. Note that the (target) scene's lighting
- and environment must be configured before calling this method.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene or 3D object to precompile.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera that is used to render the scene.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>targetScene</strong>
- </td>
- <td class="description last">
- <p>If the first argument is a 3D object, this parameter must represent the scene the 3D object is going to be added.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the compile has been finished.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="compute" translate="no">.<a href="#compute">compute</a><span class="signature">( computeNodes : <span class="param-type"><a href="Node.html">Node</a> | Array.<<a href="Node.html">Node</a>></span>, dispatchSize : <span class="param-type">number | Array.<number> | <a href="IndirectStorageBufferAttribute.html">IndirectStorageBufferAttribute</a></span> )</span><span class="type-signature"> : Promise | undefined</span> </h3>
- <div class="method">
- <div class="description">
- <p>Execute a single or an array of compute nodes. This method can only be called
- if the renderer has been initialized.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>computeNodes</strong>
- </td>
- <td class="description last">
- <p>The compute node(s).</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>dispatchSize</strong>
- </td>
- <td class="description last">
- <ul>
- <li>A single number representing count, or</li>
- <li>An array [x, y, z] representing dispatch size, or</li>
- <li>A IndirectStorageBufferAttribute for indirect dispatch size.</li>
- </ul>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolve when the compute has finished. Only returned when the renderer has not been initialized.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="computeAsync" translate="no">.<a href="#computeAsync">computeAsync</a><span class="signature">( computeNodes : <span class="param-type"><a href="Node.html">Node</a> | Array.<<a href="Node.html">Node</a>></span>, dispatchSize : <span class="param-type">number | Array.<number> | <a href="IndirectStorageBufferAttribute.html">IndirectStorageBufferAttribute</a></span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Execute a single or an array of compute nodes.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>computeNodes</strong>
- </td>
- <td class="description last">
- <p>The compute node(s).</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>dispatchSize</strong>
- </td>
- <td class="description last">
- <ul>
- <li>A single number representing count, or</li>
- <li>An array [x, y, z] representing dispatch size, or</li>
- <li>A IndirectStorageBufferAttribute for indirect dispatch size.</li>
- </ul>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolve when the compute has finished.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="copyFramebufferToTexture" translate="no">.<a href="#copyFramebufferToTexture">copyFramebufferToTexture</a><span class="signature">( framebufferTexture : <span class="param-type"><a href="FramebufferTexture.html">FramebufferTexture</a></span>, rectangle : <span class="param-type"><a href="Vector2.html">Vector2</a> | <a href="Vector4.html">Vector4</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Copies the current bound framebuffer into the given texture.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>framebufferTexture</strong>
- </td>
- <td class="description last">
- <p>The texture.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>rectangle</strong>
- </td>
- <td class="description last">
- <p>A two or four dimensional vector that defines the rectangular portion of the framebuffer that should be copied.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="copyTextureToTexture" translate="no">.<a href="#copyTextureToTexture">copyTextureToTexture</a><span class="signature">( srcTexture : <span class="param-type"><a href="Texture.html">Texture</a></span>, dstTexture : <span class="param-type"><a href="Texture.html">Texture</a></span>, srcRegion : <span class="param-type"><a href="Box2.html">Box2</a> | <a href="Box3.html">Box3</a></span>, dstPosition : <span class="param-type"><a href="Vector2.html">Vector2</a> | <a href="Vector3.html">Vector3</a></span>, srcLevel : <span class="param-type">number</span>, dstLevel : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Copies data of the given source texture into a destination texture.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>srcTexture</strong>
- </td>
- <td class="description last">
- <p>The source texture.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>dstTexture</strong>
- </td>
- <td class="description last">
- <p>The destination texture.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>srcRegion</strong>
- </td>
- <td class="description last">
- <p>A bounding box which describes the source region. Can be two or three-dimensional.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>dstPosition</strong>
- </td>
- <td class="description last">
- <p>A vector that represents the origin of the destination region. Can be two or three-dimensional.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>srcLevel</strong>
- </td>
- <td class="description last">
- <p>The source mip level to copy from.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>dstLevel</strong>
- </td>
- <td class="description last">
- <p>The destination mip level to copy to.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <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 all internal resources of the renderer. Call this method if the renderer
- is no longer in use by your app.</p>
- </div>
- </div>
- <h3 class="name name-method" id="getActiveCubeFace" translate="no">.<a href="#getActiveCubeFace">getActiveCubeFace</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the active cube face.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The active cube face.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getActiveMipmapLevel" translate="no">.<a href="#getActiveMipmapLevel">getActiveMipmapLevel</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the active mipmap level.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The active mipmap level.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getAnimationLoop" translate="no">.<a href="#getAnimationLoop">getAnimationLoop</a><span class="signature">()</span><span class="type-signature"> : function</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the current animation loop callback.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The current animation loop callback.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getArrayBufferAsync" translate="no">.<a href="#getArrayBufferAsync">getArrayBufferAsync</a><span class="signature">( attribute : <span class="param-type"><a href="StorageBufferAttribute.html">StorageBufferAttribute</a></span> )</span><span class="type-signature"> : Promise.<ArrayBuffer></span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Can be used to transfer buffer data from a storage buffer attribute
- from the GPU to the CPU in context of compute shaders.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>attribute</strong>
- </td>
- <td class="description last">
- <p>The storage buffer attribute.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A promise that resolves with the buffer data when the data are ready.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getCanvasTarget" translate="no">.<a href="#getCanvasTarget">getCanvasTarget</a><span class="signature">()</span><span class="type-signature"> : <a href="CanvasTarget.html">CanvasTarget</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the current canvas target.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The current canvas target.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getClearAlpha" translate="no">.<a href="#getClearAlpha">getClearAlpha</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the clear alpha.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The clear alpha.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getClearColor" translate="no">.<a href="#getClearColor">getClearColor</a><span class="signature">( target : <span class="param-type"><a href="Color.html">Color</a></span> )</span><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the clear color.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>target</strong>
- </td>
- <td class="description last">
- <p>The method writes the result in this target object.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The clear color.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getClearDepth" translate="no">.<a href="#getClearDepth">getClearDepth</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the clear depth.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The clear depth.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getClearStencil" translate="no">.<a href="#getClearStencil">getClearStencil</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the clear stencil.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The clear stencil.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getColorBufferType" translate="no">.<a href="#getColorBufferType">getColorBufferType</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the color buffer type.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The color buffer type.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getContext" translate="no">.<a href="#getContext">getContext</a><span class="signature">()</span><span class="type-signature"> : GPUCanvasContext | WebGL2RenderingContext</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the rendering context.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The rendering context.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getDrawingBufferSize" translate="no">.<a href="#getDrawingBufferSize">getDrawingBufferSize</a><span class="signature">( target : <span class="param-type"><a href="Vector2.html">Vector2</a></span> )</span><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the drawing buffer size in physical pixels. This method honors the pixel ratio.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>target</strong>
- </td>
- <td class="description last">
- <p>The method writes the result in this target object.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The drawing buffer size.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getMRT" translate="no">.<a href="#getMRT">getMRT</a><span class="signature">()</span><span class="type-signature"> : <a href="MRTNode.html">MRTNode</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the MRT configuration.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The MRT configuration.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getMaxAnisotropy" translate="no">.<a href="#getMaxAnisotropy">getMaxAnisotropy</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the maximum available anisotropy for texture filtering.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The maximum available anisotropy.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getOutputRenderTarget" translate="no">.<a href="#getOutputRenderTarget">getOutputRenderTarget</a><span class="signature">()</span><span class="type-signature"> : <a href="RenderTarget.html">RenderTarget</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the current output target.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The current output render target. Returns <code>null</code> if no output target is set.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getPixelRatio" translate="no">.<a href="#getPixelRatio">getPixelRatio</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the pixel ratio.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The pixel ratio.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getRenderObjectFunction" translate="no">.<a href="#getRenderObjectFunction">getRenderObjectFunction</a><span class="signature">()</span><span class="type-signature"> : function</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the current render object function.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The current render object function. Returns <code>null</code> if no function is set.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getRenderTarget" translate="no">.<a href="#getRenderTarget">getRenderTarget</a><span class="signature">()</span><span class="type-signature"> : <a href="RenderTarget.html">RenderTarget</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the current render target.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The render target. Returns <code>null</code> if no render target is set.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getScissor" translate="no">.<a href="#getScissor">getScissor</a><span class="signature">( target : <span class="param-type"><a href="Vector4.html">Vector4</a></span> )</span><span class="type-signature"> : <a href="Vector4.html">Vector4</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the scissor rectangle.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>target</strong>
- </td>
- <td class="description last">
- <p>The method writes the result in this target object.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The scissor rectangle.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getScissorTest" translate="no">.<a href="#getScissorTest">getScissorTest</a><span class="signature">()</span><span class="type-signature"> : boolean</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the scissor test value.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> Whether the scissor test should be enabled or not.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getSize" translate="no">.<a href="#getSize">getSize</a><span class="signature">( target : <span class="param-type"><a href="Vector2.html">Vector2</a></span> )</span><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>target</strong>
- </td>
- <td class="description last">
- <p>The method writes the result in this target object.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The renderer's size in logical pixels.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getViewport" translate="no">.<a href="#getViewport">getViewport</a><span class="signature">( target : <span class="param-type"><a href="Vector4.html">Vector4</a></span> )</span><span class="type-signature"> : <a href="Vector4.html">Vector4</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the viewport definition.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>target</strong>
- </td>
- <td class="description last">
- <p>The method writes the result in this target object.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The viewport definition.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="hasFeature" translate="no">.<a href="#hasFeature">hasFeature</a><span class="signature">( name : <span class="param-type">string</span> )</span><span class="type-signature"> : boolean</span> </h3>
- <div class="method">
- <div class="description">
- <p>Checks if the given feature is supported by the selected backend. If the
- renderer has not been initialized, this method always returns <code>false</code>.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>name</strong>
- </td>
- <td class="description last">
- <p>The feature's name.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> Whether the feature is supported or not.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="hasFeatureAsync" translate="no">.<a href="#hasFeatureAsync">hasFeatureAsync</a><span class="signature">( name : <span class="param-type">string</span> )</span><span class="type-signature"> : Promise.<boolean></span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Checks if the given feature is supported by the selected backend.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>name</strong>
- </td>
- <td class="description last">
- <p>The feature's name.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves with a bool that indicates whether the feature is supported or not.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="hasInitialized" translate="no">.<a href="#hasInitialized">hasInitialized</a><span class="signature">()</span><span class="type-signature"> : boolean</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns <code>true</code> when the renderer has been initialized.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> Whether the renderer has been initialized or not.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="init" translate="no">.<a href="#init">init</a><span class="signature">()</span><span class="type-signature"> : Promise.<this></span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Initializes the renderer so it is ready for usage.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the renderer has been initialized.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="initTexture" translate="no">.<a href="#initTexture">initTexture</a><span class="signature">( texture : <span class="param-type"><a href="Texture.html">Texture</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Initializes the given texture. Useful for preloading a texture rather than waiting until first render
- (which can cause noticeable lags due to decode and GPU upload overhead).</p>
- <p>This method can only be used if the renderer has been initialized.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>texture</strong>
- </td>
- <td class="description last">
- <p>The texture.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="initTextureAsync" translate="no">.<a href="#initTextureAsync">initTextureAsync</a><span class="signature">( texture : <span class="param-type"><a href="Texture.html">Texture</a></span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Initializes the given textures. Useful for preloading a texture rather than waiting until first render
- (which can cause noticeable lags due to decode and GPU upload overhead).</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>texture</strong>
- </td>
- <td class="description last">
- <p>The texture.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the texture has been initialized.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="isOccluded" translate="no">.<a href="#isOccluded">isOccluded</a><span class="signature">( object : <span class="param-type"><a href="Object3D.html">Object3D</a></span> )</span><span class="type-signature"> : boolean</span> </h3>
- <div class="method">
- <div class="description">
- <p>This method performs an occlusion query for the given 3D object.
- It returns <code>true</code> if the given 3D object is fully occluded by other
- 3D objects in the scene.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>object</strong>
- </td>
- <td class="description last">
- <p>The 3D object to test.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> Whether the 3D object is fully occluded or not.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="readRenderTargetPixelsAsync" translate="no">.<a href="#readRenderTargetPixelsAsync">readRenderTargetPixelsAsync</a><span class="signature">( renderTarget : <span class="param-type"><a href="RenderTarget.html">RenderTarget</a></span>, x : <span class="param-type">number</span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, textureIndex : <span class="param-type">number</span>, faceIndex : <span class="param-type">number</span> )</span><span class="type-signature"> : Promise.<TypedArray></span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Reads pixel data from the given render target.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>renderTarget</strong>
- </td>
- <td class="description last">
- <p>The render target to read from.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>x</strong>
- </td>
- <td class="description last">
- <p>The <code>x</code> coordinate of the copy region's origin.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>y</strong>
- </td>
- <td class="description last">
- <p>The <code>y</code> coordinate of the copy region's origin.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>width</strong>
- </td>
- <td class="description last">
- <p>The width of the copy region.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>height</strong>
- </td>
- <td class="description last">
- <p>The height of the copy region.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>textureIndex</strong>
- </td>
- <td class="description last">
- <p>The texture index of a MRT render target.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>faceIndex</strong>
- </td>
- <td class="description last">
- <p>The active cube face index.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the read has been finished. The resolve provides the read data as a typed array.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="render" translate="no">.<a href="#render">render</a><span class="signature">( scene : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Renders the scene or 3D object with the given camera. This method can only be called
- if the renderer has been initialized. When using <code>render()</code> inside an animation loop,
- it's guaranteed the renderer will be initialized. The animation loop must be defined
- with <a href="Renderer.html#setAnimationLoop">Renderer#setAnimationLoop</a> though.</p>
- <p>For all other use cases (like when using on-demand rendering), you must call
- <a href="Renderer.html#init">Renderer#init</a> before rendering.</p>
- <p>The target of the method is the default framebuffer (meaning the canvas)
- or alternatively a render target when specified via <code>setRenderTarget()</code>.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene or 3D object to render.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera to render the scene with.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="renderAsync" translate="no">.<a href="#renderAsync">renderAsync</a><span class="signature">( scene : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Renders the scene in an async fashion.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene or 3D object to render.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the render has been finished.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="renderObject" translate="no">.<a href="#renderObject">renderObject</a><span class="signature">( object : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, scene : <span class="param-type"><a href="Scene.html">Scene</a></span>, camera : <span class="param-type"><a href="Camera.html">Camera</a></span>, geometry : <span class="param-type"><a href="BufferGeometry.html">BufferGeometry</a></span>, material : <span class="param-type"><a href="Material.html">Material</a></span>, group : <span class="param-type">Object</span>, lightsNode : <span class="param-type"><a href="LightsNode.html">LightsNode</a></span>, clippingContext : <span class="param-type"><a href="ClippingContext.html">ClippingContext</a></span>, passId : <span class="param-type">string</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>This method represents the default render object function that manages the render lifecycle
- of the object.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>object</strong>
- </td>
- <td class="description last">
- <p>The 3D object.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene the 3D object belongs to.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera the object should be rendered with.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>geometry</strong>
- </td>
- <td class="description last">
- <p>The object's geometry.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>material</strong>
- </td>
- <td class="description last">
- <p>The object's material.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>group</strong>
- </td>
- <td class="description last">
- <p>Only relevant for objects using multiple materials. This represents a group entry from the respective <code>BufferGeometry</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>lightsNode</strong>
- </td>
- <td class="description last">
- <p>The current lights node.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>clippingContext</strong>
- </td>
- <td class="description last">
- <p>The clipping context.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>passId</strong>
- </td>
- <td class="description last">
- <p>An optional ID for identifying the pass.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setAnimationLoop" translate="no">.<a href="#setAnimationLoop">setAnimationLoop</a><span class="signature">( callback : <span class="param-type"><a href="global.html#onAnimationCallback">onAnimationCallback</a></span> )</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Applications are advised to always define the animation loop
- with this method and not manually with <code>requestAnimationFrame()</code>
- for best compatibility.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>callback</strong>
- </td>
- <td class="description last">
- <p>The application's animation loop.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when the set has been executed.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="setCanvasTarget" translate="no">.<a href="#setCanvasTarget">setCanvasTarget</a><span class="signature">( canvasTarget : <span class="param-type"><a href="CanvasTarget.html">CanvasTarget</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the canvas target. The canvas target manages the HTML canvas
- or the offscreen canvas the renderer draws into.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>canvasTarget</strong>
- </td>
- <td class="description last">
- <p>The canvas target.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setClearAlpha" translate="no">.<a href="#setClearAlpha">setClearAlpha</a><span class="signature">( alpha : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the clear alpha.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>alpha</strong>
- </td>
- <td class="description last">
- <p>The clear alpha.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setClearColor" translate="no">.<a href="#setClearColor">setClearColor</a><span class="signature">( color : <span class="param-type"><a href="Color.html">Color</a></span>, alpha : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the clear color and optionally the clear alpha.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>color</strong>
- </td>
- <td class="description last">
- <p>The clear color.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>alpha</strong>
- </td>
- <td class="description last">
- <p>The clear alpha.</p>
- <p>Default is <code>1</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setClearDepth" translate="no">.<a href="#setClearDepth">setClearDepth</a><span class="signature">( depth : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the clear depth.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>depth</strong>
- </td>
- <td class="description last">
- <p>The clear depth.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setClearStencil" translate="no">.<a href="#setClearStencil">setClearStencil</a><span class="signature">( stencil : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the clear stencil.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>stencil</strong>
- </td>
- <td class="description last">
- <p>The clear stencil.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setDrawingBufferSize" translate="no">.<a href="#setDrawingBufferSize">setDrawingBufferSize</a><span class="signature">( width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, pixelRatio : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>This method allows to define the drawing buffer size by specifying
- width, height and pixel ratio all at once. The size of the drawing
- buffer is computed with this formula:</p>
- <pre><code class="language-js">size.x = width * pixelRatio;
- size.y = height * pixelRatio;
- </code></pre>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>width</strong>
- </td>
- <td class="description last">
- <p>The width in logical pixels.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>height</strong>
- </td>
- <td class="description last">
- <p>The height in logical pixels.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>pixelRatio</strong>
- </td>
- <td class="description last">
- <p>The pixel ratio.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setMRT" translate="no">.<a href="#setMRT">setMRT</a><span class="signature">( mrt : <span class="param-type"><a href="MRTNode.html">MRTNode</a></span> )</span><span class="type-signature"> : <a href="Renderer.html">Renderer</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the given MRT configuration.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>mrt</strong>
- </td>
- <td class="description last">
- <p>The MRT node to set.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A reference to this renderer.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="setOpaqueSort" translate="no">.<a href="#setOpaqueSort">setOpaqueSort</a><span class="signature">( method : <span class="param-type">function</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines a manual sort function for the opaque render list.
- Pass <code>null</code> to use the default sort.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>method</strong>
- </td>
- <td class="description last">
- <p>The sort function.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setOutputRenderTarget" translate="no">.<a href="#setOutputRenderTarget">setOutputRenderTarget</a><span class="signature">( renderTarget : <span class="param-type">Object</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the output render target for the renderer.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>renderTarget</strong>
- </td>
- <td class="description last">
- <p>The render target to set as the output target.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setPixelRatio" translate="no">.<a href="#setPixelRatio">setPixelRatio</a><span class="signature">( value : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the given pixel ratio and resizes the canvas if necessary.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>value</strong>
- </td>
- <td class="description last">
- <p>The pixel ratio.</p>
- <p>Default is <code>1</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setRenderObjectFunction" translate="no">.<a href="#setRenderObjectFunction">setRenderObjectFunction</a><span class="signature">( renderObjectFunction : <span class="param-type"><a href="global.html#renderObjectFunction">renderObjectFunction</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the given render object function. Calling this method overwrites the default implementation
- which is <a href="Renderer.html#renderObject">Renderer#renderObject</a>. Defining a custom function can be useful
- if you want to modify the way objects are rendered. For example you can define things like "every
- object that has material of a certain type should perform a pre-pass with a special overwrite material".
- The custom function must always call <code>renderObject()</code> in its implementation.</p>
- <p>Use <code>null</code> as the first argument to reset the state.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>renderObjectFunction</strong>
- </td>
- <td class="description last">
- <p>The render object function.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setRenderTarget" translate="no">.<a href="#setRenderTarget">setRenderTarget</a><span class="signature">( renderTarget : <span class="param-type"><a href="RenderTarget.html">RenderTarget</a></span>, activeCubeFace : <span class="param-type">number</span>, activeMipmapLevel : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the given render target. Calling this method means the renderer does not
- target the default framebuffer (meaning the canvas) anymore but a custom framebuffer.
- Use <code>null</code> as the first argument to reset the state.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>renderTarget</strong>
- </td>
- <td class="description last">
- <p>The render target to set.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>activeCubeFace</strong>
- </td>
- <td class="description last">
- <p>The active cube face.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>activeMipmapLevel</strong>
- </td>
- <td class="description last">
- <p>The active mipmap level.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setScissor" translate="no">.<a href="#setScissor">setScissor</a><span class="signature">( x : <span class="param-type">number | <a href="Vector4.html">Vector4</a></span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the scissor rectangle.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>x</strong>
- </td>
- <td class="description last">
- <p>The horizontal coordinate for the lower left corner of the box in logical pixel unit.
- Instead of passing four arguments, the method also works with a single four-dimensional vector.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>y</strong>
- </td>
- <td class="description last">
- <p>The vertical coordinate for the lower left corner of the box in logical pixel unit.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>width</strong>
- </td>
- <td class="description last">
- <p>The width of the scissor box in logical pixel unit.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>height</strong>
- </td>
- <td class="description last">
- <p>The height of the scissor box in logical pixel unit.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setScissorTest" translate="no">.<a href="#setScissorTest">setScissorTest</a><span class="signature">( boolean : <span class="param-type">boolean</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the scissor test.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>boolean</strong>
- </td>
- <td class="description last">
- <p>Whether the scissor test should be enabled or not.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </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>, updateStyle : <span class="param-type">boolean</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the size of the renderer.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>width</strong>
- </td>
- <td class="description last">
- <p>The width in logical pixels.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>height</strong>
- </td>
- <td class="description last">
- <p>The height in logical pixels.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>updateStyle</strong>
- </td>
- <td class="description last">
- <p>Whether to update the <code>style</code> attribute of the canvas or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setTransparentSort" translate="no">.<a href="#setTransparentSort">setTransparentSort</a><span class="signature">( method : <span class="param-type">function</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines a manual sort function for the transparent render list.
- Pass <code>null</code> to use the default sort.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>method</strong>
- </td>
- <td class="description last">
- <p>The sort function.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="setViewport" translate="no">.<a href="#setViewport">setViewport</a><span class="signature">( x : <span class="param-type">number | <a href="Vector4.html">Vector4</a></span>, y : <span class="param-type">number</span>, width : <span class="param-type">number</span>, height : <span class="param-type">number</span>, minDepth : <span class="param-type">number</span>, maxDepth : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Defines the viewport.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>x</strong>
- </td>
- <td class="description last">
- <p>The horizontal coordinate for the lower left corner of the viewport origin in logical pixel unit.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>y</strong>
- </td>
- <td class="description last">
- <p>The vertical coordinate for the lower left corner of the viewport origin in logical pixel unit.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>width</strong>
- </td>
- <td class="description last">
- <p>The width of the viewport in logical pixel unit.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>height</strong>
- </td>
- <td class="description last">
- <p>The height of the viewport in logical pixel unit.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>minDepth</strong>
- </td>
- <td class="description last">
- <p>The minimum depth value of the viewport. WebGPU only.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxDepth</strong>
- </td>
- <td class="description last">
- <p>The maximum depth value of the viewport. WebGPU only.</p>
- <p>Default is <code>1</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h3 class="name name-method" id="waitForGPU" translate="no">.<a href="#waitForGPU">waitForGPU</a><span class="signature">()</span><span class="type-signature"> : Promise</span> <span class="type-signature">(async) </span></h3>
- <div class="method">
- <div class="description">
- <p>Can be used to synchronize CPU operations with GPU tasks. So when this method is called,
- the CPU waits for the GPU to complete its operation (e.g. a compute task).</p>
- </div>
- <dl class="details">
- <dt class="important tag-deprecated"><strong>Deprecated:</strong> Yes</dt>
- </dl>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> A Promise that resolves when synchronization has been finished.</dt>
- </dl>
- </div>
- <h2 class="subsection-title">Type Definitions</h2>
- <div class="member">
- <h3 class="name" id="~Options" translate="no">.<a href="#~Options">Options</a> </h3>
- <div class="description">
- <p>Renderer options.</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>logarithmicDepthBuffer</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether logarithmic depth buffer is enabled or not.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>alpha</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether the default framebuffer (which represents the final contents of the canvas) should be transparent or opaque.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>depth</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether the default framebuffer should have a depth buffer or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>stencil</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether the default framebuffer should have a stencil buffer or not.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>antialias</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether MSAA as the default anti-aliasing should be enabled or not.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>samples</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>When <code>antialias</code> is <code>true</code>, <code>4</code> samples are used by default. This parameter can set to any other integer value than 0
- to overwrite the default.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>getFallback</strong>
- <br>
- <span class="param-type">function</span>
- </td>
- <td class="description last">
- <p>This callback function can be used to provide a fallback backend, if the primary backend can't be targeted.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>colorBufferType</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>Defines the type of color buffers. The default <code>HalfFloatType</code> is recommend for best
- quality. To save memory and bandwidth, <code>UnsignedByteType</code> might be used. This will reduce rendering quality though.</p>
- <p>Default is <code>HalfFloatType</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>multiview</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>If set to <code>true</code>, the renderer will use multiview during WebXR rendering if supported.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <h2 class="subsection-title">Source</h2>
- <p>
- <a href="https://github.com/mrdoob/three.js/blob/master/src/renderers/common/Renderer.js" translate="no" target="_blank" rel="noopener">src/renderers/common/Renderer.js</a>
- </p>
- </article>
- </section>
- <script src="../scripts/linenumber.js"></script>
- <script src="../scripts/page.js"></script>
- </body>
- </html>
|