First take at gpu particle systems with compute shaders

.gitignore

@@ -169,6 +169,7 @@ node_modules
 !Playground/libs/*.d.ts
 *.fragment.ts
 *.vertex.ts
+*.compute.ts
 **/ShadersInclude/**/*.ts
 
 # Split declaration file

.vscode/settings.json

@@ -28,11 +28,13 @@
         "proceduralTexturesLibrary/**/*.js.map": true,
         "serielazers/**/*.js.map": true,
         "**/*.js.fx": true,
+        "**/*.js.wgsl": true,
         "**/*.js": {
             "when": "$(basename).ts"
         },
         "**/*.fragment.ts": true,
         "**/*.vertex.ts": true,
+        "**/*.compute.ts": true,
         "**/ShadersInclude/**/*.ts": true
     },
     "files.associations": {
@@ -52,6 +54,7 @@
         "dist/**/*.d.ts": true,
         "**/*.fragment.ts": true,
         "**/*.vertex.ts": true,
+        "**/*.compute.ts": true,
         "**/ShadersInclude/**/*.ts": true,
         "assets": true,
         "**/babylonWeb**": true,

Tools/Config/config.js

@@ -124,6 +124,7 @@ allModules.map(function(module) {
         const shaderTSGlob = [
             srcDirectory.replace(/\\/g, "/") + "/**/*.fragment.ts",
             srcDirectory.replace(/\\/g, "/") + "/**/*.vertex.ts",
+            srcDirectory.replace(/\\/g, "/") + "/**/*.compute.ts",
             srcDirectory.replace(/\\/g, "/") + "/**/ShadersInclude/*.ts",
         ];
         const tsGlob = srcDirectory.replace(/\\/g, "/") + "/**/*.ts*";

Tools/Gulp/helpers/gulp-processShaders.js

@@ -24,7 +24,7 @@ Effect.##SHADERSTORE_PLACEHOLDER##[name] = shader;
 function getShaderName(filename) {
     let parts = filename.split('.');
     if (parts[1] !== 'fx') {
-        return parts[0] + (parts[1] === 'fragment' ? 'Pixel' : 'Vertex') + "Shader";
+        return parts[0] + (parts[1] === 'fragment' ? 'Pixel' : parts[1] === 'compute' ? 'Compute' : 'Vertex') + "Shader";
     } else {
         return parts[0];
     }
@@ -82,7 +82,7 @@ function main(isCore) {
             const normalized = path.normalize(file.path);
             const directory = path.dirname(normalized);
             const shaderName = getShaderName(filename);
-            const tsFilename = filename.replace('.fx', '.ts');
+            const tsFilename = filename.replace('.fx', '.ts').replace('.wgsl', '.ts');
             let fxData = file.contents.toString();
 
             // Remove Trailing whitespace...

Tools/Gulp/tasks/gulpTasks-importLint.js

@@ -23,7 +23,7 @@ var buildShaders = function(settings) {
  * ImportLint all typescript files from the src directory.
  */
 var importLintLibrary = function(settings) {
-    const fxFilter = filter(['**', '!**/*.fragment.ts', '!**/*.vertex.ts', '!**/ShadersInclude/**'], { restore: false });
+    const fxFilter = filter(['**', '!**/*.fragment.ts', '!**/*.vertex.ts', '!**/*.compute.ts', '!**/ShadersInclude/**'], { restore: false });
     return gulp.src(settings.computed.tsGlob)
         .pipe(fxFilter)
         .pipe(validateImports({

Tools/WebpackPlugins/babylonWebpackConfig.js

@@ -66,7 +66,8 @@ module.exports = function defaultConfig(options) {
             new webpack.WatchIgnorePlugin([
                 /\.js$/,
                 /\.d\.ts$/,
-                /\.fx$/
+                /\.fx$/,
+                /\.wgsl$/
             ]),
             ...options.plugins
         ]

src/Shaders/gpuRenderParticles.fragment.fx

@@ -1,11 +1,9 @@
-#version 300 es
+precision highp float;
 
 uniform sampler2D diffuseSampler;
 
-in vec2 vUV;
-in vec4 vColor;
-
-out vec4 outFragColor;
+varying vec2 vUV;
+varying vec4 vColor;
 
 #include<clipPlaneFragmentDeclaration2> 
 
@@ -18,21 +16,21 @@ out vec4 outFragColor;
 void main() {
 	#include<clipPlaneFragment> 
 	vec4 textureColor = texture(diffuseSampler, vUV);
-  	outFragColor = textureColor * vColor;
+  	gl_FragColor = textureColor * vColor;
 
 	#ifdef BLENDMULTIPLYMODE
 	float alpha = vColor.a * textureColor.a;
-	outFragColor.rgb = outFragColor.rgb * alpha + vec3(1.0) * (1.0 - alpha);	
+	gl_FragColor.rgb = gl_FragColor.rgb * alpha + vec3(1.0) * (1.0 - alpha);	
 	#endif	  
 
 // Apply image processing if relevant. As this applies in linear space, 
 // We first move from gamma to linear.
 #ifdef IMAGEPROCESSINGPOSTPROCESS
-	outFragColor.rgb = toLinearSpace(outFragColor.rgb);
+	gl_FragColor.rgb = toLinearSpace(gl_FragColor.rgb);
 #else
 	#ifdef IMAGEPROCESSING
-		outFragColor.rgb = toLinearSpace(outFragColor.rgb);
-		outFragColor = applyImageProcessing(outFragColor);
+		gl_FragColor.rgb = toLinearSpace(gl_FragColor.rgb);
+		gl_FragColor = applyImageProcessing(gl_FragColor);
 	#endif
 #endif
 }

src/Shaders/gpuRenderParticles.vertex.fx

@@ -1,4 +1,4 @@
-#version 300 es
+precision highp float;
 
 uniform mat4 view;
 uniform mat4 projection;
@@ -9,26 +9,26 @@ uniform mat4 emitterWM;
 #endif
 
 // Particles state
-in vec3 position;
-in float age;
-in float life;
-in vec3 size;
+attribute vec3 position;
+attribute float age;
+attribute float life;
+attribute vec3 size;
 #ifndef BILLBOARD
-in vec3 initialDirection;
+attribute vec3 initialDirection;
 #endif
 #ifdef BILLBOARDSTRETCHED
-in vec3 direction;
+attribute vec3 direction;
 #endif
-in float angle;
+attribute float angle;
 #ifdef ANIMATESHEET
-in float cellIndex;
+attribute float cellIndex;
 #endif
-in vec2 offset;
-in vec2 uv;
+attribute vec2 offset;
+attribute vec2 uv;
 
-out vec2 vUV;
-out vec4 vColor;
-out vec3 vPositionW;
+varying vec2 vUV;
+varying vec4 vColor;
+varying vec3 vPositionW;
 
 #if defined(BILLBOARD) && !defined(BILLBOARDY) && !defined(BILLBOARDSTRETCHED)
 uniform mat4 invView;
@@ -40,7 +40,7 @@ uniform mat4 invView;
 uniform sampler2D colorGradientSampler;
 #else
 uniform vec4 colorDead;
-in vec4 color;
+attribute vec4 color;
 #endif
 
 #ifdef ANIMATESHEET

src/Shaders/gpuUpdateParticles.compute.fx

@@ -0,0 +1,82 @@
+struct Particle {
+    position : vec3<f32>;
+    #ifdef CUSTOMEMITTER
+        initialPosition : vec3<f32>;
+    #endif
+    age : f32;
+    life : f32;
+    seed : vec4<f32>;
+    size : vec3<f32>;
+    #ifndef COLORGRADIENTS
+        color : vec4<f32>;
+    #endif
+    direction : vec3<f32>;
+    #ifndef BILLBOARD
+        initialDirection : vec3<f32>;
+    #endif
+    #ifdef ANGULARSPEEDGRADIENTS
+        angle : f32;
+    #else
+        angle : vec2<f32>;
+    #endif
+    #ifdef ANIMATESHEET
+        cellIndex : f32;
+        #ifdef ANIMATESHEETRANDOMSTART
+            cellStartOffset : f32;
+        #endif
+    #endif
+    #ifdef NOISE
+        noiseCoordinates1 : vec3<f32>;
+        noiseCoordinates2 : vec3<f32>;
+    #endif
+};
+[[block]] struct SimParams {
+    numParticles: u32;
+};
+[[block]] struct Particles {
+    particles : array<Particle>;
+};
+
+[[binding(0), group(0)]] var<uniform> params : SimParams;
+[[binding(1), group(0)]] var<storage> particlesIn : [[access(read)]] Particles;
+[[binding(2), group(0)]] var<storage> particlesOut : [[access(write)]] Particles;
+
+[[stage(compute), workgroup_size(64)]]
+fn main([[builtin(global_invocation_id)]] GlobalInvocationID : vec3<u32>) {
+    let index : u32 = GlobalInvocationID.x;
+
+    if (index >= params.numParticles) {
+        return;
+    }
+
+    particlesOut.particles[index].position = particlesIn.particles[index].position;
+    #ifdef CUSTOMEMITTER
+        particlesOut.particles[index].initialPosition = particlesIn.particles[index].initialPosition;
+    #endif
+    particlesOut.particles[index].age = particlesIn.particles[index].age;
+    particlesOut.particles[index].life = particlesIn.particles[index].life;
+    particlesOut.particles[index].seed = particlesIn.particles[index].seed;
+    particlesOut.particles[index].size = particlesIn.particles[index].size;
+    #ifndef COLORGRADIENTS
+        particlesOut.particles[index].color = particlesIn.particles[index].color;
+    #endif
+    particlesOut.particles[index].direction = particlesIn.particles[index].direction;
+    #ifndef BILLBOARD
+        particlesOut.particles[index].initialDirection = particlesIn.particles[index].initialDirection;
+    #endif
+    #ifdef ANGULARSPEEDGRADIENTS
+        particlesOut.particles[index].angle = particlesIn.particles[index].angle;
+    #else
+        particlesOut.particles[index].angle = particlesIn.particles[index].angle;
+    #endif
+    #ifdef ANIMATESHEET
+        particlesOut.particles[index].cellIndex = particlesIn.particles[index].cellIndex;
+        #ifdef ANIMATESHEETRANDOMSTART
+            particlesOut.particles[index].cellStartOffset = particlesIn.particles[index].cellStartOffset;
+        #endif
+    #endif
+    #ifdef NOISE
+        particlesOut.particles[index].noiseCoordinates1 = particlesIn.particles[index].noiseCoordinates1;
+        particlesOut.particles[index].noiseCoordinates2 = particlesIn.particles[index].noiseCoordinates2;
+    #endif
+}