| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>WebGLRenderer - 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">WebGLRenderer</h1>
- <section>
- <header>
- <div class="class-description"><p>This renderer uses WebGL 2 to display scenes.</p>
- <p>WebGL 1 is not supported since <code>r163</code>.</p></div>
- </header>
- <article>
- <div class="container-overview">
- <h2>Constructor</h2>
- <h3 class="name name-method" id="WebGLRenderer" translate="no">new <a href="#WebGLRenderer">WebGLRenderer</a><span class="signature">( parameters : <span class="param-type"><a href="WebGLRenderer.html#~Options">WebGLRenderer~Options</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Constructs a new WebGL renderer.</p>
- </div>
- <table class="params">
- <tbody>
- <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="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 its output before rendering a frame or not.</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>If <a href="WebGLRenderer.html#autoClear">WebGLRenderer#autoClear</a> set to <code>true</code>, whether the renderer should clear
- the color buffer or not.</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>If <a href="WebGLRenderer.html#autoClear">WebGLRenderer#autoClear</a> set to <code>true</code>, whether the renderer should clear
- the depth buffer or not.</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>If <a href="WebGLRenderer.html#autoClear">WebGLRenderer#autoClear</a> set to <code>true</code>, whether the renderer should clear
- the stencil buffer or not.</p>
- <p>Default is <code>true</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="capabilities" translate="no">.<a href="#capabilities">capabilities</a><span class="type-signature"> : <a href="WebGLRenderer.html#~Capabilities">WebGLRenderer~Capabilities</a></span> </h3>
- <div class="description">
- <p>Holds details about the capabilities of the current rendering context.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="clippingPlanes" translate="no">.<a href="#clippingPlanes">clippingPlanes</a><span class="type-signature"> : Array.<<a href="Plane.html">Plane</a>></span> </h3>
- <div class="description">
- <p>User-defined clipping planes specified in world space. These planes apply globally.
- Points in space whose dot product with the plane is negative are cut away.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="coordinateSystem" translate="no">.<a href="#coordinateSystem">coordinateSystem</a><span class="type-signature"> : <a href="global.html#WebGLCoordinateSystem">WebGLCoordinateSystem</a> | <a href="global.html#WebGPUCoordinateSystem">WebGPUCoordinateSystem</a></span> <span class="type-signature">(readonly) </span></h3>
- <div class="description">
- <p>Defines the coordinate system of the renderer.</p>
- <p>In <code>WebGLRenderer</code>, the value is always <code>WebGLCoordinateSystem</code>.</p>
- <p>Default is <code>WebGLCoordinateSystem</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="debug" translate="no">.<a href="#debug">debug</a><span class="type-signature"> : Object</span> </h3>
- <div class="description">
- <p>A object with debug configuration settings.</p>
- <ul>
- <li><code>checkShaderErrors</code>: If it is <code>true</code>, defines whether material shader programs are
- checked for errors during compilation and linkage process. It may be useful to disable
- this check in production for performance gain. It is strongly recommended to keep these
- checks enabled during development. If the shader does not compile and link - it will not
- work and associated material will not render.</li>
- <li><code>onShaderError(gl, program, glVertexShader,glFragmentShader)</code>: A callback function that
- can be used for custom error reporting. The callback receives the WebGL context, an instance
- of WebGLProgram as well two instances of WebGLShader representing the vertex and fragment shader.
- Assigning a custom function disables the default error reporting.</li>
- </ul>
- </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 canvas where the renderer draws its output.This is automatically created by the renderer
- in the constructor (if not provided already); you just need to add it to your page like so:</p>
- <pre><code class="language-js">document.body.appendChild( renderer.domElement );
- </code></pre>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="extensions" translate="no">.<a href="#extensions">extensions</a><span class="type-signature"> : Object</span> </h3>
- <div class="description">
- <p>Provides methods for retrieving and testing WebGL extensions.</p>
- <ul>
- <li><code>get(extensionName:string)</code>: Used to check whether a WebGL extension is supported
- and return the extension object if available.</li>
- <li><code>has(extensionName:string)</code>: returns <code>true</code> if the extension is supported.</li>
- </ul>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="info" translate="no">.<a href="#info">info</a><span class="type-signature"> : <a href="WebGLRenderer.html#~Info">WebGLRenderer~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>
- <p>By default these data are reset at each render call but when having
- multiple render passes per frame (e.g. when using post processing) it can
- be preferred to reset with a custom pattern. First, set <code>autoReset</code> to
- <code>false</code>.</p>
- <pre><code class="language-js">renderer.info.autoReset = false;
- </code></pre>
- <p>Call <code>reset()</code> whenever you have finished to render a single frame.</p>
- <pre><code class="language-js">renderer.info.reset();
- </code></pre>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="isWebGLRenderer" translate="no">.<a href="#isWebGLRenderer">isWebGLRenderer</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="localClippingEnabled" translate="no">.<a href="#localClippingEnabled">localClippingEnabled</a><span class="type-signature"> : boolean</span> </h3>
- <div class="description">
- <p>Whether the renderer respects object-level clipping planes or not.</p>
- <p>Default is <code>false</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="outputColorSpace" translate="no">.<a href="#outputColorSpace">outputColorSpace</a><span class="type-signature"> : <a href="global.html#SRGBColorSpace">SRGBColorSpace</a> | <a href="global.html#LinearSRGBColorSpace">LinearSRGBColorSpace</a></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="properties" translate="no">.<a href="#properties">properties</a><span class="type-signature"> : Object</span> </h3>
- <div class="description">
- <p>Used to track properties of other objects like native WebGL objects.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="renderLists" translate="no">.<a href="#renderLists">renderLists</a><span class="type-signature"> : Object</span> </h3>
- <div class="description">
- <p>Manages the render lists of the renderer.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="shadowMap" translate="no">.<a href="#shadowMap">shadowMap</a><span class="type-signature"> : <a href="WebGLRenderer.html#~ShadowMap">WebGLRenderer~ShadowMap</a></span> </h3>
- <div class="description">
- <p>Interface for managing shadows.</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 objects 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="state" translate="no">.<a href="#state">state</a><span class="type-signature"> : Object</span> </h3>
- <div class="description">
- <p>Interface for managing the WebGL state.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="toneMapping" translate="no">.<a href="#toneMapping">toneMapping</a><span class="type-signature"> : <a href="global.html#NoToneMapping">NoToneMapping</a> | <a href="global.html#LinearToneMapping">LinearToneMapping</a> | <a href="global.html#ReinhardToneMapping">ReinhardToneMapping</a> | <a href="global.html#CineonToneMapping">CineonToneMapping</a> | <a href="global.html#ACESFilmicToneMapping">ACESFilmicToneMapping</a> | <a href="global.html#CustomToneMapping">CustomToneMapping</a> | <a href="global.html#AgXToneMapping">AgXToneMapping</a> | <a href="global.html#NeutralToneMapping">NeutralToneMapping</a></span> </h3>
- <div class="description">
- <p>The tone mapping technique 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>Exposure level of tone mapping.</p>
- <p>Default is <code>1</code>.</p>
- </div>
- </div>
- <div class="member">
- <h3 class="name" id="transmissionResolutionScale" translate="no">.<a href="#transmissionResolutionScale">transmissionResolutionScale</a><span class="type-signature"> : number</span> </h3>
- <div class="description">
- <p>The normalized resolution scale for the transmission render target, measured in percentage
- of viewport dimensions. Lowering this value can result in significant performance improvements
- when using <a href="MeshPhysicalMaterial.html#transmission">MeshPhysicalMaterial#transmission</a>.</p>
- <p>Default is <code>1</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="WebXRManager.html">WebXRManager</a></span> </h3>
- <div class="description">
- <p>A reference to the 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>Tells the renderer to clear its color, depth or stencil drawing buffer(s).
- This method initializes the buffers to the current clear color values.</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="clearColor" translate="no">.<a href="#clearColor">clearColor</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Clears the color buffer. Equivalent to calling <code>renderer.clear( true, false, false )</code>.</p>
- </div>
- </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>Clears the depth buffer. Equivalent to calling <code>renderer.clear( false, true, false )</code>.</p>
- </div>
- </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>Clears the stencil buffer. Equivalent to calling <code>renderer.clear( false, false, true )</code>.</p>
- </div>
- </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"> : Set.<<a href="Material.html">Material</a>></span> </h3>
- <div class="method">
- <div class="description">
- <p>Compiles all materials in the scene with the camera. This is useful to precompile shaders
- before the first rendering. If you want to add a 3D object to an existing scene, use the third
- optional parameter for applying the target scene.</p>
- <p>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 another type of 3D object to precompile.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>targetScene</strong>
- </td>
- <td class="description last">
- <p>The target scene.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The precompiled materials.</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>Asynchronous version of <a href="WebGLRenderer.html#compile">WebGLRenderer#compile</a>.</p>
- <p>This method makes use of the <code>KHR_parallel_shader_compile</code> WebGL extension. Hence,
- it is recommended to use this version of <code>compile()</code> whenever possible.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene or another type of 3D object to precompile.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>camera</strong>
- </td>
- <td class="description last">
- <p>The camera.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>targetScene</strong>
- </td>
- <td class="description last">
- <p>The target scene.</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 given scene can be rendered without unnecessary stalling due to shader compilation.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="copyFramebufferToTexture" translate="no">.<a href="#copyFramebufferToTexture">copyFramebufferToTexture</a><span class="signature">( texture : <span class="param-type"><a href="FramebufferTexture.html">FramebufferTexture</a></span>, position : <span class="param-type"><a href="Vector2.html">Vector2</a></span>, level : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Copies pixels from the current bound framebuffer into the given texture.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>texture</strong>
- </td>
- <td class="description last">
- <p>The texture.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>position</strong>
- </td>
- <td class="description last">
- <p>The start position of the copy operation.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>level</strong>
- </td>
- <td class="description last">
- <p>The mip level. The default represents the base mip.</p>
- <p>Default is <code>0</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>
- <p>When using render target textures as <code>srcTexture</code> and <code>dstTexture</code>, you must make sure both render targets are initialized
- <a href="WebGLRenderer.html#initRenderTarget">WebGLRenderer#initRenderTarget</a>.</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 mipmap level to copy.</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 mipmap level.</p>
- <p>Default is <code>null</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 the GPU-related resources allocated by this instance. Call this
- method whenever this instance is no longer used in your app.</p>
- </div>
- </div>
- <h3 class="name name-method" id="forceContextLoss" translate="no">.<a href="#forceContextLoss">forceContextLoss</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Simulates a loss of the WebGL context. This requires support for the <code>WEBGL_lose_context</code> extension.</p>
- </div>
- </div>
- <h3 class="name name-method" id="forceContextRestore" translate="no">.<a href="#forceContextRestore">forceContextRestore</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Simulates a restore of the WebGL context. This requires support for the <code>WEBGL_lose_context</code> extension.</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="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. Ranges within <code>[0,1]</code>.</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="getContext" translate="no">.<a href="#getContext">getContext</a><span class="signature">()</span><span class="type-signature"> : 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="getContextAttributes" translate="no">.<a href="#getContextAttributes">getContextAttributes</a><span class="signature">()</span><span class="type-signature"> : WebGLContextAttributes</span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the rendering context attributes.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The rendering context attributes.</dt>
- </dl>
- </div>
- <h3 class="name name-method" id="getCurrentViewport" translate="no">.<a href="#getCurrentViewport">getCurrentViewport</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 current 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 current viewport definition.</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="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="getRenderTarget" translate="no">.<a href="#getRenderTarget">getRenderTarget</a><span class="signature">()</span><span class="type-signature"> : <a href="WebGLRenderTarget.html">WebGLRenderTarget</a></span> </h3>
- <div class="method">
- <div class="description">
- <p>Returns the active render target.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> The active render target. Returns <code>null</code> if no render target
- is currently 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 region.</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 region.</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 <code>true</code> if the scissor test is enabled.</p>
- </div>
- <dl class="details">
- <dt class="tag-returns"><strong>Returns:</strong> Whether the scissor test is 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="initRenderTarget" translate="no">.<a href="#initRenderTarget">initRenderTarget</a><span class="signature">( target : <span class="param-type"><a href="WebGLRenderTarget.html">WebGLRenderTarget</a></span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Initializes the given WebGLRenderTarget memory. Useful for initializing a render target so data
- can be copied into it using <a href="WebGLRenderer.html#copyTextureToTexture">WebGLRenderer#copyTextureToTexture</a> before it has been
- rendered to.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>target</strong>
- </td>
- <td class="description last">
- <p>The render target.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </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>
- </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="readRenderTargetPixels" translate="no">.<a href="#readRenderTargetPixels">readRenderTargetPixels</a><span class="signature">( renderTarget : <span class="param-type"><a href="WebGLRenderTarget.html">WebGLRenderTarget</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>, buffer : <span class="param-type">TypedArray</span>, activeCubeFaceIndex : <span class="param-type">number</span>, textureIndex : <span class="param-type">number</span> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Reads the pixel data from the given render target into the given buffer.</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>buffer</strong>
- </td>
- <td class="description last">
- <p>The result buffer.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>activeCubeFaceIndex</strong>
- </td>
- <td class="description last">
- <p>The active cube face index.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>textureIndex</strong>
- </td>
- <td class="description last">
- <p>The texture index of an MRT render target.</p>
- <p>Default is <code>0</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </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="WebGLRenderTarget.html">WebGLRenderTarget</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>, buffer : <span class="param-type">TypedArray</span>, activeCubeFaceIndex : <span class="param-type">number</span>, textureIndex : <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>Asynchronous, non-blocking version of <a href="WebGLRenderer.html#readRenderTargetPixels">WebGLRenderer#readRenderTargetPixels</a>.</p>
- <p>It is recommended to use this version of <code>readRenderTargetPixels()</code> whenever possible.</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>buffer</strong>
- </td>
- <td class="description last">
- <p>The result buffer.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>activeCubeFaceIndex</strong>
- </td>
- <td class="description last">
- <p>The active cube face index.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>textureIndex</strong>
- </td>
- <td class="description last">
- <p>The texture index of an MRT render target.</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 given scene (or other type of 3D object) using the given camera.</p>
- <p>The render is done to a previously specified render target set by calling <a href="WebGLRenderer.html#setRenderTarget">WebGLRenderer#setRenderTarget</a>
- or to the canvas as usual.</p>
- <p>By default render buffers are cleared before rendering but you can prevent
- this by setting the property <code>autoClear</code> to <code>false</code>. If you want to prevent
- only certain buffers being cleared you can <code>autoClearColor</code>, <code>autoClearDepth</code>
- or <code>autoClearStencil</code> to <code>false</code>. To force a clear, use <a href="WebGLRenderer.html#clear">WebGLRenderer#clear</a>.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>scene</strong>
- </td>
- <td class="description last">
- <p>The scene 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>
- </div>
- <h3 class="name name-method" id="resetState" translate="no">.<a href="#resetState">resetState</a><span class="signature">()</span> </h3>
- <div class="method">
- <div class="description">
- <p>Can be used to reset the internal WebGL state. This method is mostly
- relevant for applications which share a single WebGL context across
- multiple WebGL libraries.</p>
- </div>
- </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> </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>
- </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>Sets 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>Sets the clear color and 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="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="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>Sets a custom opaque sort function for the render lists. Pass <code>null</code>
- to use the default <code>painterSortStable</code> function.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>method</strong>
- </td>
- <td class="description last">
- <p>The opaque sort function.</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>
- </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="WebGLRenderTarget.html">WebGLRenderTarget</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 active rendertarget.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>renderTarget</strong>
- </td>
- <td class="description last">
- <p>The render target to set. When <code>null</code> is given,
- the canvas is set as the active render target instead.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>activeCubeFace</strong>
- </td>
- <td class="description last">
- <p>The active cube face when using a cube render target.
- Indicates the z layer to render in to when using 3D or array render targets.</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>Sets the scissor region to render from <code>(x, y)</code> to <code>(x + width, y + height)</code>.</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 scissor region origin in logical pixel unit.
- Or alternatively a four-component vector specifying all the parameters of the scissor region.</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 scissor region 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 scissor region 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 region 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>Enable or disable the scissor test. When this is enabled, only the pixels
- within the defined scissor area will be affected by further renderer
- actions.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>boolean</strong>
- </td>
- <td class="description last">
- <p>Whether the scissor test is 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>Resizes the output canvas to (width, height) with device pixel ratio taken
- into account, and also sets the viewport to fit that size, starting in (0,
- 0). Setting <code>updateStyle</code> to false prevents any style changes to the output canvas.</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>Sets a custom transparent sort function for the render lists. Pass <code>null</code>
- to use the default <code>reversePainterSortStable</code> function.</p>
- </div>
- <table class="params">
- <tbody>
- <tr>
- <td class="name">
- <strong>method</strong>
- </td>
- <td class="description last">
- <p>The opaque 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> )</span> </h3>
- <div class="method">
- <div class="description">
- <p>Sets the viewport to render from <code>(x, y)</code> to <code>(x + width, y + height)</code>.</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.
- Or alternatively a four-component vector specifying all the parameters of the viewport.</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>
- </tbody>
- </table>
- </div>
- <h2 class="subsection-title">Type Definitions</h2>
- <div class="member">
- <h3 class="name" id="~Capabilities" translate="no">.<a href="#~Capabilities">Capabilities</a> </h3>
- <div class="description">
- <p>WebGLRenderer Capabilities.</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>getMaxAnisotropy</strong>
- <br>
- <span class="param-type">function</span>
- </td>
- <td class="description last">
- <p>Returns the maximum available anisotropy.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>getMaxPrecision</strong>
- <br>
- <span class="param-type">function</span>
- </td>
- <td class="description last">
- <p>Returns the maximum available precision for vertex and fragment shaders.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>logarithmicDepthBuffer</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p><code>true</code> if <code>logarithmicDepthBuffer</code> was set to <code>true</code> in the constructor.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxAttributes</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of shader attributes that can be used by the vertex shader.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxCubemapSize</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>Maximum height * width of cube map textures that a shader can use.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxFragmentUniforms</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of uniforms that can be used by a fragment shader.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxSamples</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>Maximum number of samples in context of Multisample anti-aliasing (MSAA).</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxTextures</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The maximum number of textures that can be used by a shader.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxTextureSize</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>Maximum height * width of a texture that a shader use.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxVaryings</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of varying vectors that can used by shaders.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxVertexTextures</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of textures that can be used in a vertex shader.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>maxVertexUniforms</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The maximum number of uniforms that can be used in a vertex shader.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>precision</strong>
- <br>
- <span class="param-type">string</span>
- </td>
- <td class="description last">
- <p>The shader precision currently being used by the renderer.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>reversedDepthBuffer</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p><code>true</code> if <code>reversedDepthBuffer</code> was set to <code>true</code> in the constructor
- and the rendering context supports <code>EXT_clip_control</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>vertexTextures</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p><code>true</code> if vertex textures can be used.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="member">
- <h3 class="name" id="~Info" translate="no">.<a href="#~Info">Info</a> </h3>
- <div class="description">
- <p>WebGLRenderer Info</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>autoReset</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether to automatically reset the info by the renderer or not.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>memory</strong>
- <br>
- <span class="param-type"><a href="WebGLRenderer.html#~InfoMemory">WebGLRenderer~InfoMemory</a></span>
- </td>
- <td class="description last">
- <p>Information about allocated objects.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>render</strong>
- <br>
- <span class="param-type"><a href="WebGLRenderer.html#~InfoRender">WebGLRenderer~InfoRender</a></span>
- </td>
- <td class="description last">
- <p>Information about rendered objects.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>programs</strong>
- <br>
- <span class="param-type">Array.<WebGLProgram></span>
- </td>
- <td class="description last">
- <p>An array <code>WebGLProgram</code>s used for rendering.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>reset</strong>
- <br>
- <span class="param-type">function</span>
- </td>
- <td class="description last">
- <p>Resets the info object for the next frame.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="member">
- <h3 class="name" id="~InfoMemory" translate="no">.<a href="#~InfoMemory">InfoMemory</a> </h3>
- <div class="description">
- <p>WebGLRenderer Info Memory</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>geometries</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of active geometries.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>textures</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of active textures.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="member">
- <h3 class="name" id="~InfoRender" translate="no">.<a href="#~InfoRender">InfoRender</a> </h3>
- <div class="description">
- <p>WebGLRenderer Info Render</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>frame</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The frame ID.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>calls</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of draw calls per frame.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>triangles</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of rendered triangles primitives per frame.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>points</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of rendered points primitives per frame.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>lines</strong>
- <br>
- <span class="param-type">number</span>
- </td>
- <td class="description last">
- <p>The number of rendered lines primitives per frame.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="member">
- <h3 class="name" id="~Options" translate="no">.<a href="#~Options">Options</a> </h3>
- <div class="description">
- <p>WebGLRenderer options.</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>canvas</strong>
- <br>
- <span class="param-type">HTMLCanvasElement</span>
- |
- <span class="param-type">OffscreenCanvas</span>
- </td>
- <td class="description last">
- <p>A canvas element where the renderer draws its output. If not passed in here, a new canvas element will be created by the renderer.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>context</strong>
- <br>
- <span class="param-type">WebGL2RenderingContext</span>
- </td>
- <td class="description last">
- <p>Can be used to attach an existing rendering context to this renderer.</p>
- <p>Default is <code>null</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>precision</strong>
- <br>
- <span class="param-type">'highp'</span>
- |
- <span class="param-type">'mediump'</span>
- |
- <span class="param-type">'lowp'</span>
- </td>
- <td class="description last">
- <p>The default shader precision. Uses <code>highp</code> if supported by the device.</p>
- <p>Default is <code>'highp'</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>alpha</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Controls the default clear alpha value. When set to<code>true</code>, the value is <code>0</code>. Otherwise it's <code>1</code>.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>premultipliedAlpha</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether the renderer will assume colors have premultiplied alpha or not.</p>
- <p>Default is <code>true</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 to use the default MSAA or not.</p>
- <p>Default is <code>false</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 drawing buffer has a stencil buffer of at least 8 bits or not.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>preserveDrawingBuffer</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether to preserve the buffer until manually cleared or overwritten.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>powerPreference</strong>
- <br>
- <span class="param-type">'default'</span>
- |
- <span class="param-type">'low-power'</span>
- |
- <span class="param-type">'high-performance'</span>
- </td>
- <td class="description last">
- <p>Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context.</p>
- <p>Default is <code>'default'</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>failIfMajorPerformanceCaveat</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether the renderer creation will fail upon low performance is detected.</p>
- <p>Default is <code>false</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 drawing buffer has a depth buffer of at least 16 bits.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>logarithmicDepthBuffer</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether to use a logarithmic depth buffer. It may be necessary to use this if dealing with huge differences in scale in a single scene.
- Note that this setting uses <code>gl_FragDepth</code> if available which disables the Early Fragment Test optimization and can cause a decrease in performance.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>reversedDepthBuffer</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Whether to use a reverse depth buffer. Requires the <code>EXT_clip_control</code> extension.
- This is a more faster and accurate version than logarithmic depth buffer.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="member">
- <h3 class="name" id="~ShadowMap" translate="no">.<a href="#~ShadowMap">ShadowMap</a> </h3>
- <div class="description">
- <p>WebGLRenderer Shadow Map.</p>
- </div>
- <table class="props">
- <tbody>
- <tr>
- <td class="name">
- <strong>enabled</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>If set to <code>true</code>, use shadow maps in the scene.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>autoUpdate</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>Enables automatic updates to the shadows in the scene.
- If you do not require dynamic lighting / shadows, you may set this to <code>false</code>.</p>
- <p>Default is <code>true</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>needsUpdate</strong>
- <br>
- <span class="param-type">boolean</span>
- </td>
- <td class="description last">
- <p>When set to <code>true</code>, shadow maps in the scene
- will be updated in the next <code>render</code> call.</p>
- <p>Default is <code>false</code>.</p>
- </td>
- </tr>
- <tr>
- <td class="name">
- <strong>type</strong>
- <br>
- <span class="param-type"><a href="global.html#BasicShadowMap">BasicShadowMap</a></span>
- |
- <span class="param-type"><a href="global.html#PCFShadowMap">PCFShadowMap</a></span>
- |
- <span class="param-type"><a href="global.html#VSMShadowMap">VSMShadowMap</a></span>
- </td>
- <td class="description last">
- <p>Defines the shadow map type.</p>
- <p>Default is <code>PCFShadowMap</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/WebGLRenderer.js" translate="no" target="_blank" rel="noopener">src/renderers/WebGLRenderer.js</a>
- </p>
- </article>
- </section>
- <script src="../scripts/linenumber.js"></script>
- <script src="../scripts/page.js"></script>
- </body>
- </html>
|