889 wip.bb added texOffset parameter

src/entity/Ray.ts

@@ -16,6 +16,7 @@ export interface IRayParams {
     visibility?: boolean;
     src?: string;
     image?: HTMLImageElement;
+    texOffset?: number;
 }
 
 /**
@@ -95,6 +96,8 @@ class Ray {
      */
     protected _image: HTMLImageElement & { __nodeIndex?: number } | null;
 
+    protected _texOffset: number;
+
     constructor(options: IRayParams = {}) {
 
         this.__id = Ray.__counter__++;
@@ -129,6 +132,8 @@ class Ray {
         this._image = options.image || null;
 
         this._src = options.src || null;
+
+        this._texOffset = options.texOffset || 0;
     }
 
     /**
@@ -307,6 +312,15 @@ class Ray {
         this._handler && this._handler.setRgbaArr(this._handlerIndex, this._startColor, this._endColor);
     }
 
+    public get texOffset(): number {
+        return this._texOffset;
+    }
+
+    public set texOffset(value: number) {
+        this._texOffset = value;
+        this._handler && this._handler.setTexOffsetArr(this._handlerIndex, value);
+    }
+
     /**
      * Returns ray start position.
      * @public

src/entity/RayHandler.ts

@@ -1,5 +1,5 @@
 import * as shaders from "../shaders/ray/ray";
-import {concatArrays, concatTypedArrays, makeArrayTyped, spliceArray} from "../utils/shared";
+import {concatArrays, concatTypedArrays, makeArrayTyped, spliceArray, spliceTypedArray} from "../utils/shared";
 import type {TypedArray} from "../utils/shared";
 import {EntityCollection} from "./EntityCollection";
 import {Ray} from "./Ray";
@@ -15,6 +15,7 @@ const RGBA_BUFFER = 3;
 const THICKNESS_BUFFER = 4;
 const VERTEX_BUFFER = 5;
 const TEXCOORD_BUFFER = 6;
+const TEXOFFSET_BUFFER = 7;
 
 /*
  * og.RayHandler
@@ -49,6 +50,7 @@ class RayHandler {
     protected _thicknessBuffer: WebGLBufferExt | null;
     protected _rgbaBuffer: WebGLBufferExt | null;
     protected _pickingColorBuffer: WebGLBufferExt | null;
+    protected _texOffsetBuffer: WebGLBufferExt | null;
 
     protected _vertexArr: TypedArray | number[];
     protected _texCoordArr: TypedArray;
@@ -59,6 +61,7 @@ class RayHandler {
     protected _thicknessArr: TypedArray | number[];
     protected _rgbaArr: TypedArray | number[];
     protected _pickingColorArr: TypedArray | number[];
+    protected _texOffsetArr: TypedArray;
 
     protected _buffersUpdateCallbacks: Function[];
     protected _changedBuffers: boolean[];
@@ -89,6 +92,7 @@ class RayHandler {
         this._thicknessBuffer = null;
         this._rgbaBuffer = null;
         this._pickingColorBuffer = null;
+        this._texOffsetBuffer = null;
 
         this._vertexArr = [];
         this._texCoordArr = new Float32Array([]);
@@ -99,6 +103,7 @@ class RayHandler {
         this._thicknessArr = [];
         this._rgbaArr = [];
         this._pickingColorArr = [];
+        this._texOffsetArr = new Float32Array([]);
 
         this._buffersUpdateCallbacks = [];
         this._buffersUpdateCallbacks[VERTEX_BUFFER] = this.createVertexBuffer;
@@ -108,6 +113,7 @@ class RayHandler {
         this._buffersUpdateCallbacks[RGBA_BUFFER] = this.createRgbaBuffer;
         this._buffersUpdateCallbacks[PICKINGCOLOR_BUFFER] = this.createPickingColorBuffer;
         this._buffersUpdateCallbacks[TEXCOORD_BUFFER] = this.createTexCoordBuffer;
+        this._buffersUpdateCallbacks[TEXOFFSET_BUFFER] = this.createTexOffsetBuffer;
 
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
     }
@@ -175,6 +181,8 @@ class RayHandler {
         this._thicknessArr = null;
         //@ts-ignore
         this._rgbaArr = null;
+        //@ts-ignore
+        this._texOffsetArr = null;
 
         this._vertexArr = new Float32Array([]);
         this._texCoordArr = new Float32Array([]);
@@ -184,6 +192,7 @@ class RayHandler {
         this._endPositionLowArr = new Float32Array([]);
         this._thicknessArr = new Float32Array([]);
         this._rgbaArr = new Float32Array([]);
+        this._texOffsetArr = new Float32Array([]);
 
         this._removeRays();
         this._deleteBuffers();
@@ -203,6 +212,7 @@ class RayHandler {
                 gl.deleteBuffer(this._rgbaBuffer!);
                 gl.deleteBuffer(this._vertexBuffer!);
                 gl.deleteBuffer(this._texCoordBuffer!);
+                gl.deleteBuffer(this._texOffsetBuffer!);
             }
 
             this._startPositionHighBuffer = null;
@@ -213,6 +223,7 @@ class RayHandler {
             this._rgbaBuffer = null;
             this._vertexBuffer = null;
             this._texCoordBuffer = null;
+            this._texOffsetBuffer = null;
         }
     }
 
@@ -251,6 +262,8 @@ class RayHandler {
             );
         }
 
+        this._texOffsetArr = concatTypedArrays(this._texOffsetArr, [0, 0, 0, 0, 0, 0]);
+
         this._texCoordArr = concatTypedArrays(this._texCoordArr, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
 
         let x = ray._startPositionHigh.x,
@@ -347,9 +360,12 @@ class RayHandler {
         gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer!);
         gl.vertexAttribPointer(sha.a_vertices, this._vertexBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordBuffer as WebGLBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._texCoordBuffer!);
         gl.vertexAttribPointer(sha.a_texCoord, this._texCoordBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._texOffsetBuffer!);
+        gl.vertexAttribPointer(sha.a_texOffset, this._texOffsetBuffer!.itemSize, gl.FLOAT, false, 0, 0);
+
         gl.drawArrays(gl.TRIANGLES, 0, this._vertexBuffer!.numItems);
 
         gl.enable(gl.CULL_FACE);
@@ -387,6 +403,7 @@ class RayHandler {
 
         let i = ri * 24;
         this._rgbaArr = spliceArray(this._rgbaArr, i, 24);
+        this._texCoordArr = spliceTypedArray(this._texCoordArr, i, 24);
 
         i = ri * 18;
         this._startPositionHighArr = spliceArray(this._startPositionHighArr, i, 18);
@@ -400,6 +417,7 @@ class RayHandler {
 
         i = ri * 6;
         this._thicknessArr = spliceArray(this._thicknessArr, i, 6);
+        this._texOffsetArr = spliceTypedArray(this._texOffsetArr, i, 6);
 
         this.reindexRaysArray(ri);
         this.refresh();
@@ -746,10 +764,15 @@ class RayHandler {
 
     public createTexCoordBuffer() {
         let h = this._renderer!.handler;
-        h.gl!.deleteBuffer(this._texCoordBuffer as WebGLBuffer);
+        h.gl!.deleteBuffer(this._texCoordBuffer!);
         this._texCoordBuffer = h.createArrayBuffer(this._texCoordArr, 4, this._texCoordArr.length / 4);
     }
 
+    public createTexOffsetBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._texOffsetBuffer!);
+        this._texOffsetBuffer = h.createArrayBuffer(this._texOffsetArr, 1, this._texOffsetArr.length);
+    }
 
     public createPickingColorBuffer() {
         let h = this._renderer!.handler;
@@ -799,6 +822,21 @@ class RayHandler {
         this._changedBuffers[TEXCOORD_BUFFER] = true;
     }
 
+    public setTexOffsetArr(index: number, value: number) {
+        let i = index * 6;
+        let a = this._texOffsetArr;
+
+        a[i] = value;
+        a[i + 1] = value;
+        a[i + 2] = value;
+        a[i + 3] = value;
+        a[i + 4] = value;
+        a[i + 5] = value;
+
+        this._changedBuffers[TEXOFFSET_BUFFER] = true;
+    }
+
+
     public refreshTexCoordsArr() {
         let bc = this._entityCollection;
         if (bc && this._renderer) {

src/shaders/ray/ray.frag.glsl

@@ -4,11 +4,11 @@ uniform sampler2D texAtlas;
 
 varying vec4 v_rgba;
 varying vec4 v_texCoord;
+varying float v_texOffset;
 
 void main() {
 
     float repeat = 10.0;
-    float offset = 0.0;
 
     vec2 uv = v_texCoord.xy;
     float min = v_texCoord.z;
@@ -16,7 +16,7 @@ void main() {
 
     float EPS = 0.5 / 1024.0; //Atlas height
 
-    float localY = fract((uv.y + offset - min) / height * repeat);
+    float localY = fract((uv.y + v_texOffset - min) / height * repeat);
     uv.y = clamp(min + localY * height, min + EPS, min + height - EPS);
 
     vec4 color = texture2D(texAtlas, uv);

src/shaders/ray/ray.ts

@@ -22,7 +22,8 @@ export function rayScreen(): Program {
             a_endPosHigh: "vec3",
             a_endPosLow: "vec3",
             a_thickness: "float",
-            a_rgba: "vec4"
+            a_rgba: "vec4",
+            a_texOffset: "float"
         },
         vertexShader: ray_vert,
         fragmentShader: ray_frag

src/shaders/ray/ray.vert.glsl

@@ -8,9 +8,11 @@ attribute vec3 a_endPosLow;
 attribute vec2 a_vertices;
 attribute float a_thickness;
 attribute vec4 a_texCoord;
+attribute float a_texOffset;
 
 varying vec4 v_rgba;
 varying vec4 v_texCoord;
+varying float v_texOffset;
 
 uniform mat4 viewMatrix;
 uniform mat4 projectionMatrix;
@@ -21,6 +23,7 @@ uniform float uOpacity;
 
 void main() {
 
+    v_texOffset = a_texOffset;
     v_rgba = vec4(a_rgba.rgb, a_rgba.a * uOpacity);
     v_texCoord = a_texCoord;