@woosh/meep-engine 2.40.1 → 2.41.0

package/engine/graphics/impostors/octahedral/prototypeBaker.js

@@ -0,0 +1,138 @@
+import { EngineHarness } from "../../../EngineHarness.js";
+import { ImpostorBaker } from "./ImpostorBaker.js";
+import { ShadedGeometry } from "../../ecs/mesh-v2/ShadedGeometry.js";
+import sampler2D2Canvas from "../../texture/sampler/Sampler2D2Canvas.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import EntityBuilder from "../../../ecs/EntityBuilder.js";
+import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
+import GUIElement from "../../../ecs/gui/GUIElement.js";
+import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
+import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
+import { WebGLRendererPool } from "../../render/RendererPool.js";
+import { buildCanvasViewFromTexture } from "../../render/visibility/hiz/buildCanvasViewFromTexture.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import { GameAssetType } from "../../../asset/GameAssetType.js";
+import { three_object_to_entity_composition } from "../../ecs/mesh-v2/three_object_to_entity_composition.js";
+import { Transform } from "../../../ecs/transform/Transform.js";
+import { GLTFAssetLoader } from "../../../asset/loaders/GLTFAssetLoader.js";
+import { ImpostorCaptureType } from "./ImpostorCaptureType.js";
+import { PlaneBufferGeometry } from "three";
+import { ImpostorShaderStandard } from "./shader/ImpostorShaderStandard.js";
+import { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js";
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {Promise<void>}
+ */
+async function main(engine) {
+    await EngineHarness.buildBasics({
+        engine
+    });
+
+    const baker = new ImpostorBaker();
+    const renderer = engine.graphics.renderer;
+    baker.renderer = renderer;
+
+
+    // const gltf_asset = await engine.assetManager.promise('data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/LowPolyTownshipSet/Barrel/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/LowPolyTownshipSet/Town_Hall/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/LowPolyTownshipSet/Small_house/Small_house.gltf', GameAssetType.ModelGLTF_JSON);
+    const gltf_asset = await engine.assetManager.promise('data/models/MOBA and Tower Defense/Tree_03.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/samples/transform-hierarchy.glb', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/sponza-pbr/gltf/sponza.glb', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('moicon/gnutti_not_optimized/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('moicon/isiflow_Oct_15_21/2/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('moicon/Kople/EVCharger1.gltf', GameAssetType.ModelGLTF_JSON);
+
+    const node_hierarchy = three_object_to_entity_composition(gltf_asset.create());
+
+
+    const objects = [];
+
+    node_hierarchy.traverse(n => {
+        const sg = n.entity.getComponent(ShadedGeometry);
+        if (sg !== null) {
+            objects.push({
+                mesh: sg,
+                transform: n.entity.getComponent(Transform).matrix
+            })
+            // objects.push({
+            //     mesh: ShadedGeometry.from(new BoxBufferGeometry(), sg.material),
+            //     transform: mat4.create()
+            // })
+        }
+    });
+
+    // objects.push(
+    //     {
+    //         mesh: ShadedGeometry.from(new BoxBufferGeometry(), new MeshStandardMaterial({
+    //             color: 0xFF0000
+    //         })),
+    //         transform: mat4.create()
+    //     }
+    // );
+
+    const id = baker.bake({
+        objects,
+        frames: 12,
+        resolution: 1024,
+        type: ImpostorCaptureType.Hemisphere
+    });
+
+    console.log(id);
+
+    const ctrl = buildCanvasViewFromTexture({
+        texture: id.rt.texture[1],
+        renderer: renderer,
+        // swizzle: ['a', 'a', 'a', 1]
+        swizzle: ['r', 'g', 'b', 1]
+    });
+    ctrl.view.css({
+        opacity: 0.2
+    });
+    ctrl.render();
+
+    const cv = new CanvasView();
+    cv.size.set(id.atlas.width, id.atlas.height);
+    cv.css({
+        background: "rgba(0,0,0,0.1)"
+    });
+
+    sampler2D2Canvas(id.atlas, 255, 0, cv.el);
+
+    WebGLRendererPool.global.release(renderer);
+
+    new EntityBuilder()
+        .add(new ViewportPosition())
+        .add(GUIElement.fromView(cv))
+    // .build(engine.entityManager.dataset);
+
+    const ecd = engine.entityManager.dataset;
+    new EntityBuilder()
+        .add(new ViewportPosition({
+            offset: new Vector2(0, 0)
+        }))
+        .add(GUIElement.fromView(ctrl.view))
+        .build(ecd);
+
+
+    new EntityBuilder()
+        .add(new Transform())
+        .add(ShadedGeometry.from(new PlaneBufferGeometry(1, 1, 1), new ImpostorShaderStandard()))
+        .build(ecd);
+}
+
+new EngineHarness().initialize({
+    configuration(config, engine) {
+        config.addSystem(new GUIElementSystem(engine.gui.view, engine));
+        config.addSystem(new ViewportPositionSystem(engine.graphics.viewport.size));
+        config.addSystem(new ShadedGeometrySystem(engine));
+
+        const gltfAssetLoader = new GLTFAssetLoader();
+
+        config.addLoader(GameAssetType.ModelGLTF, gltfAssetLoader);
+        config.addLoader(GameAssetType.ModelGLTF_JSON, gltfAssetLoader);
+    }
+}).then(main);

package/engine/graphics/impostors/octahedral/shader/BakeShaderStandard.js

@@ -0,0 +1,157 @@
+//
+
+import { Color, GLSL3, RawShaderMaterial, Vector4 } from "three";
+
+const shader_vx = `
+    in vec3 position;
+    in vec3 normal;
+    in vec2 uv;
+    in vec3 color;
+    in vec4 tangent;
+
+    out vec3 vNormal;
+    out vec3 vTangent;
+    out vec3 vBinormal;
+    
+    out vec2 vUv;
+    out mat3 TBN;
+    out vec3 vColor;
+    out float depth;
+
+    uniform mat4 modelViewMatrix;
+    uniform mat4 projectionMatrix;
+    uniform mat3 normalMatrix;
+    uniform vec4 projection_params;
+    
+
+    void main() {
+
+        vUv = uv;
+
+        vColor = color;
+
+        // get smooth normals
+        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+        vec3 transformedNormal = normalMatrix * normal;
+        
+        vec3 T = normalize(vec3(modelViewMatrix * tangent) );
+        vNormal = normalize( transformedNormal );
+        vec3 N = vNormal;
+        vec3 B = cross(N,T);
+
+        // construct Tangent Bitangent Normal matrix
+        TBN = mat3(T,B,N);
+        
+
+        gl_Position = projectionMatrix * mvPosition;
+
+
+       depth = 1.0 + (mvPosition.z * projection_params.w);
+    }
+`;
+
+const shader_fg = `
+    precision highp float;
+    precision highp int;
+
+    layout(location = 0) out vec4 gColor;
+    layout(location = 1) out vec4 gNormal;
+    layout(location = 2) out vec4 gORM;
+
+    uniform vec3 color;
+
+    uniform sampler2D tDiffuse;
+    uniform sampler2D tNormal;
+    uniform sampler2D tRoughness;
+    uniform sampler2D tMetalness;
+    uniform sampler2D tOcclusion;
+    uniform sampler2D tEmissive;
+    
+    uniform vec2 repeat;
+
+    in vec3 vNormal;
+    in vec2 vUv;
+    in mat3 TBN;
+    in vec3 vColor;
+    in float depth;
+
+    void main() {    
+        // write color to G-Buffer
+        vec4 diffuse_texture_sample = texture( tDiffuse, vUv);
+        
+        if(diffuse_texture_sample.a < 0.5){
+            // alpha masking
+            discard;
+        }
+        
+        gColor = diffuse_texture_sample;
+        gColor.rgb *= vColor;
+        gColor.rgb *= color;
+
+        // write normals to G-Buffer
+        // see https://learnopengl.com/Advanced-Lighting/Normal-Mapping
+        vec3 normal_sample = texture(tNormal, vUv).rgb*2.0 - 1.0;
+        vec3 normal = normalize(TBN * normal_sample);
+        
+        gNormal = vec4( normal*0.5 + 0.5, depth);
+        
+        float roughness = texture(tRoughness, vUv).g;
+        float metalness = texture(tMetalness, vUv).b;
+        float occlusion = texture(tOcclusion, vUv).r;
+        vec3 emissive = texture(tEmissive, vUv).rgb;
+
+        gORM = vec4(occlusion, roughness, metalness, 1.0);
+    }
+`;
+
+/**
+ * PBR shader:
+ *  - albedo + alpha
+ *  - normal
+ *  - roughness
+ *  - metalness
+ *  - ambient occlusion
+ */
+export class BakeShaderStandard extends RawShaderMaterial {
+    constructor() {
+        super({
+            vertexShader: shader_vx,
+            fragmentShader: shader_fg,
+            glslVersion: GLSL3,
+            uniforms: {
+                color: {
+                    value: new Color(1, 1, 1)
+                },
+                tDiffuse: {
+                    value: null
+                },
+                tNormal: {
+                    value: null
+                },
+                tRoughness: {
+                    value: null
+                },
+                tMetalness: {
+                    value: null
+                },
+                tOcclusion: {
+                    value: null
+                },
+                tEmissive: {
+                    value: null
+                },
+                /**
+                 * @see https://docs.unity3d.com/2020.3/Documentation/Manual/SL-UnityShaderVariables.html
+                 */
+                projection_params: {
+                    value: new Vector4(0, 0, 0, 0)
+                }
+            }
+        });
+
+        this.defaultAttributeValues.tangent = [
+            1, 0, 0, 1
+        ];
+    }
+}

package/engine/graphics/impostors/octahedral/shader/ImpostorShaderStandard.js

@@ -0,0 +1,306 @@
+import { GLSL3, NoBlending, RawShaderMaterial, Vector3 } from "three";
+import chunk_preamble from './glsl/common.glsl';
+
+const shader_vx = `
+    
+    in vec2 uv;
+    in vec3 position;
+    
+    out vec2 vUv;
+    out vec4 plane0;
+    out vec4 plane1;
+    out vec4 plane2;
+    
+    ${chunk_preamble}
+    
+    void ImposterVertex( inout ImposterData imp )
+    {
+        //incoming vertex, object space
+        vec4 vertex = imp.vertex;
+        
+        //camera in object space
+        vec3 objectSpaceCameraPos = mul( unity_WorldToObject, float4(_WorldSpaceCameraPos.xyz,1) ).xyz;
+        vec2 texcoord = imp.uv;
+        float4x4 objectToWorld = unity_ObjectToWorld;
+        float4x4 worldToObject = unity_WorldToObject;
+    
+        vec3 imposterPivotOffset = _ImposterOffset.xyz;
+        half framesMinusOne = _ImposterFrames-1;
+        
+        float3 objectScale = float3(length(float3(objectToWorld[0].x, objectToWorld[1].x, objectToWorld[2].x)),
+                                    length(float3(objectToWorld[0].y, objectToWorld[1].y, objectToWorld[2].y)),
+                                    length(float3(objectToWorld[0].z, objectToWorld[1].z, objectToWorld[2].z)));
+                 
+        //pivot to camera ray
+        float3 pivotToCameraRay = normalize(objectSpaceCameraPos.xyz-imposterPivotOffset.xyz);
+    
+        //scale uv to single frame
+        texcoord = vec2(texcoord.x,texcoord.y)*(1.0/_ImposterFrames.x);  
+        
+        //radius * 2 * unity scaling
+        vec2 size = _ImposterSize.xx * 2.0; // * objectScale.xx; //unity_BillboardSize.xy                 
+        
+        vec3 projected = SpriteProjection( pivotToCameraRay, _ImposterFrames, size, texcoord.xy );
+    
+        //this creates the proper offset for vertices to camera facing billboard
+        vec3 vertexOffset = projected + imposterPivotOffset;
+        //subtract from camera pos 
+        vertexOffset = normalize(objectSpaceCameraPos-vertexOffset);
+        //then add the original projected world
+        vertexOffset += projected;
+        //remove position of vertex
+        vertexOffset -= vertex.xyz;
+        //add pivot
+        vertexOffset += imposterPivotOffset;
+    
+        //camera to projection vector
+        vec3 rayDirectionLocal = (imposterPivotOffset + projected) - objectSpaceCameraPos;
+                     
+        //projected position to camera ray
+        vec3 projInterpolated = normalize( objectSpaceCameraPos - (projected + imposterPivotOffset) ); 
+        
+        Ray rayLocal;
+        rayLocal.Origin = objectSpaceCameraPos-imposterPivotOffset; 
+        rayLocal.Direction = rayDirectionLocal; 
+        
+        vec2 grid = VectorToGrid( pivotToCameraRay );
+        vec2 gridRaw = grid;
+        grid = saturate((grid+1.0)*0.5); //bias and scale to 0 to 1 
+        grid *= framesMinusOne;
+        
+        vec2 gridFrac = frac(grid);
+        
+        vec2 gridFloor = floor(grid);
+        
+        vec4 weights = TriangleInterpolate( gridFrac ); 
+        
+        //3 nearest frames
+        vec2 frame0 = gridFloor;
+        vec2 frame1 = gridFloor + lerp(vec2(0,1),vec2(1,0),weights.w);
+        vec2 frame2 = gridFloor + vec2(1,1);
+        
+        //convert frame coordinate to octahedron direction
+        vec3 frame0ray = FrameXYToRay(frame0, framesMinusOne.xx);
+        vec3 frame1ray = FrameXYToRay(frame1, framesMinusOne.xx);
+        vec3 frame2ray = FrameXYToRay(frame2, framesMinusOne.xx);
+        
+        vec3 planeCenter = vec3(0,0,0);
+        
+        vec3 plane0x;
+        vec3 plane0normal = frame0ray;
+        vec3 plane0z;
+        vec3 frame0local = FrameTransform( projInterpolated, frame0ray, plane0x, plane0z );
+        frame0local.xz = frame0local.xz/_ImposterFrames.xx; //for displacement
+        
+        //virtual plane UV coordinates
+        vec2 vUv0 = VirtualPlaneUV( plane0normal, plane0x, plane0z, planeCenter, size, rayLocal );
+        vUv0 /= _ImposterFrames.xx;   
+        
+        vec3 plane1x; 
+        vec3 plane1normal = frame1ray;
+        vec3 plane1z;
+        vec3 frame1local = FrameTransform( projInterpolated, frame1ray, plane1x, plane1z);
+        frame1local.xz = frame1local.xz/_ImposterFrames.xx; //for displacement
+        
+        //virtual plane UV coordinates
+        vec2 vUv1 = VirtualPlaneUV( plane1normal, plane1x, plane1z, planeCenter, size, rayLocal );
+        vUv1 /= _ImposterFrames.xx;
+        
+        vec3 plane2x;
+        vec3 plane2normal = frame2ray;
+        vec3 plane2z;
+        vec3 frame2local = FrameTransform( projInterpolated, frame2ray, plane2x, plane2z );
+        frame2local.xz = frame2local.xz/_ImposterFrames.xx; //for displacement
+        
+        //virtual plane UV coordinates
+        vec2 vUv2 = VirtualPlaneUV( plane2normal, plane2x, plane2z, planeCenter, size, rayLocal );
+        vUv2 /= _ImposterFrames.xx;
+        
+        //add offset here
+        imp.vertex.xyz += vertexOffset;
+        //overwrite others
+        imp.uv = texcoord;
+        imp.grid = grid;
+        imp.frame0 = vec4(vUv0.xy,frame0local.xz);
+        imp.frame1 = vec4(vUv1.xy,frame1local.xz);
+        imp.frame2 = vec4(vUv2.xy,frame2local.xz);
+    }
+    
+    void main() {
+        vUv = uv;
+        
+        ImposterData imp;
+        imp.vertex = vec4(position, 1.0);
+        imp.uv = uv;
+        
+        ImposterVertex(imp);
+        
+        gl_Position = imp.vertex;
+        
+        float3 normalWorld = UnityObjectToWorldDir(v.normal.xyz);
+        float3 tangentWorld = UnityObjectToWorldDir(v.tangent.xyz);
+        float3x3 tangentToWorld = CreateTangentToWorldPerVertex(normalWorld, tangentWorld, v.tangent.w);
+        o.tangentWorld = tangentToWorld[0];
+        o.bitangentWorld = tangentToWorld[1];
+        o.normalWorld = tangentToWorld[2];
+        
+        //surface
+        o.texCoord.xy = imp.uv;
+        o.texCoord.zw = imp.grid;
+        o.plane0 = imp.frame0;
+        o.plane1 = imp.frame1;
+        o.plane2 = imp.frame2;
+    }
+`;
+const shader_fg = `
+    
+    in vec2 vUv;
+    
+    in vec4 plane0;
+    in vec4 plane1;
+    in vec4 plane2;
+    
+    struct Material{
+        vec3 diffuse;
+        vec3 normal;
+        float depth;
+        float occlusion;
+        float roughness;
+        float metalness;
+    };
+    
+    void ImposterSample( in ImposterData imp, out vec4 baseTex, out vec4 worldNormal )//, out half depth )
+    {
+        vec2 fracGrid = frac(imp.grid);
+        
+        vec4 weights = TriangleInterpolate( fracGrid );
+          
+        vec2 gridSnap = floor(imp.grid) / _ImposterFrames.xx;
+            
+        vec2 frame0 = gridSnap;
+        vec2 frame1 = gridSnap + (lerp(vec2(0,1),vec2(1,0),weights.w)/_ImposterFrames.xx);
+        vec2 frame2 = gridSnap + (vec2(1,1)/_ImposterFrames.xx);
+        
+        vec2 vp0uv = frame0 + imp.frame0.xy;
+        vec2 vp1uv = frame1 + imp.frame1.xy; 
+        vec2 vp2uv = frame2 + imp.frame2.xy;
+       
+        //resolution of atlas (Square)
+        float textureDims = _ImposterBaseTex_TexelSize.z;
+        //fractional frame size, ex 2048/12 = 170.6
+        float frameSize = textureDims/_ImposterFrames; 
+        //actual atlas resolution used, ex 170*12 = 2040
+        float actualDims = floor(frameSize) * _ImposterFrames; 
+        //the scale factor to apply to UV coordinate, ex 2048/2040 = 0.99609375
+        float scaleFactor = actualDims / textureDims;
+       
+        vp0uv *= scaleFactor;
+        vp1uv *= scaleFactor;
+        vp2uv *= scaleFactor;
+       
+        //clamp out neighboring frames TODO maybe discard instead?
+        vec2 gridSize = 1.0/_ImposterFrames.xx;
+        gridSize *= _ImposterBaseTex_TexelSize.zw;
+        gridSize *= _ImposterBaseTex_TexelSize.xy;
+        float2 border = _ImposterBaseTex_TexelSize.xy*_ImposterBorderClamp;
+        
+        //vp0uv = clamp(vp0uv,frame0+border,frame0+gridSize-border);
+        //vp1uv = clamp(vp1uv,frame1+border,frame1+gridSize-border);
+        //vp2uv = clamp(vp2uv,frame2+border,frame2+gridSize-border);
+       
+        //for parallax modify
+        vec4 n0 = tex2Dlod( _ImposterWorldNormalDepthTex, vec4(vp0uv, 0, 1 ) );
+        vec4 n1 = tex2Dlod( _ImposterWorldNormalDepthTex, vec4(vp1uv, 0, 1 ) );
+        vec4 n2 = tex2Dlod( _ImposterWorldNormalDepthTex, vec4(vp2uv, 0, 1 ) );
+            
+        half n0s = 0.5-n0.a;    
+        half n1s = 0.5-n1.a;
+        half n2s = 0.5-n2.a;
+        
+        vec2 n0p = imp.frame0.zw * n0s;
+        vec2 n1p = imp.frame1.zw * n1s;
+        vec2 n2p = imp.frame2.zw * n2s;
+        
+        //add parallax shift 
+        vp0uv += n0p;
+        vp1uv += n1p;
+        vp2uv += n2p;
+        
+        //clamp out neighboring frames TODO maybe discard instead?
+        vp0uv = clamp(vp0uv,frame0+border,frame0+gridSize-border);
+        vp1uv = clamp(vp1uv,frame1+border,frame1+gridSize-border);
+        vp2uv = clamp(vp2uv,frame2+border,frame2+gridSize-border);
+        
+        vec2 ddxy = vec2( ddx(imp.uv.x), ddy(imp.uv.y) );
+        
+        worldNormal = ImposterBlendWeights( _ImposterWorldNormalDepthTex, imp.uv, vp0uv, vp1uv, vp2uv, weights, ddxy );
+        baseTex = ImposterBlendWeights( _ImposterBaseTex, imp.uv, vp0uv, vp1uv, vp2uv, weights, ddxy );
+            
+        //pixel depth offset
+        //half pdo = 1-baseTex.a;
+        //float3 objectScale = float3(length(float3(unity_ObjectToWorld[0].x, unity_ObjectToWorld[1].x, unity_ObjectToWorld[2].x)),
+        //                        length(float3(unity_ObjectToWorld[0].y, unity_ObjectToWorld[1].y, unity_ObjectToWorld[2].y)),
+        //                        length(float3(unity_ObjectToWorld[0].z, unity_ObjectToWorld[1].z, unity_ObjectToWorld[2].z)));
+        //vec2 size = _ImposterSize.xx * 2.0;// * objectScale.xx;  
+        //vec3 viewWorld = mul( UNITY_MATRIX_VP, float4(0,0,1,0) ).xyz;
+        //pdo *= size * abs(dot(normalize(imp.viewDirWorld.xyz),viewWorld));
+        //depth = pdo;
+    }
+    
+    void main(){
+    
+    }
+`;
+
+export class ImpostorShaderStandard extends RawShaderMaterial {
+    constructor() {
+        super({
+            fragmentShader: shader_fg,
+            vertexShader: shader_vx,
+            uniforms: {
+                /**
+                 * RGB + Alpha
+                 */
+                tBase: {
+                    value: null
+                },
+                /**
+                 * Normal+Depth
+                 */
+                tGeometry: {
+                    value: null
+                },
+                /**
+                 * Material properties: Occlusion, Roughness, Metalness
+                 * Alpha unused
+                 */
+                tMaterial: {
+                    value: null
+                },
+                /**
+                 * Number of frames
+                 */
+                uFrames: {
+                    value: 0
+                },
+                /**
+                 * Radius of bounding sphere of the impostor
+                 */
+                uRadius: {
+                    value: 0
+                },
+                /**
+                 * Impostor offset
+                 */
+                uOffset: {
+                    value: new Vector3(0, 0, 0)
+                }
+            },
+            glslVersion: GLSL3
+        });
+
+        // Save some effort by disabling blending
+        this.blending = NoBlending;
+
+    }
+}