889 cc

src/entity/Ray.ts

@@ -17,6 +17,7 @@ export interface IRayParams {
     src?: string;
     image?: HTMLImageElement;
     texOffset?: number;
+    strokeSize?: number;
 }
 
 /**
@@ -98,6 +99,8 @@ class Ray {
 
     protected _texOffset: number;
 
+    protected _strokeSize: number;
+
     constructor(options: IRayParams = {}) {
 
         this.__id = Ray.__counter__++;
@@ -134,6 +137,8 @@ class Ray {
         this._src = options.src || null;
 
         this._texOffset = options.texOffset || 0;
+
+        this._strokeSize = options.strokeSize != undefined ? options.strokeSize : 32;
     }
 
     /**
@@ -321,6 +326,15 @@ class Ray {
         this._handler && this._handler.setTexOffsetArr(this._handlerIndex, value);
     }
 
+    public get strokeSize(): number {
+        return this._strokeSize;
+    }
+
+    public set strokeSize(value: number) {
+        this._strokeSize = value;
+        this._handler && this._handler.setStrokeSizeArr(this._handlerIndex, value);
+    }
+
     /**
      * Returns ray start position.
      * @public

src/entity/RayHandler.ts

@@ -16,6 +16,7 @@ const THICKNESS_BUFFER = 4;
 const VERTEX_BUFFER = 5;
 const TEXCOORD_BUFFER = 6;
 const TEXOFFSET_BUFFER = 7;
+const STROKESIZE_BUFFER = 8;
 
 /*
  * og.RayHandler
@@ -51,6 +52,7 @@ class RayHandler {
     protected _rgbaBuffer: WebGLBufferExt | null;
     protected _pickingColorBuffer: WebGLBufferExt | null;
     protected _texOffsetBuffer: WebGLBufferExt | null;
+    protected _strokeSizeBuffer: WebGLBufferExt | null;
 
     protected _vertexArr: TypedArray | number[];
     protected _texCoordArr: TypedArray;
@@ -62,6 +64,7 @@ class RayHandler {
     protected _rgbaArr: TypedArray | number[];
     protected _pickingColorArr: TypedArray | number[];
     protected _texOffsetArr: TypedArray;
+    protected _strokeSizeArr: TypedArray;
 
     protected _buffersUpdateCallbacks: Function[];
     protected _changedBuffers: boolean[];
@@ -93,6 +96,7 @@ class RayHandler {
         this._rgbaBuffer = null;
         this._pickingColorBuffer = null;
         this._texOffsetBuffer = null;
+        this._strokeSizeBuffer = null;
 
         this._vertexArr = [];
         this._texCoordArr = new Float32Array([]);
@@ -104,6 +108,7 @@ class RayHandler {
         this._rgbaArr = [];
         this._pickingColorArr = [];
         this._texOffsetArr = new Float32Array([]);
+        this._strokeSizeArr = new Float32Array([]);
 
         this._buffersUpdateCallbacks = [];
         this._buffersUpdateCallbacks[VERTEX_BUFFER] = this.createVertexBuffer;
@@ -114,6 +119,8 @@ class RayHandler {
         this._buffersUpdateCallbacks[PICKINGCOLOR_BUFFER] = this.createPickingColorBuffer;
         this._buffersUpdateCallbacks[TEXCOORD_BUFFER] = this.createTexCoordBuffer;
         this._buffersUpdateCallbacks[TEXOFFSET_BUFFER] = this.createTexOffsetBuffer;
+        this._buffersUpdateCallbacks[STROKESIZE_BUFFER] = this.createStrokeSizeBuffer;
+
 
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
     }
@@ -183,6 +190,8 @@ class RayHandler {
         this._rgbaArr = null;
         //@ts-ignore
         this._texOffsetArr = null;
+        //@ts-ignore
+        this._strokeSizeArr = null;
 
         this._vertexArr = new Float32Array([]);
         this._texCoordArr = new Float32Array([]);
@@ -193,6 +202,7 @@ class RayHandler {
         this._thicknessArr = new Float32Array([]);
         this._rgbaArr = new Float32Array([]);
         this._texOffsetArr = new Float32Array([]);
+        this._strokeSizeArr = new Float32Array([]);
 
         this._removeRays();
         this._deleteBuffers();
@@ -213,6 +223,7 @@ class RayHandler {
                 gl.deleteBuffer(this._vertexBuffer!);
                 gl.deleteBuffer(this._texCoordBuffer!);
                 gl.deleteBuffer(this._texOffsetBuffer!);
+                gl.deleteBuffer(this._strokeSizeBuffer!);
             }
 
             this._startPositionHighBuffer = null;
@@ -224,6 +235,7 @@ class RayHandler {
             this._vertexBuffer = null;
             this._texCoordBuffer = null;
             this._texOffsetBuffer = null;
+            this._strokeSizeBuffer = null;
         }
     }
 
@@ -262,12 +274,16 @@ class RayHandler {
             );
         }
 
-        this._texOffsetArr = concatTypedArrays(this._texOffsetArr, [0, 0, 0, 0, 0, 0]);
+        let x = ray.texOffset;
+        this._texOffsetArr = concatTypedArrays(this._texOffsetArr, [x, x, x, x, x, x]);
+
+        x = ray.strokeSize;
+        this._strokeSizeArr = concatTypedArrays(this._strokeSizeArr, [x, x, x, x, x, x]);
 
         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,
+        x = ray._startPositionHigh.x;
-            y = ray._startPositionHigh.y,
+        let y = ray._startPositionHigh.y,
             z = ray._startPositionHigh.z;
         this._startPositionHighArr = concatArrays(this._startPositionHighArr, [x, y, z, x, y, z, x, y, z, x, y, z, x, y, z, x, y, z]);
 
@@ -338,6 +354,7 @@ class RayHandler {
         gl.uniform3fv(shu.eyePositionLow, r.activeCamera!.eyeLow);
 
         gl.uniform1f(shu.resolution, r.activeCamera!._tanViewAngle_hradOneByHeight);
+        gl.uniform2fv(shu.viewport, [r.handler.canvas!.width, r.handler.canvas!.height]);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this._startPositionHighBuffer!);
         gl.vertexAttribPointer(sha.a_startPosHigh, this._startPositionHighBuffer!.itemSize, gl.FLOAT, false, 0, 0);
@@ -366,6 +383,9 @@ class RayHandler {
         gl.bindBuffer(gl.ARRAY_BUFFER, this._texOffsetBuffer!);
         gl.vertexAttribPointer(sha.a_texOffset, this._texOffsetBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._strokeSizeBuffer!);
+        gl.vertexAttribPointer(sha.a_strokeSize, this._strokeSizeBuffer!.itemSize, gl.FLOAT, false, 0, 0);
+
         gl.drawArrays(gl.TRIANGLES, 0, this._vertexBuffer!.numItems);
 
         gl.enable(gl.CULL_FACE);
@@ -418,6 +438,7 @@ class RayHandler {
         i = ri * 6;
         this._thicknessArr = spliceArray(this._thicknessArr, i, 6);
         this._texOffsetArr = spliceTypedArray(this._texOffsetArr, i, 6);
+        this._strokeSizeArr = spliceTypedArray(this._strokeSizeArr, i, 6);
 
         this.reindexRaysArray(ri);
         this.refresh();
@@ -774,6 +795,12 @@ class RayHandler {
         this._texOffsetBuffer = h.createArrayBuffer(this._texOffsetArr, 1, this._texOffsetArr.length);
     }
 
+    public createStrokeSizeBuffer() {
+        let h = this._renderer!.handler;
+        h.gl!.deleteBuffer(this._strokeSizeBuffer!);
+        this._strokeSizeBuffer = h.createArrayBuffer(this._strokeSizeArr, 1, this._strokeSizeArr.length);
+    }
+
     public createPickingColorBuffer() {
         let h = this._renderer!.handler;
         h.gl!.deleteBuffer(this._pickingColorBuffer as WebGLBuffer);
@@ -836,6 +863,20 @@ class RayHandler {
         this._changedBuffers[TEXOFFSET_BUFFER] = true;
     }
 
+    public setStrokeSizeArr(index: number, value: number) {
+        let i = index * 6;
+        let a = this._strokeSizeArr;
+
+        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[STROKESIZE_BUFFER] = true;
+    }
+
 
     public refreshTexCoordsArr() {
         let bc = this._entityCollection;

src/shaders/ray/ray.ts

@@ -12,7 +12,8 @@ export function rayScreen(): Program {
             eyePositionLow: "vec3",
             resolution: "float",
             uOpacity: "float",
-            texAtlas: "sampler2d"
+            texAtlas: "sampler2d",
+            viewport: "vec2",
         },
         attributes: {
             a_vertices: "vec2",

src/shaders/ray/ray.vert.glsl

@@ -21,6 +21,11 @@ uniform vec3 eyePositionHigh;
 uniform vec3 eyePositionLow;
 uniform float resolution;
 uniform float uOpacity;
+uniform vec2 viewport;
+
+vec2 project(vec4 p) {
+    return (0.5 * p.xyz / p.w + 0.5).xy * viewport;
+}
 
 void main() {
 
@@ -38,9 +43,6 @@ void main() {
     float focalSize = 2.0 * dist * resolution;
     vec3 vert = right * a_thickness * focalSize * a_vertices.x;
 
-    float imageSize = 100.0;
-    repeat = (1.0 / imageSize) * length(v) / focalSize;
-
     vec3 highDiff;
     if(a_vertices.y == 0.0){
         highDiff = a_startPosHigh - eyePositionHigh;
@@ -53,11 +55,22 @@ void main() {
     mat4 viewMatrixRTE = viewMatrix;
     viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
-    // Hack for iMac M1, looks like it doesnt
+    float imageSize = 100.0;
-    // work correctly with zeroes in highDiff
+//    repeat = (1.0 / imageSize) * length(v) / focalSize;
-    // if(length(highDiff) < 1.0){
+
-    //     highDiff = vec3(0.0);
+    highDiff = a_startPosHigh - eyePositionHigh;
-    // }
+    highDiff = highDiff * step(1.0, length(highDiff));
+    vec3 lowDiff = a_startPosLow - eyePositionLow;
+    vec4 vStart = viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
+    vec2 nStart = project(projectionMatrix * vStart);
+
+    highDiff = a_endPosHigh - eyePositionHigh;
+    highDiff = highDiff * step(1.0, length(highDiff));
+    lowDiff = a_endPosLow - eyePositionLow;
+    vec4 vEnd = viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
+    vec2 nEnd = project(projectionMatrix * vEnd);
+
+    repeat = distance(nStart, nEnd) / imageSize;
 
     gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff * step(1.0, length(highDiff)) + vert, 1.0);
 }