889 wip.2

src/entity/EntityCollection.ts

@@ -602,6 +602,8 @@ class EntityCollection {
 
             this.updateBillboardsTextureAtlas();
             this.updateLabelsFontAtlas();
+            this.updateStrokeTextureAtlas();
+
             this.createPickingColors();
         }
     }
@@ -651,6 +653,24 @@ class EntityCollection {
         }
     }
 
+    /**
+     * Updates stroke texture atlas.
+     * @public
+     */
+    public updateStrokeTextureAtlas() {
+        // Rays
+        let r = this.rayHandler.rays;
+        for (let i = 0; i < r.length; i++) {
+            r[i].setSrc(r[i].getSrc());
+        }
+
+        //Polylines
+        //@todo
+
+        //Strips
+        //@todo
+    }
+
     /**
      * Removes collection from render node.
      * @public

src/entity/Ray.ts

@@ -5,6 +5,7 @@ import type {NumberArray3} from "../math/Vec3";
 import type {NumberArray4} from "../math/Vec4";
 import {Entity} from "./Entity";
 import {RayHandler} from "./RayHandler";
+import type {HTMLImageElementExt} from "../utils/ImagesCacheManager";
 
 export interface IRayParams {
     thickness?: number;
@@ -13,7 +14,8 @@ export interface IRayParams {
     startColor?: string | NumberArray4;
     endColor?: string | NumberArray4;
     visibility?: boolean;
-
+    src?: string;
+    image?: HTMLImageElement;
 }
 
 /**
@@ -79,6 +81,20 @@ class Ray {
      */
     public _handlerIndex: number;
 
+    /**
+     * Stroke image src.
+     * @protected
+     * @type {string}
+     */
+    protected _src: string | null;
+
+    /**
+     * Stroke image object.
+     * @protected
+     * @type {Object}
+     */
+    protected _image: HTMLImageElement & { __nodeIndex?: number } | null;
+
     constructor(options: IRayParams = {}) {
 
         this.__id = Ray.__counter__++;
@@ -109,6 +125,10 @@ class Ray {
         this._handler = null;
 
         this._handlerIndex = -1;
+
+        this._image = options.image || null;
+
+        this._src = options.src || null;
     }
 
     /**
@@ -139,6 +159,53 @@ class Ray {
         return this._startPosition.distance(this._endPosition);
     }
 
+    /**
+     * Sets image template url source.
+     * @public
+     * @param {string} src - Image url.
+     */
+    public setSrc(src: string | null) {
+        this._src = src;
+        let bh = this._handler;
+        if (bh && src && src.length) {
+            let rn = bh._entityCollection.renderNode;
+            if (rn && rn.renderer) {
+                let ta = rn.renderer.strokeTextureAtlas;
+                ta.loadImage(src, (img: HTMLImageElementExt)=> {
+                    if (img.__nodeIndex != undefined && ta.get(img.__nodeIndex)) {
+                        this._image = img;
+                        bh!.setTexCoordArr(
+                            this._handlerIndex,
+                            ta.get(this._image!.__nodeIndex!)!.texCoords
+                        );
+                    } else {
+                        ta.addImage(img);
+                        ta.createTexture();
+                        this._image = img;
+                        rn!.updateTexCoords();
+                    }
+                });
+            }
+        }
+    }
+
+    public getSrc(): string | null {
+        return this._src;
+    }
+
+    /**
+     * Sets image template object.
+     * @public
+     * @param {Object} image - JavaScript image object.
+     */
+    public setImage(image: HTMLImageElement) {
+        this.setSrc(image.src);
+    }
+
+    public getImage(): HTMLImageElementExt | null {
+        return this._image;
+    }
+
     /**
      * Sets ray start position.
      * @public

src/entity/RayHandler.ts

@@ -14,6 +14,7 @@ const END_POSITION_BUFFER = 2;
 const RGBA_BUFFER = 3;
 const THICKNESS_BUFFER = 4;
 const VERTEX_BUFFER = 5;
+const TEXCOORD_BUFFER = 6;
 
 /*
  * og.RayHandler
@@ -33,7 +34,7 @@ class RayHandler {
      */
     public pickingEnabled: boolean;
 
-    protected _entityCollection: EntityCollection;
+    public _entityCollection: EntityCollection;
 
     protected _renderer: Renderer | null;
 
@@ -112,6 +113,10 @@ class RayHandler {
         }
     }
 
+    public get rays(): Ray[] {
+        return [...this._rays];
+    }
+
     public initProgram() {
         if (this._renderer && this._renderer.handler) {
             if (!this._renderer.handler.programs.rayScreen) {
@@ -732,6 +737,48 @@ class RayHandler {
             this._pickingColorArr.length / 3
         );
     }
+
+    public setTexCoordArr(index: number, tcoordArr: number[] | TypedArray) {
+        let i = index * 12;
+        let a = this._texCoordArr;
+
+        a[i] = tcoordArr[0];
+        a[i + 1] = tcoordArr[1];
+
+        a[i + 2] = tcoordArr[2];
+        a[i + 3] = tcoordArr[3];
+
+        a[i + 4] = tcoordArr[4];
+        a[i + 5] = tcoordArr[5];
+
+        a[i + 6] = tcoordArr[6];
+        a[i + 7] = tcoordArr[7];
+
+        a[i + 8] = tcoordArr[8];
+        a[i + 9] = tcoordArr[9];
+
+        a[i + 10] = tcoordArr[10];
+        a[i + 11] = tcoordArr[11];
+
+        this._changedBuffers[TEXCOORD_BUFFER] = true;
+    }
+
+    public refreshTexCoordsArr() {
+        let bc = this._entityCollection;
+        if (bc && this._renderer) {
+            let ta = this._renderer.strokeTextureAtlas;
+            for (let i = 0; i < this._rays.length; i++) {
+                let ri = this._rays[i];
+                let img = ri.getImage();
+                if (img) {
+                    let imageNode = ta.get(img.__nodeIndex!);
+                    if (imageNode) {
+                        this.setTexCoordArr(ri._handlerIndex, imageNode.texCoords);
+                    }
+                }
+            }
+        }
+    }
 }
 
 export {RayHandler};

src/scene/RenderNode.ts

@@ -319,11 +319,18 @@ class RenderNode extends BaseNode {
         }
     }
 
-    // public updateGeoObjectsTexCoords() {
+    public updateTexCoords() {
-    //     for (let i = 0; i < this.entityCollections.length; i++) {
+        //Ray
-    //         this.entityCollections[i].geoObjectHandler.refreshTexCoordsArr();
+        for (let i = 0; i < this.entityCollections.length; i++) {
-    //     }
+            this.entityCollections[i].rayHandler.refreshTexCoordsArr();
-    // }
+        }
+
+        //Polyline
+        //@todo
+
+        //Strips
+        //@todo
+    }
 
     public frame() {
         // virtual