Michael Herzog 10 месяцев назад
Родитель
Сommit
5f265a259f

+ 589 - 13
src/renderers/WebGLRenderer.js

@@ -55,8 +55,18 @@ import { WebGLUniformsGroups } from './webgl/WebGLUniformsGroups.js';
 import { createCanvasElement, probeAsync, toNormalizedProjectionMatrix, toReversedProjectionMatrix, warnOnce } from '../utils.js';
 import { createCanvasElement, probeAsync, toNormalizedProjectionMatrix, toReversedProjectionMatrix, warnOnce } from '../utils.js';
 import { ColorManagement } from '../math/ColorManagement.js';
 import { ColorManagement } from '../math/ColorManagement.js';
 
 
+/**
+ * This renderer uses WebGL 2 to display scenes.
+ *
+ * WebGL 1 is not supported since `r163`.
+ */
 class WebGLRenderer {
 class WebGLRenderer {
 
 
+	/**
+	 * Constructs a new WebGL renderer.
+	 *
+	 * @param {WebGLRenderer~Options} [parameters] - The configuration parameter.
+	 */
 	constructor( parameters = {} ) {
 	constructor( parameters = {} ) {
 
 
 		const {
 		const {
@@ -73,6 +83,13 @@ class WebGLRenderer {
 			reverseDepthBuffer = false,
 			reverseDepthBuffer = false,
 		} = parameters;
 		} = parameters;
 
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isWebGLRenderer = true;
 		this.isWebGLRenderer = true;
 
 
 		let _alpha;
 		let _alpha;
@@ -107,13 +124,36 @@ class WebGLRenderer {
 
 
 		// public properties
 		// public properties
 
 
+		/**
+		 * 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:
+		 * ```js
+		 * document.body.appendChild( renderer.domElement );
+		 * ```
+		 *
+		 * @type {DOMElement}
+		 */
 		this.domElement = canvas;
 		this.domElement = canvas;
 
 
-		// Debug configuration container
+		/**
+		 * A object with debug configuration settings.
+		 *
+		 * - `checkShaderErrors`: If it is `true`, 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.
+		 * - `onShaderError(gl, program, glVertexShader,glFragmentShader)`: 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.
+		 *
+		 * @type {Object}
+		 */
 		this.debug = {
 		this.debug = {
 
 
 			/**
 			/**
-			 * Enables error checking and reporting when shader programs are being compiled
+			 * Enables error checking and reporting when shader programs are being compiled.
 			 * @type {boolean}
 			 * @type {boolean}
 			 */
 			 */
 			checkShaderErrors: true,
 			checkShaderErrors: true,
@@ -126,29 +166,105 @@ class WebGLRenderer {
 
 
 		// clearing
 		// clearing
 
 
+		/**
+		 * Whether the renderer should automatically clear its output before rendering a frame or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.autoClear = true;
 		this.autoClear = true;
+
+		/**
+		 * If {@link WebGLRenderer#autoClear} set to `true`, whether the renderer should clear
+		 * the color buffer or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.autoClearColor = true;
 		this.autoClearColor = true;
+
+		/**
+		 * If {@link WebGLRenderer#autoClear} set to `true`, whether the renderer should clear
+		 * the depth buffer or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.autoClearDepth = true;
 		this.autoClearDepth = true;
+
+		/**
+		 * If {@link WebGLRenderer#autoClear} set to `true`, whether the renderer should clear
+		 * the stencil buffer or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.autoClearStencil = true;
 		this.autoClearStencil = true;
 
 
 		// scene graph
 		// scene graph
 
 
+		/**
+		 * Whether the renderer should sort objects or not.
+		 *
+		 * 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.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.sortObjects = true;
 		this.sortObjects = true;
 
 
 		// user-defined clipping
 		// user-defined clipping
 
 
+		/**
+		 * 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.
+		 *
+		 * @type {Array<Plane>}
+		 */
 		this.clippingPlanes = [];
 		this.clippingPlanes = [];
-		this.localClippingEnabled = false;
-
-		// physically based shading
 
 
-		this._outputColorSpace = SRGBColorSpace;
+		/**
+		 * Whether the renderer respects object-level clipping planes or not.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.localClippingEnabled = false;
 
 
 		// tone mapping
 		// tone mapping
 
 
+		/**
+		 * The tone mapping technique of the renderer.
+		 *
+		 * @type {(NoToneMapping|LinearToneMapping|ReinhardToneMapping|CineonToneMapping|ACESFilmicToneMapping|CustomToneMapping|AgXToneMapping|NeutralToneMapping)}
+		 * @default NoToneMapping
+		 */
 		this.toneMapping = NoToneMapping;
 		this.toneMapping = NoToneMapping;
+
+		/**
+		 * Exposure level of tone mapping.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
 		this.toneMappingExposure = 1.0;
 		this.toneMappingExposure = 1.0;
 
 
+		// transmission
+
+		/**
+		 * 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 {@link MeshPhysicalMaterial#transmission}.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
+		this.transmissionResolutionScale = 1.0;
+
 		// internal properties
 		// internal properties
 
 
 		const _this = this;
 		const _this = this;
@@ -157,6 +273,8 @@ class WebGLRenderer {
 
 
 		// internal state cache
 		// internal state cache
 
 
+		this._outputColorSpace = SRGBColorSpace;
+
 		let _currentActiveCubeFace = 0;
 		let _currentActiveCubeFace = 0;
 		let _currentActiveMipmapLevel = 0;
 		let _currentActiveMipmapLevel = 0;
 		let _currentRenderTarget = null;
 		let _currentRenderTarget = null;
@@ -193,9 +311,6 @@ class WebGLRenderer {
 		let _clippingEnabled = false;
 		let _clippingEnabled = false;
 		let _localClippingEnabled = false;
 		let _localClippingEnabled = false;
 
 
-		// transmission render target scale
-		this.transmissionResolutionScale = 1.0;
-
 		// camera matrices cache
 		// camera matrices cache
 
 
 		const _currentProjectionMatrix = new Matrix4();
 		const _currentProjectionMatrix = new Matrix4();
@@ -324,12 +439,79 @@ class WebGLRenderer {
 
 
 			info.programs = programCache.programs;
 			info.programs = programCache.programs;
 
 
+			/**
+			 * Holds details about the capabilities of the current rendering context.
+			 *
+			 * @name WebGLRenderer#capabilities
+			 * @type {WebGLRenderer~Capabilities}
+			 */
 			_this.capabilities = capabilities;
 			_this.capabilities = capabilities;
+
+			/**
+			 * Provides methods for retrieving and testing WebGL extensions.
+			 *
+			 * - `get(extensionName:string)`: Used to check whether a WebGL extension is supported
+			 * and return the extension object if available.
+			 * - `has(extensionName:string)`: returns `true` if the extension is supported.
+			 *
+			 * @name WebGLRenderer#extensions
+			 * @type {Object}
+			 */
 			_this.extensions = extensions;
 			_this.extensions = extensions;
+
+			/**
+			 * Used to track properties of other objects like native WebGL objects.
+			 *
+			 * @name WebGLRenderer#properties
+			 * @type {Object}
+			 */
 			_this.properties = properties;
 			_this.properties = properties;
+
+			/**
+			 * Manages the render lists of the renderer.
+			 *
+			 * @name WebGLRenderer#renderLists
+			 * @type {Object}
+			 */
 			_this.renderLists = renderLists;
 			_this.renderLists = renderLists;
+
+
+
+			/**
+			 * Interface for managing shadows.
+			 *
+			 * @name WebGLRenderer#shadowMap
+			 * @type {WebGLRenderer~ShadowMap}
+			 */
 			_this.shadowMap = shadowMap;
 			_this.shadowMap = shadowMap;
+
+			/**
+			 * Interface for managing the WebGL state.
+			 *
+			 * @name WebGLRenderer#state
+			 * @type {Object}
+			 */
 			_this.state = state;
 			_this.state = state;
+
+			/**
+			 * Holds a series of statistical information about the GPU memory
+			 * and the rendering process. Useful for debugging and monitoring.
+			 *
+			 * 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 `autoReset` to
+			 * `false`.
+			 * ```js
+			 * renderer.info.autoReset = false;
+			 * ```
+			 * Call `reset()` whenever you have finished to render a single frame.
+			 * ```js
+			 * renderer.info.reset();
+			 * ```
+			 *
+			 * @name WebGLRenderer#info
+			 * @type {WebGLRenderer~Info}
+			 */
 			_this.info = info;
 			_this.info = info;
 
 
 		}
 		}
@@ -340,22 +522,38 @@ class WebGLRenderer {
 
 
 		const xr = new WebXRManager( _this, _gl );
 		const xr = new WebXRManager( _this, _gl );
 
 
+		/**
+		 * A reference to the XR manager.
+		 *
+		 * @type {WebXRManager}
+		 */
 		this.xr = xr;
 		this.xr = xr;
 
 
-		// API
-
+		/**
+		 * Returns the rendering context.
+		 *
+		 * @return {WebGL2RenderingContext} The rendering context.
+		 */
 		this.getContext = function () {
 		this.getContext = function () {
 
 
 			return _gl;
 			return _gl;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the rendering context attributes.
+		 *
+		 * @return {WebGLContextAttributes} The rendering context attributes.
+		 */
 		this.getContextAttributes = function () {
 		this.getContextAttributes = function () {
 
 
 			return _gl.getContextAttributes();
 			return _gl.getContextAttributes();
 
 
 		};
 		};
 
 
+		/**
+		 * Simulates a loss of the WebGL context. This requires support for the `WEBGL_lose_context` extension.
+		 */
 		this.forceContextLoss = function () {
 		this.forceContextLoss = function () {
 
 
 			const extension = extensions.get( 'WEBGL_lose_context' );
 			const extension = extensions.get( 'WEBGL_lose_context' );
@@ -363,6 +561,9 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Simulates a restore of the WebGL context. This requires support for the `WEBGL_lose_context` extension.
+		 */
 		this.forceContextRestore = function () {
 		this.forceContextRestore = function () {
 
 
 			const extension = extensions.get( 'WEBGL_lose_context' );
 			const extension = extensions.get( 'WEBGL_lose_context' );
@@ -370,12 +571,22 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the pixel ratio.
+		 *
+		 * @return {number} The pixel ratio.
+		 */
 		this.getPixelRatio = function () {
 		this.getPixelRatio = function () {
 
 
 			return _pixelRatio;
 			return _pixelRatio;
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the given pixel ratio and resizes the canvas if necessary.
+		 *
+		 * @param {number} value - The pixel ratio.
+		 */
 		this.setPixelRatio = function ( value ) {
 		this.setPixelRatio = function ( value ) {
 
 
 			if ( value === undefined ) return;
 			if ( value === undefined ) return;
@@ -386,12 +597,27 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.
+		 *
+		 * @param {Vector2} target - The method writes the result in this target object.
+		 * @return {Vector2} The renderer's size in logical pixels.
+		 */
 		this.getSize = function ( target ) {
 		this.getSize = function ( target ) {
 
 
 			return target.set( _width, _height );
 			return target.set( _width, _height );
 
 
 		};
 		};
 
 
+		/**
+		 * 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 `updateStyle` to false prevents any style changes to the output canvas.
+		 *
+		 * @param {number} width - The width in logical pixels.
+		 * @param {number} height - The height in logical pixels.
+		 * @param {boolean} [updateStyle=true] - Whether to update the `style` attribute of the canvas or not.
+		 */
 		this.setSize = function ( width, height, updateStyle = true ) {
 		this.setSize = function ( width, height, updateStyle = true ) {
 
 
 			if ( xr.isPresenting ) {
 			if ( xr.isPresenting ) {
@@ -418,12 +644,31 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the drawing buffer size in physical pixels. This method honors the pixel ratio.
+		 *
+		 * @param {Vector2} target - The method writes the result in this target object.
+		 * @return {Vector2} The drawing buffer size.
+		 */
 		this.getDrawingBufferSize = function ( target ) {
 		this.getDrawingBufferSize = function ( target ) {
 
 
 			return target.set( _width * _pixelRatio, _height * _pixelRatio ).floor();
 			return target.set( _width * _pixelRatio, _height * _pixelRatio ).floor();
 
 
 		};
 		};
 
 
+		/**
+		 * 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:
+		 * ```js
+		 * size.x = width * pixelRatio;
+		 * size.y = height * pixelRatio;
+		 * ```
+		 *
+		 * @param {number} width - The width in logical pixels.
+		 * @param {number} height - The height in logical pixels.
+		 * @param {number} pixelRatio - The pixel ratio.
+		 */
 		this.setDrawingBufferSize = function ( width, height, pixelRatio ) {
 		this.setDrawingBufferSize = function ( width, height, pixelRatio ) {
 
 
 			_width = width;
 			_width = width;
@@ -438,18 +683,39 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the current viewport definition.
+		 *
+		 * @param {Vector2} target - The method writes the result in this target object.
+		 * @return {Vector2} The current viewport definition.
+		 */
 		this.getCurrentViewport = function ( target ) {
 		this.getCurrentViewport = function ( target ) {
 
 
 			return target.copy( _currentViewport );
 			return target.copy( _currentViewport );
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the viewport definition.
+		 *
+		 * @param {Vector4} target - The method writes the result in this target object.
+		 * @return {Vector4} The viewport definition.
+		 */
 		this.getViewport = function ( target ) {
 		this.getViewport = function ( target ) {
 
 
 			return target.copy( _viewport );
 			return target.copy( _viewport );
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the viewport to render from `(x, y)` to `(x + width, y + height)`.
+		 *
+		 * @param {number | Vector4} x - 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.
+		 * @param {number} y - The vertical coordinate for the lower left corner of the viewport origin  in logical pixel unit.
+		 * @param {number} width - The width of the viewport in logical pixel unit.
+		 * @param {number} height - The height of the viewport in logical pixel unit.
+		 */
 		this.setViewport = function ( x, y, width, height ) {
 		this.setViewport = function ( x, y, width, height ) {
 
 
 			if ( x.isVector4 ) {
 			if ( x.isVector4 ) {
@@ -466,12 +732,27 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the scissor region.
+		 *
+		 * @param {Vector4} target - The method writes the result in this target object.
+		 * @return {Vector4} The scissor region.
+		 */
 		this.getScissor = function ( target ) {
 		this.getScissor = function ( target ) {
 
 
 			return target.copy( _scissor );
 			return target.copy( _scissor );
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the scissor region to render from `(x, y)` to `(x + width, y + height)`.
+		 *
+		 * @param {number | Vector4} x - 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.
+		 * @param {number} y - The vertical coordinate for the lower left corner of the scissor region origin  in logical pixel unit.
+		 * @param {number} width - The width of the scissor region in logical pixel unit.
+		 * @param {number} height - The height of the scissor region in logical pixel unit.
+		 */
 		this.setScissor = function ( x, y, width, height ) {
 		this.setScissor = function ( x, y, width, height ) {
 
 
 			if ( x.isVector4 ) {
 			if ( x.isVector4 ) {
@@ -488,24 +769,48 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns `true` if the scissor test is enabled.
+		 *
+		 * @return {boolean} Whether the scissor test is enabled or not.
+		 */
 		this.getScissorTest = function () {
 		this.getScissorTest = function () {
 
 
 			return _scissorTest;
 			return _scissorTest;
 
 
 		};
 		};
 
 
+		/**
+		 * 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.
+		 *
+		 * @param {boolean} boolean - Whether the scissor test is enabled or not.
+		 */
 		this.setScissorTest = function ( boolean ) {
 		this.setScissorTest = function ( boolean ) {
 
 
 			state.setScissorTest( _scissorTest = boolean );
 			state.setScissorTest( _scissorTest = boolean );
 
 
 		};
 		};
 
 
+		/**
+		 * Sets a custom opaque sort function for the render lists. Pass `null`
+		 * to use the default `painterSortStable` function.
+		 *
+		 * @param {?Function} method - The opaque sort function.
+		 */
 		this.setOpaqueSort = function ( method ) {
 		this.setOpaqueSort = function ( method ) {
 
 
 			_opaqueSort = method;
 			_opaqueSort = method;
 
 
 		};
 		};
 
 
+		/**
+		 * Sets a custom transparent sort function for the render lists. Pass `null`
+		 * to use the default `reversePainterSortStable` function.
+		 *
+		 * @param {?Function} method - The opaque sort function.
+		 */
 		this.setTransparentSort = function ( method ) {
 		this.setTransparentSort = function ( method ) {
 
 
 			_transparentSort = method;
 			_transparentSort = method;
@@ -514,30 +819,60 @@ class WebGLRenderer {
 
 
 		// Clearing
 		// Clearing
 
 
+		/**
+		 * Returns the clear color.
+		 *
+		 * @param {Color} target - The method writes the result in this target object.
+		 * @return {Color} The clear color.
+		 */
 		this.getClearColor = function ( target ) {
 		this.getClearColor = function ( target ) {
 
 
 			return target.copy( background.getClearColor() );
 			return target.copy( background.getClearColor() );
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the clear color and alpha.
+		 *
+		 * @param {Color} color - The clear color.
+		 * @param {number} [alpha=1] - The clear alpha.
+		 */
 		this.setClearColor = function () {
 		this.setClearColor = function () {
 
 
 			background.setClearColor( ...arguments );
 			background.setClearColor( ...arguments );
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the clear alpha. Ranges within `[0,1]`.
+		 *
+		 * @return {number} The clear alpha.
+		 */
 		this.getClearAlpha = function () {
 		this.getClearAlpha = function () {
 
 
 			return background.getClearAlpha();
 			return background.getClearAlpha();
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the clear alpha.
+		 *
+		 * @param {number} alpha - The clear alpha.
+		 */
 		this.setClearAlpha = function () {
 		this.setClearAlpha = function () {
 
 
 			background.setClearAlpha( ...arguments );
 			background.setClearAlpha( ...arguments );
 
 
 		};
 		};
 
 
+		/**
+		 * Tells the renderer to clear its color, depth or stencil drawing buffer(s).
+		 * This method initializes the buffers to the current clear color values.
+		 *
+		 * @param {boolean} [color=true] - Whether the color buffer should be cleared or not.
+		 * @param {boolean} [depth=true] - Whether the depth buffer should be cleared or not.
+		 * @param {boolean} [stencil=true] - Whether the stencil buffer should be cleared or not.
+		 */
 		this.clear = function ( color = true, depth = true, stencil = true ) {
 		this.clear = function ( color = true, depth = true, stencil = true ) {
 
 
 			let bits = 0;
 			let bits = 0;
@@ -616,26 +951,37 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Clears the color buffer. Equivalent to calling `renderer.clear( true, false, false )`.
+		 */
 		this.clearColor = function () {
 		this.clearColor = function () {
 
 
 			this.clear( true, false, false );
 			this.clear( true, false, false );
 
 
 		};
 		};
 
 
+		/**
+		 * Clears the depth buffer. Equivalent to calling `renderer.clear( false, true, false )`.
+		 */
 		this.clearDepth = function () {
 		this.clearDepth = function () {
 
 
 			this.clear( false, true, false );
 			this.clear( false, true, false );
 
 
 		};
 		};
 
 
+		/**
+		 * Clears the stencil buffer. Equivalent to calling `renderer.clear( false, false, true )`.
+		 */
 		this.clearStencil = function () {
 		this.clearStencil = function () {
 
 
 			this.clear( false, false, true );
 			this.clear( false, false, true );
 
 
 		};
 		};
 
 
-		//
-
+		/**
+		 * Frees the GPU-related resources allocated by this instance. Call this
+		 * method whenever this instance is no longer used in your app.
+		 */
 		this.dispose = function () {
 		this.dispose = function () {
 
 
 			canvas.removeEventListener( 'webglcontextlost', onContextLost, false );
 			canvas.removeEventListener( 'webglcontextlost', onContextLost, false );
@@ -941,6 +1287,18 @@ class WebGLRenderer {
 
 
 		}
 		}
 
 
+		/**
+		 * 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.
+		 *
+		 * Note that the (target) scene's lighting and environment must be configured before calling this method.
+		 *
+		 * @param {Object3D} scene - The scene or anohter type of 3D object to precompile.
+		 * @param {Camera} camera - The camera.
+		 * @param {?Scene} [targetScene=null] - The target scene.
+		 * @return {?Set} The precompiled materials.
+		 */
 		this.compile = function ( scene, camera, targetScene = null ) {
 		this.compile = function ( scene, camera, targetScene = null ) {
 
 
 			if ( targetScene === null ) targetScene = scene;
 			if ( targetScene === null ) targetScene = scene;
@@ -1036,6 +1394,18 @@ class WebGLRenderer {
 
 
 		// compileAsync
 		// compileAsync
 
 
+		/**
+		 * Asynchronous version of {@link WebGLRenderer#compile}.
+		 *
+		 * This method makes use of the `KHR_parallel_shader_compile` WebGL extension. Hence,
+		 * it is recommended to use this version of `compile()` whenever possible.
+		 *
+		 * @async
+		 * @param {Object3D} scene - The scene or anohter type of 3D object to precompile.
+		 * @param {Camera} camera - The camera.
+		 * @param {?Scene} [targetScene=null] - The target scene.
+		 * @return {Promise} A Promise that resolves when the given scene can be rendered without unnecessary stalling due to shader compilation.
+		 */
 		this.compileAsync = function ( scene, camera, targetScene = null ) {
 		this.compileAsync = function ( scene, camera, targetScene = null ) {
 
 
 			const materials = this.compile( scene, camera, targetScene );
 			const materials = this.compile( scene, camera, targetScene );
@@ -1137,6 +1507,20 @@ class WebGLRenderer {
 
 
 		// Rendering
 		// Rendering
 
 
+		/**
+		 * Renders the given scene (or other type of 3D object) using the given camera.
+		 *
+		 * The render is done to a previously specified render target set by calling {@link WebGLRenderer#setRenderTarget}
+		 * or to the canvas as usual.
+		 *
+		 * By default render buffers are cleared before rendering but you can prevent
+		 * this by setting the property `autoClear` to `false`. If you want to prevent
+		 * only certain buffers being cleared you can `autoClearColor`, `autoClearDepth`
+		 * or `autoClearStencil` to `false`. To force a clear, use {@link WebGLRenderer#clear}.
+		 *
+		 * @param {Object3D} scene - The scene to render.
+		 * @param {Camera} camera - The camera.
+		 */
 		this.render = function ( scene, camera ) {
 		this.render = function ( scene, camera ) {
 
 
 			if ( camera !== undefined && camera.isCamera !== true ) {
 			if ( camera !== undefined && camera.isCamera !== true ) {
@@ -2217,18 +2601,34 @@ class WebGLRenderer {
 
 
 		}
 		}
 
 
+		/**
+		 * Returns the active cube face.
+		 *
+		 * @return {number} The active cube face.
+		 */
 		this.getActiveCubeFace = function () {
 		this.getActiveCubeFace = function () {
 
 
 			return _currentActiveCubeFace;
 			return _currentActiveCubeFace;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the active mipmap level.
+		 *
+		 * @return {number} The active mipmap level.
+		 */
 		this.getActiveMipmapLevel = function () {
 		this.getActiveMipmapLevel = function () {
 
 
 			return _currentActiveMipmapLevel;
 			return _currentActiveMipmapLevel;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the active render target.
+		 *
+		 * @return {?WebGLRenderTarget} The active render target. Returns `null` if no render target
+		 * is currently set.
+		 */
 		this.getRenderTarget = function () {
 		this.getRenderTarget = function () {
 
 
 			return _currentRenderTarget;
 			return _currentRenderTarget;
@@ -2264,6 +2664,16 @@ class WebGLRenderer {
 		};
 		};
 
 
 		const _scratchFrameBuffer = _gl.createFramebuffer();
 		const _scratchFrameBuffer = _gl.createFramebuffer();
+
+		/**
+		 * Sets the active rendertarget.
+		 *
+		 * @param {?WebGLRenderTarget} renderTarget - The render target to set. When `null` is given,
+		 * the canvas is set as the active render target instead.
+		 * @param {number} [activeCubeFace=0] - 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.
+		 * @param {number} [activeMipmapLevel=0] - The active mipmap level.
+		 */
 		this.setRenderTarget = function ( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
 		this.setRenderTarget = function ( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
 
 
 			_currentRenderTarget = renderTarget;
 			_currentRenderTarget = renderTarget;
@@ -2416,6 +2826,17 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Reads the pixel data from the given render target into the given buffer.
+		 *
+		 * @param {WebGLRenderTarget} renderTarget - The render target to read from.
+		 * @param {number} x - The `x` coordinate of the copy region's origin.
+		 * @param {number} y - The `y` coordinate of the copy region's origin.
+		 * @param {number} width - The width of the copy region.
+		 * @param {number} height - The height of the copy region.
+		 * @param {TypedArray} buffer - The result buffer.
+		 * @param {number} [activeCubeFaceIndex] - The active cube face index.
+		 */
 		this.readRenderTargetPixels = function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {
 		this.readRenderTargetPixels = function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {
 
 
 			if ( ! ( renderTarget && renderTarget.isWebGLRenderTarget ) ) {
 			if ( ! ( renderTarget && renderTarget.isWebGLRenderTarget ) ) {
@@ -2478,6 +2899,21 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Asynchronous, non-blocking version of {@link WebGLRenderer#readRenderTargetPixels}.
+		 *
+		 * It is recommended to use this version of `readRenderTargetPixels()` whenever possible.
+		 *
+		 * @async
+		 * @param {WebGLRenderTarget} renderTarget - The render target to read from.
+		 * @param {number} x - The `x` coordinate of the copy region's origin.
+		 * @param {number} y - The `y` coordinate of the copy region's origin.
+		 * @param {number} width - The width of the copy region.
+		 * @param {number} height - The height of the copy region.
+		 * @param {TypedArray} buffer - The result buffer.
+		 * @param {number} [activeCubeFaceIndex] - The active cube face index.
+		 * @return {Promise<TypedArray>} A Promise that resolves when the read has been finished. The resolve provides the read data as a typed array.
+		 */
 		this.readRenderTargetPixelsAsync = async function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {
 		this.readRenderTargetPixelsAsync = async function ( renderTarget, x, y, width, height, buffer, activeCubeFaceIndex ) {
 
 
 			if ( ! ( renderTarget && renderTarget.isWebGLRenderTarget ) ) {
 			if ( ! ( renderTarget && renderTarget.isWebGLRenderTarget ) ) {
@@ -2551,6 +2987,13 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Copies pixels from the current bound framebuffer into the given texture.
+		 *
+		 * @param {FramebufferTexture} texture - The texture.
+		 * @param {Vector2} position - The start position of the copy operation.
+		 * @param {number} [level=0] - The mip level. The default represents the base mip.
+		 */
 		this.copyFramebufferToTexture = function ( texture, position = null, level = 0 ) {
 		this.copyFramebufferToTexture = function ( texture, position = null, level = 0 ) {
 
 
 			const levelScale = Math.pow( 2, - level );
 			const levelScale = Math.pow( 2, - level );
@@ -2570,6 +3013,20 @@ class WebGLRenderer {
 
 
 		const _srcFramebuffer = _gl.createFramebuffer();
 		const _srcFramebuffer = _gl.createFramebuffer();
 		const _dstFramebuffer = _gl.createFramebuffer();
 		const _dstFramebuffer = _gl.createFramebuffer();
+
+		/**
+		 * Copies data of the given source texture into a destination texture.
+		 *
+		 * When using render target textures as `srcTexture` and `dstTexture`, you must make sure both render targets are initialized
+		 * {@link WebGLRenderer#initRenderTarget}.
+		 *
+		 * @param {Texture} srcTexture - The source texture.
+		 * @param {Texture} dstTexture - The destination texture.
+		 * @param {Box2|Box3} [srcRegion=null] - A bounding box which describes the source region. Can be two or three-dimensional.
+		 * @param {Vector2|Vector3} [dstPosition=null] - A vector that represents the origin of the destination region. Can be two or three-dimensional.
+		 * @param {number} srcLevel - The source mipmap level to copy.
+		 * @param {number} dstLevel - The destination mipmap level.
+		 */
 		this.copyTextureToTexture = function ( srcTexture, dstTexture, srcRegion = null, dstPosition = null, srcLevel = 0, dstLevel = null ) {
 		this.copyTextureToTexture = function ( srcTexture, dstTexture, srcRegion = null, dstPosition = null, srcLevel = 0, dstLevel = null ) {
 
 
 			// support the previous signature with just a single dst mipmap level
 			// support the previous signature with just a single dst mipmap level
@@ -2831,6 +3288,13 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * Initializes the given WebGLRenderTarget memory. Useful for initializing a render target so data
+		 * can be copied into it using {@link WebGLRenderer#copyTextureToTexture} before it has been
+		 * rendered to.
+		 *
+		 * @param {WebGLRenderTarget} target - The render target.
+		 */
 		this.initRenderTarget = function ( target ) {
 		this.initRenderTarget = function ( target ) {
 
 
 			if ( properties.get( target ).__webglFramebuffer === undefined ) {
 			if ( properties.get( target ).__webglFramebuffer === undefined ) {
@@ -2841,6 +3305,12 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * 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).
+		 *
+		 * @param {Texture} texture - The texture.
+		 */
 		this.initTexture = function ( texture ) {
 		this.initTexture = function ( texture ) {
 
 
 			if ( texture.isCubeTexture ) {
 			if ( texture.isCubeTexture ) {
@@ -2865,6 +3335,11 @@ class WebGLRenderer {
 
 
 		};
 		};
 
 
+		/**
+		 * 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.
+		 */
 		this.resetState = function () {
 		this.resetState = function () {
 
 
 			_currentActiveCubeFace = 0;
 			_currentActiveCubeFace = 0;
@@ -2884,12 +3359,27 @@ class WebGLRenderer {
 
 
 	}
 	}
 
 
+	/**
+	 * Defines the coordinate system of the renderer.
+	 *
+	 * In `WebGLRenderer`, the value is always `WebGLCoordinateSystem`.
+	 *
+	 * @type {WebGLCoordinateSystem|WebGPUCoordinateSystem}
+	 * @default WebGLCoordinateSystem
+	 * @readonly
+	 */
 	get coordinateSystem() {
 	get coordinateSystem() {
 
 
 		return WebGLCoordinateSystem;
 		return WebGLCoordinateSystem;
 
 
 	}
 	}
 
 
+	/**
+	 * Defines the output color space of the renderer.
+	 *
+	 * @type {SRGBColorSpace|LinearSRGBColorSpace}
+	 * @default SRGBColorSpace
+	 */
 	get outputColorSpace() {
 	get outputColorSpace() {
 
 
 		return this._outputColorSpace;
 		return this._outputColorSpace;
@@ -2908,5 +3398,91 @@ class WebGLRenderer {
 
 
 }
 }
 
 
+// JSDoc
+
+/**
+ * WebGLRenderer options.
+ *
+ * @typedef {Object} WebGLRenderer~Options
+ * @property {DOMElement} [canvas=null] - A canvas element where the renderer draws its output. If not passed in here, a new canvas element will be created by the renderer.
+ * @property {WebGL2RenderingContext} [context=null] - Can be used to attach an existing rendering context to this renderer.
+ * @property {('highp'|'mediump'|'lowp')} [precision='highp'] - The default shader precision. Uses `highp` if supported by the device.
+ * @property {boolean} [alpha=false] - Controls the default clear alpha value. When set to`true`, the value is `0`. Otherwise it's `1`.
+ * @property {boolean} [premultipliedAlpha=true] Whether the renderer will assume colors have premultiplied alpha or not.
+ * @property {boolean} [antialias=false] Whether to use the default MSAA or not.
+ * @property {boolean} [stencil=false] Whether the drawing buffer has a stencil buffer of at least 8 bits or not.
+ * @property {boolean} [preserveDrawingBuffer=false] Whether to preserve the buffer until manually cleared or overwritten.
+ * @property {('default'|'low-power'|'high-performance')} [powerPreference='default'] Provides a hint to the user agent indicating what configuration of GPU is suitable for this WebGL context.
+ * @property {boolean} [failIfMajorPerformanceCaveat=false] Whether the renderer creation will fail upon low performance is detected.
+ * @property {boolean} [depth=true] Whether the drawing buffer has a depth buffer of at least 16 bits.
+ * @property {boolean} [logarithmicDepthBuffer=false] 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 `gl_FragDepth` if available which disables the Early Fragment Test optimization and can cause a decrease in performance.
+ * @property {boolean} [reverseDepthBuffer=false] Whether to use a reverse depth buffer. Requires the `EXT_clip_control` extension.
+ * This is a more faster and accurate version than logarithmic depth buffer.
+ **/
+
+/**
+ * WebGLRenderer Capabilities.
+ *
+ * @typedef {Object} WebGLRenderer~Capabilities
+ * @property {Function} getMaxAnisotropy - Returns the maximum available anisotropy.
+ * @property {Function} getMaxPrecision - Returns the maximum available precision for vertex and fragment shaders.
+ * @property {boolean} logarithmicDepthBuffer - `true` if `logarithmicDepthBuffer` was set to `true` in the constructor.
+ * @property {number} maxAttributes - The number of shader attributes that can be used by the vertex shader.
+ * @property {number} maxCubemapSize - Maximum height * width of cube map textures that a shader can use.
+ * @property {number} maxFragmentUniforms - The number of uniforms that can be used by a fragment shader.
+ * @property {number} maxSamples - Maximum number of samples in context of Multisample anti-aliasing (MSAA).
+ * @property {number} maxTextures - The maximum number of textures that can be used by a shader.
+ * @property {number} maxTextureSize - Maximum height * width of a texture that a shader use.
+ * @property {number} maxVaryings - The number of varying vectors that can used by shaders.
+ * @property {number} maxVertexTextures - The number of textures that can be used in a vertex shader.
+ * @property {number} maxVertexUniforms - The maximum number of uniforms that can be used in a vertex shader.
+ * @property {string} precision - The shader precision currently being used by the renderer.
+ * @property {boolean} reverseDepthBuffer - `true` if `reverseDepthBuffer` was set to `true` in the constructor
+ * and the rendering context supports `EXT_clip_control`.
+ * @property {boolean} vertexTextures - `true` if vertex textures can be used.
+ **/
+
+/**
+ * WebGLRenderer Info Memory
+ *
+ * @typedef {Object} WebGLRenderer~InfoMemory
+ * @property {number} geometries - The number of active geometries.
+ * @property {number} textures - The number of active textures.
+ **/
+
+/**
+ * WebGLRenderer Info Render
+ *
+ * @typedef {Object} WebGLRenderer~InfoRender
+ * @property {number} frame - The frame ID.
+ * @property {number} calls - The number of draw calls per frame.
+ * @property {number} triangles - The number of rendered triangles primitives per frame.
+ * @property {number} points - The number of rendered points primitives per frame.
+ * @property {number} lines - The number of rendered lines primitives per frame.
+ **/
+
+/**
+ * WebGLRenderer Info
+ *
+ * @typedef {Object} WebGLRenderer~Info
+ * @property {boolean} [autoReset=true] - Whether to automatically reset the info by the renderer or not.
+ * @property {WebGLRenderer~InfoMemory} memory - Information about allocated objects.
+ * @property {WebGLRenderer~InfoRender} render - Information about rendered objects.
+ * @property {?Array<WebGLProgram>} programs - An array `WebGLProgram`s used for rendering.
+ * @property {Function} reset - Resets the info object for the next frame.
+ **/
+
+/**
+ * WebGLRenderer Shadow Map.
+ *
+ * @typedef {Object} WebGLRenderer~ShadowMap
+ * @property {boolean} [enabled=false] - If set to `true`, use shadow maps in the scene.
+ * @property {boolean} [autoUpdate=true] - Enables automatic updates to the shadows in the scene.
+ * If you do not require dynamic lighting / shadows, you may set this to `false`.
+ * @property {boolean} [needsUpdate=false] - When set to `true`, shadow maps in the scene
+ * will be updated in the next `render` call.
+ * @property {(BasicShadowMap|PCFShadowMap|PCFSoftShadowMap|VSMShadowMap)} [type=PCFShadowMap] - Defines the shadow map type.
+ **/
 
 
 export { WebGLRenderer };
 export { WebGLRenderer };

+ 6 - 0
src/renderers/common/CubeRenderTarget.js

@@ -20,6 +20,12 @@ import { BackSide, NoBlending, LinearFilter, LinearMipmapLinearFilter } from '..
  */
  */
 class CubeRenderTarget extends WebGLCubeRenderTarget {
 class CubeRenderTarget extends WebGLCubeRenderTarget {
 
 
+	/**
+	 * Constructs a new cube render target.
+	 *
+	 * @param {number} [size=1] - The size of the render target.
+	 * @param {RenderTarget~Options} [options] - The configuration object.
+	 */
 	constructor( size = 1, options = {} ) {
 	constructor( size = 1, options = {} ) {
 
 
 		super( size, options );
 		super( size, options );

+ 2 - 0
src/renderers/common/PostProcessing.js

@@ -14,6 +14,8 @@ import QuadMesh from '../../renderers/common/QuadMesh.js';
  *
  *
  * postProcessing.outputNode = scenePass;
  * postProcessing.outputNode = scenePass;
  * ```
  * ```
+ *
+ * Note: This module can only be used with `WebGPURenderer`.
  */
  */
 class PostProcessing {
 class PostProcessing {
 
 

+ 2 - 0
src/renderers/common/QuadMesh.js

@@ -43,6 +43,8 @@ const _geometry = /*@__PURE__*/ new QuadGeometry();
  * The intended usage is to reuse a single quad mesh for rendering
  * The intended usage is to reuse a single quad mesh for rendering
  * subsequent passes by just reassigning the `material` reference.
  * subsequent passes by just reassigning the `material` reference.
  *
  *
+ * Note: This module can only be used with `WebGPURenderer`.
+ *
  * @augments Mesh
  * @augments Mesh
  */
  */
 class QuadMesh extends Mesh {
 class QuadMesh extends Mesh {

+ 5 - 5
src/renderers/common/Renderer.js

@@ -1573,7 +1573,7 @@ class Renderer {
 	 * Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.
 	 * Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.
 	 *
 	 *
 	 * @param {Vector2} target - The method writes the result in this target object.
 	 * @param {Vector2} target - The method writes the result in this target object.
-	 * @return {Vector2} The drawing buffer size.
+	 * @return {Vector2} The renderer's size in logical pixels.
 	 */
 	 */
 	getSize( target ) {
 	getSize( target ) {
 
 
@@ -1600,10 +1600,10 @@ class Renderer {
 	 * This method allows to define the drawing buffer size by specifying
 	 * This method allows to define the drawing buffer size by specifying
 	 * width, height and pixel ratio all at once. The size of the drawing
 	 * width, height and pixel ratio all at once. The size of the drawing
 	 * buffer is computed with this formula:
 	 * buffer is computed with this formula:
-	 * ````
+	 * ```js
 	 * size.x = width * pixelRatio;
 	 * size.x = width * pixelRatio;
 	 * size.y = height * pixelRatio;
 	 * size.y = height * pixelRatio;
-	 *```
+	 * ```
 	 *
 	 *
 	 * @param {number} width - The width in logical pixels.
 	 * @param {number} width - The width in logical pixels.
 	 * @param {number} height - The height in logical pixels.
 	 * @param {number} height - The height in logical pixels.
@@ -2378,7 +2378,7 @@ class Renderer {
 	}
 	}
 
 
 	/**
 	/**
-	 * Initializes the given textures. Useful for preloading a texture rather than waiting until first render
+	 * 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).
 	 * (which can cause noticeable lags due to decode and GPU upload overhead).
 	 *
 	 *
 	 * This method can only be used if the renderer has been initialized.
 	 * This method can only be used if the renderer has been initialized.
@@ -2461,7 +2461,7 @@ class Renderer {
 	}
 	}
 
 
 	/**
 	/**
-	 * Copies data of source texture into a destination texture.
+	 * Copies data of the given source texture into a destination texture.
 	 *
 	 *
 	 * @param {Texture} srcTexture - The source texture.
 	 * @param {Texture} srcTexture - The source texture.
 	 * @param {Texture} dstTexture - The destination texture.
 	 * @param {Texture} dstTexture - The destination texture.

+ 1 - 4
src/renderers/shaders/UniformsLib.js

@@ -2,10 +2,7 @@ import { Color } from '../../math/Color.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Matrix3 } from '../../math/Matrix3.js';
 import { Matrix3 } from '../../math/Matrix3.js';
 
 
-/**
- * Uniforms library for shared webgl shaders
- */
-
+// Uniforms library for shared webgl shaders
 const UniformsLib = {
 const UniformsLib = {
 
 
 	common: {
 	common: {

+ 1 - 3
src/renderers/shaders/UniformsUtils.js

@@ -1,8 +1,6 @@
 import { ColorManagement } from '../../math/ColorManagement.js';
 import { ColorManagement } from '../../math/ColorManagement.js';
 
 
-/**
- * Uniform Utilities
- */
+// Uniform Utilities
 
 
 export function cloneUniforms( src ) {
 export function cloneUniforms( src ) {
 
 

+ 87 - 2
src/renderers/webxr/WebXRController.js

@@ -3,16 +3,56 @@ import { Group } from '../../objects/Group.js';
 
 
 const _moveEvent = { type: 'move' };
 const _moveEvent = { type: 'move' };
 
 
+/**
+ * Class for representing a XR controller with its
+ * different coordinate systems.
+ *
+ * @private
+ */
 class WebXRController {
 class WebXRController {
 
 
+	/**
+	 * Constructs a new XR controller.
+	 */
 	constructor() {
 	constructor() {
 
 
+		/**
+		 * A group representing the target ray space
+		 * of the XR controller.
+		 *
+		 * @private
+		 * @type {?Group}
+		 * @default null
+		 */
 		this._targetRay = null;
 		this._targetRay = null;
+
+		/**
+		 * A group representing the grip space
+		 * of the XR controller.
+		 *
+		 * @private
+		 * @type {?Group}
+		 * @default null
+		 */
 		this._grip = null;
 		this._grip = null;
+
+		/**
+		 * A group representing the hand space
+		 * of the XR controller.
+		 *
+		 * @private
+		 * @type {?Group}
+		 * @default null
+		 */
 		this._hand = null;
 		this._hand = null;
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a group representing the hand space of the XR controller.
+	 *
+	 * @return {Group} A group representing the hand space of the XR controller.
+	 */
 	getHandSpace() {
 	getHandSpace() {
 
 
 		if ( this._hand === null ) {
 		if ( this._hand === null ) {
@@ -30,6 +70,11 @@ class WebXRController {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a group representing the traget ray space of the XR controller.
+	 *
+	 * @return {Group} A group representing the traget ray space of the XR controller.
+	 */
 	getTargetRaySpace() {
 	getTargetRaySpace() {
 
 
 		if ( this._targetRay === null ) {
 		if ( this._targetRay === null ) {
@@ -48,6 +93,11 @@ class WebXRController {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a group representing the grip space of the XR controller.
+	 *
+	 * @return {Group} A group representing the grip space of the XR controller.
+	 */
 	getGripSpace() {
 	getGripSpace() {
 
 
 		if ( this._grip === null ) {
 		if ( this._grip === null ) {
@@ -66,6 +116,13 @@ class WebXRController {
 
 
 	}
 	}
 
 
+	/**
+	 * Dispatches the given event to the groups representing
+	 * the different coordinate spaces of the XR controller.
+	 *
+	 * @param {Object} event - The event to dispatch.
+	 * @return {WebXRController} A reference to this instance.
+	 */
 	dispatchEvent( event ) {
 	dispatchEvent( event ) {
 
 
 		if ( this._targetRay !== null ) {
 		if ( this._targetRay !== null ) {
@@ -90,6 +147,12 @@ class WebXRController {
 
 
 	}
 	}
 
 
+	/**
+	 * Connects the controller with the given XR input source.
+	 *
+	 * @param {XRInputSource} inputSource - The input source.
+	 * @return {WebXRController} A reference to this instance.
+	 */
 	connect( inputSource ) {
 	connect( inputSource ) {
 
 
 		if ( inputSource && inputSource.hand ) {
 		if ( inputSource && inputSource.hand ) {
@@ -115,6 +178,12 @@ class WebXRController {
 
 
 	}
 	}
 
 
+	/**
+	 * Disconnects the controller from the given XR input source.
+	 *
+	 * @param {XRInputSource} inputSource - The input source.
+	 * @return {WebXRController} A reference to this instance.
+	 */
 	disconnect( inputSource ) {
 	disconnect( inputSource ) {
 
 
 		this.dispatchEvent( { type: 'disconnected', data: inputSource } );
 		this.dispatchEvent( { type: 'disconnected', data: inputSource } );
@@ -141,6 +210,16 @@ class WebXRController {
 
 
 	}
 	}
 
 
+	/**
+	 * Updates the controller with the given input source, XR frame and reference space.
+	 * This updates the transformations of the groups that represent the different
+	 * coordinate systems of the controller.
+	 *
+	 * @param {XRInputSource} inputSource - The input source.
+	 * @param {XRFrame} frame - The XR frame.
+	 * @param {XRReferenceSpace} referenceSpace - The reference space.
+	 * @return {WebXRController} A reference to this instance.
+	 */
 	update( inputSource, frame, referenceSpace ) {
 	update( inputSource, frame, referenceSpace ) {
 
 
 		let inputPose = null;
 		let inputPose = null;
@@ -318,8 +397,14 @@ class WebXRController {
 
 
 	}
 	}
 
 
-	// private method
-
+	/**
+	 * Returns a group representing the hand joint for the given input joint.
+	 *
+	 * @private
+	 * @param {Group} hand - The group representing the hand space.
+	 * @param {XRHandJoint} inputjoint - The XR frame.
+	 * @return {Group} A group representing the hand joint for the given input joint.
+	 */
 	_getHandJoint( hand, inputjoint ) {
 	_getHandJoint( hand, inputjoint ) {
 
 
 		if ( hand.joints[ inputjoint.jointName ] === undefined ) {
 		if ( hand.joints[ inputjoint.jointName ] === undefined ) {

+ 49 - 0
src/renderers/webxr/WebXRDepthSensing.js

@@ -31,18 +31,53 @@ void main() {
 
 
 }`;
 }`;
 
 
+/**
+ * A XR module that manages the access to the Depth Sensing API.
+ */
 class WebXRDepthSensing {
 class WebXRDepthSensing {
 
 
+	/**
+	 * Constructs a new depth sensing module.
+	 */
 	constructor() {
 	constructor() {
 
 
+		/**
+		 * A texture representing the depth of the user's environment.
+		 *
+		 * @type {?Texture}
+		 */
 		this.texture = null;
 		this.texture = null;
+
+		/**
+		 * A plane mesh for visualizing the depth texture.
+		 *
+		 * @type {?Mesh}
+		 */
 		this.mesh = null;
 		this.mesh = null;
 
 
+		/**
+		 * The depth near value.
+		 *
+		 * @type {number}
+		 */
 		this.depthNear = 0;
 		this.depthNear = 0;
+
+		/**
+		 * The depth near far.
+		 *
+		 * @type {number}
+		 */
 		this.depthFar = 0;
 		this.depthFar = 0;
 
 
 	}
 	}
 
 
+	/**
+	 * Inits the depth sensing module
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {XRWebGLDepthInformation} depthData - The XR depth data.
+	 * @param {XRRenderState} renderState - The XR render state.
+	 */
 	init( renderer, depthData, renderState ) {
 	init( renderer, depthData, renderState ) {
 
 
 		if ( this.texture === null ) {
 		if ( this.texture === null ) {
@@ -65,6 +100,12 @@ class WebXRDepthSensing {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a plane mesh that visualizes the depth texture.
+	 *
+	 * @param {ArrayCamera} cameraXR - The XR camera.
+	 * @return {?Mesh} The plane mesh.
+	 */
 	getMesh( cameraXR ) {
 	getMesh( cameraXR ) {
 
 
 		if ( this.texture !== null ) {
 		if ( this.texture !== null ) {
@@ -92,6 +133,9 @@ class WebXRDepthSensing {
 
 
 	}
 	}
 
 
+	/**
+	 * Resets the module
+	 */
 	reset() {
 	reset() {
 
 
 		this.texture = null;
 		this.texture = null;
@@ -99,6 +143,11 @@ class WebXRDepthSensing {
 
 
 	}
 	}
 
 
+	/**
+	 * Returns a texture representing the depth of the user's environment.
+	 *
+	 * @return {?Texture} The depth texture.
+	 */
 	getDepthTexture() {
 	getDepthTexture() {
 
 
 		return this.texture;
 		return this.texture;

+ 172 - 0
src/renderers/webxr/WebXRManager.js

@@ -12,8 +12,23 @@ import { DepthTexture } from '../../textures/DepthTexture.js';
 import { DepthFormat, DepthStencilFormat, RGBAFormat, UnsignedByteType, UnsignedIntType, UnsignedInt248Type } from '../../constants.js';
 import { DepthFormat, DepthStencilFormat, RGBAFormat, UnsignedByteType, UnsignedIntType, UnsignedInt248Type } from '../../constants.js';
 import { WebXRDepthSensing } from './WebXRDepthSensing.js';
 import { WebXRDepthSensing } from './WebXRDepthSensing.js';
 
 
+/**
+ * This class represents an abstraction of the WebXR Device API and is
+ * internally used by {@link WebGLRenderer}. `WebXRManager` also provides a public
+ * interface that allows users to enable/disable XR and perform XR related
+ * tasks like for instance retrieving controllers.
+ *
+ * @augments EventDispatcher
+ * @hideconstructor
+ */
 class WebXRManager extends EventDispatcher {
 class WebXRManager extends EventDispatcher {
 
 
+	/**
+	 * Constructs a new WebGL renderer.
+	 *
+	 * @param {WebGLRenderer} renderer - The renderer.
+	 * @param {WebGL2RenderingContext} gl - The rendering context.
+	 */
 	constructor( renderer, gl ) {
 	constructor( renderer, gl ) {
 
 
 		super();
 		super();
@@ -65,11 +80,40 @@ class WebXRManager extends EventDispatcher {
 
 
 		//
 		//
 
 
+		/**
+		 * Whether the manager's XR camera should be automatically updated or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.cameraAutoUpdate = true;
 		this.cameraAutoUpdate = true;
+
+		/**
+		 * This flag notifies the renderer to be ready for XR rendering. Set it to `true`
+		 * if you are going to use XR in your app.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
 		this.enabled = false;
 		this.enabled = false;
 
 
+		/**
+		 * Whether XR presentation is active or not.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default false
+		 */
 		this.isPresenting = false;
 		this.isPresenting = false;
 
 
+		/**
+		 * Returns a group representing the `target ray` space of the XR controller.
+		 * Use this space for visualizing 3D objects that support the user in pointing
+		 * tasks like UI interaction.
+		 *
+		 * @param {number} index - The index of the controller.
+		 * @return {Group} A group representing the `target ray` space.
+		 */
 		this.getController = function ( index ) {
 		this.getController = function ( index ) {
 
 
 			let controller = controllers[ index ];
 			let controller = controllers[ index ];
@@ -85,6 +129,21 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns a group representing the `grip` space of the XR controller.
+		 * Use this space for visualizing 3D objects that support the user in pointing
+		 * tasks like UI interaction.
+		 *
+		 * Note: If you want to show something in the user's hand AND offer a
+		 * pointing ray at the same time, you'll want to attached the handheld object
+		 * to the group returned by `getControllerGrip()` and the ray to the
+		 * group returned by `getController()`. The idea is to have two
+		 * different groups in two different coordinate spaces for the same WebXR
+		 * controller.
+		 *
+		 * @param {number} index - The index of the controller.
+		 * @return {Group} A group representing the `grip` space.
+		 */
 		this.getControllerGrip = function ( index ) {
 		this.getControllerGrip = function ( index ) {
 
 
 			let controller = controllers[ index ];
 			let controller = controllers[ index ];
@@ -100,6 +159,14 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns a group representing the `hand` space of the XR controller.
+		 * Use this space for visualizing 3D objects that support the user in pointing
+		 * tasks like UI interaction.
+		 *
+		 * @param {number} index - The index of the controller.
+		 * @return {Group} A group representing the `hand` space.
+		 */
 		this.getHand = function ( index ) {
 		this.getHand = function ( index ) {
 
 
 			let controller = controllers[ index ];
 			let controller = controllers[ index ];
@@ -189,6 +256,13 @@ class WebXRManager extends EventDispatcher {
 
 
 		}
 		}
 
 
+		/**
+		 * Sets the framebuffer scale factor.
+		 *
+		 * This method can not be used during a XR session.
+		 *
+		 * @param {number} value - The framebuffer scale factor.
+		 */
 		this.setFramebufferScaleFactor = function ( value ) {
 		this.setFramebufferScaleFactor = function ( value ) {
 
 
 			framebufferScaleFactor = value;
 			framebufferScaleFactor = value;
@@ -201,6 +275,15 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the reference space type. Can be used to configure a spatial relationship with the user's physical
+		 * environment. Depending on how the user moves in 3D space, setting an appropriate reference space can
+		 * improve tracking. Default is `local-floor`.
+		 *
+		 * This method can not be used during a XR session.
+		 *
+		 * @param {string} value - The reference space type.
+		 */
 		this.setReferenceSpaceType = function ( value ) {
 		this.setReferenceSpaceType = function ( value ) {
 
 
 			referenceSpaceType = value;
 			referenceSpaceType = value;
@@ -213,42 +296,81 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the XR reference space.
+		 *
+		 * @return {XRReferenceSpace} The XR reference space.
+		 */
 		this.getReferenceSpace = function () {
 		this.getReferenceSpace = function () {
 
 
 			return customReferenceSpace || referenceSpace;
 			return customReferenceSpace || referenceSpace;
 
 
 		};
 		};
 
 
+		/**
+		 * Sets a custom XR reference space.
+		 *
+		 * @param {XRReferenceSpace} space - The XR reference space.
+		 */
 		this.setReferenceSpace = function ( space ) {
 		this.setReferenceSpace = function ( space ) {
 
 
 			customReferenceSpace = space;
 			customReferenceSpace = space;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the current base layer.
+		 *
+		 * @return {?(XRWebGLLayer|XRProjectionLayer)} The XR base layer.
+		 */
 		this.getBaseLayer = function () {
 		this.getBaseLayer = function () {
 
 
 			return glProjLayer !== null ? glProjLayer : glBaseLayer;
 			return glProjLayer !== null ? glProjLayer : glBaseLayer;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the current XR binding.
+		 *
+		 * @return {?XRWebGLBinding} The XR binding.
+		 */
 		this.getBinding = function () {
 		this.getBinding = function () {
 
 
 			return glBinding;
 			return glBinding;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the current XR frame.
+		 *
+		 * @return {?XRFrame} The XR frame. Returns `null` when used outside a XR session.
+		 */
 		this.getFrame = function () {
 		this.getFrame = function () {
 
 
 			return xrFrame;
 			return xrFrame;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the current XR session.
+		 *
+		 * @return {?XRSession} The XR session. Returns `null` when used outside a XR session.
+		 */
 		this.getSession = function () {
 		this.getSession = function () {
 
 
 			return session;
 			return session;
 
 
 		};
 		};
 
 
+		/**
+		 * After a XR session has been requested usually with one of the `*Button` modules, it
+		 * is injected into the renderer with this method. This method triggers the start of
+		 * the actual XR rendering.
+		 *
+		 * @async
+		 * @param {XRSession} value - The XR session to set.
+		 * @return {Promise} A Promise that resolves when the session has been set.
+		 */
 		this.setSession = async function ( value ) {
 		this.setSession = async function ( value ) {
 
 
 			session = value;
 			session = value;
@@ -373,6 +495,11 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the environment blend mode from the current XR session.
+		 *
+		 * @return {?('opaque'|'additive'|'alpha-blend')} The environment blend mode. Returns `null` when used outside of a XR session.
+		 */
 		this.getEnvironmentBlendMode = function () {
 		this.getEnvironmentBlendMode = function () {
 
 
 			if ( session !== null ) {
 			if ( session !== null ) {
@@ -383,6 +510,11 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the current depth texture computed via depth sensing.
+		 *
+		 * @return {?Texture} The depth texture.
+		 */
 		this.getDepthTexture = function () {
 		this.getDepthTexture = function () {
 
 
 			return depthSensing.getDepthTexture();
 			return depthSensing.getDepthTexture();
@@ -549,6 +681,15 @@ class WebXRManager extends EventDispatcher {
 
 
 		}
 		}
 
 
+		/**
+		 * Updates the state of the XR camera. Use this method on app level if you
+		 * set cameraAutoUpdate` to `false`. The method requires the non-XR
+		 * camera of the scene as a parameter. The passed in camera's transformation
+		 * is automatically adjusted to the position of the XR camera when calling
+		 * this method.
+		 *
+		 * @param {Camera} camera - The camera.
+		 */
 		this.updateCamera = function ( camera ) {
 		this.updateCamera = function ( camera ) {
 
 
 			if ( session === null ) return;
 			if ( session === null ) return;
@@ -644,12 +785,27 @@ class WebXRManager extends EventDispatcher {
 
 
 		}
 		}
 
 
+		/**
+		 * Returns an instance of {@link ArrayCamera} which represents the XR camera
+		 * of the active XR session. For each view it holds a separate camera object.
+		 *
+		 * The camera's `fov` is currently not used and does not reflect the fov of
+		 * the XR camera. If you need the fov on app level, you have to compute in
+		 * manually from the XR camera's projection matrices.
+		 *
+		 * @return {ArrayCamera} The XR camera.
+		 */
 		this.getCamera = function () {
 		this.getCamera = function () {
 
 
 			return cameraXR;
 			return cameraXR;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the amount of foveation used by the XR compositor for the projection layer.
+		 *
+		 * @return {number} The amount of foveation.
+		 */
 		this.getFoveation = function () {
 		this.getFoveation = function () {
 
 
 			if ( glProjLayer === null && glBaseLayer === null ) {
 			if ( glProjLayer === null && glBaseLayer === null ) {
@@ -662,6 +818,12 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Sets the foveation value.
+		 *
+		 * @param {number} value - A number in the range `[0,1]` where `0` means no foveation (full resolution)
+		 * and `1` means maximum foveation (the edges render at lower resolution).
+		 */
 		this.setFoveation = function ( value ) {
 		this.setFoveation = function ( value ) {
 
 
 			// 0 = no foveation = full resolution
 			// 0 = no foveation = full resolution
@@ -683,12 +845,22 @@ class WebXRManager extends EventDispatcher {
 
 
 		};
 		};
 
 
+		/**
+		 * Returns `true` if depth sensing is supported.
+		 *
+		 * @return {boolean} Whether depth sensing is supported or not.
+		 */
 		this.hasDepthSensing = function () {
 		this.hasDepthSensing = function () {
 
 
 			return depthSensing.texture !== null;
 			return depthSensing.texture !== null;
 
 
 		};
 		};
 
 
+		/**
+		 * Returns the depth sensing mesh.
+		 *
+		 * @return {Mesh} The depth sensing mesh.
+		 */
 		this.getDepthSensingMesh = function () {
 		this.getDepthSensingMesh = function () {
 
 
 			return depthSensing.getMesh( cameraXR );
 			return depthSensing.getMesh( cameraXR );

+ 1 - 17
utils/docs/jsdoc.config.json

@@ -13,23 +13,7 @@
     "source": {
     "source": {
         "include": [
         "include": [
             "examples/jsm/tsl",
             "examples/jsm/tsl",
-            "src/animation",
-            "src/audio",
-            "src/cameras",
-            "src/core",
-            "src/extras",
-            "src/geometries",
-            "src/helpers",
-            "src/lights",
-            "src/loaders",
-            "src/materials",
-            "src/math",
-            "src/nodes",
-            "src/objects",
-            "src/renderers/common",
-            "src/renderers/webgpu",
-            "src/scenes",
-            "src/textures"
+            "src"
         ],
         ],
         "exclude": [
         "exclude": [
             "src/extras/PMREMGenerator.js"
             "src/extras/PMREMGenerator.js"

粤ICP备19079148号