depthBuffer

Preview

canvas.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { SobaWrapper } from '@soba/wrapper.ts';
import { NgtCanvas, provideNgtRenderer } from 'angular-three/dom';
import { SceneGraph } from './scene-graph';

@Component({
    selector: 'app-depth-buffer',
    template: `
        <ngt-canvas [camera]="{ position: [0, 0, 5], fov: 50 }">
            <app-soba-wrapper *canvasContent [grid]="false">
                <app-scene-graph />
            </app-soba-wrapper>
        </ngt-canvas>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { class: 'depth-buffer-demo relative block h-full' },
    imports: [NgtCanvas, SobaWrapper, SceneGraph],
})
export default class DepthBuffer {
    static clientProviders = [provideNgtRenderer()];
}

scene-graph.ts

import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, effect } from '@angular/core';
import { NgtArgs } from 'angular-three';
import { depthBuffer } from 'angular-three-soba/misc';
import * as THREE from 'three';

@Component({
    selector: 'app-scene-graph',
    template: `
        <!-- Scene objects at different depths -->
        <ngt-mesh [position]="[-1.5, 0, 2]">
            <ngt-sphere-geometry *args="[0.5, 32, 32]" />
            <ngt-mesh-standard-material color="#ff6b6b" />
        </ngt-mesh>

        <ngt-mesh [position]="[0, 0, 0]">
            <ngt-box-geometry *args="[1, 1, 1]" />
            <ngt-mesh-standard-material color="#4ecdc4" />
        </ngt-mesh>

        <ngt-mesh [position]="[1.5, 0, -2]">
            <ngt-cone-geometry *args="[0.5, 1, 32]" />
            <ngt-mesh-standard-material color="#a29bfe" />
        </ngt-mesh>

        <!-- Plane showing depth visualization -->
        <ngt-mesh [position]="[3, 0, 0]" #depthPlane>
            <ngt-plane-geometry *args="[2, 2]" />
            <ngt-shader-material
                [vertexShader]="vertexShader"
                [fragmentShader]="fragmentShader"
                [uniforms]="uniforms"
            />
        </ngt-mesh>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [NgtArgs],
})
export class SceneGraph {
    // Create depth buffer
    depth = depthBuffer(() => ({ size: 256, frames: Infinity }));

    uniforms = {
        depthTexture: { value: null as THREE.DepthTexture | null },
        cameraNear: { value: 0.1 },
        cameraFar: { value: 100 },
    };

    vertexShader = `
        varying vec2 vUv;
        void main() {
            vUv = uv;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `;

    fragmentShader = `
        uniform sampler2D depthTexture;
        uniform float cameraNear;
        uniform float cameraFar;
        varying vec2 vUv;

        float linearizeDepth(float depth) {
            float z = depth * 2.0 - 1.0;
            return (2.0 * cameraNear * cameraFar) / (cameraFar + cameraNear - z * (cameraFar - cameraNear));
        }

        void main() {
            float depth = texture2D(depthTexture, vUv).r;
            float linearDepth = linearizeDepth(depth) / cameraFar;
            gl_FragColor = vec4(vec3(1.0 - linearDepth), 1.0);
        }
    `;

    constructor() {
        effect(() => {
            const depthTexture = this.depth;
            if (depthTexture) {
                this.uniforms.depthTexture.value = depthTexture;
            }
        });
    }
}

depthBuffer creates a depth buffer texture that captures scene depth information. It renders the scene to an off-screen FBO with a depth texture attachment, which can be used for effects like soft particles, SSAO, or custom shaders.

Usage

import { depthBuffer } from 'angular-three-soba/misc';

@Component({...})
class MyComponent {
    depth = depthBuffer(() => ({
        size: 256,        // Resolution of depth buffer
        frames: Infinity  // Render continuously
    }));

    constructor() {
        effect(() => {
            // Use in a shader
            material.uniforms['depthTexture'].value = this.depth;
        });
    }
}

Performance Tip

Since depth buffer rendering is expensive, limit the number of frames when objects are static:

// Render only once for static scenes
const depth = depthBuffer(() => ({ frames: 1 }));

// Render every frame for dynamic scenes
const depth = depthBuffer(() => ({ frames: Infinity }));

injectDepthBuffer is deprecated. Use depthBuffer instead.

Arguments

name	type	description	required
params	() => { size?: number; frames?: number }	Signal returning configuration object with size (resolution, default 256) and frames (number of frames to render, default Infinity)	no
options	{ injector?: Injector }	Optional configuration object with injector	no

Returns

type	description
THREE.DepthTexture	A depth texture that captures scene depth information

Creates a depth buffer texture that captures scene depth information. Renders the scene to an off-screen FBO with a depth texture attachment, which can be used for effects like soft particles, SSAO, or custom shaders.

Usage

import { depthBuffer } from 'angular-three-soba/misc';

@Component({...})
class MyComponent {
  depth = depthBuffer(() => ({
    size: 256,    // The size of the depth buffer (default: 256)
    frames: Infinity, // The amount of frames to render (default: Infinity)
  }));

  constructor() {
    // Use in a shader
    effect(() => {
      material.uniforms['depthTexture'].value = this.depth;
    });
  }
}

Signature

function depthBuffer(
  params: () => { size?: number; frames?: number } = () => ({}),
  { injector }: { injector?: Injector } = {},
): THREE.DepthTexture;

Parameters

Parameter	Type	Description
params	() => { size?: number; frames?: number }	Signal of depth buffer configuration
injector	Injector (optional)	Custom injector for dependency injection

Params Object

Property	Type	Default	Description
size	number	256	Resolution of the depth buffer
frames	number	Infinity	Number of frames to render

Return Value

Returns a THREE.DepthTexture that can be used in shaders or materials.

Performance Tip

Since depth buffer rendering is expensive, limit the number of frames when objects are static:

// Render only once for static scenes
const depth = depthBuffer(() => ({ frames: 1 }));

// Render every frame for dynamic scenes
const depth = depthBuffer(() => ({ frames: Infinity }));

Example: Soft Particles

@Component({
  template: `
    <ngt-points>
      <ngt-buffer-geometry />
      <ngt-shader-material
        [uniforms]="{ depthTexture: { value: depth }, cameraNear: { value: 0.1 }, cameraFar: { value: 100 } }"
        [vertexShader]="vertexShader"
        [fragmentShader]="fragmentShader"
      />
    </ngt-points>
  `,
})
class SoftParticles {
  depth = depthBuffer(() => ({ size: 512 }));
}

Note

injectDepthBuffer is deprecated. Use depthBuffer instead.