@woosh/meep-engine 2.42.8 → 2.43.0

package/engine/ecs/terrain/ecs/splat/SplatMapping.js

@@ -5,10 +5,10 @@ import { min2 } from "../../../../../core/math/min2.js";
 import { Sampler2D } from "../../../../graphics/texture/sampler/Sampler2D.js";
 import { assert } from "../../../../../core/assert.js";
 import { scaleSampler2D } from "../../../../graphics/texture/sampler/scaleSampler2D.js";
-import { countTask } from "../../../../../core/process/task/TaskUtils.js";
 import { array_copy } from "../../../../../core/collection/array/copyArray.js";
 import { typed_array_copy } from "../../../../../core/collection/array/typed/typed_array_copy.js";
 import { Base64 } from "../../../../../core/binary/Base64.js";
+import { countTask } from "../../../../../core/process/task/util/countTask.js";
 
 
 /**

package/engine/graphics/camera/makeScreenScissorFrustum.js

@@ -1,4 +1,4 @@
-import { Vector3 as ThreeVector3 } from "three/src/math/Vector3.js";
+import { Vector3 as ThreeVector3 } from "three";
 
 
 const farTL = new ThreeVector3();

package/engine/graphics/camera/testClippingPlaneComputation.js

@@ -59,6 +59,7 @@ import { computeStatisticalMean } from "../../../core/math/statistics/computeSta
 import { Transform } from "../../ecs/transform/Transform.js";
 import Mesh from "../ecs/mesh/Mesh.js";
 import { frustum_from_camera } from "../ecs/camera/frustum_from_camera.js";
+import { convex_hull_jarvis_2d } from "../../../core/geom/2d/convex-hull/convex_hull_jarvis_2d.js";
 
 const engineHarness = new EngineHarness();
 
@@ -190,59 +191,17 @@ function makeCameraClippingDebug(engine) {
 
     function drawConvexHull(vertices, fillColor, strokeColor) {
 
-        const jarvis_vertices = [];
-
-        /**
-         *
-         * @param {Vector3} p
-         * @param {Vector3} q
-         * @param {Vector3} r
-         */
-        function orientation(p, q, r) {
-            const val = (q.z - p.z) * (r.x - q.x) - (q.x - p.x) * (r.z - q.z);
-
-            if (val === 0) {
-                return 0;
-            }
-
-            return val > 0 ? 1 : 2;
-        }
-
-        let l = 0;
-        const n = vertices.length;
-        for (let i = 0; i < n; i++) {
-            if (vertices[i].x < vertices[l].x) {
-                l = i;
-            }
-        }
-
-        let p = l, q;
-
-        do {
-            jarvis_vertices.push(vertices[p]);
-
-            q = (p + 1) % n;
-
-            for (let i = 0; i < n; i++) {
-                if (orientation(vertices[p], vertices[i], vertices[q]) === 2) {
-                    q = i;
-                }
-            }
-
-            p = q;
-
-        } while (p !== l);
-
+        const jarvis_vertices = convex_hull_jarvis_2d(vertices.map(v => [v.x, v.z]).flat(), vertices.length);
 
         ctx.fillStyle = fillColor;
         ctx.strokeStyle = strokeColor;
 
         ctx.beginPath();
-        moveTo(jarvis_vertices[0].x, jarvis_vertices[0].z);
+        moveTo(vertices[jarvis_vertices[0]].x, vertices[jarvis_vertices[0]].z);
         // drawPoint(jarvis_vertices[0].x, jarvis_vertices[0].y, jarvis_vertices[0].z, 'red');
 
         for (let i = 0; i < jarvis_vertices.length; i++) {
-            const last = jarvis_vertices[i];
+            const last = vertices[jarvis_vertices[i]];
 
             lineTo(last.x, last.z);
 

package/engine/graphics/ecs/camera/FrustumProjector.js

@@ -230,7 +230,13 @@ function unproject(_x0, _y0, _z0, _x1, _y1, _z1, camera, callback) {
 }
 
 export default {
+    /**
+     * @deprecated use non-threejs specific code
+     */
     project,
     unproject,
+    /**
+     * @deprecated use non-threejs specific code
+     */
     projectInWorldSpace
 };

package/engine/graphics/ecs/decal/v2/FPDecalSystem.js

@@ -146,6 +146,11 @@ class Context extends SystemEntityContext {
     }
 }
 
+// TODO we can reduce memory usage and speed things up considerably by using a queue to wait for assets instead of using promises everywhere
+
+/**
+ *
+ */
 export class FPDecalSystem extends AbstractContextSystem {
     /**
      *

package/engine/graphics/ecs/decal/v2/prototypeDecalSystem.js

@@ -13,6 +13,9 @@ import { TransformAttachmentSystem } from "../../../../ecs/transform-attachment/
 import { SGMesh } from "../../mesh-v2/aggregate/SGMesh.js";
 import { GameAssetType } from "../../../../asset/GameAssetType.js";
 import { GLTFAssetLoader } from "../../../../asset/loaders/GLTFAssetLoader.js";
+import { TaskLoadingScreen } from "../../../../../view/task/TaskLoadingScreen.js";
+import '../../../../../../../../css/game.scss';
+import { countTask } from "../../../../../core/process/task/util/countTask.js";
 
 const decal_urls = `data/textures/icons/FantasyIconsMegaPack/MagicItems/MagicItems_png/transparent/x64/staff_13_t.png
 data/textures/icons/FantasyIconsMegaPack/MagicItems/MagicItems_png/transparent/x64/artifact_01_t.png
@@ -227,9 +230,9 @@ async function main(engine) {
 
     const random = seededRandom();
 
-    const ENTITY_COUNT = 10000;
+    const ENTITY_COUNT = 100000;
 
-    for (let i = 0; i < ENTITY_COUNT; i++) {
+    function makeOne() {
         const decal = new Decal();
 
         decal.uri = randomFromArray(random, decal_urls);
@@ -253,10 +256,26 @@ async function main(engine) {
         // .add(BehaviorComponent.fromOne(RotationBehavior.fromJSON({ speed: 1 })))
 
         entity.build(engine.entityManager.dataset);
-
     }
 
-    await promise_time_out(10);
+    // for (let i = 0; i < ENTITY_COUNT; i++) {
+    //     makeOne();
+    //
+    // }
+
+    const task = countTask(0, ENTITY_COUNT, makeOne);
+
+    TaskLoadingScreen.instance.load(engine, task);
+
+    // console.profile('spawn');
+
+    task.promise().then(() => {
+        // console.profileEnd('spawn');
+    });
+
+    engine.executor.run(task);
+
+    // await promise_time_out(10);
 
 
 }

package/engine/graphics/ecs/highlight/plugin/OutlineRenderPlugin.js

@@ -1,7 +1,7 @@
 import { max2 } from "../../../../../core/math/max2.js";
 import { EnginePlugin } from "../../../../plugin/EnginePlugin.js";
 import { OutlineRenderer } from "../renderer/OutlineRenderer.js";
-import { Scene as ThreeScene } from "three/src/scenes/Scene.js";
+import { Scene as ThreeScene } from "three";
 import { BlendingType } from "../../../texture/sampler/BlendingType.js";
 import { HighlightRenderGroup } from "../renderer/HighlightRenderGroup.js";
 import { ObjectPoolFactory } from "../../../../../core/model/object/ObjectPoolFactory.js";

package/engine/graphics/ecs/mesh-v2/ShadedGeometry.js

@@ -5,6 +5,7 @@ import { aabb3_matrix4_project } from "../../../../core/geom/3d/aabb/aabb3_matri
 import { mat4 } from "gl-matrix";
 import { ray3_array_apply_matrix4 } from "../../../../core/geom/3d/ray/ray3_array_apply_matrix4.js";
 import { GeometrySpatialQueryAccelerator } from "../../geometry/buffered/query/GeometrySpatialQueryAccelerator.js";
+import { assert } from "../../../../core/assert.js";
 
 /**
  * @readonly
@@ -298,6 +299,16 @@ export class ShadedGeometry {
         const y1 = max.y;
         const z1 = max.z;
 
+        // validate bounds
+        assert.notNaN(x0, 'x0');
+        assert.notNaN(y0, 'y0');
+        assert.notNaN(z0, 'z0');
+
+        assert.notNaN(x1, 'x1');
+        assert.notNaN(y1, 'y1');
+        assert.notNaN(z1, 'z1');
+
+        // marshal into transform-accepted format
         scratch_aabb3_array[0] = x0;
         scratch_aabb3_array[1] = y0;
         scratch_aabb3_array[2] = z0;

package/engine/graphics/geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js

@@ -1,5 +1,4 @@
-import { BufferGeometry } from "three/src/core/BufferGeometry.js";
-import { BufferAttribute } from "three/src/core/BufferAttribute.js";
+import { BufferAttribute, BufferGeometry } from "three";
 
 export const FULL_SCREEN_TRIANGLE_GEOMETRY = new BufferGeometry();
 FULL_SCREEN_TRIANGLE_GEOMETRY.setAttribute(

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

@@ -16,7 +16,7 @@ import { HemiOctahedralUvEncoder } from "./grid/HemiOctahedralUvEncoder.js";
 import { prepare_bake_material } from "./bake/prepare_bake_material.js";
 import { collectIteratorValueToArray } from "../../../../core/collection/IteratorUtils.js";
 import { compute_bounding_sphere } from "./bake/compute_bounding_sphere.js";
-import { buffer_geometry_ensure_tangents } from "../../geometry/MikkT/buffer_geometry_ensure_tangents.js";
+import { build_cutout_from_atlas_by_alpha } from "./util/build_cutout_from_atlas_by_alpha.js";
 
 export class ImpostorBaker {
 
@@ -134,7 +134,7 @@ export class ImpostorBaker {
             const source_mesh = object.mesh;
 
             // ensure tangents are generated
-            buffer_geometry_ensure_tangents(source_mesh.geometry);
+            //buffer_geometry_ensure_tangents(source_mesh.geometry);
 
             const source_material = source_mesh.material;
 
@@ -264,6 +264,9 @@ export class ImpostorBaker {
         // id.atlas = sampler;
         id.rt = rt;
 
+        // build cutout
+        id.cutout = build_cutout_from_atlas_by_alpha(id, renderer);
+
         return id;
     }
 

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

@@ -27,6 +27,12 @@ export class ImpostorDescription {
      */
     sphere_radius = 0;
 
+    /**
+     * How much space to leave between frames to ensure that there is no bleeding across frames
+     * @type {number}
+     */
+    padding = 0;
+
     /**
      * Baking offset
      * @type {number[]}
@@ -59,6 +65,18 @@ export class ImpostorDescription {
      */
     source_instance_count = 0;
 
+    /**
+     * Frame-relative sequence of points defining a hole-free shape
+     * Normalized between 0,0 and 1,1; Might extend further in some cases, should be clipped in shader in those cases
+     * @type {number[]}
+     */
+    cutout = [
+        0, 0,
+        1, 0,
+        1, 1,
+        0, 1
+    ];
+
 
     /**
      * TODO: replace with something non-three.js specific

package/engine/graphics/impostors/octahedral/bake/prepare_bake_material.js

@@ -1,4 +1,6 @@
 import { DataTexture, UnsignedByteType } from "three";
+import { float2uint8 } from "../../../../../core/binary/float2uint8.js";
+import { clamp01 } from "../../../../../core/math/clamp01.js";
 
 /**
  *
@@ -51,6 +53,19 @@ export function prepare_bake_material({
         texture_metalness = source_material.metalnessMap;
         texture_occlusion = source_material.aoMap;
         texture_emissive = source_material.emissiveMap;
+
+
+        if (texture_metalness === null) {
+            const m = float2uint8(clamp01(source_material.metalness));
+            texture_metalness = onePixelTexture([m, m, m, 255], cleanup_signal);
+        }
+
+        if (texture_roughness === null) {
+            const r = float2uint8(clamp01(source_material.roughness));
+
+            texture_roughness = onePixelTexture([r, r, r, 255], cleanup_signal);
+        }
+
     } else {
         if (source_material.map !== undefined && source_material.map !== null) {
             texture_diffuse = source_material.map;

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

@@ -1,26 +1,19 @@
 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 { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js";
 import { ImpostorShaderV0 } from "./shader/ImpostorShaderV0.js";
 import Quaternion from "../../../../core/geom/Quaternion.js";
-import { DEG2RAD } from "three/src/math/MathUtils.js";
 import { SGMesh } from "../../ecs/mesh-v2/aggregate/SGMesh.js";
 import { SGMeshSystem } from "../../ecs/mesh-v2/aggregate/SGMeshSystem.js";
 import { ShadedGeometryFlags } from "../../ecs/mesh-v2/ShadedGeometryFlags.js";
@@ -29,6 +22,11 @@ import { BehaviorComponent } from "../../../intelligence/behavior/ecs/BehaviorCo
 import Vector3 from "../../../../core/geom/Vector3.js";
 import { BehaviorSystem } from "../../../intelligence/behavior/ecs/BehaviorSystem.js";
 import { RotationBehavior } from "../../../intelligence/behavior/util/RotationBehavior.js";
+import { DEG_TO_RAD } from "../../../../core/math/DEG_TO_RAD.js";
+import { ImpostorShaderWireframeV0 } from "./shader/ImpostorShaderWireframeV0.js";
+import { makeImpostorAtlasPreview } from "./util/makeImpostorAtlasPreview.js";
+import { load_mesh_for_bake } from "./util/load_mesh_for_bake.js";
+import { build_geometry_from_cutout_shape } from "./util/build_geometry_from_cutout_shape.js";
 
 /**
  *
@@ -42,15 +40,18 @@ async function main(engine) {
         cameraFieldOfView: 45
     });
 
+    const ecd = engine.entityManager.dataset;
+
     const baker = new ImpostorBaker();
     const renderer = engine.graphics.renderer;
     baker.renderer = renderer;
 
 
     // const path = 'data/models/LowPolyTownshipSet/Small_house/Small_house.gltf';
+    // const path = 'data/models/road_bike/road_bike.gltf'; //large CAD-type model
     // const path = 'data/models/LowPolyTownshipSet/Barrel/model.gltf';
-    const path = 'data/models/LowPolyTownshipSet/Town_Hall/model.gltf';
-    // const path = 'data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf';
+    // const path = 'data/models/LowPolyTownshipSet/Town_Hall/model.gltf';
+    const path = 'data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf';
     // const path = 'data/models/MOBA and Tower Defense/Tree_01.gltf';
     // const path = 'data/models/samples/transform-hierarchy.glb';
     // const path = 'data/models/sponza-pbr/gltf/sponza.glb';
@@ -58,86 +59,37 @@ async function main(engine) {
     // const path = 'moicon/isiflow_Oct_15_21/1/model.gltf';
     // const path = 'moicon/Kople/EVCharger1.gltf';
 
-    const gltf_asset = await engine.assetManager.promise(path, GameAssetType.ModelGLTF_JSON);
-
-    const node_hierarchy = three_object_to_entity_composition(gltf_asset.create());
+    const objects = await load_mesh_for_bake(engine, path);
 
-
-    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()
-    //     }
-    // );
-
-    console.profile('bake');
+    // console.profile('bake');
     const id = baker.bake({
         objects,
-        frames: 16,
-        resolution: 2048,
-        type: ImpostorCaptureType.FullSphere
+        frames: 8,
+        resolution: 1024,
+        type: ImpostorCaptureType.Hemisphere
     });
-    console.profileEnd('bake');
+    // console.profileEnd('bake');
 
     console.log(id);
 
-    const ctrl = buildCanvasViewFromTexture({
-        texture: id.rt.texture[0],
-        renderer: renderer,
-        // swizzle: ['a', 'a', 'a', 1]
-        // swizzle: ['r', 'g', 'b', 1]
-        swizzle: ['r', 'g', 'b', 'a']
-    });
-    ctrl.view.css({
-        opacity: 1
-    });
-    ctrl.render();
-
-    const cv = new CanvasView();
-    cv.size.set(id.atlas.width, id.atlas.height);
-    cv.css({
-        background: "rgba(0,0,0,0.1)"
+    const ctrl = makeImpostorAtlasPreview({
+        impostor: id,
+        renderer,
+        mode: 'alpha'
     });
 
-    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))
+        .add(GUIElement.fromView(ctrl))
     // .build(ecd);
 
+    // build out preview scene with impostor and the original
     const t0 = Transform.fromJSON({
         position: { x: 10, y: 0.5, z: 10 },
         scale: 3,
-        rotation: Quaternion.fromEulerAngles(0, 90 * DEG2RAD, 0)
+        rotation: Quaternion.fromEulerAngles(0, 90 * DEG_TO_RAD, 0)
     });
 
     t0.scale.setScalar(3 / (id.sphere_radius * 2));
@@ -145,10 +97,12 @@ async function main(engine) {
     const entity_impostor = make_impostor_entity(id, t0);
     entity_impostor.build(ecd);
 
+    const entity_impostor_wireframe = make_impostor_wireframe(id, t0);
+    entity_impostor_wireframe.build(ecd);
+
     const t1 = new Transform();
     t1.copy(t0);
     t1.position._add(3, 0, 0);
-    // t1.scale.setScalar(1.9);
 
     const sg_mesh = SGMesh.fromURL(path);
 
@@ -187,6 +141,43 @@ function make_spin(entity, speed = 1, axis = Vector3.up) {
     })));
 }
 
+/**
+ *
+ * @param {{tBase,tGeometry,uFrames,uOffset,uRadius,uIsFullSphere}} uniforms
+ * @param {ImpostorDescription} id
+ */
+function write_impostor_definition_to_material_uniforms(uniforms, id) {
+
+    uniforms.tBase.value = id.rt.texture[0];
+    uniforms.tGeometry.value = id.rt.texture[1];
+    uniforms.uFrames.value = id.frame_count;
+    uniforms.uOffset.value.set(id.offset[0], id.offset[1], id.offset[2]);
+    uniforms.uRadius.value = id.sphere_radius;
+    uniforms.uIsFullSphere.value = id.capture_type === ImpostorCaptureType.FullSphere;
+}
+
+function make_impostor_wireframe(id, t = new Transform()) {
+    const mat = new ImpostorShaderWireframeV0();
+
+    mat.wireframe = true;
+    write_impostor_definition_to_material_uniforms(mat.uniforms, id);
+
+    const transform = new Transform();
+
+    transform.copy(t);
+
+    const sg = ShadedGeometry.from(build_geometry_from_cutout_shape(id.cutout), mat);
+
+    sg.depth_material = mat;
+    sg.clearFlag(ShadedGeometryFlags.CastShadow);
+    sg.clearFlag(ShadedGeometryFlags.ReceiveShadow);
+
+    return new EntityBuilder()
+        .add(transform)
+        .add(sg)
+        ;
+}
+
 /**
  *
  * @param {ImpostorDescription} id
@@ -197,18 +188,13 @@ function make_impostor_entity(id, t = new Transform()) {
 
     const mat = new ImpostorShaderV0();
 
-    mat.uniforms.tBase.value = id.rt.texture[0];
-    mat.uniforms.tGeometry.value = id.rt.texture[1];
-    mat.uniforms.uFrames.value = id.frame_count;
-    mat.uniforms.uOffset.value.set(id.offset[0], id.offset[1], id.offset[2]);
-    mat.uniforms.uRadius.value = id.sphere_radius;
-    mat.uniforms.uIsFullSphere.value = id.capture_type === ImpostorCaptureType.FullSphere;
+    write_impostor_definition_to_material_uniforms(mat.uniforms, id);
 
     const transform = new Transform();
 
     transform.copy(t);
 
-    const sg = ShadedGeometry.from(new PlaneBufferGeometry(1, 1, 1), mat);
+    const sg = ShadedGeometry.from(build_geometry_from_cutout_shape(id.cutout), mat);
 
     sg.depth_material = mat;
     sg.clearFlag(ShadedGeometryFlags.CastShadow);
@@ -218,6 +204,7 @@ function make_impostor_entity(id, t = new Transform()) {
         .add(transform)
         .add(sg)
         ;
+
 }
 
 new EngineHarness().initialize({

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

@@ -0,0 +1,134 @@
+import {
+    AddEquation,
+    CustomBlending,
+    GLSL3,
+    OneFactor,
+    OneMinusSrcAlphaFactor,
+    RawShaderMaterial,
+    Vector3
+} from "three";
+
+/*
+ *
+ * For ray projection using projection matrix : https://encreative.blogspot.com/2019/05/computing-ray-origin-and-direction-from.html
+ */
+const shader_vx = `
+    
+    in vec3 position;
+    
+    uniform mat4 modelViewMatrix;
+    uniform mat4 projectionMatrix;
+    uniform mat3 normalMatrix;
+    
+    uniform vec3 uOffset;
+    uniform float uRadius;
+    uniform float uFrames;
+    
+    void main() {
+        
+        vec2 framesMinusOne = uFrames - vec2(1.0);
+        
+        mat4 m4 = modelViewMatrix;
+        
+        m4[0][0] = 1.0;
+        m4[0][1] = 0.0;
+        m4[0][2] = 0.0;
+
+        m4[1][0] = 0.0;
+        m4[1][1] = 1.0;
+        m4[1][2] = 0.0;
+
+        m4[2][0] = 0.0;
+        m4[2][1] = 0.0;
+        m4[2][2] = 1.0;
+        
+        vec3 object_scale = vec3(
+            length(modelViewMatrix[0].xyz),
+            length(modelViewMatrix[1].xyz),
+            length(modelViewMatrix[2].xyz)
+        ); 
+        
+        // scale by object's baking bounding sphere's radius
+        float card_diameter = uRadius*2.0;
+        object_scale *= card_diameter;
+        
+        vec4 mvPosition = m4 * vec4( object_scale*(position+uOffset/card_diameter), 1.0 );
+                
+        gl_Position = projectionMatrix * mvPosition;
+        
+    }
+`;
+const shader_fg = `
+    precision highp float;
+    precision highp int;
+    
+    out vec4 color_out;
+
+    void main(){
+        
+        color_out = vec4(1.0, .0, .0, 1.0);
+    }
+`;
+
+export class ImpostorShaderWireframeV0 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)
+                },
+                uIsFullSphere: {
+                    value: false
+                },
+                uDepthScale: {
+                    // value should be in range between 0 and 1
+                    value: 1
+                }
+            },
+            glslVersion: GLSL3
+        });
+
+        // Save some effort by disabling blending
+        this.blending = CustomBlending;
+        this.blendEquation = AddEquation;
+        this.blendSrc = OneFactor;
+        this.blendDst = OneMinusSrcAlphaFactor;
+
+    }
+}