@woosh/meep-engine 2.29.0 → 2.30.0

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

@@ -1,3 +1,273 @@
-export class ParticleBillboardMaterial {
+import { AddEquation, CustomBlending, Matrix4, OneFactor, OneMinusSrcAlphaFactor, ShaderMaterial } from "three";
+import { Vector2 as ThreeVector2 } from "three/src/math/Vector2.js";
+import { ParticleSpecification } from "../../../group/ParticleSpecification.js";
+import { ParticleAttribute } from "../../../group/ParticleAttribute.js";
+import { ParticleAttributeType, ParticleDataType } from "../../../group/ParticleGroup.js";
 
+export const BILLBOARD_PARTICLE_SPECIFICATION = new ParticleSpecification();
+
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('position', ParticleAttributeType.Vector3, ParticleDataType.Float32));
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('atlasPatch', ParticleAttributeType.Vector4, ParticleDataType.Float32));
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('size', ParticleAttributeType.Scalar, ParticleDataType.Float32));
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('velocity', ParticleAttributeType.Vector3, ParticleDataType.Float32));
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('rotation', ParticleAttributeType.Scalar, ParticleDataType.Float32));
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('color', ParticleAttributeType.Vector4, ParticleDataType.Float32));
+BILLBOARD_PARTICLE_SPECIFICATION.add(new ParticleAttribute('blending', ParticleAttributeType.Scalar, ParticleDataType.Uint8));
+
+export const BILLBOARD_PARTICLE_ATTRIBUTE_POSITION = 0;
+export const BILLBOARD_PARTICLE_ATTRIBUTE_UV = 1;
+export const BILLBOARD_PARTICLE_ATTRIBUTE_SIZE = 2;
+export const BILLBOARD_PARTICLE_ATTRIBUTE_VELOCITY = 3;
+export const BILLBOARD_PARTICLE_ATTRIBUTE_COLOR = 5;
+export const BILLBOARD_PARTICLE_ATTRIBUTE_BLEND = 6;
+
+const DEPTH_ERROR_MARGIN = 0.0001;
+
+function make_vertex_shader() {
+    return `
+                uniform float cameraNear;
+                uniform float cameraFar;
+                uniform vec2 resolution;
+                
+                attribute float size;
+                attribute vec4 color;
+                attribute vec4 atlasPatch;
+                attribute float rotation;
+                attribute vec3 velocity;
+                attribute float blending;
+                
+                varying vec4 vPatch;
+                varying float vSize;
+                varying float vFadeDistance;
+                varying vec4 vColor;
+                varying vec2 vRotationMultiplier;
+                varying float vBlending;
+                
+                void main() {
+                   
+                    vColor = color;
+                    vSize = size;
+                    vPatch = atlasPatch;
+                    vBlending = blending;
+                    
+                    mat4 modelViewProjectionMatrix = projectionMatrix * modelViewMatrix;
+                                                    
+                    vec4 position4 = vec4( position, 1.0 );
+                                                    
+                    gl_Position = modelViewProjectionMatrix * position4;
+                    
+                    float rotationGlobal = rotation;
+                    
+                    //
+                    #ifdef ALIGN_DIRECTION_ENABLED 
+                        if(velocity != vec3(0.0)){
+                    
+                            vec4 vecNext = modelViewProjectionMatrix * (position4 + vec4(velocity,0.0) );
+                            
+                            vec2 p_2 = gl_Position.xy / gl_Position.w;
+                            vec2 vecNext_2 = vecNext.xy / vecNext.w;
+                            
+                            vec2 direction = vecNext_2 - p_2;
+                            
+                            float upAngle = atan(direction.y, direction.x) - 1.57079632679;
+                            
+                            rotationGlobal = rotationGlobal + upAngle;
+                            
+                        }
+                    #endif
+                    //
+                    
+                    vRotationMultiplier = vec2( cos(rotationGlobal),sin(rotationGlobal) );
+                    
+                    float radius = vSize/2.0;
+                    
+                    #ifdef DEPTH_SOFT_ENABLED
+                    
+                        vFadeDistance = 1.0 / radius;
+                    
+                    #endif
+                                    
+                    gl_PointSize = resolution.y * projectionMatrix[1][1] * radius / gl_Position.w;
+                }`;
+}
+
+function make_fragment_shader() {
+    return `
+                uniform sampler2D tSpriteAtlas;
+                uniform sampler2D tDepth;
+                uniform float cameraNear;
+                uniform float cameraFar;
+                uniform mat4 modelViewMatrix;
+                uniform mat4 projectionMatrix;
+                uniform vec2 resolution;
+                
+                varying float vFadeDistance;
+                varying vec4 vPatch;
+                varying float vSize;
+                varying vec4 vColor;
+                varying vec2 vRotationMultiplier;
+                varying float vBlending;
+                
+                float depthToLinear( float z ) {
+                    float f = cameraFar;
+                    float n = cameraNear;
+                    
+                    float d_n = 2.0*z - 1.0;
+                    
+                    float fn = f*n;
+                    
+                    float z_diff = f - n;
+                    
+                    float denominator = (f + n - d_n * z_diff );
+                
+                    float z_view = (2.0*fn) / denominator;
+                
+                    return z_view-n;
+                }
+                
+                
+                float calculateFade(in float particleDepth, in float sceneDepth){
+                    float zFade;
+                                                            
+                    float linearParticleDepth = depthToLinear(particleDepth);
+                    
+                    float linearSceneDepth = depthToLinear(sceneDepth);
+                                    
+                    float depthDelta = (linearSceneDepth - linearParticleDepth);
+                                                    
+                    float inputDepth = depthDelta* vFadeDistance;
+                    
+                    if(inputDepth <= 0.0){
+                        return 0.0;
+                    }
+                    
+                    if(inputDepth >= 1.0){
+                        return 1.0;
+                    }
+                    
+                    if(inputDepth <= 0.5){
+                        zFade = 0.5 * pow( clamp(2.0*inputDepth, 0.0, 1.0), 2.0);
+                    }else{
+                        zFade = 1.0 - 0.5 * pow( clamp(2.0*(1.0 - inputDepth), 0.0, 1.0), 2.0);
+                    }
+                    
+                    return zFade;
+                }
+                
+                void main() {
+                    float fragmentDepth = gl_FragCoord.z;
+                    
+                    vec2 pixelPosition = gl_FragCoord.xy / resolution;
+                    
+                    float sceneDepth =  texture2D( tDepth, pixelPosition ).x;
+                    
+                    #ifdef DEPTH_READ_ENABLED
+                    
+                        if(fragmentDepth + ${DEPTH_ERROR_MARGIN} > sceneDepth){
+                            discard;
+                        }
+                    
+                    #endif
+                   
+                    vec2 centeredUv = gl_PointCoord.xy - 0.5;
+                    
+                    vec2 texelCoordinate = vec2( centeredUv.x* vRotationMultiplier.x - centeredUv.y* vRotationMultiplier.y, centeredUv.x * vRotationMultiplier.y + centeredUv.y * vRotationMultiplier.x) + 0.5;
+                    
+                    texelCoordinate = clamp(texelCoordinate, vec2(0.0), vec2(1.0) );
+                                                   
+                    vec2 uv = texelCoordinate*vPatch.zw + vPatch.xy;
+                    
+                    vec4 spriteColor = texture2D( tSpriteAtlas, uv );
+                    
+                    if(spriteColor.a == 0.0){
+                        discard;
+                    }
+                    
+                    vec4 texel = spriteColor *vColor;
+                    
+                    // premultiply alpha
+                    texel.xyz *= texel.a;
+                    
+                    if(vBlending > 0.1){
+                        // additive blending
+                        texel.a = 0.0;
+                    }
+                    
+                    #ifdef DEPTH_SOFT_ENABLED
+                    
+                        float zFade = calculateFade(fragmentDepth, sceneDepth);
+                        texel *= zFade;
+                    
+                    #endif
+                                    
+                    gl_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
+ */
+export function make_particle_billboard_shader() {
+    const shader = new ShaderMaterial({
+        defines: {
+            DEPTH_READ_ENABLED: true,
+            DEPTH_SOFT_ENABLED: true,
+            ALIGN_DIRECTION_ENABLED: false,
+        },
+        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()
+            }
+        },
+        vertexShader: make_vertex_shader(),
+        fragmentShader: make_fragment_shader(),
+        blending: CustomBlending,
+        lights: false,
+        depthTest: true,
+        depthWrite: false,
+        transparent: true,
+        vertexColors: false,
+        glslVersion: 2
+    });
+
+    shader.blending = CustomBlending;
+    shader.blendEquation = AddEquation;
+    shader.blendSrc = OneFactor;
+    shader.blendDst = OneMinusSrcAlphaFactor;
+
+    return shader;
 }

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

@@ -0,0 +1,164 @@
+import { EngineHarness } from "../../../../../../EngineHarness.js";
+import { ParticlePool } from "../../emitter/ParticlePool.js";
+import {
+    BILLBOARD_PARTICLE_ATTRIBUTE_BLEND,
+    BILLBOARD_PARTICLE_ATTRIBUTE_COLOR,
+    BILLBOARD_PARTICLE_ATTRIBUTE_POSITION,
+    BILLBOARD_PARTICLE_ATTRIBUTE_SIZE,
+    BILLBOARD_PARTICLE_ATTRIBUTE_UV,
+    BILLBOARD_PARTICLE_SPECIFICATION,
+    make_particle_billboard_shader
+} from "./ParticleBillboardMaterial.js";
+import { DataTexture, LinearFilter, LinearMipMapLinearFilter, Matrix4, Points } from "three";
+import { StandardFrameBuffers } from "../../../../../GraphicsEngine.js";
+import { ManagedAtlas } from "../../../../../texture/atlas/ManagedTextureAtlas.js";
+import { writeSample2DDataToDataTexture } from "../../../../../texture/sampler/writeSampler2DDataToDataTexture.js";
+import { ImageRGBADataLoader } from "../../../../../../asset/loaders/image/ImageRGBADataLoader.js";
+import { EngineConfiguration } from "../../../../../../EngineConfiguration.js";
+import { MeshSystem } from "../../../../../ecs/mesh/MeshSystem.js";
+import EntityBuilder from "../../../../../../ecs/EntityBuilder.js";
+import { Transform } from "../../../../../../ecs/transform/Transform.js";
+import Mesh from "../../../../../ecs/mesh/Mesh.js";
+import Vector3 from "../../../../../../../core/geom/Vector3.js";
+import { RenderPassType } from "../../../../../render/RenderPassType.js";
+
+
+const engineHarness = new EngineHarness();
+
+async function init(engineHarness) {
+
+    const engine = await engineHarness.initialize();
+
+    const config = new EngineConfiguration();
+
+    config.addSystem(new MeshSystem(engine.graphics, engine.assetManager));
+    config.addLoader('image', new ImageRGBADataLoader());
+
+    await config.apply(engine);
+
+    main(engine);
+}
+
+/**
+ *
+ * @param {Engine} engine
+ * @returns {Promise<void>}
+ */
+async function main(engine) {
+    const ecd = engine.entityManager.dataset;
+
+
+    const particle_pool = new ParticlePool(BILLBOARD_PARTICLE_SPECIFICATION);
+
+    const particle_a = particle_pool.create();
+
+    particle_pool.writeAttributeScalar(particle_a, BILLBOARD_PARTICLE_ATTRIBUTE_SIZE, 5);
+    particle_pool.writeAttributeVector3(particle_a, BILLBOARD_PARTICLE_ATTRIBUTE_POSITION, 5, 2, 5);
+    particle_pool.writeAttributeVector4(particle_a, BILLBOARD_PARTICLE_ATTRIBUTE_UV, 0, 0, 1, 1);
+    particle_pool.writeAttributeVector4(particle_a, BILLBOARD_PARTICLE_ATTRIBUTE_COLOR, 1, 1, 1, 1);
+    particle_pool.writeAttributeScalar(particle_a, BILLBOARD_PARTICLE_ATTRIBUTE_BLEND, 0);
+
+    const particle_b = particle_pool.create();
+
+    particle_pool.writeAttributeScalar(particle_b, BILLBOARD_PARTICLE_ATTRIBUTE_SIZE, 5);
+    particle_pool.writeAttributeVector3(particle_b, BILLBOARD_PARTICLE_ATTRIBUTE_POSITION, 10, 2, 5);
+    particle_pool.writeAttributeVector4(particle_b, BILLBOARD_PARTICLE_ATTRIBUTE_UV, 0, 0, 1, 1);
+    particle_pool.writeAttributeVector4(particle_b, BILLBOARD_PARTICLE_ATTRIBUTE_COLOR, 1, 1, 1, 1);
+    particle_pool.writeAttributeScalar(particle_b, BILLBOARD_PARTICLE_ATTRIBUTE_BLEND, 1);
+
+    const particle_c = particle_pool.create();
+
+    particle_pool.writeAttributeScalar(particle_c, BILLBOARD_PARTICLE_ATTRIBUTE_SIZE, 5);
+    particle_pool.writeAttributeVector3(particle_c, BILLBOARD_PARTICLE_ATTRIBUTE_POSITION, 10, 2, 10);
+    particle_pool.writeAttributeVector4(particle_c, BILLBOARD_PARTICLE_ATTRIBUTE_UV, 0, 0, 1, 1);
+    particle_pool.writeAttributeVector4(particle_c, BILLBOARD_PARTICLE_ATTRIBUTE_COLOR, 1, 1, 1, 1);
+    particle_pool.writeAttributeScalar(particle_c, BILLBOARD_PARTICLE_ATTRIBUTE_BLEND, 1);
+
+    const particle_d = particle_pool.create();
+
+    particle_pool.writeAttributeScalar(particle_d, BILLBOARD_PARTICLE_ATTRIBUTE_SIZE, 5);
+    particle_pool.writeAttributeVector3(particle_d, BILLBOARD_PARTICLE_ATTRIBUTE_POSITION, 5, 2, 10);
+    particle_pool.writeAttributeVector4(particle_d, BILLBOARD_PARTICLE_ATTRIBUTE_UV, 0, 0, 1, 1);
+    particle_pool.writeAttributeVector4(particle_d, BILLBOARD_PARTICLE_ATTRIBUTE_COLOR, 1, 1, 1, 1);
+    particle_pool.writeAttributeScalar(particle_d, BILLBOARD_PARTICLE_ATTRIBUTE_BLEND, 0);
+
+    particle_pool.compact();
+
+    const managedAtlas = new ManagedAtlas(engine.assetManager);
+    const sprite_atlas_texture = new DataTexture(new Uint8Array(4), 1, 1);
+    sprite_atlas_texture.generateMipmaps = true;
+    sprite_atlas_texture.minFilter = LinearMipMapLinearFilter;
+    sprite_atlas_texture.magFilter = LinearFilter;
+    sprite_atlas_texture.anisotropy = 0; // billboards don't need anisotropy
+
+
+    managedAtlas.acquire('data/textures/utility/uv_map_reference.jpg');
+    // managedAtlas.acquire('data/textures/particle/UETools/Star_41.png');
+
+    const shaderMaterial = make_particle_billboard_shader();
+
+    shaderMaterial.uniforms.tSpriteAtlas.value = sprite_atlas_texture;
+
+    managedAtlas.atlas.on.painted.add(() => {
+        writeSample2DDataToDataTexture(managedAtlas.atlas.sampler, sprite_atlas_texture);
+    });
+
+    const points = new Points(particle_pool.geometry.getValue(), shaderMaterial);
+    points.frustumCulled = false;
+
+    const layer = engine.graphics.layers.create('x');
+
+    layer.managed = true;
+    layer.visibleSet.initializeUpdate();
+    layer.visibleSet.push(points);
+    layer.visibleSet.finalizeUpdate();
+
+    layer.renderPass = RenderPassType.Transparent;
+
+    engine.graphics.on.visibilityConstructionStarted.add((renderer, camera, scene) => {
+        renderer.getSize(shaderMaterial.uniforms.resolution.value);
+
+        const projectionMatrix = camera.projectionMatrix;
+        const modelViewMatrix = (new Matrix4()).multiplyMatrices(camera.matrixWorldInverse, camera.matrixWorld);
+        const cameraNear = camera.near;
+        const cameraFar = camera.far;
+
+        const uniforms = shaderMaterial.uniforms;
+
+        uniforms.projectionMatrix.value = projectionMatrix;
+        uniforms.modelViewMatrix.value = modelViewMatrix;
+        uniforms.cameraNear.value = cameraNear;
+        uniforms.cameraFar.value = cameraFar;
+
+        const fb = engine.graphics.frameBuffers.getById(StandardFrameBuffers.ColorAndDepth);
+
+        uniforms.tDepth.value = fb.renderTarget.depthTexture;
+        uniforms.tColor.value = fb.renderTarget.texture;
+    });
+
+    EngineHarness.buildCamera({
+        engine,
+        target: new Vector3(5, 2, 5)
+    });
+
+    EngineHarness.buildOrbitalCameraController({
+        engine
+    });
+
+    EngineHarness.buildLights({
+        engine
+    });
+
+    EngineHarness.buildTerrain({
+        engine,
+        enableWater: false
+    });
+
+
+    new EntityBuilder()
+        .add(Mesh.fromJSON({ url: 'data/models/Jauntmessina/Red_Robot/gltf/Model.gltf' }))
+        .add(new Transform())
+        .build(ecd)
+}
+
+init(engineHarness);