support custom blending and blending equation

packages/three.quarks/examples/customBlendingDemo.js

@@ -0,0 +1,123 @@
+import {
+    BatchedParticleRenderer,
+    ConstantColor,
+    PointEmitter,
+    IntervalValue,
+    ConstantValue,
+    ParticleSystem,
+    PiecewiseBezier,
+    Bezier,
+    RenderMode,
+    SpeedOverLife,
+    Vector4, SphereEmitter,
+} from 'three.quarks';
+import {
+    MeshBasicMaterial,
+    CustomBlending,
+    TextureLoader,
+    AddEquation,
+    OneFactor,
+    OneMinusSrcColorFactor,
+    SrcAlphaFactor,
+    OneMinusSrcAlphaFactor,
+    AdditiveBlending, NormalBlending, MaxEquation, SubtractEquation,
+} from 'three';
+import {Demo} from './demo.js';
+
+export class CustomBlendingDemo extends Demo {
+    name = 'Custom Blending Function';
+
+    initScene() {
+        super.initScene();
+
+        this.batchRenderer = new BatchedParticleRenderer();
+        this.scene.add(this.batchRenderer);
+
+        const texture = new TextureLoader().load('textures/particle_default.png');
+        const config = {
+            duration: 5,
+            looping: true,
+            //instancingGeometry: new PlaneGeometry(1, 1),//.rotateX((-90 / 180) * Math.PI),
+            startLife: new IntervalValue(4, 5),
+            startSpeed: new ConstantValue(0),
+            startSize: new IntervalValue(1, 2),
+            //startRotation: new EulerGenerator(new ConstantValue(0), new ConstantValue(0), new ConstantValue(0)),
+            startColor: new ConstantColor(new Vector4(1, 1, 1, 1)),
+            worldSpace: false,
+
+            maxParticle: 100,
+            emissionOverTime: new ConstantValue(0),
+            emissionBursts: [
+                {
+                    time: 0,
+                    count: new ConstantValue(10),
+                    cycle: 1,
+                    interval: 0.01,
+                    probability: 1,
+                },
+            ],
+
+            shape: new SphereEmitter({radius: 3}),
+            material: new MeshBasicMaterial({
+                blending: CustomBlending,
+                blendSrc: OneFactor,
+                blendDst: OneFactor,
+                blendEquation: AddEquation,
+                transparent: true,
+                map: texture,
+                color: new Vector4(0.5, 0.5, 0.5, 1),
+                //side: DoubleSide,
+            }),
+            startTileIndex: new ConstantValue(0),
+            uTileCount: 1,
+            vTileCount: 1,
+            renderOrder: 2,
+            renderMode: RenderMode.BillBoard,
+        };
+
+        // Create particle system based on your configuration
+        let billboard1 = new ParticleSystem(config);
+        billboard1.addBehavior(new SpeedOverLife(new PiecewiseBezier([[new Bezier(1, 0.75, 0.5, 0), 0]])));
+        billboard1.emitter.name = 'billboard';
+        billboard1.emitter.position.x = -5;
+
+        let billboard2 = new ParticleSystem(config);
+        billboard2.addBehavior(new SpeedOverLife(new PiecewiseBezier([[new Bezier(1, 0.75, 0.5, 0), 0]])));
+        billboard2.emitter.name = 'billboard';
+        billboard2.emitter.position.x = 0;
+
+        billboard2.material = new MeshBasicMaterial({
+            blending: CustomBlending,
+            blendSrc: OneFactor,
+            blendDst: OneFactor,
+            blendEquation: MaxEquation,
+            transparent: true,
+            color: new Vector4(0.5, 0.5, 0.5, 1),
+            map: texture,
+        });
+
+        let billboard3 = new ParticleSystem(config);
+        billboard3.addBehavior(new SpeedOverLife(new PiecewiseBezier([[new Bezier(1, 0.75, 0.5, 0), 0]])));
+        billboard3.emitter.name = 'billboard';
+        billboard3.emitter.position.x = 5;
+
+        billboard3.material = new MeshBasicMaterial({
+            blending: CustomBlending,
+            blendSrc: OneFactor,
+            blendDst: OneFactor,
+            blendEquation: SubtractEquation,
+            transparent: true,
+            color: new Vector4(0.5, 0.5, 0.5, 1),
+            map: texture,
+        });
+
+        this.batchRenderer.addSystem(billboard1);
+        this.batchRenderer.addSystem(billboard2);
+        this.batchRenderer.addSystem(billboard3);
+
+        this.scene.add(billboard1.emitter);
+        this.scene.add(billboard2.emitter);
+        this.scene.add(billboard3.emitter);
+        return this.scene;
+    }
+}

packages/three.quarks/examples/index.html

@@ -92,6 +92,7 @@
         import {AlphaTestDemo} from "./alphaTestDemo.js";
         import {BillboardDemo} from "./billboardDemo.js";
         import {SoftParticleDemo} from "./softParticleDemo.js";
+        import {CustomBlendingDemo} from "./customBlendingDemo.js";
         import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
 
         const WEBGL = {
@@ -156,7 +157,7 @@
         let scene;
         let demo;
 
-        let demos = [MuzzleFlashDemo, ExplosionDemo, EmitterShapeDemo, TrailDemo, SequencerDemo, MeshMaterialDemo, SubEmitterDemo, TurbulenceDemo, AlphaTestDemo, CustomPluginDemo, BillboardDemo, SoftParticleDemo];
+        let demos = [MuzzleFlashDemo, ExplosionDemo, EmitterShapeDemo, TrailDemo, SequencerDemo, MeshMaterialDemo, SubEmitterDemo, TurbulenceDemo, AlphaTestDemo, CustomPluginDemo, BillboardDemo, SoftParticleDemo, CustomBlendingDemo];
         let demoIndex = 0;
 
         function init() {

packages/three.quarks/examples/trailDemo.js

@@ -4,7 +4,6 @@ import {
     MeshBasicMaterial,
     DoubleSide,
     Mesh,
-    Vector4,
     Vector3,
     Color,
     AdditiveBlending,
@@ -27,6 +26,7 @@ import {
     ApplyForce,
     ApplyCollision,
     Gradient,
+    Vector4,
 } from 'three.quarks';
 import {Demo} from './demo.js';
 

packages/three.quarks/src/BatchedRenderer.ts

@@ -107,6 +107,10 @@ export class BatchedRenderer extends Object3D {
         return (
             a.material.side === b.material.side &&
             a.material.blending === b.material.blending &&
+            a.material.blendSrc === b.material.blendSrc &&
+            a.material.blendDst === b.material.blendDst &&
+            a.material.blendEquation === b.material.blendEquation &&
+            a.material.premultipliedAlpha === b.material.premultipliedAlpha &&
             a.material.transparent === b.material.transparent &&
             a.material.depthTest === b.material.depthTest &&
             a.material.type === b.material.type &&

packages/three.quarks/src/SpriteBatch.ts

@@ -229,6 +229,10 @@ export class SpriteBatch extends VFXBatch {
                     transparent: this.settings.material.transparent,
                     depthWrite: !this.settings.material.transparent,
                     blending: this.settings.material.blending,
+                    blendDst: this.settings.material.blendDst,
+                    blendSrc: this.settings.material.blendSrc,
+                    blendEquation: this.settings.material.blendEquation,
+                    premultipliedAlpha: this.settings.material.premultipliedAlpha,
                     side: this.settings.material.side,
                     alphaTest: this.settings.material.alphaTest,
                     depthTest: this.settings.material.depthTest,
@@ -245,6 +249,10 @@ export class SpriteBatch extends VFXBatch {
                 transparent: this.settings.material.transparent,
                 depthWrite: !this.settings.material.transparent,
                 blending: this.settings.material.blending,
+                blendDst: this.settings.material.blendDst,
+                blendSrc: this.settings.material.blendSrc,
+                blendEquation: this.settings.material.blendEquation,
+                premultipliedAlpha: this.settings.material.premultipliedAlpha,
                 side: this.settings.material.side,
                 alphaTest: this.settings.material.alphaTest,
                 depthTest: this.settings.material.depthTest,

packages/three.quarks/src/TrailBatch.ts

@@ -121,6 +121,10 @@ export class TrailBatch extends VFXBatch {
                 depthWrite: !this.settings.material.transparent,
                 side: this.settings.material.side,
                 blending: this.settings.material.blending || AdditiveBlending,
+                blendDst: this.settings.material.blendDst,
+                blendSrc: this.settings.material.blendSrc,
+                blendEquation: this.settings.material.blendEquation,
+                premultipliedAlpha: this.settings.material.premultipliedAlpha,
             });
         } else {
             throw new Error('render mode unavailable');