@aura3d/engine 1.4.4 → 1.5.0

package/dist/rendering/WebGL2Device.js

@@ -1,8 +1,9 @@
 import { RenderDeviceError, } from "./RenderDevice.js";
-import { Texture, isCompressedTextureFormat } from "./Texture.js";
+import { Texture, isCompressedTextureFormat, isFloatColorTextureFormat } from "./Texture.js";
 import { TextureBinding } from "./TextureBinding.js";
 import {} from "./VertexFormat.js";
 import { WebGL2StateCache } from "./WebGL2StateCache.js";
+import { BLOOM_BRIGHT_LUT_HEIGHT, BLOOM_BRIGHT_LUT_WIDTH, BLOOM_COMPOSITE_LUT_SIZE, OUTLINE_BLEND_LUT_WIDTH, OUTLINE_LIMB_RADIX, createOutlineBlendLut, createOutlineGradientBound, createBloomBrightThresholdLut, createBloomCompositeLut } from "./postprocess/NativeLdrEffectLuts.js";
 const WEBGL_CUBE_FACES = ["px", "nx", "py", "ny", "pz", "nz"];
 class WebGL2Buffer {
     id;
@@ -61,9 +62,13 @@ class WebGL2RenderTarget {
     colorHandle;
     depthHandle;
     depthTextureHandle;
+    sampleCount;
+    drawFramebuffer;
+    multisampleColorHandle;
     gl;
     disposed = false;
-    constructor(id, width, height, label, colorTexture, depthTexture, framebuffer, colorHandle, depthHandle, depthTextureHandle, gl) {
+    needsResolve = false;
+    constructor(id, width, height, label, colorTexture, depthTexture, framebuffer, colorHandle, depthHandle, depthTextureHandle, sampleCount, drawFramebuffer, multisampleColorHandle, gl) {
         this.id = id;
         this.width = width;
         this.height = height;
@@ -74,14 +79,21 @@ class WebGL2RenderTarget {
         this.colorHandle = colorHandle;
         this.depthHandle = depthHandle;
         this.depthTextureHandle = depthTextureHandle;
+        this.sampleCount = sampleCount;
+        this.drawFramebuffer = drawFramebuffer;
+        this.multisampleColorHandle = multisampleColorHandle;
         this.gl = gl;
     }
     dispose() {
         if (!this.disposed) {
             this.gl.deleteFramebuffer(this.framebuffer);
+            if (this.drawFramebuffer !== this.framebuffer)
+                this.gl.deleteFramebuffer(this.drawFramebuffer);
             this.gl.deleteTexture(this.colorHandle);
             if (this.depthHandle)
                 this.gl.deleteRenderbuffer(this.depthHandle);
+            if (this.multisampleColorHandle)
+                this.gl.deleteRenderbuffer(this.multisampleColorHandle);
             if (this.depthTextureHandle)
                 this.gl.deleteTexture(this.depthTextureHandle);
             this.colorTexture.dispose();
@@ -110,6 +122,24 @@ export class WebGL2Device {
     samplerObjectCache = new Map();
     presentationProgram = null;
     ldrPostprocessProgram = null;
+    bloomBrightExtractProgram = null;
+    bloomBlurProgram = null;
+    bloomCompositeProgram = null;
+    outlineProgram = null;
+    ssaoProgram = null;
+    ssrProgram = null;
+    depthOfFieldProgram = null;
+    motionBlurProgram = null;
+    motionBlurVelocityTexture = null;
+    taaProgram = null;
+    taaHistoryTexture = null;
+    bloomPingPongResources = null;
+    bloomBrightLutTexture = null;
+    bloomBrightLutThreshold = null;
+    bloomCompositeLutTexture = null;
+    bloomCompositeLutIntensity = null;
+    outlineBlendLutTexture = null;
+    outlineBlendLutKey = null;
     depthReadbackProgram = null;
     uniformLocationCache = new WeakMap();
     textureSamplerParameterCache = new WeakMap();
@@ -131,6 +161,7 @@ export class WebGL2Device {
     releasedTextureHandles = 0;
     nativeEnvironmentBindings = 0;
     nativeShadowMapBindings = 0;
+    shadowRenderTargetsAllocated = 0;
     lastError = null;
     frameActive = false;
     viewportWidth = 0;
@@ -150,7 +181,17 @@ export class WebGL2Device {
         if (!gl) {
             throw new RenderDeviceError("WebGL2 is not available for the provided canvas", "WEBGL2_UNAVAILABLE");
         }
-        return new WebGL2Device(gl, options.canvas, options.errorCheckMode ?? "strict");
+        // Default to frame-level error checking.
+        //
+        // `strict` calls `gl.getError()` after every uniform upload, vertex-format
+        // bind, and draw. `gl.getError()` forces a synchronous CPU/GPU sync, so on a
+        // scene with a few dozen draws and many uniforms per draw it dominates frame
+        // time: profiling Aura Clash attributed ~93% of frame time to `getError`,
+        // holding the route at ~11 FPS on an Apple M4 Max. Frame-level checking still
+        // reports real WebGL errors (read once in `endFrame` and surfaced through
+        // `lastError`); callers that need per-operation attribution can still opt into
+        // `strict` explicitly.
+        return new WebGL2Device(gl, options.canvas, options.errorCheckMode ?? "frame");
     }
     constructor(gl, canvas, errorCheckMode) {
         this.errorCheckMode = errorCheckMode;
@@ -296,18 +337,42 @@ export class WebGL2Device {
                 label: descriptor.label
             });
         }
+        const requestedSampleCount = descriptor.sampleCount ?? 1;
+        const maxSamples = Number(this.gl.getParameter(this.gl.MAX_SAMPLES) ?? 1);
+        if (!Number.isInteger(requestedSampleCount) || requestedSampleCount < 1 || requestedSampleCount > maxSamples) {
+            throw new RenderDeviceError("WebGL2 render-target sampleCount must be an integer supported by MAX_SAMPLES.", "INVALID_RENDER_TARGET_SAMPLE_COUNT", {
+                sampleCount: requestedSampleCount,
+                maxSamples,
+                label: descriptor.label
+            });
+        }
+        const sampleCount = requestedSampleCount;
         const colorHandle = this.gl.createTexture();
         const framebuffer = this.gl.createFramebuffer();
+        const drawFramebuffer = sampleCount > 1 ? this.gl.createFramebuffer() : framebuffer;
+        const multisampleColorHandle = sampleCount > 1 ? this.gl.createRenderbuffer() : null;
         const depthMode = descriptor.depth === "texture" ? "texture" : descriptor.depth === false ? "none" : "renderbuffer";
         const depthHandle = depthMode === "renderbuffer" ? this.gl.createRenderbuffer() : null;
+        const multisampleDepthHandle = sampleCount > 1 && depthMode !== "none"
+            ? (depthHandle ?? this.gl.createRenderbuffer())
+            : depthHandle;
         const depthTextureHandle = depthMode === "texture" ? this.gl.createTexture() : null;
-        if (!colorHandle || !framebuffer || (depthMode === "renderbuffer" && !depthHandle) || (depthMode === "texture" && !depthTextureHandle)) {
+        if (!colorHandle
+            || !framebuffer
+            || !drawFramebuffer
+            || (sampleCount > 1 && !multisampleColorHandle)
+            || ((depthMode === "renderbuffer" || (sampleCount > 1 && depthMode !== "none")) && !multisampleDepthHandle)
+            || (depthMode === "texture" && !depthTextureHandle)) {
             if (colorHandle)
                 this.gl.deleteTexture(colorHandle);
             if (framebuffer)
                 this.gl.deleteFramebuffer(framebuffer);
-            if (depthHandle)
-                this.gl.deleteRenderbuffer(depthHandle);
+            if (drawFramebuffer && drawFramebuffer !== framebuffer)
+                this.gl.deleteFramebuffer(drawFramebuffer);
+            if (multisampleColorHandle)
+                this.gl.deleteRenderbuffer(multisampleColorHandle);
+            if (multisampleDepthHandle)
+                this.gl.deleteRenderbuffer(multisampleDepthHandle);
             if (depthTextureHandle)
                 this.gl.deleteTexture(depthTextureHandle);
             throw new RenderDeviceError("Failed to allocate WebGL render target", "WEBGL_ALLOCATION_FAILED", {
@@ -331,7 +396,7 @@ export class WebGL2Device {
         this.gl.texImage2D(this.gl.TEXTURE_2D, 0, textureFormat.internalFormat, descriptor.width, descriptor.height, 0, this.gl.RGBA, textureFormat.type, null);
         this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
         this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, colorHandle, 0);
-        if (depthHandle) {
+        if (depthHandle && sampleCount === 1) {
             this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, depthHandle);
             this.gl.renderbufferStorage(this.gl.RENDERBUFFER, this.gl.DEPTH_COMPONENT16, descriptor.width, descriptor.height);
             this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, depthHandle);
@@ -345,25 +410,48 @@ export class WebGL2Device {
             this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.DEPTH_COMPONENT24, descriptor.width, descriptor.height, 0, this.gl.DEPTH_COMPONENT, this.gl.UNSIGNED_INT, null);
             this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.TEXTURE_2D, depthTextureHandle, 0);
         }
-        const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+        const resolveStatus = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+        let drawStatus = resolveStatus;
+        if (sampleCount > 1 && multisampleColorHandle) {
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, drawFramebuffer);
+            this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, multisampleColorHandle);
+            const multisampleColorFormat = format === "rgba8" ? this.gl.RGBA8 : textureFormat.internalFormat;
+            this.gl.renderbufferStorageMultisample(this.gl.RENDERBUFFER, sampleCount, multisampleColorFormat, descriptor.width, descriptor.height);
+            this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.RENDERBUFFER, multisampleColorHandle);
+            if (multisampleDepthHandle) {
+                this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, multisampleDepthHandle);
+                this.gl.renderbufferStorageMultisample(this.gl.RENDERBUFFER, sampleCount, this.gl.DEPTH_COMPONENT24, descriptor.width, descriptor.height);
+                this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, multisampleDepthHandle);
+            }
+            drawStatus = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+        }
         this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, previousRenderbuffer);
         this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, previousFramebuffer);
         this.gl.bindTexture(this.gl.TEXTURE_2D, previousTexture);
         this.gl.activeTexture(previousActiveTexture);
         this.stateCache.invalidate();
-        if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+        if (resolveStatus !== this.gl.FRAMEBUFFER_COMPLETE || drawStatus !== this.gl.FRAMEBUFFER_COMPLETE) {
             this.gl.deleteTexture(colorHandle);
             this.gl.deleteFramebuffer(framebuffer);
-            this.gl.deleteRenderbuffer(depthHandle);
+            if (drawFramebuffer !== framebuffer)
+                this.gl.deleteFramebuffer(drawFramebuffer);
+            if (multisampleColorHandle)
+                this.gl.deleteRenderbuffer(multisampleColorHandle);
+            if (multisampleDepthHandle)
+                this.gl.deleteRenderbuffer(multisampleDepthHandle);
             if (depthTextureHandle)
                 this.gl.deleteTexture(depthTextureHandle);
-            throw new RenderDeviceError("WebGL render target framebuffer status is invalid", "FRAMEBUFFER_INVALID", { status });
+            throw new RenderDeviceError("WebGL render target framebuffer status is invalid", "FRAMEBUFFER_INVALID", { resolveStatus, drawStatus });
         }
         const depthTexture = depthTextureHandle
             ? new Texture({ width: descriptor.width, height: descriptor.height, format: "depth24", label: `${descriptor.label ?? "render-target"}-depth` })
             : undefined;
-        const target = new WebGL2RenderTarget(this.nextId++, descriptor.width, descriptor.height, descriptor.label ?? "render-target", new Texture({ width: descriptor.width, height: descriptor.height, format, label: descriptor.label ?? "render-target-color" }), depthTexture, framebuffer, colorHandle, depthHandle, depthTextureHandle, this.gl);
+        const target = new WebGL2RenderTarget(this.nextId++, descriptor.width, descriptor.height, descriptor.label ?? "render-target", new Texture({ width: descriptor.width, height: descriptor.height, format, label: descriptor.label ?? "render-target-color" }), depthTexture, framebuffer, colorHandle, multisampleDepthHandle, depthTextureHandle, sampleCount, drawFramebuffer, multisampleColorHandle, this.gl);
         this.renderTargets.add(target);
+        // Shadow passes label their depth target after the shadow map texture, so the
+        // label is the device-side signal that a shadow depth target was allocated.
+        if ((descriptor.label ?? "").toLowerCase().includes("shadow"))
+            this.shadowRenderTargetsAllocated += 1;
         this.textures.set(target.colorTexture, colorHandle);
         this.textureUploadModes.set(target.colorTexture, "rgba8");
         if (depthTexture && depthTextureHandle) {
@@ -374,6 +462,9 @@ export class WebGL2Device {
     }
     setRenderTarget(target) {
         this.assertAlive();
+        if (this.activeRenderTarget && this.activeRenderTarget !== target) {
+            this.resolveMultisampleTarget(this.activeRenderTarget);
+        }
         if (target === null) {
             this.activeRenderTarget = null;
             this.stateCache.bindFramebuffer(this.gl.FRAMEBUFFER, null, () => this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null));
@@ -386,9 +477,23 @@ export class WebGL2Device {
             });
         }
         this.activeRenderTarget = target;
-        this.stateCache.bindFramebuffer(this.gl.FRAMEBUFFER, target.framebuffer, () => this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, target.framebuffer));
+        this.stateCache.bindFramebuffer(this.gl.FRAMEBUFFER, target.drawFramebuffer, () => this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, target.drawFramebuffer));
         this.stateCache.viewport(0, 0, target.width, target.height, () => this.gl.viewport(0, 0, target.width, target.height));
     }
+    resolveMultisampleTarget(target) {
+        if (target.sampleCount <= 1 || !target.needsResolve)
+            return;
+        const previousFramebuffer = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING);
+        this.gl.bindFramebuffer(this.gl.READ_FRAMEBUFFER, target.drawFramebuffer);
+        this.gl.bindFramebuffer(this.gl.DRAW_FRAMEBUFFER, target.framebuffer);
+        let mask = this.gl.COLOR_BUFFER_BIT;
+        if (target.depthTextureHandle)
+            mask |= this.gl.DEPTH_BUFFER_BIT;
+        this.gl.blitFramebuffer(0, 0, target.width, target.height, 0, 0, target.width, target.height, mask, this.gl.NEAREST);
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, previousFramebuffer);
+        target.needsResolve = false;
+        this.stateCache.invalidate();
+    }
     writeRenderTargetPixels(target, pixels) {
         this.assertAlive();
         if (!(target instanceof WebGL2RenderTarget) || !this.renderTargets.has(target) || target.disposed) {
@@ -413,6 +518,7 @@ export class WebGL2Device {
         try {
             this.gl.bindTexture(this.gl.TEXTURE_2D, target.colorHandle);
             this.gl.texSubImage2D(this.gl.TEXTURE_2D, 0, 0, 0, target.width, target.height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+            target.needsResolve = false;
         }
         finally {
             this.restoreTextureUnit0(textureUnit0);
@@ -432,6 +538,7 @@ export class WebGL2Device {
                 targetId: source.id
             });
         }
+        this.resolveMultisampleTarget(source);
         const outputWidth = this.viewportWidth || this.gl.drawingBufferWidth;
         const outputHeight = this.viewportHeight || this.gl.drawingBufferHeight;
         this.drawRenderTargetToBackbuffer(source, outputWidth, outputHeight);
@@ -452,13 +559,41 @@ export class WebGL2Device {
                 targetId: source.id
             });
         }
+        this.resolveMultisampleTarget(source);
         const tonePass = options.passes.find((pass) => pass.name === "tone-mapping");
+        const bloomPass = options.passes.find((pass) => pass.name === "bloom");
+        const depthOfFieldPass = options.passes.find((pass) => pass.name === "depth-of-field");
+        const motionBlurPass = options.passes.find((pass) => pass.name === "motion-blur");
+        const ssaoPass = options.passes.find((pass) => pass.name === "ssao");
+        const ssrPass = options.passes.find((pass) => pass.name === "ssr");
+        const taaPass = options.passes.find((pass) => pass.name === "taa");
+        const outlinePass = options.passes.find((pass) => pass.name === "outline");
         if (source.colorTexture.format !== "rgba8" && !tonePass) {
             throw new RenderDeviceError("WebGL2 HDR postprocess presentation requires a tone-mapping pass before LDR output.", "WEBGL_LDR_POSTPROCESS_FORMAT_UNSUPPORTED", {
                 targetId: source.id,
                 format: source.colorTexture.format
             });
         }
+        if (source.colorTexture.format !== "rgba8" && bloomPass) {
+            throw new RenderDeviceError("WebGL2 native LUT bloom accepts rgba8 input; HDR bloom must use the renderer float-bloom path before tone mapping.", "WEBGL_LDR_POSTPROCESS_FORMAT_UNSUPPORTED", {
+                targetId: source.id,
+                format: source.colorTexture.format,
+                pass: "bloom"
+            });
+        }
+        if (source.colorTexture.format !== "rgba8" && (depthOfFieldPass || motionBlurPass || ssaoPass || ssrPass || taaPass || outlinePass) && !tonePass) {
+            throw new RenderDeviceError("WebGL2 byte-kernel postprocess requires rgba8 input or a preceding tone-mapping pass.", "WEBGL_LDR_POSTPROCESS_FORMAT_UNSUPPORTED", {
+                targetId: source.id,
+                format: source.colorTexture.format,
+                pass: depthOfFieldPass ? "depth-of-field" : motionBlurPass ? "motion-blur" : ssaoPass ? "ssao" : ssrPass ? "ssr" : taaPass ? "taa" : "outline"
+            });
+        }
+        if ((depthOfFieldPass || ssaoPass || ssrPass) && !source.depthTextureHandle) {
+            throw new RenderDeviceError("WebGL2 native depth postprocess requires a renderer-owned sampleable depth texture.", "WEBGL_LDR_POSTPROCESS_DEPTH_REQUIRED", {
+                targetId: source.id,
+                pass: depthOfFieldPass ? "depth-of-field" : ssaoPass ? "ssao" : "ssr"
+            });
+        }
         const outputTarget = options.outputTarget;
         if (outputTarget && (!(outputTarget instanceof WebGL2RenderTarget) || !this.renderTargets.has(outputTarget) || outputTarget.disposed)) {
             throw new RenderDeviceError("Output render target is not a live WebGL2 resource owned by this device", "INVALID_RESOURCE", {
@@ -482,41 +617,81 @@ export class WebGL2Device {
         const webglOutputTarget = outputTarget;
         const colorPass = options.passes.find((pass) => pass.name === "color-grade");
         const fxaaPass = options.passes.find((pass) => pass.name === "fxaa");
-        const toneOptions = { ...(options.toneMappingDefaults ?? {}), ...(tonePass?.options ?? {}) };
-        const colorOptions = colorPass?.options ?? {};
-        const fxaaOptions = fxaaPass?.options ?? {};
+        const bloomOptions = bloomPass ? normalizeNativeBloomOptions(bloomPass.options) : undefined;
+        const depthOfFieldOptions = depthOfFieldPass ? normalizeNativeDepthOfFieldOptions(depthOfFieldPass.options) : undefined;
+        const motionBlurOptions = motionBlurPass
+            ? normalizeNativeMotionBlurOptions(motionBlurPass.options, source.width, source.height)
+            : undefined;
+        const ssaoOptions = ssaoPass ? normalizeNativeSsaoOptions(ssaoPass.options) : undefined;
+        const ssrOptions = ssrPass ? normalizeNativeSsrOptions(ssrPass.options) : undefined;
+        const taaOptions = taaPass ? normalizeNativeTaaOptions(taaPass.options, source.width, source.height) : undefined;
+        const outlineOptions = outlinePass ? normalizeNativeOutlineOptions(outlinePass.options) : undefined;
         const program = this.ensureLdrPostprocessProgram();
         const vertexArray = this.ensurePresentationVertexArray();
+        const bloomResources = bloomOptions || depthOfFieldOptions || motionBlurOptions || ssaoOptions || ssrOptions || taaOptions || outlineOptions
+            ? this.ensureBloomPingPongResources(source.width, source.height)
+            : undefined;
+        if (bloomOptions) {
+            this.ensureBloomLutTextures(bloomOptions);
+        }
+        if (outlineOptions) {
+            this.ensureOutlineBlendLutTexture(outlineOptions);
+        }
+        if (motionBlurOptions) {
+            this.ensureMotionBlurVelocityTexture(source.width, source.height, motionBlurOptions.velocity);
+        }
+        if (taaOptions) {
+            this.ensureTaaHistoryTexture(source.width, source.height, taaOptions.history);
+        }
         const outputWidth = webglOutputTarget?.width ?? (this.viewportWidth || this.gl.drawingBufferWidth);
         const outputHeight = webglOutputTarget?.height ?? (this.viewportHeight || this.gl.drawingBufferHeight);
         const previousState = this.prepareFullscreenPresentation(webglOutputTarget?.framebuffer ?? null, outputWidth, outputHeight);
         try {
-            this.gl.useProgram(program);
-            this.gl.bindVertexArray(vertexArray);
-            this.gl.activeTexture(this.gl.TEXTURE0);
-            this.gl.bindTexture(this.gl.TEXTURE_2D, source.colorHandle);
-            this.gl.bindSampler(0, null);
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
-            this.gl.uniform2f(this.gl.getUniformLocation(program, "u_texelSize"), 1 / source.width, 1 / source.height);
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasToneMapping"), tonePass ? 1 : 0);
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_toneOperator"), toneMappingOperatorId(stringOption(toneOptions, "operator", "reinhard")));
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_inputColorSpace"), colorSpaceId(stringOption(toneOptions, "inputColorSpace", "linear")));
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_outputColorSpace"), colorSpaceId(stringOption(toneOptions, "outputColorSpace", "linear")));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_exposure"), numberOption(toneOptions, "exposure", 1));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_whitePoint"), Math.max(0.0001, numberOption(toneOptions, "whitePoint", 1)));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_gamma"), Math.max(0.0001, numberOption(toneOptions, "gamma", 2.2)));
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasColorGrade"), colorPass ? 1 : 0);
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_contrast"), numberOption(colorOptions, "contrast", 1));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_temperature"), numberOption(colorOptions, "temperature", 0));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_tint"), numberOption(colorOptions, "tint", 0));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_saturation"), numberOption(colorOptions, "saturation", 1));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_vibrance"), numberOption(colorOptions, "vibrance", 0));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_vignette"), numberOption(colorOptions, "vignette", 0));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_sharpening"), numberOption(colorOptions, "sharpening", 0));
-            this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasFxaa"), fxaaPass ? 1 : 0);
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_edgeThreshold"), numberOption(fxaaOptions, "edgeThreshold", 0.125));
-            this.gl.uniform1f(this.gl.getUniformLocation(program, "u_subpixelBlend"), numberOption(fxaaOptions, "subpixelBlend", 0.75));
-            this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+            let ldrSourceHandle = source.colorHandle;
+            let temporarySourceIndex = -1;
+            if (bloomOptions && bloomResources) {
+                ldrSourceHandle = this.executeNativeBloomPasses(ldrSourceHandle, bloomResources, bloomOptions, vertexArray);
+                temporarySourceIndex = 1;
+            }
+            if ((depthOfFieldOptions || motionBlurOptions || ssaoOptions || ssrOptions || taaOptions || outlineOptions) && bloomResources) {
+                if (tonePass || colorPass) {
+                    const baseTargetIndex = 0;
+                    this.drawNativeLdrStage(ldrSourceHandle, bloomResources.framebuffers[baseTargetIndex], source.width, source.height, program, vertexArray, tonePass, colorPass, undefined, options.toneMappingDefaults);
+                    ldrSourceHandle = bloomResources.textures[baseTargetIndex];
+                    temporarySourceIndex = baseTargetIndex;
+                }
+                if (depthOfFieldOptions && source.depthTextureHandle) {
+                    const depthOfFieldTargetIndex = temporarySourceIndex === 0 ? 1 : 0;
+                    ldrSourceHandle = this.executeNativeDepthOfFieldPass(ldrSourceHandle, source.depthTextureHandle, bloomResources, depthOfFieldOptions, vertexArray, depthOfFieldTargetIndex);
+                    temporarySourceIndex = depthOfFieldTargetIndex;
+                }
+                if (motionBlurOptions) {
+                    const motionBlurTargetIndex = temporarySourceIndex === 0 ? 1 : 0;
+                    ldrSourceHandle = this.executeNativeMotionBlurPass(ldrSourceHandle, bloomResources, motionBlurOptions, vertexArray, motionBlurTargetIndex);
+                    temporarySourceIndex = motionBlurTargetIndex;
+                }
+                if (ssaoOptions && source.depthTextureHandle) {
+                    const ssaoTargetIndex = temporarySourceIndex === 0 ? 1 : 0;
+                    ldrSourceHandle = this.executeNativeSsaoPass(ldrSourceHandle, source.depthTextureHandle, bloomResources, ssaoOptions, vertexArray, ssaoTargetIndex);
+                    temporarySourceIndex = ssaoTargetIndex;
+                }
+                if (ssrOptions && source.depthTextureHandle) {
+                    const ssrTargetIndex = temporarySourceIndex === 0 ? 1 : 0;
+                    ldrSourceHandle = this.executeNativeSsrPass(ldrSourceHandle, source.depthTextureHandle, bloomResources, ssrOptions, vertexArray, ssrTargetIndex);
+                    temporarySourceIndex = ssrTargetIndex;
+                }
+                if (taaOptions) {
+                    const taaTargetIndex = temporarySourceIndex === 0 ? 1 : 0;
+                    ldrSourceHandle = this.executeNativeTaaPass(ldrSourceHandle, bloomResources, taaOptions, vertexArray, taaTargetIndex);
+                    temporarySourceIndex = taaTargetIndex;
+                }
+            }
+            if (outlineOptions && bloomResources) {
+                const outlineTargetIndex = temporarySourceIndex === 0 ? 1 : 0;
+                ldrSourceHandle = this.executeNativeOutlinePasses(ldrSourceHandle, bloomResources, outlineOptions, vertexArray, outlineTargetIndex);
+                temporarySourceIndex = outlineTargetIndex;
+            }
+            this.drawNativeLdrStage(ldrSourceHandle, webglOutputTarget?.framebuffer ?? null, outputWidth, outputHeight, program, vertexArray, depthOfFieldOptions || motionBlurOptions || ssaoOptions || ssrOptions || taaOptions || outlineOptions ? undefined : tonePass, depthOfFieldOptions || motionBlurOptions || ssaoOptions || ssrOptions || taaOptions || outlineOptions ? undefined : colorPass, fxaaPass, options.toneMappingDefaults);
             this.gl.flush();
         }
         finally {
@@ -548,8 +723,17 @@ export class WebGL2Device {
                 boundsHeight
             });
         }
+        const readTarget = this.activeRenderTarget;
+        if (readTarget) {
+            this.resolveMultisampleTarget(readTarget);
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, readTarget.framebuffer);
+        }
         const pixels = new Uint8Array(width * height * 4);
         this.gl.readPixels(x, y, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+        if (readTarget && readTarget.sampleCount > 1) {
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, readTarget.drawFramebuffer);
+            this.stateCache.invalidate();
+        }
         return pixels;
     }
     readFloatPixels(x, y, width, height) {
@@ -569,8 +753,17 @@ export class WebGL2Device {
                 boundsHeight
             });
         }
+        const readTarget = this.activeRenderTarget;
+        if (readTarget) {
+            this.resolveMultisampleTarget(readTarget);
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, readTarget.framebuffer);
+        }
         const pixels = new Float32Array(width * height * 4);
         this.gl.readPixels(x, y, width, height, this.gl.RGBA, this.gl.FLOAT, pixels);
+        if (readTarget && readTarget.sampleCount > 1) {
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, readTarget.drawFramebuffer);
+            this.stateCache.invalidate();
+        }
         return pixels;
     }
     readDepthPixels(x, y, width, height) {
@@ -594,6 +787,7 @@ export class WebGL2Device {
                 boundsHeight: target.height
             });
         }
+        this.resolveMultisampleTarget(target);
         const encoded = this.copyDepthTextureToBytes(target, x, y, width, height);
         const pixels = new Float32Array(width * height);
         for (let index = 0; index < pixels.length; index += 1) {
@@ -633,6 +827,8 @@ export class WebGL2Device {
         this.stateCache.depthMask(true, () => this.gl.depthMask(true));
         this.gl.clearDepth(1);
         this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+        if (this.activeRenderTarget?.sampleCount && this.activeRenderTarget.sampleCount > 1)
+            this.activeRenderTarget.needsResolve = true;
     }
     clearRenderTarget(color) {
         this.assertFrame();
@@ -640,6 +836,8 @@ export class WebGL2Device {
         this.stateCache.depthMask(true, () => this.gl.depthMask(true));
         this.gl.clearDepth(1);
         this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+        if (this.activeRenderTarget?.sampleCount && this.activeRenderTarget.sampleCount > 1)
+            this.activeRenderTarget.needsResolve = true;
     }
     draw(command) {
         this.assertFrame();
@@ -707,6 +905,8 @@ export class WebGL2Device {
             }
         }
         this.drawCalls += 1;
+        if (this.activeRenderTarget?.sampleCount && this.activeRenderTarget.sampleCount > 1)
+            this.activeRenderTarget.needsResolve = true;
         if (this.errorCheckMode === "strict") {
             const drawError = this.readError();
             if (drawError) {
@@ -776,6 +976,7 @@ export class WebGL2Device {
             buffers: [...this.buffers].filter((buffer) => !buffer.disposed).length,
             shaders: [...this.shaders].filter((shader) => !shader.disposed).length,
             renderTargets: liveRenderTargets.length,
+            maxRenderTargetSampleCount: Math.max(1, ...liveRenderTargets.map((target) => target.sampleCount)),
             textures: liveTextures.size,
             bufferBytes,
             textureBytes,
@@ -786,6 +987,7 @@ export class WebGL2Device {
             textureFallbackBytes: fallbackTextures.reduce((total, texture) => total + texture.fallbackByteLength, 0),
             nativeEnvironmentBindings: this.nativeEnvironmentBindings,
             nativeShadowMapBindings: this.nativeShadowMapBindings,
+            shadowRenderTargetsAllocated: this.shadowRenderTargetsAllocated,
             nativeInstancedSubmissions: this.nativeInstancedSubmissions,
             samplerAnisotropyUploads: this.samplerAnisotropyUploadCount,
             maxTextureAnisotropy: this.maxTextureAnisotropy,
@@ -848,6 +1050,66 @@ export class WebGL2Device {
             this.gl.deleteProgram(this.ldrPostprocessProgram);
             this.ldrPostprocessProgram = null;
         }
+        if (this.bloomBrightExtractProgram) {
+            this.gl.deleteProgram(this.bloomBrightExtractProgram);
+            this.bloomBrightExtractProgram = null;
+        }
+        if (this.bloomBlurProgram) {
+            this.gl.deleteProgram(this.bloomBlurProgram);
+            this.bloomBlurProgram = null;
+        }
+        if (this.bloomCompositeProgram) {
+            this.gl.deleteProgram(this.bloomCompositeProgram);
+            this.bloomCompositeProgram = null;
+        }
+        if (this.outlineProgram) {
+            this.gl.deleteProgram(this.outlineProgram);
+            this.outlineProgram = null;
+        }
+        if (this.ssaoProgram) {
+            this.gl.deleteProgram(this.ssaoProgram);
+            this.ssaoProgram = null;
+        }
+        if (this.ssrProgram) {
+            this.gl.deleteProgram(this.ssrProgram);
+            this.ssrProgram = null;
+        }
+        if (this.depthOfFieldProgram) {
+            this.gl.deleteProgram(this.depthOfFieldProgram);
+            this.depthOfFieldProgram = null;
+        }
+        if (this.motionBlurProgram) {
+            this.gl.deleteProgram(this.motionBlurProgram);
+            this.motionBlurProgram = null;
+        }
+        if (this.motionBlurVelocityTexture) {
+            this.gl.deleteTexture(this.motionBlurVelocityTexture);
+            this.motionBlurVelocityTexture = null;
+        }
+        if (this.taaProgram) {
+            this.gl.deleteProgram(this.taaProgram);
+            this.taaProgram = null;
+        }
+        if (this.taaHistoryTexture) {
+            this.gl.deleteTexture(this.taaHistoryTexture);
+            this.taaHistoryTexture = null;
+        }
+        this.disposeBloomPingPongResources();
+        if (this.bloomBrightLutTexture) {
+            this.gl.deleteTexture(this.bloomBrightLutTexture);
+            this.bloomBrightLutTexture = null;
+            this.bloomBrightLutThreshold = null;
+        }
+        if (this.bloomCompositeLutTexture) {
+            this.gl.deleteTexture(this.bloomCompositeLutTexture);
+            this.bloomCompositeLutTexture = null;
+            this.bloomCompositeLutIntensity = null;
+        }
+        if (this.outlineBlendLutTexture) {
+            this.gl.deleteTexture(this.outlineBlendLutTexture);
+            this.outlineBlendLutTexture = null;
+            this.outlineBlendLutKey = null;
+        }
         if (this.presentationVertexArray) {
             this.gl.deleteVertexArray(this.presentationVertexArray);
             this.presentationVertexArray = null;
@@ -961,6 +1223,369 @@ export class WebGL2Device {
             this.restoreFullscreenPresentationState(previousState, outputWidth, outputHeight);
         }
     }
+    ensureBloomPingPongResources(width, height) {
+        const current = this.bloomPingPongResources;
+        if (current && current.width === width && current.height === height) {
+            return current;
+        }
+        this.disposeBloomPingPongResources();
+        const textureUnit0 = this.captureTextureUnit0();
+        const previousFramebuffer = this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING);
+        const textures = [];
+        const framebuffers = [];
+        try {
+            for (let index = 0; index < 2; index += 1) {
+                const texture = this.gl.createTexture();
+                const framebuffer = this.gl.createFramebuffer();
+                if (!texture || !framebuffer) {
+                    if (texture)
+                        this.gl.deleteTexture(texture);
+                    if (framebuffer)
+                        this.gl.deleteFramebuffer(framebuffer);
+                    throw new RenderDeviceError("Failed to allocate WebGL2 bloom ping-pong resources", "WEBGL_ALLOCATION_FAILED", {
+                        width,
+                        height,
+                        index
+                    });
+                }
+                textures.push(texture);
+                framebuffers.push(framebuffer);
+                this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+                this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA8, width, height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
+                this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
+                this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, texture, 0);
+                const status = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+                if (status !== this.gl.FRAMEBUFFER_COMPLETE) {
+                    throw new RenderDeviceError("WebGL2 bloom ping-pong framebuffer status is invalid", "FRAMEBUFFER_INVALID", {
+                        width,
+                        height,
+                        index,
+                        status
+                    });
+                }
+            }
+            const resources = {
+                width,
+                height,
+                textures: [textures[0], textures[1]],
+                framebuffers: [framebuffers[0], framebuffers[1]]
+            };
+            this.bloomPingPongResources = resources;
+            return resources;
+        }
+        catch (error) {
+            for (const texture of textures)
+                this.gl.deleteTexture(texture);
+            for (const framebuffer of framebuffers)
+                this.gl.deleteFramebuffer(framebuffer);
+            throw error;
+        }
+        finally {
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, previousFramebuffer);
+            this.restoreTextureUnit0(textureUnit0);
+            this.stateCache.invalidate();
+        }
+    }
+    ensureBloomLutTextures(options) {
+        const updateBright = this.bloomBrightLutThreshold !== options.threshold;
+        const updateComposite = this.bloomCompositeLutIntensity !== options.intensity;
+        if (this.bloomBrightLutTexture && this.bloomCompositeLutTexture && !updateBright && !updateComposite) {
+            return;
+        }
+        const textureUnit0 = this.captureTextureUnit0();
+        try {
+            if (!this.bloomBrightLutTexture) {
+                this.bloomBrightLutTexture = this.createNativeBloomDataTexture();
+            }
+            if (updateBright) {
+                const pixels = createBloomBrightThresholdLut(options.threshold);
+                this.gl.bindTexture(this.gl.TEXTURE_2D, this.bloomBrightLutTexture);
+                this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA8, BLOOM_BRIGHT_LUT_WIDTH, BLOOM_BRIGHT_LUT_HEIGHT, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+                this.bloomBrightLutThreshold = options.threshold;
+            }
+            if (!this.bloomCompositeLutTexture) {
+                this.bloomCompositeLutTexture = this.createNativeBloomDataTexture();
+            }
+            if (updateComposite) {
+                const pixels = createBloomCompositeLut(options.intensity);
+                this.gl.bindTexture(this.gl.TEXTURE_2D, this.bloomCompositeLutTexture);
+                this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA8, BLOOM_COMPOSITE_LUT_SIZE, BLOOM_COMPOSITE_LUT_SIZE, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, pixels);
+                this.bloomCompositeLutIntensity = options.intensity;
+            }
+        }
+        finally {
+            this.restoreTextureUnit0(textureUnit0);
+            this.stateCache.invalidate();
+        }
+    }
+    createNativeBloomDataTexture() {
+        const texture = this.gl.createTexture();
+        if (!texture) {
+            throw new RenderDeviceError("Failed to allocate WebGL2 bloom lookup texture", "WEBGL_ALLOCATION_FAILED");
+        }
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+        return texture;
+    }
+    ensureOutlineBlendLutTexture(options) {
+        const combinedAlpha = options.opacity * (options.color[3] / 255);
+        const key = `${options.color.join(",")}|${combinedAlpha}`;
+        if (this.outlineBlendLutTexture && this.outlineBlendLutKey === key)
+            return;
+        const textureUnit0 = this.captureTextureUnit0();
+        try {
+            if (!this.outlineBlendLutTexture) {
+                this.outlineBlendLutTexture = this.createNativeBloomDataTexture();
+            }
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.outlineBlendLutTexture);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA8, OUTLINE_BLEND_LUT_WIDTH, 1, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, createOutlineBlendLut(options.color, combinedAlpha));
+            this.outlineBlendLutKey = key;
+        }
+        finally {
+            this.restoreTextureUnit0(textureUnit0);
+            this.stateCache.invalidate();
+        }
+    }
+    ensureMotionBlurVelocityTexture(width, height, velocity) {
+        const textureUnit0 = this.captureTextureUnit0();
+        try {
+            if (!this.motionBlurVelocityTexture) {
+                this.motionBlurVelocityTexture = this.createNativeBloomDataTexture();
+            }
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.motionBlurVelocityTexture);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RG32F, width, height, 0, this.gl.RG, this.gl.FLOAT, velocity);
+        }
+        finally {
+            this.restoreTextureUnit0(textureUnit0);
+            this.stateCache.invalidate();
+        }
+    }
+    ensureTaaHistoryTexture(width, height, history) {
+        const textureUnit0 = this.captureTextureUnit0();
+        try {
+            if (!this.taaHistoryTexture) {
+                this.taaHistoryTexture = this.createNativeBloomDataTexture();
+            }
+            this.gl.bindTexture(this.gl.TEXTURE_2D, this.taaHistoryTexture);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA8, width, height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, history);
+        }
+        finally {
+            this.restoreTextureUnit0(textureUnit0);
+            this.stateCache.invalidate();
+        }
+    }
+    drawNativeLdrStage(sourceTexture, framebuffer, width, height, program, vertexArray, tonePass, colorPass, fxaaPass, toneMappingDefaults) {
+        const toneOptions = { ...(toneMappingDefaults ?? {}), ...(tonePass?.options ?? {}) };
+        const colorOptions = colorPass?.options ?? {};
+        const fxaaOptions = fxaaPass?.options ?? {};
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
+        this.gl.viewport(0, 0, width, height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform2f(this.gl.getUniformLocation(program, "u_texelSize"), 1 / width, 1 / height);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasToneMapping"), tonePass ? 1 : 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_toneOperator"), toneMappingOperatorId(stringOption(toneOptions, "operator", "reinhard")));
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_inputColorSpace"), colorSpaceId(stringOption(toneOptions, "inputColorSpace", "linear")));
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_outputColorSpace"), colorSpaceId(stringOption(toneOptions, "outputColorSpace", "linear")));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_exposure"), numberOption(toneOptions, "exposure", 1));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_whitePoint"), Math.max(0.0001, numberOption(toneOptions, "whitePoint", 1)));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_gamma"), Math.max(0.0001, numberOption(toneOptions, "gamma", 2.2)));
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasColorGrade"), colorPass ? 1 : 0);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_contrast"), numberOption(colorOptions, "contrast", 1));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_temperature"), numberOption(colorOptions, "temperature", 0));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_tint"), numberOption(colorOptions, "tint", 0));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_saturation"), numberOption(colorOptions, "saturation", 1));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_vibrance"), numberOption(colorOptions, "vibrance", 0));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_vignette"), numberOption(colorOptions, "vignette", 0));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_sharpening"), numberOption(colorOptions, "sharpening", 0));
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_hasFxaa"), fxaaPass ? 1 : 0);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_edgeThreshold"), numberOption(fxaaOptions, "edgeThreshold", 0.125));
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_subpixelBlend"), numberOption(fxaaOptions, "subpixelBlend", 0.75));
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+    }
+    executeNativeBloomPasses(sourceTexture, resources, options, vertexArray) {
+        const brightLut = this.bloomBrightLutTexture;
+        const compositeLut = this.bloomCompositeLutTexture;
+        if (!brightLut || !compositeLut) {
+            throw new RenderDeviceError("WebGL2 bloom lookup textures were not initialized", "WEBGL_ALLOCATION_FAILED");
+        }
+        const [textureA, textureB] = resources.textures;
+        const [framebufferA, framebufferB] = resources.framebuffers;
+        const brightProgram = this.ensureBloomBrightExtractProgram();
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebufferA);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(brightProgram);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, brightLut);
+        this.gl.uniform1i(this.gl.getUniformLocation(brightProgram, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(brightProgram, "u_brightLut"), 1);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        const blurProgram = this.ensureBloomBlurProgram();
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebufferB);
+        this.gl.useProgram(blurProgram);
+        this.bindFullscreenTexture(0, textureA);
+        this.gl.uniform1i(this.gl.getUniformLocation(blurProgram, "u_source"), 0);
+        this.gl.uniform2i(this.gl.getUniformLocation(blurProgram, "u_size"), resources.width, resources.height);
+        this.gl.uniform1i(this.gl.getUniformLocation(blurProgram, "u_radius"), options.radius);
+        this.gl.uniform1i(this.gl.getUniformLocation(blurProgram, "u_horizontal"), 1);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebufferA);
+        this.bindFullscreenTexture(0, textureB);
+        this.gl.uniform1i(this.gl.getUniformLocation(blurProgram, "u_horizontal"), 0);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        const compositeProgram = this.ensureBloomCompositeProgram();
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebufferB);
+        this.gl.useProgram(compositeProgram);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, textureA);
+        this.bindFullscreenTexture(2, compositeLut);
+        this.gl.uniform1i(this.gl.getUniformLocation(compositeProgram, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(compositeProgram, "u_blurred"), 1);
+        this.gl.uniform1i(this.gl.getUniformLocation(compositeProgram, "u_compositeLut"), 2);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return textureB;
+    }
+    executeNativeOutlinePasses(sourceTexture, resources, options, vertexArray, targetIndex) {
+        const blendLut = this.outlineBlendLutTexture;
+        if (!blendLut) {
+            throw new RenderDeviceError("WebGL2 outline lookup texture was not initialized", "WEBGL_ALLOCATION_FAILED");
+        }
+        const program = this.ensureOutlineProgram();
+        const targetTexture = resources.textures[targetIndex];
+        const targetFramebuffer = resources.framebuffers[targetIndex];
+        const bound = createOutlineGradientBound(options.threshold);
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, targetFramebuffer);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, blendLut);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_blendLut"), 1);
+        this.gl.uniform2i(this.gl.getUniformLocation(program, "u_size"), resources.width, resources.height);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_width"), options.width);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_boundHigh"), bound.highWord);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_boundLow"), bound.lowWord);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return targetTexture;
+    }
+    executeNativeSsaoPass(sourceTexture, depthTexture, resources, options, vertexArray, targetIndex) {
+        const program = this.ensureSsaoProgram();
+        const targetTexture = resources.textures[targetIndex];
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, resources.framebuffers[targetIndex]);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, depthTexture);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_depth"), 1);
+        this.gl.uniform2i(this.gl.getUniformLocation(program, "u_size"), resources.width, resources.height);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_radius"), options.radius);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_intensity"), options.intensity);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_bias"), options.bias);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return targetTexture;
+    }
+    executeNativeSsrPass(sourceTexture, depthTexture, resources, options, vertexArray, targetIndex) {
+        const program = this.ensureSsrProgram();
+        const targetTexture = resources.textures[targetIndex];
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, resources.framebuffers[targetIndex]);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, depthTexture);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_depth"), 1);
+        this.gl.uniform2i(this.gl.getUniformLocation(program, "u_size"), resources.width, resources.height);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_intensity"), options.intensity);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_maxDistance"), options.maxDistance);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return targetTexture;
+    }
+    executeNativeDepthOfFieldPass(sourceTexture, depthTexture, resources, options, vertexArray, targetIndex) {
+        const program = this.ensureDepthOfFieldProgram();
+        const targetTexture = resources.textures[targetIndex];
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, resources.framebuffers[targetIndex]);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, depthTexture);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_depth"), 1);
+        this.gl.uniform2i(this.gl.getUniformLocation(program, "u_size"), resources.width, resources.height);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_focusDepth"), options.focusDepth);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_focusRange"), options.focusRange);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_maxRadius"), options.maxRadius);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return targetTexture;
+    }
+    executeNativeMotionBlurPass(sourceTexture, resources, options, vertexArray, targetIndex) {
+        const velocityTexture = this.motionBlurVelocityTexture;
+        if (!velocityTexture) {
+            throw new RenderDeviceError("WebGL2 motion-blur velocity texture was not initialized", "WEBGL_ALLOCATION_FAILED");
+        }
+        const program = this.ensureMotionBlurProgram();
+        const targetTexture = resources.textures[targetIndex];
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, resources.framebuffers[targetIndex]);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, velocityTexture);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_velocity"), 1);
+        this.gl.uniform2i(this.gl.getUniformLocation(program, "u_size"), resources.width, resources.height);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_samples"), options.samples);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_scale"), options.scale);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return targetTexture;
+    }
+    executeNativeTaaPass(sourceTexture, resources, options, vertexArray, targetIndex) {
+        const historyTexture = this.taaHistoryTexture;
+        if (!historyTexture) {
+            throw new RenderDeviceError("WebGL2 TAA history texture was not initialized", "WEBGL_ALLOCATION_FAILED");
+        }
+        const program = this.ensureTaaProgram();
+        const targetTexture = resources.textures[targetIndex];
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, resources.framebuffers[targetIndex]);
+        this.gl.viewport(0, 0, resources.width, resources.height);
+        this.gl.useProgram(program);
+        this.gl.bindVertexArray(vertexArray);
+        this.bindFullscreenTexture(0, sourceTexture);
+        this.bindFullscreenTexture(1, historyTexture);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_source"), 0);
+        this.gl.uniform1i(this.gl.getUniformLocation(program, "u_history"), 1);
+        this.gl.uniform1f(this.gl.getUniformLocation(program, "u_blend"), options.blend);
+        this.gl.drawArrays(this.gl.TRIANGLES, 0, 3);
+        return targetTexture;
+    }
+    bindFullscreenTexture(unit, texture) {
+        this.gl.activeTexture(this.gl.TEXTURE0 + unit);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.gl.bindSampler(unit, null);
+    }
+    disposeBloomPingPongResources() {
+        if (!this.bloomPingPongResources)
+            return;
+        for (const texture of this.bloomPingPongResources.textures)
+            this.gl.deleteTexture(texture);
+        for (const framebuffer of this.bloomPingPongResources.framebuffers)
+            this.gl.deleteFramebuffer(framebuffer);
+        this.bloomPingPongResources = null;
+    }
     captureTextureUnit0() {
         const activeTexture = this.gl.getParameter(this.gl.ACTIVE_TEXTURE);
         this.gl.activeTexture(this.gl.TEXTURE0);
@@ -976,11 +1601,29 @@ export class WebGL2Device {
         this.gl.bindSampler(0, snapshot.sampler);
         this.gl.activeTexture(snapshot.activeTexture);
     }
+    captureTextureUnitBinding(unit) {
+        this.gl.activeTexture(this.gl.TEXTURE0 + unit);
+        return {
+            texture2d: this.gl.getParameter(this.gl.TEXTURE_BINDING_2D),
+            sampler: this.gl.getParameter(this.gl.SAMPLER_BINDING)
+        };
+    }
+    restoreTextureUnitBinding(unit, snapshot) {
+        this.gl.activeTexture(this.gl.TEXTURE0 + unit);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, snapshot.texture2d);
+        this.gl.bindSampler(unit, snapshot.sampler);
+    }
     prepareFullscreenPresentation(framebuffer, outputWidth, outputHeight) {
+        const textureUnit0 = this.captureTextureUnit0();
+        const textureUnit1 = this.captureTextureUnitBinding(1);
+        const textureUnit2 = this.captureTextureUnitBinding(2);
+        this.gl.activeTexture(textureUnit0.activeTexture);
         const snapshot = {
             framebuffer: this.gl.getParameter(this.gl.FRAMEBUFFER_BINDING),
             program: this.gl.getParameter(this.gl.CURRENT_PROGRAM),
-            textureUnit0: this.captureTextureUnit0(),
+            textureUnit0,
+            textureUnit1,
+            textureUnit2,
             vertexArray: this.gl.getParameter(this.gl.VERTEX_ARRAY_BINDING),
             viewport: this.gl.getParameter(this.gl.VIEWPORT),
             colorMask: this.gl.getParameter(this.gl.COLOR_WRITEMASK),
@@ -1006,6 +1649,8 @@ export class WebGL2Device {
     }
     restoreFullscreenPresentationState(snapshot, fallbackWidth, fallbackHeight) {
         this.gl.bindVertexArray(snapshot.vertexArray);
+        this.restoreTextureUnitBinding(2, snapshot.textureUnit2);
+        this.restoreTextureUnitBinding(1, snapshot.textureUnit1);
         this.restoreTextureUnit0(snapshot.textureUnit0);
         this.gl.useProgram(snapshot.program);
         if (snapshot.depthTestEnabled)
@@ -1138,6 +1783,406 @@ void main() {
         this.presentationProgram = program;
         return program;
     }
+    ensureBloomBrightExtractProgram() {
+        if (this.bloomBrightExtractProgram) {
+            return this.bloomBrightExtractProgram;
+        }
+        this.bloomBrightExtractProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_brightLut;
+out vec4 outColor;
+
+uvec4 byteTexel(sampler2D source, ivec2 coordinate) {
+  return uvec4(texelFetch(source, coordinate, 0) * 255.0 + 0.5);
+}
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  uvec4 source = byteTexel(u_source, pixel);
+  uint colorIndex = (source.r << 16u) | (source.g << 8u) | source.b;
+  uint byteIndex = colorIndex >> 3u;
+  uint texelIndex = byteIndex >> 2u;
+  ivec2 lutCoordinate = ivec2(
+    int(texelIndex % ${BLOOM_BRIGHT_LUT_WIDTH}u),
+    int(texelIndex / ${BLOOM_BRIGHT_LUT_WIDTH}u)
+  );
+  uvec4 packed = byteTexel(u_brightLut, lutCoordinate);
+  uint component = byteIndex & 3u;
+  uint packedByte = component == 0u
+    ? packed.r
+    : component == 1u
+      ? packed.g
+      : component == 2u
+        ? packed.b
+        : packed.a;
+  bool bright = ((packedByte >> (colorIndex & 7u)) & 1u) == 1u;
+  outColor = bright ? vec4(source) / 255.0 : vec4(0.0);
+}
+`, "webgl2-bloom-bright-extract");
+        return this.bloomBrightExtractProgram;
+    }
+    ensureBloomBlurProgram() {
+        if (this.bloomBlurProgram) {
+            return this.bloomBlurProgram;
+        }
+        this.bloomBlurProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform ivec2 u_size;
+uniform int u_radius;
+uniform int u_horizontal;
+out vec4 outColor;
+
+uvec4 sourceByte(ivec2 coordinate) {
+  ivec2 bounded = clamp(coordinate, ivec2(0), u_size - ivec2(1));
+  return uvec4(texelFetch(u_source, bounded, 0) * 255.0 + 0.5);
+}
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  uvec4 sum = uvec4(0u);
+  for (int offset = -16; offset <= 16; offset += 1) {
+    if (abs(offset) > u_radius) {
+      continue;
+    }
+    ivec2 sampleCoordinate = pixel + (
+      u_horizontal == 1
+        ? ivec2(offset, 0)
+        : ivec2(0, offset)
+    );
+    sum += sourceByte(sampleCoordinate);
+  }
+  uint kernelSize = uint(u_radius * 2 + 1);
+  uvec4 rounded = (sum * 2u + uvec4(kernelSize)) / uvec4(kernelSize * 2u);
+  outColor = vec4(rounded) / 255.0;
+}
+`, "webgl2-bloom-blur");
+        return this.bloomBlurProgram;
+    }
+    ensureBloomCompositeProgram() {
+        if (this.bloomCompositeProgram) {
+            return this.bloomCompositeProgram;
+        }
+        this.bloomCompositeProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_blurred;
+uniform sampler2D u_compositeLut;
+out vec4 outColor;
+
+uvec4 byteTexel(sampler2D source, ivec2 coordinate) {
+  return uvec4(texelFetch(source, coordinate, 0) * 255.0 + 0.5);
+}
+
+float compositeChannel(uint source, uint blurred) {
+  return texelFetch(u_compositeLut, ivec2(int(source), int(blurred)), 0).r;
+}
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  uvec4 source = byteTexel(u_source, pixel);
+  uvec4 blurred = byteTexel(u_blurred, pixel);
+  outColor = vec4(
+    compositeChannel(source.r, blurred.r),
+    compositeChannel(source.g, blurred.g),
+    compositeChannel(source.b, blurred.b),
+    float(source.a) / 255.0
+  );
+}
+`, "webgl2-bloom-composite");
+        return this.bloomCompositeProgram;
+    }
+    ensureOutlineProgram() {
+        if (this.outlineProgram)
+            return this.outlineProgram;
+        this.outlineProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_blendLut;
+uniform ivec2 u_size;
+uniform int u_width;
+uniform float u_boundHigh;
+uniform float u_boundLow;
+out vec4 outColor;
+
+uvec4 sourceByte(ivec2 coordinate) {
+  ivec2 bounded = clamp(coordinate, ivec2(0), u_size - ivec2(1));
+  return uvec4(texelFetch(u_source, bounded, 0) * 255.0 + 0.5);
+}
+
+uint lumaNumerator(ivec2 coordinate) {
+  uvec3 source = sourceByte(coordinate).rgb;
+  return 2126u * source.r + 7152u * source.g + 722u * source.b;
+}
+
+uvec2 squareWords(int signedValue) {
+  uint value = uint(abs(signedValue));
+  uint high = value >> 12u;
+  uint low = value & 4095u;
+  uint middle = 2u * high * low;
+  uint lowWord = low * low + (middle & 4095u) * 4096u;
+  uint highWord = high * high + (middle >> 12u);
+  highWord += lowWord / ${OUTLINE_LIMB_RADIX}u;
+  lowWord %= ${OUTLINE_LIMB_RADIX}u;
+  return uvec2(highWord, lowWord);
+}
+
+bool edgeAt(ivec2 pixel) {
+  int nw = int(lumaNumerator(pixel + ivec2(-1, -1)));
+  int n = int(lumaNumerator(pixel + ivec2(0, -1)));
+  int ne = int(lumaNumerator(pixel + ivec2(1, -1)));
+  int w = int(lumaNumerator(pixel + ivec2(-1, 0)));
+  int e = int(lumaNumerator(pixel + ivec2(1, 0)));
+  int sw = int(lumaNumerator(pixel + ivec2(-1, 1)));
+  int s = int(lumaNumerator(pixel + ivec2(0, 1)));
+  int se = int(lumaNumerator(pixel + ivec2(1, 1)));
+  int gx = -nw - 2 * w - sw + ne + 2 * e + se;
+  int gy = -nw - 2 * n - ne + sw + 2 * s + se;
+  uvec2 x = squareWords(gx);
+  uvec2 y = squareWords(gy);
+  uint low = x.y + y.y;
+  uint high = x.x + y.x;
+  if (low >= ${OUTLINE_LIMB_RADIX}u) {
+    low -= ${OUTLINE_LIMB_RADIX}u;
+    high += 1u;
+  }
+  uint boundHigh = uint(u_boundHigh);
+  uint boundLow = uint(u_boundLow);
+  return high != boundHigh ? high > boundHigh : low >= boundLow;
+}
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  bool outlined = false;
+  for (int offsetY = -6; offsetY <= 6 && !outlined; offsetY += 1) {
+    for (int offsetX = -6; offsetX <= 6; offsetX += 1) {
+      if (abs(offsetX) > u_width || abs(offsetY) > u_width) continue;
+      if (offsetX * offsetX + offsetY * offsetY > u_width * u_width) continue;
+      ivec2 candidate = clamp(pixel + ivec2(offsetX, offsetY), ivec2(0), u_size - ivec2(1));
+      if (edgeAt(candidate)) {
+        outlined = true;
+        break;
+      }
+    }
+  }
+  uvec4 source = sourceByte(pixel);
+  if (!outlined) {
+    outColor = vec4(source) / 255.0;
+    return;
+  }
+  outColor = vec4(
+    texelFetch(u_blendLut, ivec2(int(source.r), 0), 0).r,
+    texelFetch(u_blendLut, ivec2(int(source.g), 0), 0).g,
+    texelFetch(u_blendLut, ivec2(int(source.b), 0), 0).b,
+    float(source.a) / 255.0
+  );
+}
+`, "webgl2-outline");
+        return this.outlineProgram;
+    }
+    ensureSsaoProgram() {
+        if (this.ssaoProgram)
+            return this.ssaoProgram;
+        this.ssaoProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_depth;
+uniform ivec2 u_size;
+uniform int u_radius;
+uniform float u_intensity;
+uniform float u_bias;
+out vec4 outColor;
+
+float depthAt(ivec2 coordinate) {
+  return texelFetch(u_depth, clamp(coordinate, ivec2(0), u_size - ivec2(1)), 0).r;
+}
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  float centerDepth = depthAt(pixel);
+  float occlusion = 0.0;
+  float samples = 0.0;
+  for (int stepY = -1; stepY <= 1; stepY += 1) {
+    for (int stepX = -1; stepX <= 1; stepX += 1) {
+      if (stepX == 0 && stepY == 0) continue;
+      float sampleDepth = depthAt(pixel + ivec2(stepX * u_radius, stepY * u_radius));
+      occlusion += clamp(
+        (centerDepth - sampleDepth - u_bias) / (0.14 + float(u_radius) * 0.04),
+        0.0,
+        1.0
+      );
+      samples += 1.0;
+    }
+  }
+  float factor = max(0.18, 1.0 - (occlusion / max(1.0, samples)) * u_intensity * 0.72);
+  vec4 source = texelFetch(u_source, pixel, 0);
+  outColor = vec4(source.rgb * factor, source.a);
+}
+`, "webgl2-ssao");
+        return this.ssaoProgram;
+    }
+    ensureSsrProgram() {
+        if (this.ssrProgram)
+            return this.ssrProgram;
+        this.ssrProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_depth;
+uniform ivec2 u_size;
+uniform float u_intensity;
+uniform int u_maxDistance;
+out vec4 outColor;
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  vec4 target = texelFetch(u_source, pixel, 0);
+  float depth = texelFetch(u_depth, pixel, 0).r;
+  int rayDistance = max(1, int(round((1.0 - depth) * float(u_maxDistance))));
+  int direction = pixel.x < u_size.x / 2 ? 1 : -1;
+  ivec2 samplePixel = ivec2(
+    clamp(pixel.x + direction * rayDistance, 0, u_size.x - 1),
+    clamp(u_size.y - 1 - pixel.y, 0, u_size.y - 1)
+  );
+  vec3 reflected = texelFetch(u_source, samplePixel, 0).rgb;
+  float sourceLuma = (reflected.r + reflected.g + reflected.b) / 3.0;
+  if (sourceLuma < 0.18 || depth > 0.92) {
+    outColor = target;
+    return;
+  }
+  float boost = sourceLuma * u_intensity * (1.0 - depth);
+  outColor = vec4(clamp(target.rgb + reflected * boost, 0.0, 1.0), target.a);
+}
+`, "webgl2-ssr");
+        return this.ssrProgram;
+    }
+    ensureDepthOfFieldProgram() {
+        if (this.depthOfFieldProgram)
+            return this.depthOfFieldProgram;
+        this.depthOfFieldProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_depth;
+uniform ivec2 u_size;
+uniform float u_focusDepth;
+uniform float u_focusRange;
+uniform int u_maxRadius;
+out vec4 outColor;
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  vec4 source = texelFetch(u_source, pixel, 0);
+  float depth = texelFetch(u_depth, pixel, 0).r;
+  float normalizedBlur = max(0.0, abs(depth - u_focusDepth) - u_focusRange)
+    / max(u_focusRange, 0.001) * float(u_maxRadius);
+  int radius = min(u_maxRadius, int(round(normalizedBlur)));
+  if (radius == 0) {
+    outColor = source;
+    return;
+  }
+  vec3 sum = vec3(0.0);
+  float samples = 0.0;
+  for (int offsetY = -8; offsetY <= 8; offsetY += 1) {
+    for (int offsetX = -8; offsetX <= 8; offsetX += 1) {
+      if (abs(offsetX) > radius || abs(offsetY) > radius) continue;
+      if (offsetX * offsetX + offsetY * offsetY > radius * radius) continue;
+      ivec2 samplePixel = clamp(pixel + ivec2(offsetX, offsetY), ivec2(0), u_size - ivec2(1));
+      sum += texelFetch(u_source, samplePixel, 0).rgb;
+      samples += 1.0;
+    }
+  }
+  outColor = vec4(sum / max(1.0, samples), source.a);
+}
+`, "webgl2-depth-of-field");
+        return this.depthOfFieldProgram;
+    }
+    ensureMotionBlurProgram() {
+        if (this.motionBlurProgram)
+            return this.motionBlurProgram;
+        this.motionBlurProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+precision highp int;
+uniform sampler2D u_source;
+uniform sampler2D u_velocity;
+uniform ivec2 u_size;
+uniform int u_samples;
+uniform float u_scale;
+out vec4 outColor;
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  vec4 source = texelFetch(u_source, pixel, 0);
+  vec2 velocity = texelFetch(u_velocity, pixel, 0).rg * u_scale;
+  if (length(velocity) < 0.01) {
+    outColor = source;
+    return;
+  }
+  vec3 sum = vec3(0.0);
+  for (int sampleIndex = 0; sampleIndex < 16; sampleIndex += 1) {
+    if (sampleIndex >= u_samples) continue;
+    float t = float(sampleIndex) / float(u_samples - 1) - 0.5;
+    ivec2 samplePixel = ivec2(floor(vec2(pixel) - velocity * t + vec2(0.5)));
+    samplePixel = clamp(samplePixel, ivec2(0), u_size - ivec2(1));
+    sum += texelFetch(u_source, samplePixel, 0).rgb;
+  }
+  outColor = vec4(sum / float(u_samples), source.a);
+}
+`, "webgl2-motion-blur");
+        return this.motionBlurProgram;
+    }
+    ensureTaaProgram() {
+        if (this.taaProgram)
+            return this.taaProgram;
+        this.taaProgram = this.createFullscreenProgram(`#version 300 es
+precision highp float;
+uniform sampler2D u_source;
+uniform sampler2D u_history;
+uniform float u_blend;
+out vec4 outColor;
+
+void main() {
+  ivec2 pixel = ivec2(gl_FragCoord.xy);
+  vec4 source = texelFetch(u_source, pixel, 0);
+  vec3 history = texelFetch(u_history, pixel, 0).rgb;
+  outColor = vec4(mix(source.rgb, history, u_blend), source.a);
+}
+`, "webgl2-taa");
+        return this.taaProgram;
+    }
+    createFullscreenProgram(fragmentSource, label) {
+        const vertex = this.compileShader(this.gl.VERTEX_SHADER, `#version 300 es
+precision highp float;
+void main() {
+  vec2 position = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(position * 2.0 - 1.0, 0.0, 1.0);
+}
+`, label);
+        const fragment = this.compileShader(this.gl.FRAGMENT_SHADER, fragmentSource, label);
+        const program = this.gl.createProgram();
+        if (!program) {
+            this.gl.deleteShader(vertex);
+            this.gl.deleteShader(fragment);
+            throw new RenderDeviceError("Failed to allocate WebGL2 fullscreen shader program", "WEBGL_ALLOCATION_FAILED", { label });
+        }
+        this.gl.attachShader(program, vertex);
+        this.gl.attachShader(program, fragment);
+        this.gl.linkProgram(program);
+        this.gl.deleteShader(vertex);
+        this.gl.deleteShader(fragment);
+        if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
+            const log = this.gl.getProgramInfoLog(program) ?? "Unknown fullscreen shader link error";
+            this.gl.deleteProgram(program);
+            throw new RenderDeviceError("WebGL2 fullscreen shader link failed", "SHADER_LINK_FAILED", { label, log });
+        }
+        return program;
+    }
     ensureLdrPostprocessProgram() {
         if (this.ldrPostprocessProgram) {
             return this.ldrPostprocessProgram;
@@ -1409,6 +2454,16 @@ void main() {
             else {
                 throw new RenderDeviceError("Unsupported uniform value", "UNSUPPORTED_UNIFORM", { name, valueType: typeof value });
             }
+            if (this.errorCheckMode === "strict") {
+                const uniformError = this.readError();
+                if (uniformError) {
+                    throw new RenderDeviceError(`WebGL2 uniform upload failed for ${name}: ${uniformError}`, "WEBGL_DRAW_FAILED", {
+                        name,
+                        stage: "uniform",
+                        error: uniformError
+                    });
+                }
+            }
         }
     }
     getUniformLocation(shader, name) {
@@ -1631,7 +2686,20 @@ void main() {
         else {
             const uploadFormat = this.textureUploadFormat(texture);
             this.gl.texImage2D(this.gl.TEXTURE_2D, 0, uploadFormat.internalFormat, texture.width, texture.height, 0, uploadFormat.format, uploadFormat.type, texture.data ? texturePixelUploadData(texture.data, texture.format) : null);
-            this.gl.generateMipmap(this.gl.TEXTURE_2D);
+            // Float colour formats are not guaranteed mipmap-filterable in WebGL2:
+            // RGBA32F/RGBA16F are only linear-filterable with OES_texture_float_linear, and
+            // generateMipmap on a non-filterable format raises INVALID_OPERATION. Data
+            // textures such as joint palettes are point-sampled with texelFetch and never
+            // need mips, so skip generation and pin the level range instead.
+            if (isFloatColorTextureFormat(texture.format)) {
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_BASE_LEVEL, 0);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAX_LEVEL, 0);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+                this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+            }
+            else {
+                this.gl.generateMipmap(this.gl.TEXTURE_2D);
+            }
         }
         this.textureUploadModes.set(texture, texture.format);
         this.textures.set(texture, handle);
@@ -2056,6 +3124,192 @@ function numberOption(options, key, fallback) {
     const value = options[key];
     return typeof value === "number" && Number.isFinite(value) ? value : fallback;
 }
+function normalizeNativeBloomOptions(options) {
+    const threshold = bloomNumberOption(options, "threshold", 0.75);
+    const intensity = bloomNumberOption(options, "intensity", 0.35);
+    const radius = bloomNumberOption(options, "radius", 1);
+    if (threshold < 0 || threshold > 1) {
+        throw new RenderDeviceError("Bloom threshold must be finite and in [0, 1].", "INVALID_POSTPROCESS_OPTIONS", { threshold });
+    }
+    if (intensity < 0) {
+        throw new RenderDeviceError("Bloom intensity must be finite and non-negative.", "INVALID_POSTPROCESS_OPTIONS", { intensity });
+    }
+    if (!Number.isInteger(radius) || radius < 0 || radius > 16) {
+        throw new RenderDeviceError("Bloom radius must be an integer in [0, 16].", "INVALID_POSTPROCESS_OPTIONS", { radius });
+    }
+    return { threshold, intensity, radius };
+}
+function normalizeNativeOutlineOptions(options) {
+    const width = outlineNumberOption(options, "width", 1);
+    const threshold = outlineNumberOption(options, "threshold", 0.22);
+    const opacity = outlineNumberOption(options, "opacity", 0.85);
+    const value = options.color;
+    const sourceColor = value === undefined ? [255, 188, 64, 255] : value;
+    if (!Array.isArray(sourceColor)
+        || (sourceColor.length !== 3 && sourceColor.length !== 4)
+        || sourceColor.some((channel) => typeof channel !== "number" || !Number.isFinite(channel) || channel < 0 || channel > 255)) {
+        throw new RenderDeviceError("Outline color must contain three or four finite channels in [0, 255].", "INVALID_POSTPROCESS_OPTIONS", { color: value });
+    }
+    if (!Number.isInteger(width) || width < 1 || width > 6) {
+        throw new RenderDeviceError("Outline width must be an integer in [1, 6].", "INVALID_POSTPROCESS_OPTIONS", { width });
+    }
+    if (threshold < 0 || threshold > 4) {
+        throw new RenderDeviceError("Outline threshold must be finite and in [0, 4].", "INVALID_POSTPROCESS_OPTIONS", { threshold });
+    }
+    if (opacity < 0 || opacity > 1) {
+        throw new RenderDeviceError("Outline opacity must be finite and in [0, 1].", "INVALID_POSTPROCESS_OPTIONS", { opacity });
+    }
+    const color = [
+        sourceColor[0],
+        sourceColor[1],
+        sourceColor[2],
+        (sourceColor[3] ?? 255)
+    ];
+    return { width, threshold, opacity, color };
+}
+function normalizeNativeSsaoOptions(options) {
+    const radius = ssaoNumberOption(options, "radius", 2);
+    const intensity = ssaoNumberOption(options, "intensity", 0.38);
+    const bias = ssaoNumberOption(options, "bias", 0.015);
+    if (!Number.isInteger(radius) || radius < 1 || radius > 8) {
+        throw new RenderDeviceError("SSAO radius must be an integer in [1, 8].", "INVALID_POSTPROCESS_OPTIONS", { radius });
+    }
+    if (intensity < 0 || intensity > 2) {
+        throw new RenderDeviceError("SSAO intensity must be finite and in [0, 2].", "INVALID_POSTPROCESS_OPTIONS", { intensity });
+    }
+    if (bias < 0 || bias > 0.25) {
+        throw new RenderDeviceError("SSAO bias must be finite and in [0, 0.25].", "INVALID_POSTPROCESS_OPTIONS", { bias });
+    }
+    return { radius, intensity, bias };
+}
+function normalizeNativeSsrOptions(options) {
+    const intensity = ssrNumberOption(options, "intensity", 0.32);
+    const maxDistance = ssrNumberOption(options, "maxDistance", 16);
+    if (intensity < 0 || intensity > 2) {
+        throw new RenderDeviceError("SSR intensity must be finite and in [0, 2].", "INVALID_POSTPROCESS_OPTIONS", { intensity });
+    }
+    if (!Number.isInteger(maxDistance) || maxDistance < 1 || maxDistance > 64) {
+        throw new RenderDeviceError("SSR maxDistance must be an integer in [1, 64].", "INVALID_POSTPROCESS_OPTIONS", { maxDistance });
+    }
+    return { intensity, maxDistance };
+}
+function normalizeNativeDepthOfFieldOptions(options) {
+    const focusDepth = depthOfFieldNumberOption(options, "focusDepth", 0.5);
+    const focusRange = depthOfFieldNumberOption(options, "focusRange", 0.12);
+    const maxRadius = depthOfFieldNumberOption(options, "maxRadius", 2);
+    if (focusDepth < 0 || focusDepth > 1) {
+        throw new RenderDeviceError("Depth-of-field focusDepth must be finite and in [0, 1].", "INVALID_POSTPROCESS_OPTIONS", { focusDepth });
+    }
+    if (focusRange < 0.001 || focusRange > 1) {
+        throw new RenderDeviceError("Depth-of-field focusRange must be finite and in [0.001, 1].", "INVALID_POSTPROCESS_OPTIONS", { focusRange });
+    }
+    if (!Number.isInteger(maxRadius) || maxRadius < 0 || maxRadius > 8) {
+        throw new RenderDeviceError("Depth-of-field maxRadius must be an integer in [0, 8].", "INVALID_POSTPROCESS_OPTIONS", { maxRadius });
+    }
+    return { focusDepth, focusRange, maxRadius };
+}
+function normalizeNativeMotionBlurOptions(options, width, height) {
+    const samples = motionBlurNumberOption(options, "samples", 5);
+    const scale = motionBlurNumberOption(options, "scale", 1);
+    const value = options.velocity;
+    if (!(value instanceof Float32Array) && !Array.isArray(value)) {
+        throw new RenderDeviceError("Motion blur requires a velocity Float32Array or number array.", "WEBGL_LDR_POSTPROCESS_VELOCITY_REQUIRED");
+    }
+    const velocity = value instanceof Float32Array ? value : new Float32Array(value);
+    if (velocity.length !== width * height * 2) {
+        throw new RenderDeviceError("Motion blur velocity must contain width * height * 2 float samples.", "INVALID_POSTPROCESS_OPTIONS", {
+            expectedLength: width * height * 2,
+            actualLength: velocity.length
+        });
+    }
+    if (!Number.isInteger(samples) || samples < 2 || samples > 16) {
+        throw new RenderDeviceError("Motion blur samples must be an integer in [2, 16].", "INVALID_POSTPROCESS_OPTIONS", { samples });
+    }
+    if (scale < 0 || scale > 8) {
+        throw new RenderDeviceError("Motion blur scale must be finite and in [0, 8].", "INVALID_POSTPROCESS_OPTIONS", { scale });
+    }
+    return { samples, scale, velocity };
+}
+function normalizeNativeTaaOptions(options, width, height) {
+    const blend = taaNumberOption(options, "blend", 0.18);
+    const history = options.history;
+    if (!(history instanceof Uint8Array)) {
+        throw new RenderDeviceError("TAA requires a Uint8Array history buffer.", "WEBGL_LDR_POSTPROCESS_HISTORY_REQUIRED");
+    }
+    if (history.byteLength !== width * height * 4) {
+        throw new RenderDeviceError("TAA history must contain width * height * 4 RGBA bytes.", "INVALID_POSTPROCESS_OPTIONS", {
+            expectedLength: width * height * 4,
+            actualLength: history.byteLength
+        });
+    }
+    if (blend < 0 || blend > 0.95) {
+        throw new RenderDeviceError("TAA blend must be finite and in [0, 0.95].", "INVALID_POSTPROCESS_OPTIONS", { blend });
+    }
+    return { blend, history };
+}
+function bloomNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`Bloom ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
+function outlineNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`Outline ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
+function ssaoNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`SSAO ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
+function ssrNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`SSR ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
+function depthOfFieldNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`Depth-of-field ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
+function motionBlurNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`Motion blur ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
+function taaNumberOption(options, key, fallback) {
+    const value = options[key];
+    if (value === undefined)
+        return fallback;
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        throw new RenderDeviceError(`TAA ${key} must be a finite number.`, "INVALID_POSTPROCESS_OPTIONS", { key, value });
+    }
+    return value;
+}
 function stringOption(options, key, fallback) {
     const value = options[key];
     return typeof value === "string" ? value : fallback;