diff --git a/web/filament-js/extensions.js b/web/filament-js/extensions.js
index 27f88c3335..6211e1036f 100644
--- a/web/filament-js/extensions.js
+++ b/web/filament-js/extensions.js
@@ -171,6 +171,20 @@ Filament.loadClassExtensions = function() {
         this._setAmbientOcclusionOptions(options);
     };
 
+    /// setDepthOfFieldOptions ::method::
+    /// overrides ::argument:: Dictionary with one or more of the following properties: \
+    /// focusDistance, blurScale, maxApertureDiameter, enabled.
+    Filament.View.prototype.setDepthOfFieldOptions = function(overrides) {
+        const options = {
+            focusDistance: 10.0,
+            blurScale: 1.0,
+            maxApertureDiameter: 0.01,
+            enabled: false
+        };
+        Object.assign(options, overrides);
+        this._setDepthOfFieldOptions(options);
+    };
+
     /// setBloomOptions ::method::
     /// overrides ::argument:: Dictionary with one or more of the following properties: \
     /// dirtStrength, strength, resolution, anomorphism, levels, blendMode, threshold, enabled, dirt.
diff --git a/web/filament-js/filament.d.ts b/web/filament-js/filament.d.ts
index 8f6e61ea53..90b49d8524 100644
--- a/web/filament-js/filament.d.ts
+++ b/web/filament-js/filament.d.ts
@@ -66,6 +66,13 @@ export interface View$AmbientOcclusionOptions {
     quality?: View$QualityLevel;
 }
 
+export interface View$DepthOfFieldOptions {
+    focusDistance?: number;
+    blurScale?: number;
+    maxApertureDiameter?: number;
+    enabled?: boolean;
+}
+
 export interface View$BloomOptions {
     dirtStrength?: number;
     strength?: number;
@@ -374,6 +381,7 @@ export class View {
     public setVisibleLayers(select: number, values: number): void;
     public setRenderTarget(renderTarget: RenderTarget): void;
     public setAmbientOcclusionOptions(options: View$AmbientOcclusionOptions): void;
+    public setDepthOfFieldOptions(options: View$DepthOfFieldOptions): void;
     public setBloomOptions(options: View$BloomOptions): void;
     public setAmbientOcclusion(enable: boolean): void;
     public getAmbientOcclusion(): boolean;
diff --git a/web/filament-js/jsbindings.cpp b/web/filament-js/jsbindings.cpp
index 1a608fe233..6c11aadb60 100644
--- a/web/filament-js/jsbindings.cpp
+++ b/web/filament-js/jsbindings.cpp
@@ -296,6 +296,12 @@ value_object<filament::View::AmbientOcclusionOptions>("View$AmbientOcclusionOpti
     .field("intensity", &filament::View::AmbientOcclusionOptions::intensity)
     .field("quality", &filament::View::AmbientOcclusionOptions::quality);
 
+value_object<filament::View::DepthOfFieldOptions>("View$DepthOfFieldOptions")
+    .field("focusDistance", &filament::View::DepthOfFieldOptions::focusDistance)
+    .field("blurScale", &filament::View::DepthOfFieldOptions::blurScale)
+    .field("maxApertureDiameter", &filament::View::DepthOfFieldOptions::maxApertureDiameter)
+    .field("enabled", &filament::View::DepthOfFieldOptions::enabled);
+
 value_object<filament::View::BloomOptions>("View$BloomOptions")
     .field("dirtStrength", &filament::View::BloomOptions::dirtStrength)
     .field("strength", &filament::View::BloomOptions::strength)
@@ -500,6 +506,7 @@ class_<View>("View")
     .function("setVisibleLayers", &View::setVisibleLayers)
     .function("setPostProcessingEnabled", &View::setPostProcessingEnabled)
     .function("_setAmbientOcclusionOptions", &View::setAmbientOcclusionOptions)
+    .function("_setDepthOfFieldOptions", &View::setDepthOfFieldOptions)
     .function("_setBloomOptions", &View::setBloomOptions)
     .function("setAmbientOcclusion", &View::setAmbientOcclusion)
     .function("getAmbientOcclusion", &View::getAmbientOcclusion)