@zephyr3d/scene 0.1.0

package/dist/posteffect/compositor.js

@@ -0,0 +1,264 @@
+import { Application } from '../app.js';
+import { linearToGamma } from '../shaders/misc.js';
+import '@zephyr3d/base';
+import '../scene/octree.js';
+import '../material/material.js';
+import '@zephyr3d/device';
+import '../shaders/framework.js';
+import '../render/scatteringlut.js';
+import '../material/lambert.js';
+import '../material/blinn.js';
+import '../material/unlit.js';
+import '../material/lightmodel.js';
+import '../render/forward.js';
+import '../render/sky.js';
+import '../render/clipmap.js';
+import { TemporalCache } from '../render/temporalcache.js';
+import '../render/watermesh.js';
+
+/**
+ * Post processing compositor
+ * @public
+ */ class Compositor {
+    /** @internal */ _postEffectsOpaque;
+    /** @internal */ _postEffectsTransparency;
+    /** @internal */ static _blitSampler = null;
+    /** @internal */ static _blitProgram = null;
+    /** @internal */ static _blitBindgroup = null;
+    /** @internal */ static _blitRenderStates = null;
+    /** @internal */ static _blitVertexLayout = null;
+    /**
+   * Creates an instance of Compositor
+   */ constructor(){
+        this._postEffectsOpaque = [];
+        this._postEffectsTransparency = [];
+    }
+    /** @internal */ requireLinearDepth() {
+        for (const postEffect of this._postEffectsOpaque){
+            if (postEffect.requireLinearDepthTexture()) {
+                return true;
+            }
+        }
+        for (const postEffect of this._postEffectsTransparency){
+            if (postEffect.requireLinearDepthTexture()) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+   * Adds a posteffect
+   *
+   * @param postEffect - The post effect to add
+   * @param opaque - true if the post effect should be applied after the opaque pass and before the transparent pass, otherwise the post effect should be applied after the transparent pass
+   */ appendPostEffect(postEffect) {
+        if (postEffect) {
+            if (this._postEffectsOpaque.indexOf(postEffect) >= 0 || this._postEffectsTransparency.indexOf(postEffect) >= 0) {
+                console.error(`Posteffect cannot be added to same compositor multiple times`);
+                return;
+            }
+            const postEffects = postEffect.opaque ? this._postEffectsOpaque : this._postEffectsTransparency;
+            postEffects.push(postEffect);
+        }
+    }
+    /**
+   * Removes a posteffect that was previously added
+   *
+   * @param postEffect - The posteffect to be remove.
+   */ removePostEffect(postEffect) {
+        for (const list of [
+            this._postEffectsOpaque,
+            this._postEffectsTransparency
+        ]){
+            const index = list.indexOf(postEffect);
+            if (index >= 0) {
+                list.splice(index, 1);
+                return;
+            }
+        }
+    }
+    /**
+   * Gets all post effects
+   */ getPostEffects() {
+        return [
+            ...this._postEffectsOpaque,
+            ...this._postEffectsTransparency
+        ];
+    }
+    /** @internal */ begin(ctx) {
+        const device = Application.instance.device;
+        const format = device.getDeviceCaps().textureCaps.supportHalfFloatColorBuffer ? 'rgba16f' : 'rgba8unorm';
+        const finalFramebuffer = device.getFramebuffer();
+        const depth = finalFramebuffer?.getDepthAttachment();
+        let pingpongFramebuffers;
+        let msFramebuffer = null;
+        if (ctx.primaryCamera.sampleCount > 1) {
+            msFramebuffer = depth ? TemporalCache.getFramebufferVariantSizeWithDepth(depth, 1, format, '2d', false, ctx.primaryCamera.sampleCount) : TemporalCache.getFramebufferVariantSize(ctx.viewportWidth, ctx.viewportHeight, 1, format, ctx.depthFormat, '2d', '2d', false, ctx.primaryCamera.sampleCount);
+        }
+        if (ctx.defaultViewport) {
+            pingpongFramebuffers = [
+                depth ? TemporalCache.getFramebufferVariantSizeWithDepth(depth, 1, format, '2d', false, 1) : TemporalCache.getFramebufferVariantSize(ctx.viewportWidth, ctx.viewportHeight, 1, format, ctx.depthFormat, '2d', '2d', false, 1),
+                depth ? TemporalCache.getFramebufferVariantSizeWithDepth(depth, 1, format, '2d', false, 1) : TemporalCache.getFramebufferVariantSize(ctx.viewportWidth, ctx.viewportHeight, 1, format, ctx.depthFormat, '2d', '2d', false, 1)
+            ];
+        } else {
+            pingpongFramebuffers = [
+                depth ? TemporalCache.getFramebufferFixedSizeWithDepth(depth, 1, format, '2d', false, 4) : TemporalCache.getFramebufferFixedSize(ctx.viewportWidth, ctx.viewportHeight, 1, format, ctx.depthFormat, '2d', '2d', false, 4),
+                depth ? TemporalCache.getFramebufferFixedSizeWithDepth(depth, 1, format, '2d', false, 4) : TemporalCache.getFramebufferFixedSize(ctx.viewportWidth, ctx.viewportHeight, 1, format, ctx.depthFormat, '2d', '2d', false, 4)
+            ];
+        }
+        let writeIndex;
+        if (msFramebuffer) {
+            writeIndex = 3;
+            device.setFramebuffer(msFramebuffer);
+        } else {
+            writeIndex = 0;
+            device.setFramebuffer(pingpongFramebuffers[writeIndex]);
+        }
+        device.setViewport(null);
+        device.setScissor(null);
+        ctx.compositorContex = {
+            finalFramebuffer,
+            pingpongFramebuffers,
+            msFramebuffer,
+            writeIndex
+        };
+    }
+    /** @internal */ drawPostEffects(ctx, opaque, sceneDepthTexture) {
+        const postEffects = opaque ? this._postEffectsOpaque : this._postEffectsTransparency;
+        if (postEffects.length > 0) {
+            const device = Application.instance.device;
+            for(let i = 0; i < postEffects.length; i++){
+                const postEffect = postEffects[i];
+                if (!postEffect.enabled) {
+                    continue;
+                }
+                const inputTexture = device.getFramebuffer().getColorAttachments()[0];
+                const isLast = this.isLastPostEffect(opaque, i);
+                const finalEffect = isLast && (!postEffect.requireDepthAttachment() || !!ctx.compositorContex.finalFramebuffer);
+                if (finalEffect) {
+                    device.setFramebuffer(ctx.compositorContex.finalFramebuffer);
+                    device.setViewport(null);
+                    device.setScissor(null);
+                } else {
+                    ctx.compositorContex.writeIndex = (1 + ctx.compositorContex.writeIndex) % 2;
+                    device.setFramebuffer(ctx.compositorContex.pingpongFramebuffers[ctx.compositorContex.writeIndex]);
+                    device.setViewport(null);
+                    device.setScissor(null);
+                }
+                postEffect.apply(ctx, inputTexture, sceneDepthTexture, !device.getFramebuffer());
+            }
+        }
+    }
+    /** @internal */ end(ctx) {
+        const device = Application.instance.device;
+        if (device.getFramebuffer() !== ctx.compositorContex.finalFramebuffer) {
+            const srcTex = device.getFramebuffer().getColorAttachments()[0];
+            device.setFramebuffer(ctx.compositorContex.finalFramebuffer);
+            device.setViewport(null);
+            device.setScissor(null);
+            Compositor._blit(device, srcTex, !ctx.compositorContex.finalFramebuffer);
+        }
+        TemporalCache.releaseFramebuffer(ctx.compositorContex.pingpongFramebuffers[0]);
+        TemporalCache.releaseFramebuffer(ctx.compositorContex.pingpongFramebuffers[1]);
+        if (ctx.compositorContex.msFramebuffer) {
+            TemporalCache.releaseFramebuffer(ctx.compositorContex.msFramebuffer);
+        }
+        ctx.compositorContex = null;
+    }
+    /** @internal */ isLastPostEffect(opaque, index) {
+        const list = opaque ? this._postEffectsOpaque : this._postEffectsTransparency;
+        for(let i = index; i < list.length; i++){
+            if (list[i].enabled) {
+                return false;
+            }
+        }
+        if (opaque) {
+            for(let i = 0; i < this._postEffectsTransparency.length; i++){
+                if (this._postEffectsTransparency[i].enabled) {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    /** @internal */ needDrawPostEffects() {
+        for(let i = 0; i < this._postEffectsOpaque.length; i++){
+            if (this._postEffectsOpaque[i].enabled) {
+                return true;
+            }
+        }
+        for(let i = 0; i < this._postEffectsTransparency.length; i++){
+            if (this._postEffectsTransparency[i].enabled) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** @internal */ static _blit(device, srcTex, srgbOutput) {
+        if (!this._blitProgram) {
+            this._blitProgram = device.buildRenderProgram({
+                vertex (pb) {
+                    this.$inputs.pos = pb.vec2().attrib('position');
+                    this.$outputs.uv = pb.vec2();
+                    this.flip = pb.int().uniform(0);
+                    pb.main(function() {
+                        this.$builtins.position = pb.vec4(this.$inputs.pos, 0, 1);
+                        this.$outputs.uv = pb.add(pb.mul(this.$inputs.pos.xy, 0.5), pb.vec2(0.5));
+                        this.$if(pb.notEqual(this.flip, 0), function() {
+                            this.$builtins.position.y = pb.neg(this.$builtins.position.y);
+                        });
+                    });
+                },
+                fragment (pb) {
+                    this.srcTex = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.srgbOutput = pb.int().uniform(0);
+                    this.$outputs.outColor = pb.vec4();
+                    pb.main(function() {
+                        this.$outputs.outColor = pb.textureSample(this.srcTex, this.$inputs.uv);
+                        this.$if(pb.notEqual(this.srgbOutput, 0), function() {
+                            this.$outputs.outColor = pb.vec4(linearToGamma(this, this.$outputs.outColor.rgb), 1);
+                        });
+                    });
+                }
+            });
+            this._blitBindgroup = device.createBindGroup(this._blitProgram.bindGroupLayouts[0]);
+            this._blitVertexLayout = device.createVertexLayout({
+                vertexBuffers: [
+                    {
+                        buffer: device.createVertexBuffer('position_f32x2', new Float32Array([
+                            -1,
+                            -1,
+                            1,
+                            -1,
+                            -1,
+                            1,
+                            1,
+                            1
+                        ]))
+                    }
+                ]
+            });
+            this._blitSampler = device.createSampler({
+                minFilter: 'nearest',
+                magFilter: 'nearest',
+                mipFilter: 'none',
+                addressU: 'clamp',
+                addressV: 'clamp'
+            });
+            this._blitRenderStates = device.createRenderStateSet();
+            this._blitRenderStates.useRasterizerState().setCullMode('none');
+            this._blitRenderStates.useDepthState().enableTest(false).enableWrite(false);
+        }
+        this._blitBindgroup.setTexture('srcTex', srcTex, this._blitSampler);
+        this._blitBindgroup.setValue('srgbOutput', srgbOutput ? 1 : 0);
+        this._blitBindgroup.setValue('flip', device.type === 'webgpu' && !!device.getFramebuffer() ? 1 : 0);
+        device.setRenderStates(this._blitRenderStates);
+        device.setProgram(this._blitProgram);
+        device.setBindGroup(0, this._blitBindgroup);
+        device.setVertexLayout(this._blitVertexLayout);
+        device.draw('triangle-strip', 0, 4);
+    }
+}
+
+export { Compositor };
+//# sourceMappingURL=compositor.js.map

package/dist/posteffect/compositor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compositor.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/posteffect/fxaa.js

@@ -0,0 +1,291 @@
+import { Vector2 } from '@zephyr3d/base';
+import { Application } from '../app.js';
+import { AbstractPostEffect } from './posteffect.js';
+import { linearToGamma } from '../shaders/misc.js';
+
+/**
+ * FXAA post effect
+ * @public
+ */ class FXAA extends AbstractPostEffect {
+    static _program = null;
+    static _sampler = null;
+    _bindgroup;
+    _invTexSize;
+    /**
+   * Creates an instance of grayscale post effect
+   */ constructor(){
+        super();
+        this._opaque = false;
+        this._bindgroup = null;
+        this._invTexSize = new Vector2();
+    }
+    /** {@inheritDoc AbstractPostEffect.dispose} */ dispose() {
+        super.dispose();
+        this._bindgroup?.dispose();
+        this._bindgroup = null;
+    }
+    /** {@inheritDoc AbstractPostEffect.requireLinearDepthTexture} */ requireLinearDepthTexture() {
+        return false;
+    }
+    /** {@inheritDoc AbstractPostEffect.requireDepthAttachment} */ requireDepthAttachment() {
+        return false;
+    }
+    /** {@inheritDoc AbstractPostEffect.apply} */ apply(ctx, inputColorTexture, sceneDepthTexture, srgbOutput) {
+        const device = Application.instance.device;
+        this._prepare(device);
+        this._invTexSize.setXY(1 / inputColorTexture.width, 1 / inputColorTexture.height);
+        this._bindgroup.setTexture('srcTex', inputColorTexture, FXAA._sampler);
+        this._bindgroup.setValue('flip', this.needFlip(device) ? 1 : 0);
+        this._bindgroup.setValue('srgbOut', srgbOutput ? 1 : 0);
+        this._bindgroup.setValue('invTexSize', this._invTexSize);
+        device.setProgram(FXAA._program);
+        device.setBindGroup(0, this._bindgroup);
+        this.drawFullscreenQuad();
+    }
+    /** @internal */ _prepare(device) {
+        if (!FXAA._program) {
+            FXAA._program = device.buildRenderProgram({
+                vertex (pb) {
+                    this.flip = pb.int().uniform(0);
+                    this.$inputs.pos = pb.vec2().attrib('position');
+                    this.$outputs.uv = pb.vec2();
+                    pb.main(function() {
+                        this.$builtins.position = pb.vec4(this.$inputs.pos, 0, 1);
+                        this.$outputs.uv = pb.add(pb.mul(this.$inputs.pos.xy, 0.5), pb.vec2(0.5));
+                        this.$if(pb.notEqual(this.flip, 0), function() {
+                            this.$builtins.position.y = pb.neg(this.$builtins.position.y);
+                        });
+                    });
+                },
+                fragment (pb) {
+                    this.srcTex = pb.tex2D().uniform(0);
+                    this.srgbOut = pb.int().uniform(0);
+                    this.invTexSize = pb.vec2().uniform(0);
+                    this.$outputs.outColor = pb.vec4();
+                    pb.func('getLuma', [
+                        pb.vec3('vSample')
+                    ], function() {
+                        this.$return(pb.dot(this.vSample, pb.vec3(0.299, 0.587, 0.114)));
+                    });
+                    pb.func('FXAA', [
+                        pb.vec2('uv')
+                    ], function() {
+                        this.$l.posM = this.uv;
+                        this.$l.rgbyM = pb.textureSampleLevel(this.srcTex, this.uv, 0);
+                        this.$l.lumaM = this.getLuma(this.rgbyM.rgb);
+                        this.$l.lumaN = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(0, -1), this.invTexSize)), 0).rgb);
+                        this.$l.lumaW = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(-1, 0), this.invTexSize)), 0).rgb);
+                        this.$l.lumaE = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(1, 0), this.invTexSize)), 0).rgb);
+                        this.$l.lumaS = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(0, 1), this.invTexSize)), 0).rgb);
+                        this.$l.rangeMin = pb.min(this.lumaM, pb.min(pb.min(this.lumaN, this.lumaW), pb.min(this.lumaS, this.lumaE)));
+                        this.$l.rangeMax = pb.max(this.lumaM, pb.max(pb.max(this.lumaN, this.lumaW), pb.max(this.lumaS, this.lumaE)));
+                        this.$l.range = pb.sub(this.rangeMax, this.rangeMin);
+                        this.$if(pb.lessThan(this.range, pb.max(1 / 16, pb.div(this.rangeMax, 8))), function() {
+                            this.$return(this.rgbyM);
+                        });
+                        this.$l.lumaNW = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(-1, -1), this.invTexSize)), 0).rgb);
+                        this.$l.lumaNE = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(1, -1), this.invTexSize)), 0).rgb);
+                        this.$l.lumaSW = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(-1, 1), this.invTexSize)), 0).rgb);
+                        this.$l.lumaSE = this.getLuma(pb.textureSampleLevel(this.srcTex, pb.add(this.uv, pb.mul(pb.vec2(1, 1), this.invTexSize)), 0).rgb);
+                        this.$l.lumaNS = pb.add(this.lumaN, this.lumaS);
+                        this.$l.lumaWE = pb.add(this.lumaW, this.lumaE);
+                        this.$l.subpixRcpRange = pb.div(1, this.range);
+                        this.$l.subpixNSWE = pb.add(this.lumaNS, this.lumaWE);
+                        this.$l.edgeHorz1 = pb.add(pb.mul(-2, this.lumaM), this.lumaNS);
+                        this.$l.edgeVert1 = pb.add(pb.mul(-2, this.lumaM), this.lumaWE);
+                        this.$l.lumaNESE = pb.add(this.lumaNE, this.lumaSE);
+                        this.$l.lumaNWNE = pb.add(this.lumaNW, this.lumaNE);
+                        this.$l.edgeHorz2 = pb.add(pb.mul(-2, this.lumaE), this.lumaNESE);
+                        this.$l.edgeVert2 = pb.add(pb.mul(-2, this.lumaN), this.lumaNWNE);
+                        this.$l.lumaNWSW = pb.add(this.lumaNW, this.lumaSW);
+                        this.$l.lumaSWSE = pb.add(this.lumaSW, this.lumaSE);
+                        this.$l.edgeHorz4 = pb.add(pb.mul(pb.abs(this.edgeHorz1), 2), pb.abs(this.edgeHorz2));
+                        this.$l.edgeVert4 = pb.add(pb.mul(pb.abs(this.edgeVert1), 2), pb.abs(this.edgeVert2));
+                        this.$l.edgeHorz3 = pb.add(pb.mul(-2, this.lumaW), this.lumaNWSW);
+                        this.$l.edgeVert3 = pb.add(pb.mul(-2, this.lumaS), this.lumaSWSE);
+                        this.$l.edgeHorz = pb.add(pb.abs(this.edgeHorz3), this.edgeHorz4);
+                        this.$l.edgeVert = pb.add(pb.abs(this.edgeVert3), this.edgeVert4);
+                        this.$l.subpixNWSWNESE = pb.add(this.lumaNWSW, this.lumaNESE);
+                        this.$l.lengthSign = this.invTexSize.x;
+                        this.$l.horzSpan = pb.greaterThanEqual(this.edgeHorz, this.edgeVert);
+                        this.$l.subpixA = pb.add(pb.mul(this.subpixNSWE, 2), this.subpixNWSWNESE);
+                        this.$if(pb.not(this.horzSpan), function() {
+                            this.lumaN = this.lumaW;
+                            this.lumaS = this.lumaE;
+                        }).$else(function() {
+                            this.lengthSign = this.invTexSize.y;
+                        });
+                        this.$l.subpixB = pb.sub(pb.div(this.subpixA, 12), this.lumaM);
+                        this.$l.gradientN = pb.sub(this.lumaN, this.lumaM);
+                        this.$l.gradientS = pb.sub(this.lumaS, this.lumaM);
+                        this.$l.lumaNN = pb.add(this.lumaN, this.lumaM);
+                        this.$l.lumaSS = pb.add(this.lumaS, this.lumaM);
+                        this.$l.pairN = pb.greaterThanEqual(pb.abs(this.gradientN), pb.abs(this.gradientS));
+                        this.$l.gradient = pb.max(pb.abs(this.gradientN), pb.abs(this.gradientS));
+                        this.$if(this.pairN, function() {
+                            this.lengthSign = pb.neg(this.lengthSign);
+                        });
+                        this.$l.subpixC = pb.clamp(pb.mul(pb.abs(this.subpixB), this.subpixRcpRange), 0, 1);
+                        this.$l.posB = this.posM;
+                        this.$l.offNP = pb.vec2();
+                        this.$if(pb.not(this.horzSpan), function() {
+                            this.offNP.x = 0;
+                            this.offNP.y = this.invTexSize.y;
+                            this.posB.x = pb.add(this.posB.x, pb.mul(this.lengthSign, 0.5));
+                        }).$else(function() {
+                            this.offNP.x = this.invTexSize.x;
+                            this.offNP.y = 0;
+                            this.posB.y = pb.add(this.posB.y, pb.mul(this.lengthSign, 0.5));
+                        });
+                        this.$l.posN = pb.sub(this.posB, this.offNP);
+                        this.$l.posP = pb.add(this.posB, this.offNP);
+                        this.$l.subpixD = pb.add(pb.mul(-2, this.subpixC), 3);
+                        this.$l.lumaEndN = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posN, 0).rgb);
+                        this.$l.subpixE = pb.mul(this.subpixC, this.subpixC);
+                        this.$l.lumaEndP = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posP, 0).rgb);
+                        this.$if(pb.not(this.pairN), function() {
+                            this.lumaNN = this.lumaSS;
+                        });
+                        this.$l.gradientScaled = pb.div(this.gradient, 4);
+                        this.$l.lumaMM = pb.sub(this.lumaM, pb.mul(this.lumaNN, 0.5));
+                        this.$l.subpixF = pb.mul(this.subpixD, this.subpixE);
+                        this.$l.lumaMLTZero = pb.lessThan(this.lumaMM, 0);
+                        this.lumaEndN = pb.sub(this.lumaEndN, pb.mul(this.lumaNN, 0.5));
+                        this.lumaEndP = pb.sub(this.lumaEndP, pb.mul(this.lumaNN, 0.5));
+                        this.$l.doneN = pb.greaterThanEqual(pb.abs(this.lumaEndN), this.gradientScaled);
+                        this.$l.doneP = pb.greaterThanEqual(pb.abs(this.lumaEndP), this.gradientScaled);
+                        this.$if(pb.not(this.doneN), function() {
+                            this.posN = pb.sub(this.posN, pb.mul(this.offNP, 1.5));
+                        });
+                        this.$l.doneNP = pb.or(pb.not(this.doneN), pb.not(this.doneP));
+                        this.$if(pb.not(this.doneP), function() {
+                            this.posP = pb.add(this.posP, pb.mul(this.offNP, 1.5));
+                        });
+                        this.$if(this.doneNP, function() {
+                            this.$if(pb.not(this.doneN), function() {
+                                this.lumaEndN = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posN.xy, 0).rgb);
+                                this.lumaEndN = pb.sub(this.lumaEndN, pb.mul(this.lumaNN, 0.5));
+                            });
+                            this.$if(pb.not(this.doneP), function() {
+                                this.lumaEndP = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posP.xy, 0).rgb);
+                                this.lumaEndP = pb.sub(this.lumaEndP, pb.mul(this.lumaNN, 0.5));
+                            });
+                            this.doneN = pb.greaterThanEqual(pb.abs(this.lumaEndN), this.gradientScaled);
+                            this.doneP = pb.greaterThanEqual(pb.abs(this.lumaEndP), this.gradientScaled);
+                            this.$if(pb.not(this.doneN), function() {
+                                this.posN = pb.sub(this.posN, pb.mul(this.offNP, 2.0));
+                            });
+                            this.doneNP = pb.or(pb.not(this.doneN), pb.not(this.doneP));
+                            this.$if(pb.not(this.doneP), function() {
+                                this.posP = pb.add(this.posP, pb.mul(this.offNP, 2.0));
+                            });
+                            this.$if(this.doneNP, function() {
+                                this.$if(pb.not(this.doneN), function() {
+                                    this.lumaEndN = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posN.xy, 0).rgb);
+                                    this.lumaEndN = pb.sub(this.lumaEndN, pb.mul(this.lumaNN, 0.5));
+                                });
+                                this.$if(pb.not(this.doneP), function() {
+                                    this.lumaEndP = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posP.xy, 0).rgb);
+                                    this.lumaEndP = pb.sub(this.lumaEndP, pb.mul(this.lumaNN, 0.5));
+                                });
+                                this.doneN = pb.greaterThanEqual(pb.abs(this.lumaEndN), this.gradientScaled);
+                                this.doneP = pb.greaterThanEqual(pb.abs(this.lumaEndP), this.gradientScaled);
+                                this.$if(pb.not(this.doneN), function() {
+                                    this.posN = pb.sub(this.posN, pb.mul(this.offNP, 2.0));
+                                });
+                                this.doneNP = pb.or(pb.not(this.doneN), pb.not(this.doneP));
+                                this.$if(pb.not(this.doneP), function() {
+                                    this.posP = pb.add(this.posP, pb.mul(this.offNP, 2.0));
+                                });
+                                this.$if(this.doneNP, function() {
+                                    this.$if(pb.not(this.doneN), function() {
+                                        this.lumaEndN = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posN.xy, 0).rgb);
+                                        this.lumaEndN = pb.sub(this.lumaEndN, pb.mul(this.lumaNN, 0.5));
+                                    });
+                                    this.$if(pb.not(this.doneP), function() {
+                                        this.lumaEndP = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posP.xy, 0).rgb);
+                                        this.lumaEndP = pb.sub(this.lumaEndP, pb.mul(this.lumaNN, 0.5));
+                                    });
+                                    this.doneN = pb.greaterThanEqual(pb.abs(this.lumaEndN), this.gradientScaled);
+                                    this.doneP = pb.greaterThanEqual(pb.abs(this.lumaEndP), this.gradientScaled);
+                                    this.$if(pb.not(this.doneN), function() {
+                                        this.posN = pb.sub(this.posN, pb.mul(this.offNP, 4.0));
+                                    });
+                                    this.doneNP = pb.or(pb.not(this.doneN), pb.not(this.doneP));
+                                    this.$if(pb.not(this.doneP), function() {
+                                        this.posP = pb.add(this.posP, pb.mul(this.offNP, 4.0));
+                                    });
+                                    this.$if(this.doneNP, function() {
+                                        this.$if(pb.not(this.doneN), function() {
+                                            this.lumaEndN = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posN.xy, 0).rgb);
+                                            this.lumaEndN = pb.sub(this.lumaEndN, pb.mul(this.lumaNN, 0.5));
+                                        });
+                                        this.$if(pb.not(this.doneP), function() {
+                                            this.lumaEndP = this.getLuma(pb.textureSampleLevel(this.srcTex, this.posP.xy, 0).rgb);
+                                            this.lumaEndP = pb.sub(this.lumaEndP, pb.mul(this.lumaNN, 0.5));
+                                        });
+                                        this.doneN = pb.greaterThanEqual(pb.abs(this.lumaEndN), this.gradientScaled);
+                                        this.doneP = pb.greaterThanEqual(pb.abs(this.lumaEndP), this.gradientScaled);
+                                        this.$if(pb.not(this.doneN), function() {
+                                            this.posN = pb.sub(this.posN, pb.mul(this.offNP, 2.0));
+                                        });
+                                        this.$if(pb.not(this.doneP), function() {
+                                            this.posP = pb.add(this.posP, pb.mul(this.offNP, 2.0));
+                                        });
+                                    });
+                                });
+                            });
+                        });
+                        this.$l.dstN = pb.sub(this.posM.x, this.posN.x);
+                        this.$l.dstP = pb.sub(this.posP.x, this.posM.x);
+                        this.$if(pb.not(this.horzSpan), function() {
+                            this.dstN = pb.sub(this.posM.y, this.posN.y);
+                            this.dstP = pb.sub(this.posP.y, this.posM.y);
+                        });
+                        this.$l.goodSpanN = pb.notEqual(pb.lessThan(this.lumaEndN, 0), this.lumaMLTZero);
+                        this.$l.spanLength = pb.add(this.dstP, this.dstN);
+                        this.$l.goodSpanP = pb.notEqual(pb.lessThan(this.lumaEndP, 0), this.lumaMLTZero);
+                        this.$l.spanLengthRcp = pb.div(1, this.spanLength);
+                        this.$l.directionN = pb.lessThan(this.dstN, this.dstP);
+                        this.$l.dst = pb.min(this.dstN, this.dstP);
+                        this.$l.goodSpan = this.$choice(this.directionN, this.goodSpanN, this.goodSpanP);
+                        this.$l.subpixG = pb.mul(this.subpixF, this.subpixF);
+                        this.$l.pixelOffset = pb.add(pb.mul(this.dst, pb.neg(this.spanLengthRcp)), 0.5);
+                        this.$l.subpixH = pb.mul(this.subpixG, 0.75);
+                        this.$l.pixelOffsetGood = this.$choice(this.goodSpan, this.pixelOffset, 0);
+                        this.$l.pixelOffsetSubpix = pb.max(this.pixelOffsetGood, this.subpixH);
+                        this.$if(pb.not(this.horzSpan), function() {
+                            this.posM.x = pb.add(this.posM.x, pb.mul(this.pixelOffsetSubpix, this.lengthSign));
+                        }).$else(function() {
+                            this.posM.y = pb.add(this.posM.y, pb.mul(this.pixelOffsetSubpix, this.lengthSign));
+                        });
+                        this.$return(pb.textureSampleLevel(this.srcTex, this.posM, 0).xyzw);
+                    });
+                    pb.main(function() {
+                        this.$l.color = this.FXAA(this.$inputs.uv);
+                        this.$if(pb.equal(this.srgbOut, 0), function() {
+                            this.$outputs.outColor = this.color;
+                        }).$else(function() {
+                            this.$outputs.outColor = pb.vec4(linearToGamma(this, this.color.rgb), this.color.a);
+                        });
+                    });
+                }
+            });
+        }
+        if (!FXAA._sampler) {
+            FXAA._sampler = device.createSampler({
+                magFilter: 'linear',
+                minFilter: 'linear',
+                mipFilter: 'none',
+                addressU: 'clamp',
+                addressV: 'clamp'
+            });
+        }
+        if (!this._bindgroup) {
+            this._bindgroup = device.createBindGroup(FXAA._program.bindGroupLayouts[0]);
+        }
+    }
+}
+
+export { FXAA };
+//# sourceMappingURL=fxaa.js.map

package/dist/posteffect/fxaa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fxaa.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/posteffect/grayscale.js

@@ -0,0 +1,87 @@
+import { Application } from '../app.js';
+import { AbstractPostEffect } from './posteffect.js';
+import { linearToGamma } from '../shaders/misc.js';
+
+/**
+ * Grayscale post effect
+ * @public
+ */ class Grayscale extends AbstractPostEffect {
+    static _program = null;
+    static _sampler = null;
+    _bindgroup;
+    /**
+   * Creates an instance of grayscale post effect
+   */ constructor(){
+        super();
+        this._opaque = false;
+        this._bindgroup = null;
+    }
+    /** {@inheritDoc AbstractPostEffect.dispose} */ dispose() {
+        super.dispose();
+        this._bindgroup?.dispose();
+        this._bindgroup = null;
+    }
+    /** {@inheritDoc AbstractPostEffect.requireLinearDepthTexture} */ requireLinearDepthTexture() {
+        return false;
+    }
+    /** {@inheritDoc AbstractPostEffect.requireDepthAttachment} */ requireDepthAttachment() {
+        return false;
+    }
+    /** {@inheritDoc AbstractPostEffect.apply} */ apply(ctx, inputColorTexture, sceneDepthTexture, srgbOutput) {
+        const device = Application.instance.device;
+        this._prepare(device);
+        this._bindgroup.setTexture('srcTex', inputColorTexture, Grayscale._sampler);
+        this._bindgroup.setValue('flip', this.needFlip(device) ? 1 : 0);
+        this._bindgroup.setValue('srgbOut', srgbOutput ? 1 : 0);
+        device.setProgram(Grayscale._program);
+        device.setBindGroup(0, this._bindgroup);
+        this.drawFullscreenQuad();
+    }
+    /** @internal */ _prepare(device) {
+        if (!Grayscale._program) {
+            Grayscale._program = device.buildRenderProgram({
+                vertex (pb) {
+                    this.flip = pb.int().uniform(0);
+                    this.$inputs.pos = pb.vec2().attrib('position');
+                    this.$outputs.uv = pb.vec2();
+                    pb.main(function() {
+                        this.$builtins.position = pb.vec4(this.$inputs.pos, 0, 1);
+                        this.$outputs.uv = pb.add(pb.mul(this.$inputs.pos.xy, 0.5), pb.vec2(0.5));
+                        this.$if(pb.notEqual(this.flip, 0), function() {
+                            this.$builtins.position.y = pb.neg(this.$builtins.position.y);
+                        });
+                    });
+                },
+                fragment (pb) {
+                    this.srcTex = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.srgbOut = pb.int().uniform(0);
+                    this.$outputs.outColor = pb.vec4();
+                    pb.main(function() {
+                        this.$l.color = pb.textureSample(this.srcTex, this.$inputs.uv);
+                        this.$l.grayscaleColor = pb.vec3(pb.dot(this.$l.color.rgb, pb.vec3(0.299, 0.587, 0.114)));
+                        this.$if(pb.equal(this.srgbOut, 0), function() {
+                            this.$outputs.outColor = pb.vec4(this.grayscaleColor, this.color.a);
+                        }).$else(function() {
+                            this.$outputs.outColor = pb.vec4(linearToGamma(this, this.grayscaleColor), this.color.a);
+                        });
+                    });
+                }
+            });
+        }
+        if (!Grayscale._sampler) {
+            Grayscale._sampler = device.createSampler({
+                magFilter: 'nearest',
+                minFilter: 'nearest',
+                mipFilter: 'none',
+                addressU: 'clamp',
+                addressV: 'clamp'
+            });
+        }
+        if (!this._bindgroup) {
+            this._bindgroup = device.createBindGroup(Grayscale._program.bindGroupLayouts[0]);
+        }
+    }
+}
+
+export { Grayscale };
+//# sourceMappingURL=grayscale.js.map

package/dist/posteffect/grayscale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grayscale.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}