@zephyr3d/scene 0.5.0 → 0.6.1

package/dist/shaders/water.js

@@ -1,154 +1,134 @@
 import { Application } from '../app.js';
 
 // copy from: https://github.com/codeagent/webgl-ocean/
-/** @internal */ function createProgramOcean(impl) {
+function getFragCoord(scope, useComputeShader) {
+    return useComputeShader ? scope.$builtins.globalInvocationId.xy : scope.$builtins.fragCoord.xy;
+}
+/** @internal */ class WaterShaderImpl {
+    _vertexFunc;
+    _shadingFunc;
+    _setupUniformsFunc;
+    constructor(setupUniformsFunc, vertexFunc, shadingFunc){
+        this._vertexFunc = vertexFunc;
+        this._shadingFunc = shadingFunc;
+        this._setupUniformsFunc = setupUniformsFunc;
+    }
+    setupUniforms(scope) {
+        this._setupUniformsFunc?.call(this, scope);
+    }
+    vertex(scope, pos, xz, waveGenerator) {
+        this._vertexFunc?.call(this, scope, pos, xz, waveGenerator);
+    }
+    getVertexNormal(scope, xz, useComputeShader) {
+        const pb = scope.$builder;
+        pb.func('getVertexNormal', [
+            pb.vec2('xz')
+        ], function() {
+            this.$l.uv0 = pb.div(this.xz, this.sizes.x);
+            this.$l.uv1 = pb.div(this.xz, this.sizes.y);
+            this.$l.uv2 = pb.div(this.xz, this.sizes.z);
+            if (useComputeShader) {
+                this.$l._sx_sz_dxdx_dzdz0 = pb.textureArraySampleLevel(this.dataTexture, this.uv0, 1, 0);
+                this.$l._sx_sz_dxdx_dzdz1 = pb.textureArraySampleLevel(this.dataTexture, this.uv1, 3, 0);
+                this.$l._sx_sz_dxdx_dzdz2 = pb.textureArraySampleLevel(this.dataTexture, this.uv2, 5, 0);
+            } else {
+                this.$l._sx_sz_dxdx_dzdz0 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz0, this.uv0, 0);
+                this.$l._sx_sz_dxdx_dzdz1 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz1, this.uv1, 0);
+                this.$l._sx_sz_dxdx_dzdz2 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz2, this.uv2, 0);
+            }
+            this.$l.sx = pb.add(this._sx_sz_dxdx_dzdz0.x, this._sx_sz_dxdx_dzdz1.x, this._sx_sz_dxdx_dzdz2.x);
+            this.$l.sz = pb.add(this._sx_sz_dxdx_dzdz0.y, this._sx_sz_dxdx_dzdz1.y, this._sx_sz_dxdx_dzdz2.y);
+            this.$l.dxdx_dzdz = pb.add(pb.mul(this._sx_sz_dxdx_dzdz0.zw, this.croppinesses.x), pb.mul(this._sx_sz_dxdx_dzdz1.zw, this.croppinesses.y), pb.mul(this._sx_sz_dxdx_dzdz2.zw, this.croppinesses.z));
+            this.$l.slope = pb.vec2(pb.div(this.sx, pb.add(1.0, this.dxdx_dzdz.x)), pb.div(this.sz, pb.add(1.0, this.dxdx_dzdz.y)));
+            this.$l.normal = pb.normalize(pb.vec3(pb.neg(this.slope.x), 1.0, pb.neg(this.slope.y)));
+            this.$return(this.normal);
+        });
+        return scope.getVertexNormal(xz);
+    }
+    shading(scope, worldPos, worldNormal, foamFactor, discardable, waveGenerator) {
+        return this._shadingFunc?.call(this, scope, worldPos, worldNormal, foamFactor, discardable, waveGenerator);
+    }
+}
+/** @internal */ function createProgramOcean(waveGenerator, shadingImpl) {
     return Application.instance.device.buildRenderProgram({
         vertex (pb) {
             this.$inputs.position = pb.vec3().attrib('position');
             this.$outputs.outPos = pb.vec3();
+            this.$outputs.outNormal = pb.vec3();
             this.$outputs.outXZ = pb.vec2();
-            this.$outputs.uv0 = pb.vec2();
-            this.$outputs.uv1 = pb.vec2();
-            this.$outputs.uv2 = pb.vec2();
             this.flip = pb.int().uniform(0);
             this.viewProjMatrix = pb.mat4().uniform(0);
             this.modelMatrix = pb.mat4().uniform(1);
             this.gridScale = pb.float().uniform(1);
             this.level = pb.float().uniform(0);
-            this.sizes = pb.vec4().uniform(0);
-            this.croppinesses = pb.vec4().uniform(0);
             this.offset = pb.vec2().uniform(1);
             this.scale = pb.float().uniform(1);
-            this.dx_hy_dz_dxdz0 = pb.tex2D().uniform(0);
-            this.sx_sz_dxdx_dzdz0 = pb.tex2D().uniform(0);
-            this.dx_hy_dz_dxdz1 = pb.tex2D().uniform(0);
-            this.sx_sz_dxdx_dzdz1 = pb.tex2D().uniform(0);
-            this.dx_hy_dz_dxdz2 = pb.tex2D().uniform(0);
-            this.sx_sz_dxdx_dzdz2 = pb.tex2D().uniform(0);
-            impl?.setupUniforms(this);
+            shadingImpl.setupUniforms(this);
+            waveGenerator.setupUniforms(this);
             pb.main(function() {
                 this.$l.xz = pb.mul(pb.add(this.offset, pb.mul(pb.mul(this.modelMatrix, pb.vec4(this.$inputs.position, 1)).xy, this.scale)), this.gridScale);
-                this.$outputs.uv0 = pb.div(this.xz, this.sizes.x);
-                this.$outputs.uv1 = pb.div(this.xz, this.sizes.y);
-                this.$outputs.uv2 = pb.div(this.xz, this.sizes.z);
-                this.$l.a = pb.mul(pb.textureSampleLevel(this.dx_hy_dz_dxdz0, this.$outputs.uv0, 0).rgb, pb.vec3(this.croppinesses.x, 1, this.croppinesses.x));
-                this.$l.b = pb.mul(pb.textureSampleLevel(this.dx_hy_dz_dxdz1, this.$outputs.uv1, 0).rgb, pb.vec3(this.croppinesses.y, 1, this.croppinesses.y));
-                this.$l.c = pb.mul(pb.textureSampleLevel(this.dx_hy_dz_dxdz2, this.$outputs.uv2, 0).rgb, pb.vec3(this.croppinesses.z, 1, this.croppinesses.z));
-                this.$l.displacement = pb.add(this.a, this.b, this.c);
-                this.$outputs.outPos = pb.add(pb.vec3(this.xz.x, this.level, this.xz.y), this.displacement);
+                this.$l.outPos = pb.vec3();
+                this.$l.outNormal = pb.vec3();
+                waveGenerator.calcVertexPositionAndNormal(this, pb.vec3(this.xz.x, this.level, this.xz.y), this.outPos, this.outNormal);
+                this.$outputs.outPos = this.outPos;
+                this.$outputs.outNormal = this.outNormal;
                 this.$outputs.outXZ = this.xz;
                 this.$builtins.position = pb.mul(this.viewProjMatrix, pb.vec4(this.$outputs.outPos, 1));
                 this.$if(pb.notEqual(this.flip, 0), function() {
                     this.$builtins.position.y = pb.neg(this.$builtins.position.y);
                 });
+                shadingImpl.vertex(this, this.$outputs.outPos, this.$outputs.outXZ, waveGenerator);
             });
         },
         fragment (pb) {
             this.$outputs.outColor = pb.vec4();
             this.pos = pb.vec3().uniform(0);
-            this.regionMin = pb.vec2().uniform(0);
-            this.regionMax = pb.vec2().uniform(0);
-            this.foamParams = pb.vec2().uniform(0);
-            this.sizes = pb.vec4().uniform(0);
-            this.croppinesses = pb.vec4().uniform(0);
-            this.dx_hy_dz_dxdz0 = pb.tex2D().uniform(0);
-            this.sx_sz_dxdx_dzdz0 = pb.tex2D().uniform(0);
-            this.dx_hy_dz_dxdz1 = pb.tex2D().uniform(0);
-            this.sx_sz_dxdx_dzdz1 = pb.tex2D().uniform(0);
-            this.dx_hy_dz_dxdz2 = pb.tex2D().uniform(0);
-            this.sx_sz_dxdx_dzdz2 = pb.tex2D().uniform(0);
-            impl?.setupUniforms(this);
-            pb.func('jacobian', [
-                pb.float('dxdx'),
-                pb.float('dxdz'),
-                pb.float('dzdz')
-            ], function() {
-                this.$l.Jxx = pb.add(this.dxdx, 1);
-                this.$l.Jxz = this.dxdz;
-                this.$l.Jzz = pb.add(this.dzdz, 1);
-                this.$return(pb.vec4(this.Jxx, this.Jxz, this.Jxz, this.Jzz));
-            });
-            pb.func('det', [
-                pb.vec4('jacobian')
-            ], function() {
-                this.$return(pb.sub(pb.mul(this.jacobian.x, this.jacobian.w), pb.mul(this.jacobian.y, this.jacobian.z)));
-            });
-            pb.func('getNormalAndFoam', [
-                pb.vec2('xz')
-            ], function() {
-                this.$l.uv0 = pb.div(this.xz, this.sizes.x);
-                this.$l.uv1 = pb.div(this.xz, this.sizes.y);
-                this.$l.uv2 = pb.div(this.xz, this.sizes.z);
-                this.$l._sx_sz_dxdx_dzdz0 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz0, this.uv0, 0);
-                this.$l._sx_sz_dxdx_dzdz1 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz1, this.uv1, 0);
-                this.$l._sx_sz_dxdx_dzdz2 = pb.textureSampleLevel(this.sx_sz_dxdx_dzdz2, this.uv2, 0);
-                this.$l.sx = pb.add(this._sx_sz_dxdx_dzdz0.x, this._sx_sz_dxdx_dzdz1.x, this._sx_sz_dxdx_dzdz2.x);
-                this.$l.sz = pb.add(this._sx_sz_dxdx_dzdz0.y, this._sx_sz_dxdx_dzdz1.y, this._sx_sz_dxdx_dzdz2.y);
-                this.$l.dxdx_dzdz = pb.add(pb.mul(this._sx_sz_dxdx_dzdz0.zw, this.croppinesses.x), pb.mul(this._sx_sz_dxdx_dzdz1.zw, this.croppinesses.y), pb.mul(this._sx_sz_dxdx_dzdz2.zw, this.croppinesses.z));
-                this.$l.slope = pb.vec2(pb.div(this.sx, pb.add(1.0, this.dxdx_dzdz.x)), pb.div(this.sz, pb.add(1.0, this.dxdx_dzdz.y)));
-                this.$l.normal = pb.normalize(pb.vec3(pb.neg(this.slope.x), 1.0, pb.neg(this.slope.y)));
-                // foam
-                this.$l.dxdx_dzdz0 = this._sx_sz_dxdx_dzdz0.zw;
-                this.$l.dxdx_dzdz1 = this._sx_sz_dxdx_dzdz1.zw;
-                this.$l.dxdx_dzdz2 = this._sx_sz_dxdx_dzdz2.zw;
-                this.$l.dxdz0 = pb.textureSampleLevel(this.dx_hy_dz_dxdz0, this.uv0, 0).w;
-                this.$l.dxdz1 = pb.textureSampleLevel(this.dx_hy_dz_dxdz1, this.uv1, 0).w;
-                this.$l.dxdz2 = pb.textureSampleLevel(this.dx_hy_dz_dxdz2, this.uv2, 0).w;
-                this.$l.dxdz = pb.add(pb.mul(this.dxdz0, this.croppinesses.x), pb.mul(this.dxdz1, this.croppinesses.y), pb.mul(this.dxdz2, this.croppinesses.z));
-                this.$l.val = this.det(this.jacobian(this.dxdx_dzdz.x, this.dxdz, this.dxdx_dzdz.y));
-                this.$l.foam = pb.abs(pb.pow(pb.neg(pb.min(0, pb.sub(this.val, this.foamParams.x))), this.foamParams.y));
-                this.$return(pb.vec4(this.normal, this.foam));
-            });
+            this.region = pb.vec4().uniform(0);
+            shadingImpl.setupUniforms(this);
+            waveGenerator.setupUniforms(this);
             pb.main(function() {
-                this.$if(pb.or(pb.any(pb.lessThan(this.$inputs.outXZ, this.regionMin)), pb.any(pb.greaterThan(this.$inputs.outXZ, this.regionMax))), function() {
-                    pb.discard();
-                });
-                this.$l.n = this.getNormalAndFoam(this.$inputs.outXZ);
-                this.$outputs.outColor = impl?.shading(this, this.$inputs.outPos, this.n.xyz, this.n.w) ?? pb.vec4(pb.add(pb.mul(this.n.xyz, 0.5), pb.vec3(0.5)), 1);
-            //this.$outputs.outColor = pb.vec4(pb.fract(this.$inputs.uv0), 0, 1);
+                this.$l.discardable = pb.or(pb.any(pb.lessThan(this.$inputs.outXZ, this.region.xy)), pb.any(pb.greaterThan(this.$inputs.outXZ, this.region.zw)));
+                this.$l.n = waveGenerator.calcFragmentNormalAndFoam(this, this.$inputs.outXZ, this.$inputs.outNormal);
+                this.$outputs.outColor = shadingImpl.shading(this, this.$inputs.outPos, this.n.xyz, this.n.w, this.discardable, waveGenerator) ?? pb.vec4(pb.add(pb.mul(this.n.xyz, 0.5), pb.vec3(0.5)), 1);
             });
         }
     });
 }
-/** @internal */ function createProgramPostFFT2(limit) {
-    return Application.instance.device.buildRenderProgram({
-        vertex (pb) {
-            this.$inputs.position = pb.vec3().attrib('position');
-            pb.main(function() {
-                this.$builtins.position = pb.vec4(this.$inputs.position, 1);
-            });
-        },
-        fragment (pb) {
-            if (!limit || limit === 4) {
-                this.$outputs.dx_hy_dz_dxdz0 = pb.vec4();
-                this.$outputs.sx_sz_dxdx_dzdz0 = pb.vec4();
-                this.$outputs.dx_hy_dz_dxdz1 = pb.vec4();
-                this.$outputs.sx_sz_dxdx_dzdz1 = pb.vec4();
-            }
-            if (!limit || limit === 2) {
-                this.$outputs.dx_hy_dz_dxdz2 = pb.vec4();
-                this.$outputs.sx_sz_dxdx_dzdz2 = pb.vec4();
-            }
+/** @internal */ function createProgramPostFFT2(useComputeShader = false, threadGroupSize, targetFormat = 'rgba32f', limit) {
+    function getComputeFunc(useComputeShader, fmt) {
+        return function(pb) {
             this.N2 = pb.float().uniform(0);
-            if (!limit || limit === 4) {
-                this.ifft0 = pb.tex2D().uniform(0);
-                this.ifft1 = pb.tex2D().uniform(0);
-                this.ifft2 = pb.tex2D().uniform(0);
-                this.ifft3 = pb.tex2D().uniform(0);
-            }
-            if (!limit || limit === 2) {
-                this.ifft4 = pb.tex2D().uniform(0);
-                this.ifft5 = pb.tex2D().uniform(0);
+            if (useComputeShader) {
+                this.output = fmt === 'rgba32f' ? pb.texStorage2DArray.rgba32float().storage(0) : pb.texStorage2DArray.rgba16float().storage(0);
+                this.ifft = pb.tex2DArray().uniform(0);
+            } else {
+                if (!limit || limit === 4) {
+                    this.$outputs.dx_hy_dz_dxdz0 = pb.vec4();
+                    this.$outputs.sx_sz_dxdx_dzdz0 = pb.vec4();
+                    this.$outputs.dx_hy_dz_dxdz1 = pb.vec4();
+                    this.$outputs.sx_sz_dxdx_dzdz1 = pb.vec4();
+                    this.ifft0 = pb.tex2D().uniform(0);
+                    this.ifft1 = pb.tex2D().uniform(0);
+                    this.ifft2 = pb.tex2D().uniform(0);
+                    this.ifft3 = pb.tex2D().uniform(0);
+                }
+                if (!limit || limit === 2) {
+                    this.$outputs.dx_hy_dz_dxdz2 = pb.vec4();
+                    this.$outputs.sx_sz_dxdx_dzdz2 = pb.vec4();
+                    this.ifft4 = pb.tex2D().uniform(0);
+                    this.ifft5 = pb.tex2D().uniform(0);
+                }
             }
             if (pb.getDevice().type === 'webgl') {
                 this.ifftTexSize = pb.vec2().uniform(0);
             }
             pb.main(function() {
-                this.$l.p = pb.float(pb.add(this.$builtins.fragCoord.x, this.$builtins.fragCoord.y));
+                this.$l.fragPos = getFragCoord(this, useComputeShader);
+                this.$l.p = pb.float(pb.add(this.fragPos.x, this.fragPos.y));
                 this.$l.s = pb.sub(pb.mul(pb.sub(1, pb.mod(this.p, 2)), 2), 1);
                 this.$l.m = pb.mul(this.s, this.N2);
                 if (pb.getDevice().type === 'webgl') {
-                    this.$l.uv = pb.div(pb.vec2(this.$builtins.fragCoord.xy), this.ifftTexSize);
+                    this.$l.uv = pb.div(pb.vec2(this.fragPos), this.ifftTexSize);
                     if (!limit || limit === 4) {
                         this.$outputs.dx_hy_dz_dxdz0 = pb.mul(pb.textureSampleLevel(this.ifft0, this.uv, 0), this.m);
                         this.$outputs.sx_sz_dxdx_dzdz0 = pb.mul(pb.textureSampleLevel(this.ifft1, this.uv, 0), this.m);
@@ -159,8 +139,13 @@ import { Application } from '../app.js';
                         this.$outputs.dx_hy_dz_dxdz2 = pb.mul(pb.textureSampleLevel(this.ifft4, this.uv, 0), this.m);
                         this.$outputs.sx_sz_dxdx_dzdz2 = pb.mul(pb.textureSampleLevel(this.ifft5, this.uv, 0), this.m);
                     }
+                } else if (useComputeShader) {
+                    this.$l.uv = pb.ivec2(this.fragPos);
+                    for(let i = 0; i < 6; i++){
+                        pb.textureArrayStore(this.output, this.$builtins.globalInvocationId.xy, i, pb.mul(pb.textureArrayLoad(this.ifft, this.uv, i, 0), this.m));
+                    }
                 } else {
-                    this.$l.uv = pb.ivec2(this.$builtins.fragCoord.xy);
+                    this.$l.uv = pb.ivec2(this.fragPos);
                     if (!limit || limit === 4) {
                         this.$outputs.dx_hy_dz_dxdz0 = pb.mul(pb.textureLoad(this.ifft0, this.uv, 0), this.m);
                         this.$outputs.sx_sz_dxdx_dzdz0 = pb.mul(pb.textureLoad(this.ifft1, this.uv, 0), this.m);
@@ -173,37 +158,59 @@ import { Application } from '../app.js';
                     }
                 }
             });
-        }
-    });
+        };
+    }
+    if (useComputeShader) {
+        return Application.instance.device.buildComputeProgram({
+            workgroupSize: [
+                threadGroupSize,
+                threadGroupSize,
+                1
+            ],
+            compute: getComputeFunc(useComputeShader, targetFormat)
+        });
+    } else {
+        return Application.instance.device.buildRenderProgram({
+            vertex (pb) {
+                this.$inputs.position = pb.vec3().attrib('position');
+                pb.main(function() {
+                    this.$builtins.position = pb.vec4(this.$inputs.position, 1);
+                });
+            },
+            fragment: getComputeFunc(useComputeShader, targetFormat)
+        });
+    }
 }
-/** @internal */ function createProgramHk(limit) {
-    return Application.instance.device.buildRenderProgram({
-        vertex (pb) {
-            this.$inputs.position = pb.vec3().attrib('position');
-            pb.main(function() {
-                this.$builtins.position = pb.vec4(this.$inputs.position, 1);
-            });
-        },
-        fragment (pb) {
-            if (!limit || limit === 4) {
-                this.$outputs.spectrum0 = pb.vec4();
-                this.$outputs.spectrum1 = pb.vec4();
-                this.$outputs.spectrum2 = pb.vec4();
-                this.$outputs.spectrum3 = pb.vec4();
-            }
-            if (!limit || limit === 2) {
-                this.$outputs.spectrum4 = pb.vec4();
-                this.$outputs.spectrum5 = pb.vec4();
+/** @internal */ function createProgramHk(useComputeShader = false, threadGroupSize = 8, targetFormat = 'rgba32f', limit) {
+    function getComputeFunc(useComputeShader = false, fmt) {
+        return function(pb) {
+            if (useComputeShader) {
+                this.spectrum = fmt === 'rgba32f' ? pb.texStorage2DArray.rgba32float().storage(0) : pb.texStorage2DArray.rgba16float().storage(0);
+            } else {
+                if (!limit || limit === 4) {
+                    this.$outputs.spectrum0 = pb.vec4();
+                    this.$outputs.spectrum1 = pb.vec4();
+                    this.$outputs.spectrum2 = pb.vec4();
+                    this.$outputs.spectrum3 = pb.vec4();
+                }
+                if (!limit || limit === 2) {
+                    this.$outputs.spectrum4 = pb.vec4();
+                    this.$outputs.spectrum5 = pb.vec4();
+                }
             }
             this.resolution = pb.int().uniform(0);
             this.sizes = pb.vec4().uniform(0);
             this.t = pb.float().uniform(0);
-            if (!limit || limit === 4) {
-                this.h0Texture0 = pb.tex2D().uniform(0);
-                this.h0Texture1 = pb.tex2D().uniform(0);
-            }
-            if (!limit || limit === 2) {
-                this.h0Texture2 = pb.tex2D().uniform(0);
+            if (useComputeShader) {
+                this.h0Texture = pb.tex2DArray().uniform(0);
+            } else {
+                if (!limit || limit === 4) {
+                    this.h0Texture0 = pb.tex2D().uniform(0);
+                    this.h0Texture1 = pb.tex2D().uniform(0);
+                }
+                if (!limit || limit === 2) {
+                    this.h0Texture2 = pb.tex2D().uniform(0);
+                }
             }
             if (pb.getDevice().type === 'webgl') {
                 this.h0TexSize = pb.vec2().uniform(0);
@@ -286,6 +293,8 @@ import { Application } from '../app.js';
                         this.$l.w = pb.sqrt(pb.mul(this.kLen, this.g));
                         if (pb.getDevice().type === 'webgl') {
                             this.$l.h0Texel = pb.textureSampleLevel(this[`h0Texture${x}`], pb.div(pb.vec2(this.fragCoord), this.h0TexSize), 0);
+                        } else if (useComputeShader) {
+                            this.$l.h0Texel = pb.textureArrayLoad(this.h0Texture, this.fragCoord, x, 0);
                         } else {
                             this.$l.h0Texel = pb.textureLoad(this[`h0Texture${x}`], this.fragCoord, 0);
                         }
@@ -324,46 +333,76 @@ import { Application } from '../app.js';
                 this.part1 = pb.vec4(this.sx_sz.re, this.sx_sz.im, this.dxdx_dzdz.re, this.dxdx_dzdz.im);
             });
             pb.main(function() {
-                this.fragXY = pb.ivec2(this.$builtins.fragCoord.xy);
+                this.fragXY = pb.ivec2(getFragCoord(this, useComputeShader));
                 this.$l.x = pb.vec2(pb.sub(this.fragXY, pb.ivec2(pb.div(this.resolution, 2))));
-                if (!limit || limit === 4) {
-                    this.$l.spectrum0 = pb.vec4();
-                    this.$l.spectrum1 = pb.vec4();
-                    this.$l.spectrum2 = pb.vec4();
-                    this.$l.spectrum3 = pb.vec4();
+                if (useComputeShader || !limit || limit === 4) {
+                    this.$l.s0 = pb.vec4();
+                    this.$l.s1 = pb.vec4();
+                    this.$l.s2 = pb.vec4();
+                    this.$l.s3 = pb.vec4();
                     this.$l.spec0 = this.getSpectrum0(this.x, this.sizes.x, this.fragXY);
                     this.$l.spec1 = this.getSpectrum1(this.x, this.sizes.y, this.fragXY);
-                    this.compressSpectrum(this.spec0, this.spectrum0, this.spectrum1);
-                    this.compressSpectrum(this.spec1, this.spectrum2, this.spectrum3);
-                    this.$outputs.spectrum0 = this.spectrum0;
-                    this.$outputs.spectrum1 = this.spectrum1;
-                    this.$outputs.spectrum2 = this.spectrum2;
-                    this.$outputs.spectrum3 = this.spectrum3;
+                    this.compressSpectrum(this.spec0, this.s0, this.s1);
+                    this.compressSpectrum(this.spec1, this.s2, this.s3);
+                    if (useComputeShader) {
+                        pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 0, this.s0);
+                        pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 1, this.s1);
+                        pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 2, this.s2);
+                        pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 3, this.s3);
+                    } else {
+                        this.$outputs.spectrum0 = this.s0;
+                        this.$outputs.spectrum1 = this.s1;
+                        this.$outputs.spectrum2 = this.s2;
+                        this.$outputs.spectrum3 = this.s3;
+                    }
                 }
-                if (!limit || limit === 2) {
-                    this.$l.spectrum4 = pb.vec4();
-                    this.$l.spectrum5 = pb.vec4();
+                if (useComputeShader || !limit || limit === 2) {
+                    this.$l.s4 = pb.vec4();
+                    this.$l.s5 = pb.vec4();
                     this.$l.spec2 = this.getSpectrum2(this.x, this.sizes.z, this.fragXY);
-                    this.compressSpectrum(this.spec2, this.spectrum4, this.spectrum5);
-                    this.$outputs.spectrum4 = this.spectrum4;
-                    this.$outputs.spectrum5 = this.spectrum5;
+                    this.compressSpectrum(this.spec2, this.s4, this.s5);
+                    if (useComputeShader) {
+                        pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 4, this.s4);
+                        pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 5, this.s5);
+                    } else {
+                        this.$outputs.spectrum4 = this.s4;
+                        this.$outputs.spectrum5 = this.s5;
+                    }
                 }
             });
-        }
-    });
+        };
+    }
+    if (useComputeShader) {
+        return Application.instance.device.buildComputeProgram({
+            workgroupSize: [
+                threadGroupSize,
+                threadGroupSize,
+                1
+            ],
+            compute: getComputeFunc(useComputeShader, targetFormat)
+        });
+    } else {
+        return Application.instance.device.buildRenderProgram({
+            vertex (pb) {
+                this.$inputs.position = pb.vec3().attrib('position');
+                pb.main(function() {
+                    this.$builtins.position = pb.vec4(this.$inputs.position, 1);
+                });
+            },
+            fragment: getComputeFunc(useComputeShader, targetFormat)
+        });
+    }
 }
-/** @internal */ function createProgramH0() {
-    return Application.instance.device.buildRenderProgram({
-        vertex (pb) {
-            this.$inputs.position = pb.vec3().attrib('position');
-            pb.main(function() {
-                this.$builtins.position = pb.vec4(this.$inputs.position, 1);
-            });
-        },
-        fragment (pb) {
-            this.$outputs.spectrum0 = pb.vec4();
-            this.$outputs.spectrum1 = pb.vec4();
-            this.$outputs.spectrum2 = pb.vec4();
+/** @internal */ function createProgramH0(useComputeShader = false, threadGroupSize = 8, targetFormat = 'rgba32f') {
+    function getComputeFunc(useComputeShader = false, fmt) {
+        return function(pb) {
+            if (useComputeShader) {
+                this.spectrum = fmt === 'rgba32f' ? pb.texStorage2DArray.rgba32float().storage(0) : pb.texStorage2DArray.rgba16float().storage(0);
+            } else {
+                this.$outputs.spectrum0 = pb.vec4();
+                this.$outputs.spectrum1 = pb.vec4();
+                this.$outputs.spectrum2 = pb.vec4();
+            }
             this.noise = pb.tex2D().uniform(0);
             this.resolution = pb.int().uniform(0);
             this.wind = pb.vec2().uniform(0);
@@ -405,40 +444,65 @@ import { Application } from '../app.js';
                 this.$return(pb.sqrt(pb.vec4(this.h0k, this.h0k, this.h0mk, this.h0mk)));
             });
             pb.main(function() {
-                this.$l.x = pb.vec2(pb.sub(pb.ivec2(this.$builtins.fragCoord.xy), pb.ivec2(pb.div(this.resolution, 2))));
+                this.$l.x = pb.vec2(pb.sub(pb.ivec2(getFragCoord(this, useComputeShader)), pb.ivec2(pb.div(this.resolution, 2))));
                 this.$l.k = pb.mul(pb.vec2(Math.PI * 2), this.x);
-                this.$l.rnd = this.gauss(pb.ivec2(this.$builtins.fragCoord.xy));
-                this.$outputs.spectrum0 = pb.mul(this.phillips(pb.div(this.k, this.cascade0.x), this.cascade0.y, this.cascade0.z, this.cascade0.w), this.rnd);
-                this.$outputs.spectrum1 = pb.mul(this.phillips(pb.div(this.k, this.cascade1.x), this.cascade1.y, this.cascade1.z, this.cascade1.w), this.rnd);
-                this.$outputs.spectrum2 = pb.mul(this.phillips(pb.div(this.k, this.cascade2.x), this.cascade2.y, this.cascade2.z, this.cascade2.w), this.rnd);
+                this.$l.rnd = this.gauss(pb.ivec2(getFragCoord(this, useComputeShader)));
+                if (useComputeShader) {
+                    pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 0, pb.mul(this.phillips(pb.div(this.k, this.cascade0.x), this.cascade0.y, this.cascade0.z, this.cascade0.w), this.rnd));
+                    pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 1, pb.mul(this.phillips(pb.div(this.k, this.cascade1.x), this.cascade1.y, this.cascade1.z, this.cascade1.w), this.rnd));
+                    pb.textureArrayStore(this.spectrum, this.$builtins.globalInvocationId.xy, 2, pb.mul(this.phillips(pb.div(this.k, this.cascade2.x), this.cascade2.y, this.cascade2.z, this.cascade2.w), this.rnd));
+                } else {
+                    this.$outputs.spectrum0 = pb.mul(this.phillips(pb.div(this.k, this.cascade0.x), this.cascade0.y, this.cascade0.z, this.cascade0.w), this.rnd);
+                    this.$outputs.spectrum1 = pb.mul(this.phillips(pb.div(this.k, this.cascade1.x), this.cascade1.y, this.cascade1.z, this.cascade1.w), this.rnd);
+                    this.$outputs.spectrum2 = pb.mul(this.phillips(pb.div(this.k, this.cascade2.x), this.cascade2.y, this.cascade2.z, this.cascade2.w), this.rnd);
+                }
             });
-        }
-    });
+        };
+    }
+    if (useComputeShader) {
+        return Application.instance.device.buildComputeProgram({
+            workgroupSize: [
+                threadGroupSize,
+                threadGroupSize,
+                1
+            ],
+            compute: getComputeFunc(useComputeShader, targetFormat)
+        });
+    } else {
+        return Application.instance.device.buildRenderProgram({
+            vertex (pb) {
+                this.$inputs.position = pb.vec3().attrib('position');
+                pb.main(function() {
+                    this.$builtins.position = pb.vec4(this.$inputs.position, 1);
+                });
+            },
+            fragment: getComputeFunc(useComputeShader, targetFormat)
+        });
+    }
 }
-/** @internal */ function createProgramFFT2V(limit) {
-    return Application.instance.device.buildRenderProgram({
-        vertex (pb) {
-            this.$inputs.position = pb.vec3().attrib('position');
-            pb.main(function() {
-                this.$builtins.position = pb.vec4(this.$inputs.position, 1);
-            });
-        },
-        fragment (pb) {
-            if (!limit || limit === 4) {
-                this.$outputs.ifft0 = pb.vec4();
-                this.$outputs.ifft1 = pb.vec4();
-                this.$outputs.ifft2 = pb.vec4();
-                this.$outputs.ifft3 = pb.vec4();
-                this.spectrum0 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum1 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum2 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum3 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-            }
-            if (!limit || limit === 2) {
-                this.$outputs.ifft4 = pb.vec4();
-                this.$outputs.ifft5 = pb.vec4();
-                this.spectrum4 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum5 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+/** @internal */ function createProgramFFT2V(useComputeShader = false, threadGroupSize, targetFormat = 'rgba32f', limit) {
+    function getComputeFunc(useComputeShader, fmt) {
+        return function(pb) {
+            if (useComputeShader) {
+                this.spectrum = pb.tex2DArray().sampleType('unfilterable-float').uniform(0);
+                this.ifft = fmt === 'rgba32f' ? pb.texStorage2DArray.rgba32float().storage(0) : pb.texStorage2DArray.rgba16float().storage(0);
+            } else {
+                if (!limit || limit === 4) {
+                    this.$outputs.ifft0 = pb.vec4();
+                    this.$outputs.ifft1 = pb.vec4();
+                    this.$outputs.ifft2 = pb.vec4();
+                    this.$outputs.ifft3 = pb.vec4();
+                    this.spectrum0 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum1 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum2 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum3 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                }
+                if (!limit || limit === 2) {
+                    this.$outputs.ifft4 = pb.vec4();
+                    this.$outputs.ifft5 = pb.vec4();
+                    this.spectrum4 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum5 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                }
             }
             this.butterfly = pb.tex2D().sampleType('unfilterable-float').uniform(0);
             if (pb.getDevice().type === 'webgl') {
@@ -481,6 +545,9 @@ import { Application } from '../app.js';
                     if (pb.getDevice().type === 'webgl') {
                         this.$l.texelA = pb.textureSampleLevel(this[`spectrum${x}`], pb.div(pb.vec2(pb.float(this.x), this.texelButt.b), this.texSize.xy), 0);
                         this.$l.texelB = pb.textureSampleLevel(this[`spectrum${x}`], pb.div(pb.vec2(pb.float(this.x), this.texelButt.a), this.texSize.xy), 0);
+                    } else if (useComputeShader) {
+                        this.$l.texelA = pb.textureArrayLoad(this.spectrum, pb.ivec2(this.x, pb.int(this.texelButt.b)), x, 0);
+                        this.$l.texelB = pb.textureArrayLoad(this.spectrum, pb.ivec2(this.x, pb.int(this.texelButt.a)), x, 0);
                     } else {
                         this.$l.texelA = pb.textureLoad(this[`spectrum${x}`], pb.ivec2(this.x, pb.int(this.texelButt.b)), 0);
                         this.$l.texelB = pb.textureLoad(this[`spectrum${x}`], pb.ivec2(this.x, pb.int(this.texelButt.a)), 0);
@@ -496,51 +563,79 @@ import { Application } from '../app.js';
                 });
             }
             pb.main(function() {
-                this.$l.x = pb.int(this.$builtins.fragCoord.x);
-                this.$l.y = pb.int(this.$builtins.fragCoord.y);
+                this.$l.x = pb.int(getFragCoord(this, useComputeShader).x);
+                this.$l.y = pb.int(getFragCoord(this, useComputeShader).y);
                 if (pb.getDevice().type === 'webgl') {
                     this.$l.texelButt = pb.textureSampleLevel(this.butterfly, pb.div(pb.vec2(pb.float(this.phase), pb.float(this.y)), this.texSize.zw), 0);
                 } else {
                     this.$l.texelButt = pb.textureLoad(this.butterfly, pb.ivec2(this.phase, this.y), 0);
                 }
+                if (useComputeShader) {
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 0, this.twiddle0(this.texelButt, this.x));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 1, this.twiddle1(this.texelButt, this.x));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 2, this.twiddle2(this.texelButt, this.x));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 3, this.twiddle3(this.texelButt, this.x));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 4, this.twiddle4(this.texelButt, this.x));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 5, this.twiddle5(this.texelButt, this.x));
+                } else {
+                    if (!limit || limit === 4) {
+                        this.$outputs.ifft0 = this.twiddle0(this.texelButt, this.x);
+                        this.$outputs.ifft1 = this.twiddle1(this.texelButt, this.x);
+                        this.$outputs.ifft2 = this.twiddle2(this.texelButt, this.x);
+                        this.$outputs.ifft3 = this.twiddle3(this.texelButt, this.x);
+                    }
+                    if (!limit || limit === 2) {
+                        this.$outputs.ifft4 = this.twiddle4(this.texelButt, this.x);
+                        this.$outputs.ifft5 = this.twiddle5(this.texelButt, this.x);
+                    }
+                }
+            });
+        };
+    }
+    if (useComputeShader) {
+        return Application.instance.device.buildComputeProgram({
+            workgroupSize: [
+                threadGroupSize,
+                threadGroupSize,
+                1
+            ],
+            compute: getComputeFunc(useComputeShader, targetFormat)
+        });
+    } else {
+        return Application.instance.device.buildRenderProgram({
+            vertex (pb) {
+                this.$inputs.position = pb.vec3().attrib('position');
+                pb.main(function() {
+                    this.$builtins.position = pb.vec4(this.$inputs.position, 1);
+                });
+            },
+            fragment: getComputeFunc(useComputeShader, targetFormat)
+        });
+    }
+}
+/** @internal */ function createProgramFFT2H(useComputeShader = false, threadGroupSize, targetFormat = 'rgba32f', limit) {
+    function getComputeFunc(useComputeShader, fmt) {
+        return function(pb) {
+            if (useComputeShader) {
+                this.spectrum = pb.tex2DArray().sampleType('unfilterable-float').uniform(0);
+                this.ifft = fmt === 'rgba32f' ? pb.texStorage2DArray.rgba32float().storage(0) : pb.texStorage2DArray.rgba16float().storage(0);
+            } else {
                 if (!limit || limit === 4) {
-                    this.$outputs.ifft0 = this.twiddle0(this.texelButt, this.x);
-                    this.$outputs.ifft1 = this.twiddle1(this.texelButt, this.x);
-                    this.$outputs.ifft2 = this.twiddle2(this.texelButt, this.x);
-                    this.$outputs.ifft3 = this.twiddle3(this.texelButt, this.x);
+                    this.$outputs.ifft0 = pb.vec4();
+                    this.$outputs.ifft1 = pb.vec4();
+                    this.$outputs.ifft2 = pb.vec4();
+                    this.$outputs.ifft3 = pb.vec4();
+                    this.spectrum0 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum1 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum2 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum3 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
                 }
                 if (!limit || limit === 2) {
-                    this.$outputs.ifft4 = this.twiddle4(this.texelButt, this.x);
-                    this.$outputs.ifft5 = this.twiddle5(this.texelButt, this.x);
+                    this.$outputs.ifft4 = pb.vec4();
+                    this.$outputs.ifft5 = pb.vec4();
+                    this.spectrum4 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
+                    this.spectrum5 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
                 }
-            });
-        }
-    });
-}
-/** @internal */ function createProgramFFT2H(limit) {
-    return Application.instance.device.buildRenderProgram({
-        vertex (pb) {
-            this.$inputs.position = pb.vec3().attrib('position');
-            pb.main(function() {
-                this.$builtins.position = pb.vec4(this.$inputs.position, 1);
-            });
-        },
-        fragment (pb) {
-            if (!limit || limit === 4) {
-                this.$outputs.ifft0 = pb.vec4();
-                this.$outputs.ifft1 = pb.vec4();
-                this.$outputs.ifft2 = pb.vec4();
-                this.$outputs.ifft3 = pb.vec4();
-                this.spectrum0 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum1 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum2 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum3 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-            }
-            if (!limit || limit === 2) {
-                this.$outputs.ifft4 = pb.vec4();
-                this.$outputs.ifft5 = pb.vec4();
-                this.spectrum4 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
-                this.spectrum5 = pb.tex2D().sampleType('unfilterable-float').uniform(0);
             }
             this.butterfly = pb.tex2D().sampleType('unfilterable-float').uniform(0);
             this.phase = pb.int().uniform(0);
@@ -583,6 +678,9 @@ import { Application } from '../app.js';
                     if (pb.getDevice().type === 'webgl') {
                         this.$l.texelA = pb.textureSampleLevel(this[`spectrum${x}`], pb.div(pb.vec2(this.texelButt.b, pb.float(this.y)), this.texSize.xy), 0);
                         this.$l.texelB = pb.textureSampleLevel(this[`spectrum${x}`], pb.div(pb.vec2(this.texelButt.a, pb.float(this.y)), this.texSize.xy), 0);
+                    } else if (useComputeShader) {
+                        this.$l.texelA = pb.textureArrayLoad(this.spectrum, pb.ivec2(pb.int(this.texelButt.b), this.y), x, 0);
+                        this.$l.texelB = pb.textureArrayLoad(this.spectrum, pb.ivec2(pb.int(this.texelButt.a), this.y), x, 0);
                     } else {
                         this.$l.texelA = pb.textureLoad(this[`spectrum${x}`], pb.ivec2(pb.int(this.texelButt.b), this.y), 0);
                         this.$l.texelB = pb.textureLoad(this[`spectrum${x}`], pb.ivec2(pb.int(this.texelButt.a), this.y), 0);
@@ -598,27 +696,56 @@ import { Application } from '../app.js';
                 });
             }
             pb.main(function() {
-                this.$l.x = pb.int(this.$builtins.fragCoord.x);
-                this.$l.y = pb.int(this.$builtins.fragCoord.y);
+                this.$l.x = pb.int(getFragCoord(this, useComputeShader).x);
+                this.$l.y = pb.int(getFragCoord(this, useComputeShader).y);
                 if (pb.getDevice().type === 'webgl') {
                     this.$l.texelButt = pb.textureSampleLevel(this.butterfly, pb.div(pb.vec2(pb.float(this.phase), pb.float(this.x)), this.texSize.zw), 0);
                 } else {
                     this.$l.texelButt = pb.textureLoad(this.butterfly, pb.ivec2(this.phase, this.x), 0);
                 }
-                if (!limit || limit === 4) {
-                    this.$outputs.ifft0 = this.twiddle0(this.texelButt, this.y);
-                    this.$outputs.ifft1 = this.twiddle1(this.texelButt, this.y);
-                    this.$outputs.ifft2 = this.twiddle2(this.texelButt, this.y);
-                    this.$outputs.ifft3 = this.twiddle3(this.texelButt, this.y);
-                }
-                if (!limit || limit === 2) {
-                    this.$outputs.ifft4 = this.twiddle4(this.texelButt, this.y);
-                    this.$outputs.ifft5 = this.twiddle5(this.texelButt, this.y);
+                if (useComputeShader) {
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 0, this.twiddle0(this.texelButt, this.y));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 1, this.twiddle1(this.texelButt, this.y));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 2, this.twiddle2(this.texelButt, this.y));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 3, this.twiddle3(this.texelButt, this.y));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 4, this.twiddle4(this.texelButt, this.y));
+                    pb.textureArrayStore(this.ifft, this.$builtins.globalInvocationId.xy, 5, this.twiddle5(this.texelButt, this.y));
+                } else {
+                    if (!limit || limit === 4) {
+                        this.$outputs.ifft0 = this.twiddle0(this.texelButt, this.y);
+                        this.$outputs.ifft1 = this.twiddle1(this.texelButt, this.y);
+                        this.$outputs.ifft2 = this.twiddle2(this.texelButt, this.y);
+                        this.$outputs.ifft3 = this.twiddle3(this.texelButt, this.y);
+                    }
+                    if (!limit || limit === 2) {
+                        this.$outputs.ifft4 = this.twiddle4(this.texelButt, this.y);
+                        this.$outputs.ifft5 = this.twiddle5(this.texelButt, this.y);
+                    }
                 }
             });
-        }
-    });
+        };
+    }
+    if (useComputeShader) {
+        return Application.instance.device.buildComputeProgram({
+            workgroupSize: [
+                threadGroupSize,
+                threadGroupSize,
+                1
+            ],
+            compute: getComputeFunc(useComputeShader, targetFormat)
+        });
+    } else {
+        return Application.instance.device.buildRenderProgram({
+            vertex (pb) {
+                this.$inputs.position = pb.vec3().attrib('position');
+                pb.main(function() {
+                    this.$builtins.position = pb.vec4(this.$inputs.position, 1);
+                });
+            },
+            fragment: getComputeFunc(useComputeShader, targetFormat)
+        });
+    }
 }
 
-export { createProgramFFT2H, createProgramFFT2V, createProgramH0, createProgramHk, createProgramOcean, createProgramPostFFT2 };
+export { WaterShaderImpl, createProgramFFT2H, createProgramFFT2V, createProgramH0, createProgramHk, createProgramOcean, createProgramPostFFT2 };
 //# sourceMappingURL=water.js.map