@openglobus/og 0.13.4 → 0.13.5

package/src/og/entity/LabelHandler.js

@@ -24,6 +24,9 @@ const OUTLINECOLOR_BUFFER = 10;
 
 window.LABEL_DEPTH_OFFSET = -0;
 
+const EMPTY = -1.0;
+const RTL = 1.0;
+
 /*
  * og.LabelHandler
  *
@@ -201,6 +204,8 @@ class LabelHandler extends BillboardHandler {
         var gl = h.gl,
             ec = this._entityCollection;
 
+        gl.disable(gl.CULL_FACE);
+
         gl.uniform1iv(shu.fontTextureArr, r.fontAtlas.samplerArr);
         gl.uniform4fv(shu.sdfParamsArr, r.fontAtlas.sdfParamsArr);
         gl.uniformMatrix4fv(shu.viewMatrix, false, r.activeCamera._viewMatrix._m);
@@ -264,6 +269,8 @@ class LabelHandler extends BillboardHandler {
         gl.drawArrays(gl.TRIANGLES, 0, this._vertexBuffer.numItems);
 
         gl.depthFunc(gl.LESS);
+
+        gl.enable(gl.CULL_FACE);
     }
 
     _pickingPASS() {
@@ -359,7 +366,10 @@ class LabelHandler extends BillboardHandler {
         label._isReady = false;
     }
 
-    setText(index, text, fontIndex, align) {
+    setText(index, text, fontIndex, align, isRTL = false) {
+
+        text = text.normalize('NFKC');
+
         var fa = this._renderer.fontAtlas.atlasesArr[fontIndex];
 
         if (!fa) return;
@@ -370,15 +380,19 @@ class LabelHandler extends BillboardHandler {
 
         let c = 0;
 
-        let n = fa.nodes[text[c]];
-        let offset = 0.0;
         let len = Math.min(this._maxLetters, text.length);
+        let _rtl_ = 0.0;
+        if (isRTL) {
+            _rtl_ = RTL;
+        }
+        let n = fa.get(text[c].charCodeAt());
+        let offset = 0.0;
         let kern = fa.kernings;
 
         for (c = 0; c < len; c++) {
             let j = i + c * 24;
             let char = text[c];
-            n = fa.nodes[char] || fa.nodes[" "];
+            n = fa.get(char.charCodeAt()) || fa.get(" ".charCodeAt());
             let tc = n.texCoords;
 
             let m = n.metrics;
@@ -386,32 +400,32 @@ class LabelHandler extends BillboardHandler {
             a[j] = tc[0];
             a[j + 1] = tc[1];
             a[j + 2] = offset;
-            a[j + 3] = 0.0;
+            a[j + 3] = _rtl_;
 
             a[j + 4] = tc[2];
             a[j + 5] = tc[3];
             a[j + 6] = offset;
-            a[j + 7] = 0.0;
+            a[j + 7] = _rtl_;
 
             a[j + 8] = tc[4];
             a[j + 9] = tc[5];
             a[j + 10] = offset;
-            a[j + 11] = 0.0;
+            a[j + 11] = _rtl_;
 
             a[j + 12] = tc[6];
             a[j + 13] = tc[7];
             a[j + 14] = offset;
-            a[j + 15] = 0.0;
+            a[j + 15] = _rtl_;
 
             a[j + 16] = tc[8];
             a[j + 17] = tc[9];
             a[j + 18] = offset;
-            a[j + 19] = 0.0;
+            a[j + 19] = _rtl_;
 
             a[j + 20] = tc[10];
             a[j + 21] = tc[11];
             a[j + 22] = offset;
-            a[j + 23] = 0.0;
+            a[j + 23] = _rtl_;
 
             //
             // Gliph
@@ -446,9 +460,9 @@ class LabelHandler extends BillboardHandler {
             g[j + 22] = m.nXOffset;
             g[j + 23] = m.nYOffset;
 
-            let k = kern[char];
-            if (k) {
-                k = k[text[c + 1]];
+            let k = kern[char.charCodeAt()];
+            if (k && text[c + 1]) {
+                k = k[text[c + 1].charCodeAt()];
                 if (k) {
                     offset += m.nAdvance + k;
                 } else {
@@ -464,33 +478,23 @@ class LabelHandler extends BillboardHandler {
             offset *= -0.5;
             for (c = 0; c < len; c++) {
                 let j = i + c * 24;
-                a[j + 3] = offset;
-                a[j + 7] = offset;
-                a[j + 11] = offset;
-                a[j + 15] = offset;
-                a[j + 19] = offset;
-                a[j + 23] = offset;
-            }
-        } else if (align === ALIGN.LEFT) {
-            for (c = 0; c < len; c++) {
-                let j = i + c * 24;
-                a[j + 3] = 0;
-                a[j + 7] = 0;
-                a[j + 11] = 0;
-                a[j + 15] = 0;
-                a[j + 19] = 0;
-                a[j + 23] = 0;
+                a[j + 2] += offset;
+                a[j + 6] += offset;
+                a[j + 10] += offset;
+                a[j + 14] += offset;
+                a[j + 18] += offset;
+                a[j + 22] += offset;
             }
         }
 
         for (; c < this._maxLetters; c++) {
             let j = i + c * 24;
-            a[j + 2] = -1.0;
-            a[j + 6] = -1.0;
-            a[j + 10] = -1.0;
-            a[j + 14] = -1.0;
-            a[j + 18] = -1.0;
-            a[j + 17] = -1.0;
+            a[j + 3] = EMPTY;
+            a[j + 7] = EMPTY;
+            a[j + 11] = EMPTY;
+            a[j + 15] = EMPTY;
+            a[j + 19] = EMPTY;
+            a[j + 23] = EMPTY;
         }
 
         this._changedBuffers[TEXCOORD_BUFFER] = true;
@@ -793,19 +797,22 @@ class LabelHandler extends BillboardHandler {
 
         for (var q = 0; q < this._maxLetters; q++) {
             var j = i + q * 12;
+
             a[j] = vertexArr[0];
             a[j + 1] = vertexArr[1];
-            a[j + 2] = vertexArr[2];
 
+            a[j + 2] = vertexArr[2];
             a[j + 3] = vertexArr[3];
+
             a[j + 4] = vertexArr[4];
             a[j + 5] = vertexArr[5];
 
             a[j + 6] = vertexArr[6];
             a[j + 7] = vertexArr[7];
-            a[j + 8] = vertexArr[8];
 
+            a[j + 8] = vertexArr[8];
             a[j + 9] = vertexArr[9];
+
             a[j + 10] = vertexArr[10];
             a[j + 11] = vertexArr[11];
         }

package/src/og/shaders/label.js

@@ -6,6 +6,10 @@
 
 import { Program } from '../webgl/Program.js';
 
+const DEFINE = `
+#define EMPTY -1.0
+#define RTL 1.0`;
+
 const PROJECT = `vec2 project(vec4 p) {
                     return (0.5 * p.xyz / p.w + 0.5).xy * viewport;
                 }`;
@@ -47,7 +51,9 @@ export function label_webgl2() {
         },
         vertexShader:
             `#version 300 es
-
+            
+            ${DEFINE}
+            
             in float a_outline;
             in vec4 a_gliphParam;
             in vec2 a_vertices;
@@ -77,14 +83,14 @@ export function label_webgl2() {
             uniform float depthOffset;
 
             const vec3 ZERO3 = vec3(0.0);
-
+           
             ${PROJECT}
 
             ${ROTATE2D}
 
             void main() {
 
-                if(a_texCoord.z == -1.0) {
+                if(a_texCoord.w == EMPTY) {
                     gl_Position = vec4(0.0);
                     return;
                 }
@@ -95,7 +101,7 @@ export function label_webgl2() {
                 v_outline = a_outline;
 
                 v_fontIndex = int(a_fontIndex);
-                v_uv = vec2(a_texCoord.xy);
+                v_uv = a_texCoord.xy;
                 vec3 look = a_positions - cameraPos;
                 float lookDist = length(look);
                 v_rgba = a_rgba;
@@ -127,8 +133,18 @@ export function label_webgl2() {
                 projPos.z += depthOffset + a_offset.z;
                                
                 vec2 screenPos = project(projPos);
-
-                vec2 v = screenPos + rotate2d(a_rotation) * ((a_vertices * a_gliphParam.xy + a_gliphParam.zw + vec2(a_texCoord.z, 0.0) + vec2(a_texCoord.w, 0.0)) * a_size * scd + a_offset.xy);
+                
+                vec2 vert = a_vertices;                
+                vec4 gp = a_gliphParam;                                
+                if(a_texCoord.w == RTL){
+                    vert.x = step(vert.x * 0.5 + 1.0, 1.0);
+                    gp.x = -a_gliphParam.x;
+                    gp.z = -(a_gliphParam.z + a_texCoord.z);
+                }else{
+                    gp.z = a_gliphParam.z + a_texCoord.z;
+                }
+                                
+                vec2 v = screenPos + rotate2d(a_rotation) * ((vert * gp.xy + gp.zw) * a_size * scd + a_offset.xy);
 
                 gl_Position = vec4((2.0 * v / viewport - 1.0) * projPos.w, projPos.z, projPos.w);
             }`,
@@ -270,7 +286,9 @@ export function label_screen() {
             a_fontIndex: "float"
         },
         vertexShader:
-            `
+            `            
+            ${DEFINE}
+                        
             attribute float a_outline;
             attribute vec4 a_gliphParam;
             attribute vec2 a_vertices;
@@ -306,7 +324,7 @@ export function label_screen() {
 
             void main() {
 
-                if(a_texCoord.z == -1.0) {
+                if(a_texCoord.w == EMPTY) {
                     gl_Position = vec4(0.0);
                     return;
                 }
@@ -349,9 +367,19 @@ export function label_screen() {
                 projPos.z += depthOffset + a_offset.z;
                                
                 vec2 screenPos = project(projPos);
-
-                vec2 v = screenPos + rotate2d(a_rotation) * ((a_vertices * a_gliphParam.xy + a_gliphParam.zw + vec2(a_texCoord.z, 0.0) + vec2(a_texCoord.w, 0.0)) * a_size * scd + a_offset.xy);
-
+                
+                vec2 vert = a_vertices;                
+                vec4 gp = a_gliphParam;                                
+                if(a_texCoord.w == RTL){
+                    vert.x = step(vert.x * 0.5 + 1.0, 1.0);
+                    gp.x = -a_gliphParam.x;
+                    gp.z = -(a_gliphParam.z + a_texCoord.z);
+                }else{
+                    gp.z = a_gliphParam.z + a_texCoord.z;
+                }
+                                
+                vec2 v = screenPos + rotate2d(a_rotation) * ((vert * gp.xy + gp.zw) * a_size * scd + a_offset.xy);
+                
                 gl_Position = vec4((2.0 * v / viewport - 1.0) * projPos.w, projPos.z, projPos.w);
             }`,
         fragmentShader:
@@ -487,6 +515,9 @@ export function labelPicking() {
         },
         vertexShader:
             `
+            
+            ${DEFINE}
+            
             attribute vec4 a_gliphParam;
             attribute vec2 a_vertices;
             attribute vec4 a_texCoord;
@@ -519,7 +550,7 @@ export function labelPicking() {
                 vec3 a_positions = a_positionsHigh + a_positionsLow;
                 vec3 cameraPos = eyePositionHigh + eyePositionLow;
 
-                if(a_texCoord.z == -1.0){
+                if(a_texCoord.w == EMPTY) {
                     gl_Position = vec4(0.0);
                     return;
                 }
@@ -554,7 +585,19 @@ export function labelPicking() {
                 projPos.z += depthOffset + a_offset.z;
                 
                 vec2 screenPos = project(projPos);
-                vec2 v = screenPos + rotate2d(a_rotation) * ((a_vertices * a_gliphParam.xy + a_gliphParam.zw + vec2(a_texCoord.z, 0.0) + vec2(a_texCoord.w, 0.0)) * a_size * scd + a_offset.xy);
+                
+                vec2 vert = a_vertices;                
+                vec4 gp = a_gliphParam;                                
+                if(a_texCoord.w == RTL){
+                    vert.x = step(vert.x * 0.5 + 1.0, 1.0);
+                    gp.x = -a_gliphParam.x;
+                    gp.z = -(a_gliphParam.z + a_texCoord.z);
+                }else{
+                    gp.z = a_gliphParam.z + a_texCoord.z;
+                }
+                                
+                vec2 v = screenPos + rotate2d(a_rotation) * ((vert * gp.xy + gp.zw) * a_size * scd + a_offset.xy);
+                                
                 gl_Position = vec4((2.0 * v / viewport - 1.0) * projPos.w, projPos.z, projPos.w);
             }`,
         fragmentShader:

package/src/og/utils/FontAtlas.js

@@ -86,16 +86,20 @@ class FontAtlas {
             tc[10] = r.left / w;
             tc[11] = r.top / h;
 
-            atlas.nodes[ti] = new TextureAtlasNode(r, tc);
-            atlas.nodes[ti].metrics = ci;
-
-            atlas.nodes[ti].metrics.nWidth = atlas.nodes[ti].metrics.width / s;
-            atlas.nodes[ti].metrics.nHeight = atlas.nodes[ti].metrics.height / s;
-            atlas.nodes[ti].metrics.nAdvance = atlas.nodes[ti].metrics.xadvance / s;
-            atlas.nodes[ti].metrics.nXOffset = atlas.nodes[ti].metrics.xoffset / s;
-            atlas.nodes[ti].metrics.nYOffset = 1.0 - atlas.nodes[ti].metrics.yoffset / s;
-
-            atlas.nodes[ti].emptySize = 1;
+            let taNode = new TextureAtlasNode(r, tc);
+            let ciNorm = ci.char.normalize('NFKC');
+            let ciCode = ciNorm.charCodeAt();
+            taNode.metrics = ci;
+            taNode.metrics.nChar = ciNorm;
+            taNode.metrics.nCode = ciCode;
+            taNode.metrics.nWidth = taNode.metrics.width / s;
+            taNode.metrics.nHeight = taNode.metrics.height / s;
+            taNode.metrics.nAdvance = taNode.metrics.xadvance / s;
+            taNode.metrics.nXOffset = taNode.metrics.xoffset / s;
+            taNode.metrics.nYOffset = 1.0 - taNode.metrics.yoffset / s;
+            taNode.emptySize = 1;
+
+            atlas.nodes.set(ciNorm.charCodeAt(), taNode);
         }
 
         atlas.kernings = {};
@@ -106,14 +110,20 @@ class FontAtlas {
             let first = ki.first,
                 second = ki.second;
 
-            let charFirst = idToChar[first],
-                charSecond = idToChar[second];
+            //let charFirst = idToChar[first],
+            //    charSecond = idToChar[second];
+
+            // if (!atlas.kernings[charFirst]) {
+            //     atlas.kernings[charFirst] = {};
+            // }
+            //
+            // atlas.kernings[charFirst][charSecond] = ki.amount / s;
 
-            if (!atlas.kernings[charFirst]) {
-                atlas.kernings[charFirst] = {};
+            if (!atlas.kernings[first]) {
+                atlas.kernings[first] = {};
             }
 
-            atlas.kernings[charFirst][charSecond] = ki.amount / s;
+            atlas.kernings[first][second] = ki.amount / s;
         }
     }