⬅️ Back to Table of Contents

📄 WebXRDepthSensing.js

📊 Analysis Summary

Metric	Count
🔧 Functions	4
🧱 Classes	1
📦 Imports	4
📊 Variables & Constants	5

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Classes

🛠️ File Location:

📂 src/renderers/webxr/WebXRDepthSensing.js

📦 Imports

Name	Source
PlaneGeometry	../../geometries/PlaneGeometry.js
ShaderMaterial	../../materials/ShaderMaterial.js
Mesh	../../objects/Mesh.js
ExternalTexture	../../textures/ExternalTexture.js

---

Variables & Constants

Name	Type	Kind	Value	Exported
_occlusion_vertex	"\nvoid main() {\n\n\tgl_Position = v...	let/var	void main() { gl_Position = vec4( position, 1.0 ); }	✗
_occlusion_fragment	"\nuniform sampler2DArray depthColor;...	let/var	` uniform sampler2DArray depthColor; uniform float depthWidth; uniform float ...	✗
texture	ExternalTexture	let/var	new ExternalTexture( depthData.texture )	✗
viewport	any	let/var	cameraXR.cameras[ 0 ].viewport	✗
material	ShaderMaterial	let/var	new ShaderMaterial( { vertexShader: _occlusion_vertex, fragmentShader: _occlu...	✗

---

Functions

WebXRDepthSensing.init(depthData: XRWebGLDepthInformation, renderState: XRRenderState): void

JSDoc:

/**
     * Inits the depth sensing module
     *
     * @param {XRWebGLDepthInformation} depthData - The XR depth data.
     * @param {XRRenderState} renderState - The XR render state.
     */

Parameters:

• depthData XRWebGLDepthInformation
• renderState XRRenderState

Returns: void

Code

init( depthData, renderState ) {

        if ( this.texture === null ) {

            const texture = new ExternalTexture( depthData.texture );

            if ( ( depthData.depthNear !== renderState.depthNear ) || ( depthData.depthFar !== renderState.depthFar ) ) {

                this.depthNear = depthData.depthNear;
                this.depthFar = depthData.depthFar;

            }

            this.texture = texture;

        }

    }

WebXRDepthSensing.getMesh(cameraXR: ArrayCamera): Mesh

JSDoc:

/**
     * Returns a plane mesh that visualizes the depth texture.
     *
     * @param {ArrayCamera} cameraXR - The XR camera.
     * @return {?Mesh} The plane mesh.
     */

Parameters:

• cameraXR ArrayCamera

Returns: Mesh

Code

getMesh( cameraXR ) {

        if ( this.texture !== null ) {

            if ( this.mesh === null ) {

                const viewport = cameraXR.cameras[ 0 ].viewport;
                const material = new ShaderMaterial( {
                    vertexShader: _occlusion_vertex,
                    fragmentShader: _occlusion_fragment,
                    uniforms: {
                        depthColor: { value: this.texture },
                        depthWidth: { value: viewport.z },
                        depthHeight: { value: viewport.w }
                    }
                } );

                this.mesh = new Mesh( new PlaneGeometry( 20, 20 ), material );

            }

        }

        return this.mesh;

    }

WebXRDepthSensing.reset(): void

JSDoc:

/**
     * Resets the module
     */

Returns: void

Code

reset() {

        this.texture = null;
        this.mesh = null;

    }

WebXRDepthSensing.getDepthTexture(): ExternalTexture

JSDoc:

/**
     * Returns a texture representing the depth of the user's environment.
     *
     * @return {?ExternalTexture} The depth texture.
     */

Returns: ExternalTexture

Code

getDepthTexture() {

        return this.texture;

    }

---

Classes

WebXRDepthSensing

Class Code

class WebXRDepthSensing {

    /**
     * Constructs a new depth sensing module.
     */
    constructor() {

        /**
         * An opaque texture representing the depth of the user's environment.
         *
         * @type {?ExternalTexture}
         */
        this.texture = null;

        /**
         * A plane mesh for visualizing the depth texture.
         *
         * @type {?Mesh}
         */
        this.mesh = null;

        /**
         * The depth near value.
         *
         * @type {number}
         */
        this.depthNear = 0;

        /**
         * The depth near far.
         *
         * @type {number}
         */
        this.depthFar = 0;

    }

    /**
     * Inits the depth sensing module
     *
     * @param {XRWebGLDepthInformation} depthData - The XR depth data.
     * @param {XRRenderState} renderState - The XR render state.
     */
    init( depthData, renderState ) {

        if ( this.texture === null ) {

            const texture = new ExternalTexture( depthData.texture );

            if ( ( depthData.depthNear !== renderState.depthNear ) || ( depthData.depthFar !== renderState.depthFar ) ) {

                this.depthNear = depthData.depthNear;
                this.depthFar = depthData.depthFar;

            }

            this.texture = texture;

        }

    }

    /**
     * Returns a plane mesh that visualizes the depth texture.
     *
     * @param {ArrayCamera} cameraXR - The XR camera.
     * @return {?Mesh} The plane mesh.
     */
    getMesh( cameraXR ) {

        if ( this.texture !== null ) {

            if ( this.mesh === null ) {

                const viewport = cameraXR.cameras[ 0 ].viewport;
                const material = new ShaderMaterial( {
                    vertexShader: _occlusion_vertex,
                    fragmentShader: _occlusion_fragment,
                    uniforms: {
                        depthColor: { value: this.texture },
                        depthWidth: { value: viewport.z },
                        depthHeight: { value: viewport.w }
                    }
                } );

                this.mesh = new Mesh( new PlaneGeometry( 20, 20 ), material );

            }

        }

        return this.mesh;

    }

    /**
     * Resets the module
     */
    reset() {

        this.texture = null;
        this.mesh = null;

    }

    /**
     * Returns a texture representing the depth of the user's environment.
     *
     * @return {?ExternalTexture} The depth texture.
     */
    getDepthTexture() {

        return this.texture;

    }

}

Methods

init(depthData: XRWebGLDepthInformation, renderState: XRRenderState): void

Code

init( depthData, renderState ) {

        if ( this.texture === null ) {

            const texture = new ExternalTexture( depthData.texture );

            if ( ( depthData.depthNear !== renderState.depthNear ) || ( depthData.depthFar !== renderState.depthFar ) ) {

                this.depthNear = depthData.depthNear;
                this.depthFar = depthData.depthFar;

            }

            this.texture = texture;

        }

    }

getMesh(cameraXR: ArrayCamera): Mesh

Code

getMesh( cameraXR ) {

        if ( this.texture !== null ) {

            if ( this.mesh === null ) {

                const viewport = cameraXR.cameras[ 0 ].viewport;
                const material = new ShaderMaterial( {
                    vertexShader: _occlusion_vertex,
                    fragmentShader: _occlusion_fragment,
                    uniforms: {
                        depthColor: { value: this.texture },
                        depthWidth: { value: viewport.z },
                        depthHeight: { value: viewport.w }
                    }
                } );

                this.mesh = new Mesh( new PlaneGeometry( 20, 20 ), material );

            }

        }

        return this.mesh;

    }

reset(): void

Code

reset() {

        this.texture = null;
        this.mesh = null;

    }

getDepthTexture(): ExternalTexture

Code

getDepthTexture() {

        return this.texture;

    }

---