@woosh/meep-engine 2.33.24 → 2.33.25

package/engine/graphics/particles/particular/engine/renderers/billboard/ParticleBillboardMaterial.js

@@ -1,8 +1,141 @@
-import { AddEquation, CustomBlending, Matrix4, OneFactor, OneMinusSrcAlphaFactor, ShaderMaterial } from "three";
+import {
+    AddEquation,
+    CustomBlending,
+    GLSL3,
+    Matrix4,
+    OneFactor,
+    OneMinusSrcAlphaFactor,
+    ShaderMaterial,
+    UniformsLib,
+    UniformsUtils
+} from "three";
 import { Vector2 as ThreeVector2 } from "three/src/math/Vector2.js";
 
 const DEPTH_ERROR_MARGIN = 0.0001;
 
+const CHUNK_LAMBERT_LIGHTING = `
+vec3 diffuse = vec3( 1.0 );
+
+GeometricContext geometry;
+geometry.position = mvPosition.xyz;
+geometry.normal = normalize( transformedNormal );
+geometry.viewDir = ( isOrthographic ) ? vec3( 0, 0, 1 ) : normalize( -mvPosition.xyz );
+
+GeometricContext backGeometry;
+backGeometry.position = geometry.position;
+backGeometry.normal = -geometry.normal;
+backGeometry.viewDir = geometry.viewDir;
+
+vLightFront = vec3( 0.0 );
+vIndirectFront = vec3( 0.0 );
+#ifdef DOUBLE_SIDED
+	vLightBack = vec3( 0.0 );
+	vIndirectBack = vec3( 0.0 );
+#endif
+
+IncidentLight directLight;
+float dotNL;
+vec3 directLightColor_Diffuse;
+
+vIndirectFront += getAmbientLightIrradiance( ambientLightColor );
+
+vIndirectFront += getLightProbeIrradiance( lightProbe, geometry.normal );
+
+#ifdef DOUBLE_SIDED
+
+	vIndirectBack += getAmbientLightIrradiance( ambientLightColor );
+
+	vIndirectBack += getLightProbeIrradiance( lightProbe, backGeometry.normal );
+
+#endif
+
+#if NUM_POINT_LIGHTS > 0
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_POINT_LIGHTS; i ++ ) {
+
+		getPointLightInfo( pointLights[ i ], geometry, directLight );
+
+		dotNL = dot( geometry.normal, directLight.direction );
+		directLightColor_Diffuse = directLight.color;
+
+		vLightFront += saturate( dotNL ) * directLightColor_Diffuse;
+
+		#ifdef DOUBLE_SIDED
+
+			vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;
+
+		#endif
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if NUM_SPOT_LIGHTS > 0
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_SPOT_LIGHTS; i ++ ) {
+
+		getSpotLightInfo( spotLights[ i ], geometry, directLight );
+
+		dotNL = dot( geometry.normal, directLight.direction );
+		directLightColor_Diffuse = directLight.color;
+
+		vLightFront += saturate( dotNL ) * directLightColor_Diffuse;
+
+		#ifdef DOUBLE_SIDED
+
+			vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;
+
+		#endif
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if NUM_DIR_LIGHTS > 0
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_DIR_LIGHTS; i ++ ) {
+
+		getDirectionalLightInfo( directionalLights[ i ], geometry, directLight );
+
+		dotNL = dot( geometry.normal, directLight.direction );
+		directLightColor_Diffuse = directLight.color;
+
+		vLightFront += saturate( dotNL ) * directLightColor_Diffuse;
+
+		#ifdef DOUBLE_SIDED
+
+			vLightBack += saturate( - dotNL ) * directLightColor_Diffuse;
+
+		#endif
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+
+#if NUM_HEMI_LIGHTS > 0
+
+	#pragma unroll_loop_start
+	for ( int i = 0; i < NUM_HEMI_LIGHTS; i ++ ) {
+
+		vIndirectFront += getHemisphereLightIrradiance( hemisphereLights[ i ], geometry.normal );
+
+		#ifdef DOUBLE_SIDED
+
+			vIndirectBack += getHemisphereLightIrradiance( hemisphereLights[ i ], backGeometry.normal );
+
+		#endif
+
+	}
+	#pragma unroll_loop_end
+
+#endif
+`;
+
 function make_vertex_shader() {
     return `
                 uniform float cameraNear;
@@ -23,6 +156,29 @@ function make_vertex_shader() {
                 varying vec2 vRotationMultiplier;
                 varying float vBlending;
                 
+                
+                #if defined(LIGHTS_ENABLED)
+                    #include <common>
+                    #include <bsdfs>
+                    #include <lights_pars_begin>
+                    
+                    struct LambertMaterial {
+                        vec3 diffuseColor;
+                    };
+                    
+                    void RE_Direct_Lambert( const in IncidentLight directLight, const in GeometricContext geometry, const in LambertMaterial material, inout ReflectedLight reflectedLight ) {
+                        vec3 irradiance = directLight.color;
+                        reflectedLight.directDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );
+                    }
+                    
+                    void RE_IndirectDiffuse_Lambert( const in vec3 irradiance, const in GeometricContext geometry, const in LambertMaterial material, inout ReflectedLight reflectedLight ) {
+                        reflectedLight.indirectDiffuse += irradiance * BRDF_Lambert( material.diffuseColor );
+                    }
+                    
+                    #define RE_Direct				RE_Direct_Lambert
+                    #define RE_IndirectDiffuse		RE_IndirectDiffuse_Lambert
+                #endif
+                
                 void main() {
                    
                     vColor = color;
@@ -32,9 +188,20 @@ function make_vertex_shader() {
                     
                     mat4 modelViewProjectionMatrix = projectionMatrix * modelViewMatrix;
                                                     
+                    vec3 transformed = position;
+                    
                     vec4 position4 = vec4( position, 1.0 );
-                                                    
+                    
+                    #if defined(LIGHTS_ENABLED)
+                        vec4 mvPosition = modelViewMatrix * position4;
+                        vec3 vViewPosition = -mvPosition.xyz;
+                        
+                        vec3 transformedNormal = vec3(0.0,0.0,1.0);
+                    #else
+                    #endif
+                    
                     gl_Position = modelViewProjectionMatrix * position4;
+                                                    
                     
                     float rotationGlobal = rotation;
                     
@@ -59,18 +226,48 @@ function make_vertex_shader() {
                     
                     vRotationMultiplier = vec2( cos(rotationGlobal),sin(rotationGlobal) );
                     
-                    float radius = vSize/2.0;
+                    float radius = vSize * 0.5;
                     
+                    float projected_radius = resolution.y * projectionMatrix[1][1] * radius / gl_Position.w;;
+                                    
                     #ifdef DEPTH_SOFT_ENABLED
                     
-                        vFadeDistance = 1.0 / radius;
+                        vFadeDistance =  1.0 / radius;
                     
                     #endif
-                                    
-                    gl_PointSize = resolution.y * projectionMatrix[1][1] * radius / gl_Position.w;
+                    
+                    gl_PointSize = projected_radius;
+                
+                    #if defined(LIGHTS_ENABLED)
+                        vec3 vLightFront;
+                        vec3 vIndirectFront;
+                        
+                        #include <worldpos_vertex>
+                        ${CHUNK_LAMBERT_LIGHTING}
+                        
+                        LambertMaterial material = LambertMaterial(vColor.rgb);
+                        
+                        ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
+                        vec3 totalEmissiveRadiance = vec3(0.0);
+                        
+                        reflectedLight.indirectDiffuse += vIndirectFront;
+                        reflectedLight.indirectDiffuse *= BRDF_Lambert( vColor.rgb );
+                        
+                        reflectedLight.directDiffuse = vLightFront;
+                        reflectedLight.directDiffuse *= BRDF_Lambert( vColor.rgb ); // shadowmask goes here
+                        
+                        //@injection_point FORWARD_PLUS:accumulation
+                        
+                        vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + totalEmissiveRadiance;
+                        
+                        vColor.rgb = outgoingLight;
+                    #endif
+                    
                 }`;
 }
 
+//${CHUNK_LAMBERT_LIGHTING}
+//#include <lights_lambert_vertex>
 function make_fragment_shader() {
     return `
                 uniform sampler2D tSpriteAtlas;
@@ -88,6 +285,9 @@ function make_fragment_shader() {
                 varying vec2 vRotationMultiplier;
                 varying float vBlending;
                 
+                
+                out highp vec4 pc_fragColor;
+                
                 float depthToLinear( float z ) {
                     float f = cameraFar;
                     float n = cameraNear;
@@ -163,7 +363,7 @@ function make_fragment_shader() {
                         discard;
                     }
                     
-                    vec4 texel = spriteColor *vColor;
+                    vec4 texel = spriteColor * vColor;
                     
                     // premultiply alpha
                     texel.xyz *= texel.a;
@@ -180,68 +380,78 @@ function make_fragment_shader() {
                     
                     #endif
                                     
-                    gl_FragColor = texel;
+                    pc_fragColor = texel;
                     
                 }`;
 }
 
-/*
-NOTES:
- - To implement per-particle blend modes, we need to have access to what we're blending on to, that is - the color buffer
-   Having the color buffer - we can do just about any kind of a blend
-
- - Support animation by adding animation sprite sheet to the main sprite atlas, record resolution of the sheet (in frames X,Y) and interpolate over tiles based on some parameter
+/**
+ * NOTES:
+ * - To implement per-particle blend modes, we need to have access to what we're blending on to, that is - the color buffer
+ *   Having the color buffer - we can do just about any kind of a blend
+ *
+ * - Support animation by adding animation sprite sheet to the main sprite atlas, record resolution of the sheet (in frames X,Y) and interpolate over tiles based on some parameter
+ * @param {boolean} [lights]
  */
-export function make_particle_billboard_shader() {
+export function make_particle_billboard_shader({ lights = false } = {}) {
+    let uniforms = {
+        tSpriteAtlas: {
+            type: 't',
+            value: null
+        },
+        cameraNear: {
+            type: 'f',
+            value: 1,
+        },
+        cameraFar: {
+            type: 'f',
+            value: 1,
+        },
+        tDepth: {
+            type: 't',
+            value: null
+        },
+        tColor: {
+            type: 't',
+            value: null
+        },
+        modelViewMatrix: {
+            type: 'm4',
+            value: new Matrix4()
+        },
+        projectionMatrix: {
+            type: 'm4',
+            value: new Matrix4()
+        },
+        resolution: {
+            type: 'v2',
+            value: new ThreeVector2()
+        }
+    };
+
+    if (lights) {
+        // mix in light uniforms
+        uniforms = Object.assign(uniforms, UniformsUtils.clone(UniformsLib.lights));
+    }
+
     const shader = new ShaderMaterial({
         defines: {
             DEPTH_READ_ENABLED: true,
             DEPTH_SOFT_ENABLED: true,
             ALIGN_DIRECTION_ENABLED: false,
+            LIGHTS_ENABLED: lights,
+            LIGHTING_VERTEX_ONLY: true
         },
-        uniforms: {
-            tSpriteAtlas: {
-                type: 't',
-                value: null
-            },
-            cameraNear: {
-                type: 'f',
-                value: 1,
-            },
-            cameraFar: {
-                type: 'f',
-                value: 1,
-            },
-            tDepth: {
-                type: 't',
-                value: null
-            },
-            tColor: {
-                type: 't',
-                value: null
-            },
-            modelViewMatrix: {
-                type: 'm4',
-                value: new Matrix4()
-            },
-            projectionMatrix: {
-                type: 'm4',
-                value: new Matrix4()
-            },
-            resolution: {
-                type: 'v2',
-                value: new ThreeVector2()
-            }
-        },
+        uniforms: uniforms,
         vertexShader: make_vertex_shader(),
         fragmentShader: make_fragment_shader(),
         blending: CustomBlending,
-        lights: false,
+        lights: lights,
         depthTest: true,
         depthWrite: false,
         transparent: true,
         vertexColors: false,
-        glslVersion: 2
+        glslVersion: GLSL3
     });
 
     shader.blending = CustomBlending;
@@ -249,5 +459,6 @@ export function make_particle_billboard_shader() {
     shader.blendSrc = OneFactor;
     shader.blendDst = OneMinusSrcAlphaFactor;
 
+
     return shader;
 }

package/engine/graphics/particles/particular/engine/shader/ShaderManager.js

@@ -6,17 +6,22 @@ import {
     LinearMipMapLinearFilter,
     Matrix4,
     RGBAFormat,
-    UnsignedByteType
+    UnsignedByteType,
+    Vector2 as ThreeVector2
 } from "three";
 import Vector2 from "../../../../../../core/geom/Vector2.js";
 import { HashMap } from "../../../../../../core/collection/HashMap.js";
 import { ParticleEmitterFlag } from "../emitter/ParticleEmitterFlag.js";
 import { writeSample2DDataToDataTexture } from "../../../../texture/sampler/writeSampler2DDataToDataTexture.js";
-import { TextureAtlasDebugger } from "../../../../texture/atlas/TextureAtlasDebugger.js";
 import { MaterialRecord } from "./MaterialRecord.js";
 import { make_particle_billboard_shader } from "../renderers/billboard/ParticleBillboardMaterial.js";
 
-const EMITTER_MATERIAL_FLAGS = ParticleEmitterFlag.DepthSoftDisabled | ParticleEmitterFlag.DepthReadDisabled | ParticleEmitterFlag.AlignOnVelocity;
+const EMITTER_MATERIAL_FLAGS =
+    ParticleEmitterFlag.DepthSoftDisabled
+    | ParticleEmitterFlag.DepthReadDisabled
+    | ParticleEmitterFlag.AlignOnVelocity
+    | ParticleEmitterFlag.Lit
+;
 
 /**
  *
@@ -82,21 +87,21 @@ function buildDataTexture(
     return result;
 }
 
-function debugAtlas(atlas, options) {
-
-    const spriteAtlasDebugger = new TextureAtlasDebugger(atlas, options);
-
-    spriteAtlasDebugger.vAtlasContent.link();
-    document.body.appendChild(spriteAtlasDebugger.vAtlasContent.el);
-}
-
 export class ShaderManager {
     /**
      *
      * @param {AssetManager} assetManager
+     * @param {MaterialManager} material_manager
      * @constructor
      */
-    constructor(assetManager) {
+    constructor(assetManager, material_manager) {
+        /**
+         *
+         * @type {MaterialManager}
+         * @private
+         */
+        this.__material_manager = material_manager;
+
         /**
          *
          * @type {ManagedAtlas}
@@ -159,6 +164,34 @@ export class ShaderManager {
         //watch atlas updates
         this.spriteAtlas.atlas.on.painted.add(this.updateSpriteTexture, this);
 
+        /**
+         * Common shader uniforms, inherited by every material and updated centrally (here)
+         * @private
+         */
+        this.__common_uniforms = {
+            tSpriteAtlas: {
+                value: this.spriteTexture
+            },
+            tDepth: {
+                value: null
+            },
+            resolution: {
+                value: new ThreeVector2()
+            },
+            projectionMatrix: {
+                value: null
+            },
+            modelViewMatrix: {
+                value: null
+            },
+            cameraNear: {
+                value: 0
+            },
+            cameraFar: {
+                value: 0
+            }
+        };
+
         // debugAtlas(this.parameterSheet.atlas, { scale: new Vector2(16, 16) });
         // debugAtlas(this.spriteAtlas.atlas, { scale: new Vector2(0.5, 0.5) });
     }
@@ -184,8 +217,6 @@ export class ShaderManager {
         writeSample2DDataToDataTexture(atlas, dataTexture);
 
         this.materialMap.forEach(function (entry) {
-            const material = entry.material;
-            material.uniforms.tSpriteAtlas.value = dataTexture;
 
             entry.emitters.forEach(function (emitter) {
                 //mark sprites for an update
@@ -202,19 +233,24 @@ export class ShaderManager {
      * @param {ParticleEmitter} emitter
      */
     buildMaterial(emitter) {
-        const shader = make_particle_billboard_shader();
+        const lights_enabled = emitter.getFlag(ParticleEmitterFlag.Lit);
 
-        shader.uniforms.tSpriteAtlas.value = this.spriteTexture;
-        shader.uniforms.tDepth.value = this.depthTexture;
-        shader.uniforms.resolution.value.set(this.viewportSize.x, this.viewportSize.y)
+        const shader = make_particle_billboard_shader({ lights: lights_enabled });
 
-        shader.defines = {
-            DEPTH_READ_ENABLED: !emitter.getFlag(ParticleEmitterFlag.DepthReadDisabled),
-            DEPTH_SOFT_ENABLED: !emitter.getFlag(ParticleEmitterFlag.DepthSoftDisabled),
-            ALIGN_DIRECTION_ENABLED: emitter.getFlag(ParticleEmitterFlag.AlignOnVelocity)
-        };
+        shader.uniforms = Object.assign(shader.uniforms, this.__common_uniforms);
+
+        // write defines
+        const defs = shader.defines;
 
-        return shader;
+        defs.DEPTH_READ_ENABLED = !emitter.getFlag(ParticleEmitterFlag.DepthReadDisabled);
+        defs.DEPTH_SOFT_ENABLED = !emitter.getFlag(ParticleEmitterFlag.DepthSoftDisabled);
+        defs.ALIGN_DIRECTION_ENABLED = emitter.getFlag(ParticleEmitterFlag.AlignOnVelocity);
+
+        const ref = this.__material_manager.obtain(shader);
+
+        // TODO track referecen and release it eventually
+
+        return ref.getValue();
     }
 
     /**
@@ -225,7 +261,12 @@ export class ShaderManager {
         const spriteAtlas = this.spriteAtlas;
 
         // load sprites
-        emitter.layers.forEach(function (layer) {
+        const particle_layers = emitter.layers;
+        const layer_count = particle_layers.length;
+
+        for (let i = 0; i < layer_count; i++) {
+            const layer = particle_layers.get(i);
+
             const patchPromise = spriteAtlas.acquire(layer.imageURL);
 
             patchPromise.then(function (patch) {
@@ -233,7 +274,7 @@ export class ShaderManager {
             }, (e) => {
                 console.warn(`Failed to load sprite '${layer.imageURL}':`, e);
             });
-        });
+        }
 
         // obtain material
         let material, entry;
@@ -312,10 +353,12 @@ export class ShaderManager {
         const spriteAtlas = this.spriteAtlas;
 
         //release sprites
-        emitter.layers.forEach(function (layer) {
+        const particle_layers = emitter.layers;
+        const layer_count = particle_layers.length;
+        for (let i = 0; i < layer_count; i++) {
+            const layer = particle_layers.get(i);
             spriteAtlas.release(layer.imageURL);
-        });
-
+        }
 
         if (entry.count <= 0) {
             //last usage removed
@@ -348,15 +391,12 @@ export class ShaderManager {
         const cameraNear = camera.near;
         const cameraFar = camera.far;
 
-        // TODO use a shader uniform structure to avoid iteration
-        this.materialMap.forEach(function (entry) {
-            const uniforms = entry.material.uniforms;
+        const uniforms = this.__common_uniforms;
 
-            uniforms.projectionMatrix.value = projectionMatrix;
-            uniforms.modelViewMatrix.value = modelViewMatrix;
-            uniforms.cameraNear.value = cameraNear;
-            uniforms.cameraFar.value = cameraFar;
-        });
+        uniforms.projectionMatrix.value = projectionMatrix;
+        uniforms.modelViewMatrix.value = modelViewMatrix;
+        uniforms.cameraNear.value = cameraNear;
+        uniforms.cameraFar.value = cameraFar;
     }
 
     /**
@@ -366,11 +406,8 @@ export class ShaderManager {
     setDepthTexture(texture) {
         this.depthTexture = texture;
 
-        // TODO use a shader uniform structure to avoid iteration
-        this.materialMap.forEach(function (entry) {
-            const material = entry.material;
-            material.uniforms.tDepth.value = texture;
-        });
+        this.__common_uniforms.tDepth.value = texture;
+
     }
 
     /**
@@ -381,10 +418,7 @@ export class ShaderManager {
     setViewportSize(x, y) {
         this.viewportSize.set(x, y);
 
-        // TODO use a shader uniform structure to avoid iteration
-        this.materialMap.forEach(function (entry) {
-            entry.material.uniforms.resolution.value.set(x, y);
-        });
+        this.__common_uniforms.resolution.value.set(x, y);
     }
 }
 

package/engine/graphics/particles/particular/engine/shader/debugAtlas.js

@@ -0,0 +1,14 @@
+import { TextureAtlasDebugger } from "../../../../texture/atlas/TextureAtlasDebugger.js";
+
+/**
+ *
+ * @param {TextureAtlas} atlas
+ * @param {*} options
+ */
+function debugAtlas(atlas, options) {
+
+    const spriteAtlasDebugger = new TextureAtlasDebugger(atlas, options);
+
+    spriteAtlasDebugger.vAtlasContent.link();
+    document.body.appendChild(spriteAtlasDebugger.vAtlasContent.el);
+}