| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531 |
- <!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">WebGLRenderer~Options</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"><code>parameters</code></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.<br/>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.<br/>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.<br/>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.<br/>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>.<br/>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.<br/>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.<br/>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.<br/>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.<br/>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.<br/>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.<br/>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>.<br/>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"><code>color</code></td>
- <td class="description last"><p>Whether the color buffer should be cleared or not.<br/>Default is <code>true</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>depth</code></td>
- <td class="description last"><p>Whether the depth buffer should be cleared or not.<br/>Default is <code>true</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>stencil</code></td>
- <td class="description last"><p>Whether the stencil buffer should be cleared or not.<br/>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">Object3D</span>, camera : <span class="param-type">Camera</span>, targetScene : <span class="param-type">Scene</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"><code>scene</code></td>
- <td class="description last"><p>The scene or another type of 3D object to precompile.</p></td>
- </tr>
- <tr>
- <td class="name"><code>camera</code></td>
- <td class="description last"><p>The camera.</p></td>
- </tr>
- <tr>
- <td class="name"><code>targetScene</code></td>
- <td class="description last"><p>The target scene.<br/>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">Object3D</span>, camera : <span class="param-type">Camera</span>, targetScene : <span class="param-type">Scene</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"><code>scene</code></td>
- <td class="description last"><p>The scene or another type of 3D object to precompile.</p></td>
- </tr>
- <tr>
- <td class="name"><code>camera</code></td>
- <td class="description last"><p>The camera.</p></td>
- </tr>
- <tr>
- <td class="name"><code>targetScene</code></td>
- <td class="description last"><p>The target scene.<br/>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">FramebufferTexture</span>, position : <span class="param-type">Vector2</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"><code>texture</code></td>
- <td class="description last"><p>The texture.</p></td>
- </tr>
- <tr>
- <td class="name"><code>position</code></td>
- <td class="description last"><p>The start position of the copy operation.<br/>Default is <code>null</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>level</code></td>
- <td class="description last"><p>The mip level. The default represents the base mip.<br/>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">Texture</span>, dstTexture : <span class="param-type">Texture</span>, srcRegion : <span class="param-type">Box2 | Box3</span>, dstPosition : <span class="param-type">Vector2 | Vector3</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"><code>srcTexture</code></td>
- <td class="description last"><p>The source texture.</p></td>
- </tr>
- <tr>
- <td class="name"><code>dstTexture</code></td>
- <td class="description last"><p>The destination texture.</p></td>
- </tr>
- <tr>
- <td class="name"><code>srcRegion</code></td>
- <td class="description last"><p>A bounding box which describes the source region. Can be two or three-dimensional.<br/>Default is <code>null</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>dstPosition</code></td>
- <td class="description last"><p>A vector that represents the origin of the destination region. Can be two or three-dimensional.<br/>Default is <code>null</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>srcLevel</code></td>
- <td class="description last"><p>The source mipmap level to copy.<br/>Default is <code>0</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>dstLevel</code></td>
- <td class="description last"><p>The destination mipmap level.<br/>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">Color</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"><code>target</code></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">Vector2</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"><code>target</code></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">Vector2</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"><code>target</code></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">Vector4</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"><code>target</code></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">Vector2</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"><code>target</code></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">Vector4</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"><code>target</code></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">WebGLRenderTarget</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"><code>target</code></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">Texture</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"><code>texture</code></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">WebGLRenderTarget</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"><code>renderTarget</code></td>
- <td class="description last"><p>The render target to read from.</p></td>
- </tr>
- <tr>
- <td class="name"><code>x</code></td>
- <td class="description last"><p>The <code>x</code> coordinate of the copy region's origin.</p></td>
- </tr>
- <tr>
- <td class="name"><code>y</code></td>
- <td class="description last"><p>The <code>y</code> coordinate of the copy region's origin.</p></td>
- </tr>
- <tr>
- <td class="name"><code>width</code></td>
- <td class="description last"><p>The width of the copy region.</p></td>
- </tr>
- <tr>
- <td class="name"><code>height</code></td>
- <td class="description last"><p>The height of the copy region.</p></td>
- </tr>
- <tr>
- <td class="name"><code>buffer</code></td>
- <td class="description last"><p>The result buffer.</p></td>
- </tr>
- <tr>
- <td class="name"><code>activeCubeFaceIndex</code></td>
- <td class="description last"><p>The active cube face index.</p></td>
- </tr>
- <tr>
- <td class="name"><code>textureIndex</code></td>
- <td class="description last"><p>The texture index of an MRT render target.<br/>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">WebGLRenderTarget</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"><code>renderTarget</code></td>
- <td class="description last"><p>The render target to read from.</p></td>
- </tr>
- <tr>
- <td class="name"><code>x</code></td>
- <td class="description last"><p>The <code>x</code> coordinate of the copy region's origin.</p></td>
- </tr>
- <tr>
- <td class="name"><code>y</code></td>
- <td class="description last"><p>The <code>y</code> coordinate of the copy region's origin.</p></td>
- </tr>
- <tr>
- <td class="name"><code>width</code></td>
- <td class="description last"><p>The width of the copy region.</p></td>
- </tr>
- <tr>
- <td class="name"><code>height</code></td>
- <td class="description last"><p>The height of the copy region.</p></td>
- </tr>
- <tr>
- <td class="name"><code>buffer</code></td>
- <td class="description last"><p>The result buffer.</p></td>
- </tr>
- <tr>
- <td class="name"><code>activeCubeFaceIndex</code></td>
- <td class="description last"><p>The active cube face index.</p></td>
- </tr>
- <tr>
- <td class="name"><code>textureIndex</code></td>
- <td class="description last"><p>The texture index of an MRT render target.<br/>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">Object3D</span>, camera : <span class="param-type">Camera</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"><code>scene</code></td>
- <td class="description last"><p>The scene to render.</p></td>
- </tr>
- <tr>
- <td class="name"><code>camera</code></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">onAnimationCallback</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"><code>callback</code></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"><code>alpha</code></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">Color</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"><code>color</code></td>
- <td class="description last"><p>The clear color.</p></td>
- </tr>
- <tr>
- <td class="name"><code>alpha</code></td>
- <td class="description last"><p>The clear alpha.<br/>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"><code>width</code></td>
- <td class="description last"><p>The width in logical pixels.</p></td>
- </tr>
- <tr>
- <td class="name"><code>height</code></td>
- <td class="description last"><p>The height in logical pixels.</p></td>
- </tr>
- <tr>
- <td class="name"><code>pixelRatio</code></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"><code>method</code></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"><code>value</code></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">WebGLRenderTarget</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"><code>renderTarget</code></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"><code>activeCubeFace</code></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.<br/>Default is <code>0</code>.</p></td>
- </tr>
- <tr>
- <td class="name"><code>activeMipmapLevel</code></td>
- <td class="description last"><p>The active mipmap level.<br/>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 | Vector4</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"><code>x</code></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"><code>y</code></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"><code>width</code></td>
- <td class="description last"><p>The width of the scissor region in logical pixel unit.</p></td>
- </tr>
- <tr>
- <td class="name"><code>height</code></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"><code>boolean</code></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"><code>width</code></td>
- <td class="description last"><p>The width in logical pixels.</p></td>
- </tr>
- <tr>
- <td class="name"><code>height</code></td>
- <td class="description last"><p>The height in logical pixels.</p></td>
- </tr>
- <tr>
- <td class="name"><code>updateStyle</code></td>
- <td class="description last"><p>Whether to update the <code>style</code> attribute of the canvas or not.<br/>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"><code>method</code></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 | Vector4</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"><code>x</code></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"><code>y</code></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"><code>width</code></td>
- <td class="description last"><p>The width of the viewport in logical pixel unit.</p></td>
- </tr>
- <tr>
- <td class="name"><code>height</code></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>
- <h5 class="subsection-title">Properties:</h5>
- <table class="props">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th class="last">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="name"><code>getMaxAnisotropy</code></td>
- <td class="type">
- <span class="param-type">function</span>
- </td>
- <td class="description last"><p>Returns the maximum available anisotropy.</p></td>
- </tr>
- <tr>
- <td class="name"><code>getMaxPrecision</code></td>
- <td class="type">
- <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"><code>logarithmicDepthBuffer</code></td>
- <td class="type">
- <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"><code>maxAttributes</code></td>
- <td class="type">
- <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"><code>maxCubemapSize</code></td>
- <td class="type">
- <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"><code>maxFragmentUniforms</code></td>
- <td class="type">
- <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"><code>maxSamples</code></td>
- <td class="type">
- <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"><code>maxTextures</code></td>
- <td class="type">
- <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"><code>maxTextureSize</code></td>
- <td class="type">
- <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"><code>maxVaryings</code></td>
- <td class="type">
- <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"><code>maxVertexTextures</code></td>
- <td class="type">
- <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"><code>maxVertexUniforms</code></td>
- <td class="type">
- <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"><code>precision</code></td>
- <td class="type">
- <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"><code>reversedDepthBuffer</code></td>
- <td class="type">
- <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"><code>vertexTextures</code></td>
- <td class="type">
- <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>
- <h5 class="subsection-title">Properties:</h5>
- <table class="props">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Attributes</th>
- <th>Default</th>
- <th class="last">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="name"><code>autoReset</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- true
- </td>
- <td class="description last"><p>Whether to automatically reset the info by the renderer or not.</p></td>
- </tr>
- <tr>
- <td class="name"><code>memory</code></td>
- <td class="type">
- <span class="param-type"><a href="WebGLRenderer.html#~InfoMemory">WebGLRenderer~InfoMemory</a></span>
- </td>
- <td class="attributes">
- </td>
- <td class="default">
- </td>
- <td class="description last"><p>Information about allocated objects.</p></td>
- </tr>
- <tr>
- <td class="name"><code>render</code></td>
- <td class="type">
- <span class="param-type"><a href="WebGLRenderer.html#~InfoRender">WebGLRenderer~InfoRender</a></span>
- </td>
- <td class="attributes">
- </td>
- <td class="default">
- </td>
- <td class="description last"><p>Information about rendered objects.</p></td>
- </tr>
- <tr>
- <td class="name"><code>programs</code></td>
- <td class="type">
- <span class="param-type">Array.<WebGLProgram></span>
- </td>
- <td class="attributes">
- <nullable><br>
- </td>
- <td class="default">
- </td>
- <td class="description last"><p>An array <code>WebGLProgram</code>s used for rendering.</p></td>
- </tr>
- <tr>
- <td class="name"><code>reset</code></td>
- <td class="type">
- <span class="param-type">function</span>
- </td>
- <td class="attributes">
- </td>
- <td class="default">
- </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>
- <h5 class="subsection-title">Properties:</h5>
- <table class="props">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th class="last">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="name"><code>geometries</code></td>
- <td class="type">
- <span class="param-type">number</span>
- </td>
- <td class="description last"><p>The number of active geometries.</p></td>
- </tr>
- <tr>
- <td class="name"><code>textures</code></td>
- <td class="type">
- <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>
- <h5 class="subsection-title">Properties:</h5>
- <table class="props">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th class="last">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="name"><code>frame</code></td>
- <td class="type">
- <span class="param-type">number</span>
- </td>
- <td class="description last"><p>The frame ID.</p></td>
- </tr>
- <tr>
- <td class="name"><code>calls</code></td>
- <td class="type">
- <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"><code>triangles</code></td>
- <td class="type">
- <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"><code>points</code></td>
- <td class="type">
- <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"><code>lines</code></td>
- <td class="type">
- <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>
- <h5 class="subsection-title">Properties:</h5>
- <table class="props">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Attributes</th>
- <th>Default</th>
- <th class="last">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="name"><code>canvas</code></td>
- <td class="type">
- <span class="param-type">HTMLCanvasElement</span>
- |
- <span class="param-type">OffscreenCanvas</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- null
- </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></td>
- </tr>
- <tr>
- <td class="name"><code>context</code></td>
- <td class="type">
- <span class="param-type">WebGL2RenderingContext</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- null
- </td>
- <td class="description last"><p>Can be used to attach an existing rendering context to this renderer.</p></td>
- </tr>
- <tr>
- <td class="name"><code>precision</code></td>
- <td class="type">
- <span class="param-type">'highp'</span>
- |
- <span class="param-type">'mediump'</span>
- |
- <span class="param-type">'lowp'</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- 'highp'
- </td>
- <td class="description last"><p>The default shader precision. Uses <code>highp</code> if supported by the device.</p></td>
- </tr>
- <tr>
- <td class="name"><code>alpha</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </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></td>
- </tr>
- <tr>
- <td class="name"><code>premultipliedAlpha</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- true
- </td>
- <td class="description last"><p>Whether the renderer will assume colors have premultiplied alpha or not.</p></td>
- </tr>
- <tr>
- <td class="name"><code>antialias</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </td>
- <td class="description last"><p>Whether to use the default MSAA or not.</p></td>
- </tr>
- <tr>
- <td class="name"><code>stencil</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </td>
- <td class="description last"><p>Whether the drawing buffer has a stencil buffer of at least 8 bits or not.</p></td>
- </tr>
- <tr>
- <td class="name"><code>preserveDrawingBuffer</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </td>
- <td class="description last"><p>Whether to preserve the buffer until manually cleared or overwritten.</p></td>
- </tr>
- <tr>
- <td class="name"><code>powerPreference</code></td>
- <td class="type">
- <span class="param-type">'default'</span>
- |
- <span class="param-type">'low-power'</span>
- |
- <span class="param-type">'high-performance'</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- 'default'
- </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></td>
- </tr>
- <tr>
- <td class="name"><code>failIfMajorPerformanceCaveat</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </td>
- <td class="description last"><p>Whether the renderer creation will fail upon low performance is detected.</p></td>
- </tr>
- <tr>
- <td class="name"><code>depth</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- true
- </td>
- <td class="description last"><p>Whether the drawing buffer has a depth buffer of at least 16 bits.</p></td>
- </tr>
- <tr>
- <td class="name"><code>logarithmicDepthBuffer</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </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></td>
- </tr>
- <tr>
- <td class="name"><code>reversedDepthBuffer</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </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></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>
- <h5 class="subsection-title">Properties:</h5>
- <table class="props">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Attributes</th>
- <th>Default</th>
- <th class="last">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="name"><code>enabled</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </td>
- <td class="description last"><p>If set to <code>true</code>, use shadow maps in the scene.</p></td>
- </tr>
- <tr>
- <td class="name"><code>autoUpdate</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- true
- </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></td>
- </tr>
- <tr>
- <td class="name"><code>needsUpdate</code></td>
- <td class="type">
- <span class="param-type">boolean</span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- false
- </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></td>
- </tr>
- <tr>
- <td class="name"><code>type</code></td>
- <td class="type">
- <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#PCFSoftShadowMap">PCFSoftShadowMap</a></span>
- |
- <span class="param-type"><a href="global.html#VSMShadowMap">VSMShadowMap</a></span>
- </td>
- <td class="attributes">
- <optional><br>
- </td>
- <td class="default">
- PCFShadowMap
- </td>
- <td class="description last"><p>Defines the shadow map type.</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" target="_blank" rel="noopener" translate="no">src/renderers/WebGLRenderer.js</a>
- </p>
- </article>
- </section>
- <script src="../scripts/linenumber.js"></script>
- <script src="../scripts/page.js"></script>
- </body>
- </html>
|