@zephyr3d/scene 0.1.0

package/dist/blitter/depthlimitedgaussion.js

@@ -0,0 +1,166 @@
+import { Blitter } from './blitter.js';
+import '../shaders/framework.js';
+import { decodeNormalizedFloatFromRGBA, encodeNormalizedFloatToRGBA } from '../shaders/misc.js';
+import '../app.js';
+import { Vector2 } from '@zephyr3d/base';
+
+/**
+ * Bilateral blur blitter horizonal stage for ambient occlusion calculation
+ * @public
+ */ class AOBilateralBlurBlitter extends Blitter {
+    _depthTex;
+    _sampler;
+    _kernelRadius;
+    _cameraNearFar;
+    _depthCutoff;
+    _packed;
+    _uvStep;
+    _size;
+    _stdDev;
+    _offsetsAndWeights;
+    _finalPhase;
+    constructor(finalPhase){
+        super();
+        this._depthTex = null;
+        this._depthCutoff = 0.001;
+        this._sampler = null;
+        this._packed = false;
+        this._kernelRadius = 8;
+        this._cameraNearFar = Vector2.zero();
+        this._size = Vector2.zero();
+        this._stdDev = 10;
+        this._offsetsAndWeights = new Float32Array(4 * (this._kernelRadius + 1));
+        this._finalPhase = !!finalPhase;
+        this._uvStep = this._finalPhase ? new Vector2(1, 0) : new Vector2(0, 1);
+        this.calcGaussion();
+    }
+    get depthTex() {
+        return this._depthTex;
+    }
+    set depthTex(tex) {
+        this._depthTex = tex;
+    }
+    get packed() {
+        return this._packed;
+    }
+    set packed(val) {
+        if (this._packed !== !!val) {
+            this._packed = !!val;
+            this.invalidateHash();
+        }
+    }
+    get nearestSampler() {
+        return this._sampler;
+    }
+    set nearestSampler(sampler) {
+        this._sampler = sampler;
+    }
+    get cameraNearFar() {
+        return this._cameraNearFar;
+    }
+    set cameraNearFar(v) {
+        this._cameraNearFar.set(v);
+    }
+    get depthCutoff() {
+        return this._depthCutoff;
+    }
+    set depthCutoff(val) {
+        this._depthCutoff = val;
+    }
+    get size() {
+        return this._size;
+    }
+    set size(val) {
+        this._size.set(val);
+    }
+    get stdDev() {
+        return this._stdDev;
+    }
+    set stdDev(val) {
+        if (val !== this._stdDev) {
+            this._stdDev = val;
+            this.calcGaussion();
+        }
+    }
+    get kernelRadius() {
+        return this._kernelRadius;
+    }
+    set kernelRadius(val) {
+        if (val !== this._kernelRadius) {
+            this._kernelRadius = val;
+            this._offsetsAndWeights = new Float32Array(4 * (this._kernelRadius + 1));
+            this.calcGaussion();
+            this.invalidateHash();
+        }
+    }
+    calcHash() {
+        return `${this._kernelRadius}:${this._packed}:${this._finalPhase}`;
+    }
+    calcGaussion() {
+        for(let i = 0; i <= this.kernelRadius; i++){
+            this._offsetsAndWeights[i * 4] = this._uvStep.x * i;
+            this._offsetsAndWeights[i * 4 + 1] = this._uvStep.y * i;
+            this._offsetsAndWeights[i * 4 + 2] = Math.exp(-(i * i) / (2 * (this._stdDev * this._stdDev))) / (Math.sqrt(2.0 * Math.PI) * this._stdDev);
+        }
+    }
+    setup(scope, type) {
+        super.setup(scope, type);
+        const pb = scope.$builder;
+        if (pb.shaderKind === 'fragment') {
+            scope.depthTex = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+            scope.depthCutoff = pb.float().uniform(0);
+            scope.offsetsAndWeights = pb.vec4[this._kernelRadius + 1]().uniform(0);
+            scope.cameraNearFar = pb.vec2().uniform(0);
+            scope.size = pb.vec2().uniform(0);
+        }
+    }
+    setUniforms(bindGroup, sourceTex) {
+        super.setUniforms(bindGroup, sourceTex);
+        bindGroup.setTexture('depthTex', this._depthTex, this._sampler);
+        bindGroup.setValue('depthCutoff', this._depthCutoff);
+        bindGroup.setValue('offsetsAndWeights', this._offsetsAndWeights);
+        bindGroup.setValue('cameraNearFar', this._cameraNearFar);
+        bindGroup.setValue('size', this._size);
+    }
+    filter(scope, type, srcTex, srcUV, srcLayer, sampleType) {
+        const that = this;
+        const pb = scope.$builder;
+        pb.func('getLinearDepth', [
+            pb.vec2('uv')
+        ], function() {
+            this.$l.depthValue = pb.textureSample(this.depthTex, this.uv);
+            this.$return(pb.getDevice().type === 'webgl' ? decodeNormalizedFloatFromRGBA(this, this.depthValue) : this.depthValue.r);
+        });
+        scope.depth = scope.getLinearDepth(srcUV);
+        scope.weightSum = scope.offsetsAndWeights[0].z;
+        scope.srcTexel = that.readTexel(scope, type, srcTex, srcUV, srcLayer, sampleType);
+        scope.ao = that._packed ? decodeNormalizedFloatFromRGBA(scope, scope.srcTexel) : scope.srcTexel.r;
+        scope.colorSum = pb.mul(scope.ao, scope.weightSum);
+        scope.$for(pb.int('i'), 0, that._kernelRadius, function() {
+            this.$l.offsetAndWeight = this.offsetsAndWeights.at(pb.add(this.i, 1));
+            this.$l.weight = this.offsetAndWeight.z;
+            this.$l.offset = pb.div(this.offsetAndWeight.xy, this.size);
+            this.$l.uvRight = pb.add(srcUV, this.offset);
+            this.$l.depthRight = this.getLinearDepth(this.uvRight);
+            this.$if(pb.lessThan(pb.abs(pb.sub(this.depthRight, this.depth)), this.depthCutoff), function() {
+                this.$l.srcTexelRight = that.readTexel(this, type, srcTex, this.uvRight, srcLayer, sampleType);
+                this.$l.aoRight = that._packed ? decodeNormalizedFloatFromRGBA(this, this.srcTexelRight) : this.srcTexelRight.r;
+                this.colorSum = pb.add(this.colorSum, pb.mul(this.aoRight, this.weight));
+                this.weightSum = pb.add(this.weightSum, this.weight);
+            });
+            this.$l.uvLeft = pb.sub(srcUV, this.offset);
+            this.$l.depthLeft = this.getLinearDepth(this.uvLeft);
+            this.$if(pb.lessThan(pb.abs(pb.sub(this.depthLeft, this.depth)), this.depthCutoff), function() {
+                this.$l.srcTexelLeft = that.readTexel(this, type, srcTex, this.uvLeft, srcLayer, sampleType);
+                this.$l.aoLeft = that._packed ? decodeNormalizedFloatFromRGBA(this, this.srcTexelLeft) : this.srcTexelLeft.r;
+                this.colorSum = pb.add(this.colorSum, pb.mul(this.aoLeft, this.weight));
+                this.weightSum = pb.add(this.weightSum, this.weight);
+            });
+        });
+        scope.colorSum = pb.div(scope.colorSum, scope.weightSum);
+        return that._finalPhase || !that._packed ? pb.vec4(scope.colorSum, scope.colorSum, scope.colorSum, 1) : encodeNormalizedFloatToRGBA(scope, scope.colorSum);
+    }
+}
+
+export { AOBilateralBlurBlitter };
+//# sourceMappingURL=depthlimitedgaussion.js.map

package/dist/blitter/depthlimitedgaussion.js.map

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

package/dist/blitter/gaussianblur.js

@@ -0,0 +1,229 @@
+import { Blitter } from './blitter.js';
+import '../shaders/framework.js';
+import { decodeNormalizedFloatFromRGBA } from '../shaders/misc.js';
+import '../app.js';
+
+/**
+ * Gaussian blur blitter
+ * @public
+ */ class GaussianBlurBlitter extends Blitter {
+    /** @internal */ _phase;
+    /** @internal */ _kernelSize;
+    /** @internal */ _sigma;
+    /** @internal */ _blurSize;
+    /** @internal */ _logSpace;
+    /** @internal */ _logSpaceMultiplier;
+    /** @internal */ _depthTex;
+    /** @internal */ _depthCutoff;
+    /**
+   * Creates an instance of GaussianBlurBlitter
+   * @param phase - Blitter phase
+   * @param kernalSize - kernel size
+   * @param sigma - Gaussian standard deviation
+   * @param blurSize - Blur radius
+   */ constructor(phase, kernalSize, sigma, blurSize){
+        super();
+        this._phase = phase;
+        this._kernelSize = kernalSize;
+        this._sigma = sigma;
+        this._blurSize = blurSize;
+        this._logSpace = false;
+        this._logSpaceMultiplier = 1;
+        this._depthTex = null;
+        this._depthCutoff = 0.7;
+    }
+    /** Blur radius */ get blurSize() {
+        return this._blurSize;
+    }
+    set blurSize(val) {
+        this._blurSize = val;
+    }
+    /** Kernel size */ get kernelSize() {
+        return this._kernelSize;
+    }
+    set kernelSize(val) {
+        if (this._kernelSize !== val) {
+            this._kernelSize = val;
+            this.invalidateHash();
+        }
+    }
+    /** true if the box filter will be applied in logarithmic space */ get logSpace() {
+        return this._logSpace;
+    }
+    set logSpace(val) {
+        if (this._logSpace !== !!val) {
+            this._logSpace = !!val;
+            this.invalidateHash();
+        }
+    }
+    /** Multiplier for logarithmic space blur */ get logSpaceMultiplier() {
+        return this._logSpaceMultiplier;
+    }
+    set logSpaceMultiplier(val) {
+        this._logSpaceMultiplier = val;
+    }
+    /** Linear depth texture */ get depthTexture() {
+        return this._depthTex;
+    }
+    set depthTexture(tex) {
+        if (this._depthTex !== tex) {
+            if (!tex || !this._depthTex) {
+                this.invalidateHash();
+            }
+            this._depthTex = tex;
+        }
+    }
+    /** Depth cutoff */ get depthCutoff() {
+        return this._depthCutoff;
+    }
+    set depthCutoff(val) {
+        this._depthCutoff = val;
+    }
+    /**
+   * {@inheritDoc Blitter.setup}
+   * @override
+   */ setup(scope, type) {
+        const pb = scope.$builder;
+        if (pb.shaderKind === 'fragment') {
+            if (this._depthTex) {
+                scope.depthTex = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                scope.depthCutoff = pb.float().uniform(0);
+            }
+            scope.sigma = pb.float().uniform(0);
+            scope.blurSize = pb.float().uniform(0);
+            if (this._logSpace && this._phase === 'horizonal') {
+                scope.multiplier = pb.float().uniform(0);
+            }
+            if (this._phase !== 'horizonal' && this._phase !== 'vertical') {
+                throw new Error(`GaussianBlurFilter.setupFilter() failed: invalid phase: ${this._phase}`);
+            }
+            if (!Number.isInteger(this._kernelSize) || this._kernelSize < 0 || (this._kernelSize & 1) === 0) {
+                throw new Error(`GaussianBlurFilter.setupFilter() failed: invalid kernel size: ${this._kernelSize}`);
+            }
+            scope.blurMultiplyVec = type === 'cube' ? this._phase === 'horizonal' ? pb.vec3(1, 0, 0) : pb.vec3(0, 1, 0) : this._phase === 'horizonal' ? pb.vec2(1, 0) : pb.vec2(0, 1);
+            scope.numBlurPixelsPerSide = pb.float((this._kernelSize + 1) / 2);
+        }
+    }
+    /**
+   * {@inheritDoc Blitter.setUniforms}
+   * @override
+   */ setUniforms(bindGroup) {
+        bindGroup.setValue('sigma', this._sigma);
+        bindGroup.setValue('blurSize', this._blurSize);
+        if (this._logSpace && this._phase === 'horizonal') {
+            bindGroup.setValue('multiplier', this._logSpaceMultiplier);
+        }
+        if (this._depthTex) {
+            bindGroup.setTexture('depthTex', this._depthTex);
+            bindGroup.setValue('depthCutoff', this._depthCutoff);
+        }
+    }
+    /**
+   * {@inheritDoc Blitter.filter}
+   * @override
+   */ filter(scope, type, srcTex, srcUV, srcLayer, sampleType) {
+        const that = this;
+        const pb = scope.$builder;
+        if (that._depthTex) {
+            pb.func('getLinearDepth', [
+                pb.vec2('uv')
+            ], function() {
+                this.$l.depthValue = pb.textureSample(this.depthTex, this.uv);
+                if (pb.getDevice().type === 'webgl') {
+                    this.$return(decodeNormalizedFloatFromRGBA(this, this.depthValue));
+                } else {
+                    this.$return(this.depthValue.r);
+                }
+            });
+        }
+        scope.incrementalGaussian = pb.vec3();
+        scope.incrementalGaussian.x = pb.div(1, pb.mul(scope.sigma, Math.sqrt(2 * Math.PI)));
+        scope.incrementalGaussian.y = pb.exp(pb.div(-0.5, pb.mul(scope.sigma, scope.sigma)));
+        scope.incrementalGaussian.z = pb.mul(scope.incrementalGaussian.y, scope.incrementalGaussian.y);
+        scope.coefficientSum = pb.float(0);
+        scope.minExpValue = pb.vec4(87, 87, 87, 87);
+        scope.d0 = that.readTexel(scope, type, srcTex, srcUV, srcLayer, sampleType);
+        if (that._logSpace) {
+            scope.avgValue = pb.vec4(scope.incrementalGaussian.x);
+        } else {
+            scope.avgValue = pb.mul(that.readTexel(scope, type, srcTex, srcUV, srcLayer, sampleType), scope.incrementalGaussian.x);
+        }
+        if (that._depthTex) {
+            scope.centerDepth = scope.getLinearDepth(srcUV);
+        }
+        scope.coefficientSum = pb.add(scope.coefficientSum, scope.incrementalGaussian.x);
+        scope.incrementalGaussian = pb.vec3(pb.mul(scope.incrementalGaussian.xy, scope.incrementalGaussian.yz), scope.incrementalGaussian.z);
+        scope.$for(pb.float('i'), 1, scope.numBlurPixelsPerSide, function() {
+            this.$l.uv1 = pb.sub(srcUV, pb.mul(this.blurMultiplyVec, this.blurSize, this.i));
+            this.$l.d1 = pb.vec4();
+            if (that._depthTex) {
+                this.$l.depth1 = this.getLinearDepth(this.uv1);
+                this.$l.test1 = pb.lessThan(pb.abs(pb.sub(this.depth1, this.centerDepth)), this.depthCutoff);
+            } else {
+                this.$l.test1 = true;
+            }
+            this.$if(this.test1, function() {
+                this.d1 = that.readTexel(scope, type, srcTex, this.uv1, srcLayer, sampleType);
+            });
+            this.$l.uv2 = pb.add(srcUV, pb.mul(this.blurMultiplyVec, this.blurSize, this.i)), this.$l.d2 = pb.vec4();
+            if (that._depthTex) {
+                this.$l.depth2 = this.getLinearDepth(this.uv2);
+                this.$l.test2 = pb.lessThan(pb.abs(pb.sub(this.depth2, this.centerDepth)), this.depthCutoff);
+            } else {
+                this.$l.test2 = true;
+            }
+            this.$if(this.test2, function() {
+                this.d2 = that.readTexel(scope, type, srcTex, pb.add(srcUV, pb.mul(this.blurMultiplyVec, this.blurSize, this.i)), srcLayer, sampleType);
+            });
+            if (that._logSpace) {
+                if (that._phase === 'horizonal') {
+                    this.$if(this.test1, function() {
+                        this.avgValue = pb.add(this.avgValue, pb.mul(pb.exp(pb.min(this.minExpValue, pb.mul(pb.sub(this.d1, this.d0), this.multiplier))), this.incrementalGaussian.x));
+                        this.coefficientSum = pb.add(this.coefficientSum, this.incrementalGaussian.x);
+                    });
+                    this.$if(this.test2, function() {
+                        this.avgValue = pb.add(this.avgValue, pb.mul(pb.exp(pb.min(this.minExpValue, pb.mul(pb.sub(this.d2, this.d0), this.multiplier))), this.incrementalGaussian.x));
+                        this.coefficientSum = pb.add(this.coefficientSum, this.incrementalGaussian.x);
+                    });
+                } else {
+                    this.$if(this.test1, function() {
+                        this.avgValue = pb.add(this.avgValue, pb.mul(pb.exp(pb.min(this.minExpValue, pb.sub(this.d1, this.d0))), this.incrementalGaussian.x));
+                        this.coefficientSum = pb.add(this.coefficientSum, this.incrementalGaussian.x);
+                    });
+                    this.$if(this.test2, function() {
+                        this.avgValue = pb.add(this.avgValue, pb.mul(pb.exp(pb.min(this.minExpValue, pb.sub(this.d2, this.d0))), this.incrementalGaussian.x));
+                        this.coefficientSum = pb.add(this.coefficientSum, this.incrementalGaussian.x);
+                    });
+                }
+            } else {
+                this.$if(this.test1, function() {
+                    this.avgValue = pb.add(this.avgValue, pb.mul(this.d1, this.incrementalGaussian.x));
+                    this.coefficientSum = pb.add(this.coefficientSum, this.incrementalGaussian.x);
+                });
+                this.$if(this.test2, function() {
+                    this.avgValue = pb.add(this.avgValue, pb.mul(this.d2, this.incrementalGaussian.x));
+                    this.coefficientSum = pb.add(this.coefficientSum, this.incrementalGaussian.x);
+                });
+            }
+            this.incrementalGaussian = pb.vec3(pb.mul(this.incrementalGaussian.xy, this.incrementalGaussian.yz), this.incrementalGaussian.z);
+        });
+        scope.$l.outColor = pb.div(scope.avgValue, scope.coefficientSum);
+        if (that._logSpace) {
+            if (that._phase === 'horizonal') {
+                scope.outColor = pb.add(pb.mul(scope.multiplier, scope.d0), pb.log(scope.outColor));
+            } else {
+                scope.outColor = pb.add(scope.d0, pb.log(scope.outColor));
+            }
+        }
+        return scope.outColor;
+    }
+    /**
+   * {@inheritDoc Blitter.calcHash}
+   * @override
+   */ calcHash() {
+        return `${this._depthTex ? 1 : 0}-${this._phase}-${this._kernelSize}-${Number(!!this._logSpace)}`;
+    }
+}
+
+export { GaussianBlurBlitter };
+//# sourceMappingURL=gaussianblur.js.map

package/dist/blitter/gaussianblur.js.map

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

package/dist/camera/base.js

@@ -0,0 +1,90 @@
+/**
+ * Base class for any kind of camera controllers
+ * @public
+ */ class BaseCameraController {
+    /** @internal */ _camera;
+    /**
+   * Creates an instance of BaseCameraController
+   */ constructor(){
+        this._camera = null;
+        this.reset();
+    }
+    /** @internal */ _getCamera() {
+        return this._camera;
+    }
+    /** @internal */ _setCamera(camera) {
+        if (this._camera !== camera) {
+            this._camera = camera;
+            this.reset();
+        }
+    }
+    /**
+   * Resets state
+   */ reset() {}
+    /** @internal */ onMouseDown(evt) {
+        return this._onMouseDown(evt);
+    }
+    /** @internal */ onMouseUp(evt) {
+        return this._onMouseUp(evt);
+    }
+    /** @internal */ onMouseWheel(evt) {
+        return this._onMouseWheel(evt);
+    }
+    /** @internal */ onMouseMove(evt) {
+        return this._onMouseMove(evt);
+    }
+    /** @internal */ onKeyDown(evt) {
+        return this._onKeyDown(evt);
+    }
+    /** @internal */ onKeyUp(evt) {
+        return this._onKeyUp(evt);
+    }
+    /**
+   * Updates state
+   */ update() {}
+    /**
+   * Mouse down event handler
+   * @param evt - Mouse event
+   * @returns Boolean value indices whether this event was handled
+   */ _onMouseDown(evt) {
+        return false;
+    }
+    /**
+   * Mouse up event handler
+   * @param evt - Mouse event
+   * @returns Boolean value indices whether this event was handled
+   */ _onMouseUp(evt) {
+        return false;
+    }
+    /**
+   * Mouse wheel event handler
+   * @param evt - Mouse event
+   * @returns Boolean value indices whether this event was handled
+   */ _onMouseWheel(evt) {
+        return false;
+    }
+    /**
+   * Mouse move event handler
+   * @param evt - Mouse event
+   * @returns Boolean value indices whether this event was handled
+   */ _onMouseMove(evt) {
+        return false;
+    }
+    /**
+   * Key down event handler
+   * @param evt - Keyboard event
+   * @returns Boolean value indices whether this event was handled
+   */ _onKeyDown(evt) {
+        return false;
+    }
+    /**
+   * Key up event handler
+   * @param evt - Keyboard event
+   * @returns Boolean value indices whether this event was handled
+   */ _onKeyUp(evt) {
+        return false;
+    }
+}
+
+export { BaseCameraController };
+//# sourceMappingURL=base.js.map

package/dist/camera/base.js.map

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