Skip to content
Angular Three
Blog

NgtsMeshTransmissionMaterial

NgtsMeshTransmissionMaterial, port from Drei’s MeshTransmissionMaterial, is an enhanced version of THREE.MeshPhysicalMaterial with advanced features for realistic transmission effects. It maintains all standard THREE.MeshPhysicalMaterial properties (transmission, thickness, IOR, roughness etc…) while adding: chromatic aberration, noise-based roughness blur, primitive anisotropic blur support, and ability to see other transmissive/transparent objects.

Usage

import { NgtsMeshTransmissionMaterial } from 'angular-three-soba/materials';
<ngt-mesh>
    <ngt-mesh-transmission-material />
</ngt-mesh>

Performance Considerations

NgtsMeshTransmissionMaterial causes an additional render pass of the scene. You can use low samples and resolution for better performance.

Roughness

With roughness, you might need to consider a small resolutions (i.e: 32x32) for good performance with good visuals.

Opt-out of transmission

For performance and visual reasons, the parent ngt-mesh is temporarily removed from the render stack. If you have objects that you do not want to see reflected in the material, you can render those objects as ngt-mesh content.

Sharing buffer textures

For improved performance when using multiple NgtsMeshTransmissionMaterial, you can share buffer textures in different ways:

Using transmissionSampler property

This property enables internal THREE.js buffer used by THREE.MeshPhysicalMaterial

<ngt-mesh>
    <ngts-mesh-transmission-material [options]="{ transmissionSampler: true }" />
</ngt-mesh>
<ngt-mesh>
    <ngts-mesh-transmission-material [options]="{ transmissionSampler: true }" />
</ngt-mesh>

With fbo

You can create an FBO with fbo and pass the texture to buffer option

@Component({
    template: `
        <ngt-mesh>
            <ngts-mesh-transmission-material [options]="{ buffer: fbo.texture }" />
        </ngt-mesh>
        <ngt-mesh>
            <ngts-mesh-transmission-material [options]="{ buffer: fbo.texture }" />
        </ngt-mesh>
    `
})
export class MyCmp {
    protected fbo = fbo();


    constructor() {
        beforeRender(({ gl, scene, camera }) => {
            gl.setRenderTarget(this.fbo);
            gl.render(scene, camera);
            gl.setRenderTarget(null);
        });
    }
}

Using NgtsPerspectiveCamera

You can also use a NgtsPerspectiveCamera to create a shared buffer

<ngts-perspective-camera [options]="{ makeDefault: true, fov: 75, position: [10, 0, 15], resolution: 1024 }">
    <ng-template cameraContent let-texture>
        <ngt-mesh>
            <ngts-mesh-transmission-material [options]="{ buffer: texture }" />
        </ngt-mesh>
        <ngt-mesh>
            <ngts-mesh-transmission-material [options]="{ buffer: texture }" />
        </ngt-mesh>
    </ng-template>
</ngts-perspective-camera>

Options

options input accepts any properties from THREE.MeshPhysicalMaterial and MeshTransmissionMaterial in addition to the following:

Properties

name type description
anisotropicBlur number The amount of anisotropic blurring used to reduce artifacts.
buffer THREE.Texture The buffer texture that is used to store the transmission data.
transmissionSampler boolean transmissionSampler, you can use the threejs transmission sampler texture that is generated once for all transmissive materials. The upside is that it can be faster if you use multiple MeshPhysical and Transmission materials, the downside is that transmissive materials using this can't see other transparent or transmissive objects, default: false
backside boolean Render the backside of the material (more cost, better results), default: false
backsideThickness number Backside thickness (when backside is true), default: 0
backsideEnvMapIntensity number Backside env map intensity (when backside is true), default: 1
resolution number Resolution of the local buffer, default: undefined (fullscreen)
backsideResolution number Resolution of the local buffer for backfaces, default: undefined (fullscreen)
samples number Refraction samples, default: 6
background THREE.Texture | THREE.Color | null Buffer scene background (can be a texture, a cubetexture or a color), default: null