@openglobus/og 0.13.2 → 0.13.5

package/src/og/shaders/billboard.js

@@ -92,6 +92,14 @@ export function billboardPicking() {
                 vec4 posRTE = viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
                 vec4 projPos = projectionMatrix * posRTE;
                                 
+                float camSlope = dot(vec3(viewMatrix[0][2], viewMatrix[1][2], viewMatrix[2][2]), normalize(cameraPos));                
+                if(camSlope > 0.5) {
+                    float dist = dot(look, normalize(cameraPos));
+                    projPos.z += dist * 0.02;
+                }else{
+                    projPos.z += -(abs(projPos.z)) * 0.002;                 
+                }
+                
                 projPos.z += depthOffset + a_offset.z;
                                 
                 vec2 screenPos = project(projPos);

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);
             }`,
@@ -234,8 +250,8 @@ export function label_webgl2() {
                     if(strokeAlpha < 0.1){
                         discard;
                     }
-                    outScreen = v_rgba * v_rgba.a * strokeAlpha * (0.5 - opacity) * 2.0;
-                }
+                    outScreen = v_rgba * strokeAlpha * (0.5 - opacity) * 2.0;
+                }                
             }`
     });
 }
@@ -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:
@@ -455,7 +483,7 @@ export function label_screen() {
                     if(strokeAlpha < 0.1){
                         discard;
                     }
-                    gl_FragColor = v_rgba * v_rgba.a * strokeAlpha * (0.5 - opacity) * 2.0;
+                    gl_FragColor = v_rgba * strokeAlpha * (0.5 - opacity) * 2.0;
                 }
             }`
     });
@@ -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;
         }
     }