889 wip.a

sandbox/ray/ray.js

@@ -23,20 +23,32 @@ class MyScene extends RenderNode {
 
     init() {
 
-        let rayEntity = new Entity({
-            cartesian: new Vec3(1, 1, 1),
-            independentPicking: true,
+        let rayEntity1 = new Entity({
             ray: {
-                thickness: 5,
-                startPosition: [0, 0, 0],
-                endPosition: [10, 10, 10],
-                startColor: "red",
-                endColor: "green",
+                thickness: 10,
+                startPosition: [1, 0, 1],
+                endPosition: [1, 10, 1],
+                startColor: "white",
+                endColor: "white",
+                src: "./template.png",
+                //src: "data:image/png;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
+            }
+        });
+
+        let rayEntity2 = new Entity({
+            ray: {
+                thickness: 20,
+                startPosition: [2, 0, 0],
+                endPosition: [2, 5, 0],
+                startColor: "white",
+                endColor: "white",
+                src: "./template2.png",
+                //src: "data:image/png;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
             }
         });
 
         let collection = new EntityCollection({
-            entities: [rayEntity]
+            entities: [rayEntity1, rayEntity2]
         });
 
         collection.addTo(this);

src/entity/Ray.ts

@@ -171,12 +171,17 @@ class Ray {
             let rn = bh._entityCollection.renderNode;
             if (rn && rn.renderer) {
                 let ta = rn.renderer.strokeTextureAtlas;
-                ta.loadImage(src, (img: HTMLImageElementExt)=> {
+                ta.loadImage(src, (img: HTMLImageElementExt) => {
                     if (img.__nodeIndex != undefined && ta.get(img.__nodeIndex)) {
                         this._image = img;
+                        let taData = ta.get(img!.__nodeIndex!)!;
+                        let minY = 0,
+                            imgHeight = 0;
                         bh!.setTexCoordArr(
                             this._handlerIndex,
-                            ta.get(this._image!.__nodeIndex!)!.texCoords
+                            taData.texCoords,
+                            minY,
+                            imgHeight
                         );
                     } else {
                         ta.addImage(img);

src/entity/RayHandler.ts

@@ -251,7 +251,7 @@ class RayHandler {
             );
         }
 
-        this._texCoordArr = concatTypedArrays(this._texCoordArr, [0, 0, 0, 0, 0, 0, 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,
             y = ray._startPositionHigh.y,
@@ -747,7 +747,7 @@ class RayHandler {
     public createTexCoordBuffer() {
         let h = this._renderer!.handler;
         h.gl!.deleteBuffer(this._texCoordBuffer as WebGLBuffer);
-        this._texCoordBuffer = h.createArrayBuffer(this._texCoordArr, 2, this._texCoordArr.length / 2);
+        this._texCoordBuffer = h.createArrayBuffer(this._texCoordArr, 4, this._texCoordArr.length / 4);
     }
 
 
@@ -762,27 +762,39 @@ class RayHandler {
         );
     }
 
-    public setTexCoordArr(index: number, tcoordArr: number[] | TypedArray) {
-        let i = index * 12;
+    public setTexCoordArr(index: number, tcoordArr: number[] | TypedArray, minY: number, imgHeight: number) {
+        let i = index * 24;
         let a = this._texCoordArr;
 
         a[i] = tcoordArr[0];
         a[i + 1] = tcoordArr[1];
+        a[i + 2] = minY;
+        a[i + 3] = imgHeight;
 
-        a[i + 2] = tcoordArr[2];
-        a[i + 3] = tcoordArr[3];
+        a[i + 4] = tcoordArr[2];
+        a[i + 5] = tcoordArr[3];
+        a[i + 6] = minY;
+        a[i + 7] = imgHeight;
 
-        a[i + 4] = tcoordArr[4];
-        a[i + 5] = tcoordArr[5];
+        a[i + 8] = tcoordArr[4];
+        a[i + 9] = tcoordArr[5];
+        a[i + 10] = minY;
+        a[i + 11] = imgHeight;
 
-        a[i + 6] = tcoordArr[6];
-        a[i + 7] = tcoordArr[7];
+        a[i + 12] = tcoordArr[6];
+        a[i + 13] = tcoordArr[7];
+        a[i + 14] = minY;
+        a[i + 15] = imgHeight;
 
-        a[i + 8] = tcoordArr[8];
-        a[i + 9] = tcoordArr[9];
+        a[i + 16] = tcoordArr[8];
+        a[i + 17] = tcoordArr[9];
+        a[i + 18] = minY;
+        a[i + 19] = imgHeight;
 
-        a[i + 10] = tcoordArr[10];
-        a[i + 11] = tcoordArr[11];
+        a[i + 20] = tcoordArr[10];
+        a[i + 21] = tcoordArr[11];
+        a[i + 22] = minY;
+        a[i + 23] = imgHeight;
 
         this._changedBuffers[TEXCOORD_BUFFER] = true;
     }

src/shaders/ray/ray.frag.glsl

@@ -3,11 +3,13 @@ precision highp float;
 uniform sampler2D texAtlas;
 
 varying vec4 v_rgba;
-varying vec2 v_texCoord;
+varying vec4 v_texCoord;
 
-void main () {
+void main() {
 
-    vec4 color = texture2D(texAtlas, v_texCoord);
+    float repeat = 2.0;
 
-    gl_FragColor = v_rgba + color;
+    vec4 color = texture2D(texAtlas, v_texCoord.xy);
+
+    gl_FragColor = v_rgba * color;
 }

src/shaders/ray/ray.ts

@@ -15,8 +15,8 @@ export function rayScreen(): Program {
             texAtlas: "sampler2d"
         },
         attributes: {
-            a_texCoord: "vec2",
             a_vertices: "vec2",
+            a_texCoord: "vec4",
             a_startPosHigh: "vec3",
             a_startPosLow: "vec3",
             a_endPosHigh: "vec3",

src/shaders/ray/ray.vert.glsl

@@ -7,10 +7,10 @@ attribute vec3 a_endPosHigh;
 attribute vec3 a_endPosLow;
 attribute vec2 a_vertices;
 attribute float a_thickness;
-attribute vec2 a_texCoord;
+attribute vec4 a_texCoord;
 
 varying vec4 v_rgba;
-varying vec2 v_texCoord;
+varying vec4 v_texCoord;
 
 uniform mat4 viewMatrix;
 uniform mat4 projectionMatrix;