#657 cleanup README and fonts

README.md

@@ -1,14 +1,17 @@
 [![NPM PACKAGE](https://img.shields.io/npm/v/@openglobus/og.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/@openglobus/og)
 ![BUILD](https://github.com/openglobus/openglobus/actions/workflows/push.yml/badge.svg)
+
 # Openglobus
 
 English | [简体中文](README_CN.md) | [Portuguese-BR](README_pt-BR.md)
 
-[Openglobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets
-with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and
+[Openglobus](http://www.openglobus.org/) is a typescript/javascript library designed to display interactive 3D maps at a
+scale from planet to bee.
+It supports various high-resolution terrain providers, imagery layers, renders thousands of 3D objects, provides
+geometry measurement tools, and more. It uses the WebGL technology, open-source and
 completely free.
 
-Openglobus main goal is to make 3d map features fast, good lookin, user friendly and easy to implement in any
+Openglobus main goal is to make 3D map features fast, good looking, user friendly and easy to implement in any
 related project.
 
 ## Getting Start
@@ -24,8 +27,9 @@ yarn add @openglobus/og
 ### Code: using umd lib
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
-<script src="./libs/og.umd.js"></script>
+
+<link rel="stylesheet" href="../dist/@openglogus/og.css">
+<script src="../dist/@openglogus/og.umd.js"></script>
 <div id="globus"></div>
 <script>
 
@@ -33,7 +37,7 @@ yarn add @openglobus/og
         isBaseLayer: true,
         url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         visibility: true,
-  })
+    });
 
     const globus = new og.Globe({
         target: "globus", // a HTMLDivElement which its id is `globus`
@@ -41,8 +45,10 @@ yarn add @openglobus/og
         terrain: new og.terrain.GlobusTerrain(),
         layers: [osm],
         autoActivated: true,
+        fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
+        resourcesSrc: "../dist/@openglobus/res",   // Night and water mask terxtures folder
         viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
-  })
+    });
 
 </script>
 ```
@@ -50,19 +56,18 @@ yarn add @openglobus/og
 ### Code: using esm lib
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
+
+<link rel="stylesheet" href="../dist/@openglobus/og.css">
 <div id="globus"></div>
 <script type="module">
 
-  import { layer, Globe, terrain } from './libs/og.esm.js'
-  const { XYZ } = layer
-  const { GlobusTerrain } = terrain
+    import {XYZ, Globe, GlobusTerrain} from '../dist/@openglobus/og.esm.js';
 
     const osm = new XYZ("OpenStreetMap", {
         isBaseLayer: true,
         url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         visibility: true,
-  })
+    });
 
     const globus = new Globe({
         target: "globus", // a HTMLDivElement which its id is `globus`
@@ -70,19 +75,24 @@ yarn add @openglobus/og
         terrain: new GlobusTerrain(),
         layers: [osm],
         autoActivated: true,
+        fontsSrc: "../dist/@openglobus/res/fonts",  // Fonts folder
+        resourcesSrc: "../dist/@openglobus/res",    // Night and water mask terxtures folder
         viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
-  })
+    });
 
 </script>
 ```
 
 ## Frameworks integrations
 
-Openglobus integrates well with front-end frameworks like React, Angular or Vuejs [Read more here](./framework-intergration.md).
+Openglobus integrates well with front-end frameworks like React, Angular or
+Vuejs [Read more here](./framework-intergration.md).
 
 ## Documentation
+
 UNDER CONSTRUCTION
-Check out the [hosted examples](http://www.openglobus.org/examples.html), or
+Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
+check out the [hosted examples](http://www.openglobus.org/examples.html), and
 the [API documentation](http://www.openglobus.org/api/).
 
 ## Get Started to contribute
@@ -113,20 +123,39 @@ Then, it will generate 5 files at `dist/@openglobus/`:
 - og.esm.js
 - og.esm.js.map
 - og.css
+- ./res/...
 
-All JavaScript files are compressed by `terser` plugin.
+### Run examples
+
+First, it starts by watching sources and building into dist folder esm module:
+
+```sh
+npm run dev
+```
+
+Second, runs local server, then you can browse 127.0.0.1:8080:
+
+```sh
+npm run serve
+```
+
+Third, try an example from the sandbox:
+
+```sh
+ http://127.0.0.1:8080/sandbox/osm/osm.html
+```
 
 ### Other scripts
 
-`npm run core` - build og.core (rendering engine) stand-alone
-
-`npm run webgl` - build og.webgl (webgl wrap) stand-alone
-
 `npm run docs` - build [api documentation](https://www.openglobus.org/api/) into /api folder
 
 `npm run serve` - run local web server for develop and watch examples
 
-`npm run font` - generate custom font atlas
+`npm run lint` - run code linter
+
+`npm run test` - run tests
+
+`tsc` - run typescript parser
 
 ## Support the Project
 

README_CN.md

@@ -21,8 +21,9 @@ yarn add @openglobus/og
 ### 代码：使用 umd 引用
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
-<script src="./libs/og.umd.js"></script>
+
+<link rel="stylesheet" href="../dist/@openglogus/og.css">
+<script src="../dist/@openglogus/og.umd.js"></script>
 <div id="globus"></div>
 <script>
 
@@ -30,7 +31,7 @@ yarn add @openglobus/og
         isBaseLayer: true,
         url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         visibility: true,
-  })
+    });
 
     const globus = new og.Globe({
         target: "globus", // a HTMLDivElement which its id is `globus`
@@ -38,8 +39,10 @@ yarn add @openglobus/og
         terrain: new og.terrain.GlobusTerrain(),
         layers: [osm],
         autoActivated: true,
-    viewExtent: [108.28125, 20.63278, 118.125, 25.79989] // 广州上空
-  })
+        fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
+        resourcesSrc: "../dist/@openglobus/res",   // Night and water mask terxtures folder
+        viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
+    });
 
 </script>
 ```
@@ -47,19 +50,18 @@ yarn add @openglobus/og
 ### 代码：使用 esm 引用
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
+
+<link rel="stylesheet" href="../dist/@openglobus/og.css">
 <div id="globus"></div>
 <script type="module">
 
-  import { layer, Globe, terrain } from './libs/og.esm.js'
-  const { XYZ } = layer
-  const { GlobusTerrain } = terrain
+    import {XYZ, Globe, GlobusTerrain} from '../dist/@openglobus/og.esm.js';
 
     const osm = new XYZ("OpenStreetMap", {
         isBaseLayer: true,
         url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         visibility: true,
-  })
+    });
 
     const globus = new Globe({
         target: "globus", // a HTMLDivElement which its id is `globus`
@@ -67,19 +69,20 @@ yarn add @openglobus/og
         terrain: new GlobusTerrain(),
         layers: [osm],
         autoActivated: true,
-    viewExtent: [108.28125, 20.63278, 118.125, 25.79989] // 广州上空
-  })
+        fontsSrc: "../dist/@openglobus/res/fonts",  // Fonts folder
+        resourcesSrc: "../dist/@openglobus/res",    // Night and water mask terxtures folder
+        viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
+    });
 
 </script>
 ```
 
-
-
 ## 文档
 
-查看[在线示例](http://www.openglobus.org/examples.html)，或者查看 [API 帮助文档](http://www.openglobus.org/api/)。
-
-
+UNDER CONSTRUCTION
+Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
+check out the [hosted examples](http://www.openglobus.org/examples.html), and
+the [API documentation](http://www.openglobus.org/api/).
 
 ## 如何贡献你的代码
 
@@ -109,21 +112,39 @@ npm run build
 - og.esm.js
 - og.esm.js.map
 - og.css
+- ./res/...
 
-其中，js 文件均使用 `terser` 插件进行了代码压缩。
+### 新情况
+
+First, it starts by watching sources and building into dist folder esm module:
+
+```sh
+npm run dev
+```
+
+Second, runs local server, then you can browse 127.0.0.1:8080:
+
+```sh
+npm run serve
+```
+
+Third, try an example from the sandbox:
+
+```sh
+ http://127.0.0.1:8080/sandbox/osm/osm.html
+```
 
 ### 其他命令
 
-`npm run core` - 仅构建 og.core （渲染引擎）
-
-`npm run webgl` - 仅构建 og.webgl （WebGL 的封装部分）
-
 `npm run docs` - 本地构建 API 帮助文档至 `/api` 目录
 
 `npm run serve` - 运行本地 Web 服务器以便开发以及查看示例代码
 
-`npm run font` - 生成自定义的字体集
+`npm run lint` - run code linter
 
+`npm run test` - run tests
+
+`tsc` - run typescript parser
 
 
 ## 支持此项目

README_pt-BR.md

@@ -22,8 +22,9 @@ yarn add @openglobus/og
 ### Código: usando umd lib
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
-<script src="./libs/og.umd.js"></script>
+
+<link rel="stylesheet" href="../dist/@openglogus/og.css">
+<script src="../dist/@openglogus/og.umd.js"></script>
 <div id="globus"></div>
 <script>
 
@@ -31,7 +32,7 @@ yarn add @openglobus/og
         isBaseLayer: true,
         url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         visibility: true,
-  })
+    });
 
     const globus = new og.Globe({
         target: "globus", // a HTMLDivElement which its id is `globus`
@@ -39,8 +40,10 @@ yarn add @openglobus/og
         terrain: new og.terrain.GlobusTerrain(),
         layers: [osm],
         autoActivated: true,
+        fontsSrc: "../dist/@openglobus/res/fonts", // Fonts folder
+        resourcesSrc: "../dist/@openglobus/res",   // Night and water mask terxtures folder
         viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
-  })
+    });
 
 </script>
 ```
@@ -48,19 +51,18 @@ yarn add @openglobus/og
 ### Código: usando esm lib
 
 ```html
-<link rel="stylesheet" href="./libs/og.css">
+
+<link rel="stylesheet" href="../dist/@openglobus/og.css">
 <div id="globus"></div>
 <script type="module">
 
-  import { layer, Globe, terrain } from './libs/og.esm.js'
-  const { XYZ } = layer
-  const { GlobusTerrain } = terrain
+    import {XYZ, Globe, GlobusTerrain} from '../dist/@openglobus/og.esm.js';
 
     const osm = new XYZ("OpenStreetMap", {
         isBaseLayer: true,
         url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         visibility: true,
-  })
+    });
 
     const globus = new Globe({
         target: "globus", // a HTMLDivElement which its id is `globus`
@@ -68,8 +70,10 @@ yarn add @openglobus/og
         terrain: new GlobusTerrain(),
         layers: [osm],
         autoActivated: true,
+        fontsSrc: "../dist/@openglobus/res/fonts",  // Fonts folder
+        resourcesSrc: "../dist/@openglobus/res",    // Night and water mask terxtures folder
         viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
-  })
+    });
 
 </script>
 ```
@@ -80,7 +84,9 @@ Openglobus se integra bem com frameworks como React, Angular ou Vuejs [Read more
 
 ## Documentação
 
-De uma olhada em: [hosted examples](http://www.openglobus.org/examples.html), or
+UNDER CONSTRUCTION
+Here is a [Wiki](https://github.com/openglobus/openglobus/wiki), also
+check out the [hosted examples](http://www.openglobus.org/examples.html), and
 the [API documentation](http://www.openglobus.org/api/).
 
 ## Comece a contribuir
@@ -111,20 +117,40 @@ Then, it will generate 5 files at `dist/@openglobus/`:
 - og.esm.js
 - og.esm.js.map
 - og.css
+- ./res/...
 
-All JavaScript files are compressed by `terser` plugin.
+### Run examples
+
+First, it starts by watching sources and building into dist folder esm module:
+
+```sh
+npm run dev
+```
+
+Second, runs local server, then you can browse 127.0.0.1:8080:
+
+```sh
+npm run serve
+```
+
+Third, try an example from the sandbox:
+
+```sh
+ http://127.0.0.1:8080/sandbox/osm/osm.html
+```
 
 ### Outros scripts
 
-`npm run core` - build og.core (rendering engine) stand-alone
-
-`npm run webgl` - build og.webgl (webgl wrap) stand-alone
-
 `npm run docs` - build [documentation](https://www.openglobus.org/api/) into /api folder
 
 `npm run serve` - run local web server for develop and watch examples
 
-`npm run font` - generate custom font atlas
+`npm run lint` - run code linter
+
+`npm run test` - run tests
+
+`tsc` - run typescript parser
+
 
 ## Ajude o projeto
 

bmfont/bmfont.cmd

@@ -1 +1 @@
-npx msdf-bmfont-xml --reuse  -i .\charset.txt -m 1024,1024 -f json -o %1.png -s 32 -r 24 -p 1 -t msdf %1
+npx msdf-bmfont-xml --reuse  -i .\charset.txt -m 1024,1024 -f json -o %2/%1.png -s 32 -r 24 -p 1 -t msdf %1

bmfont/bmfont_rtl.cmd

@@ -1 +1 @@
-msdf-bmfont.cmd --reuse  -i .\charset-arabic.txt -m 1024,1024 -f json -o %1.png -s 42 -r 14 -p 1 -t msdf --rtl %1
+msdf-bmfont.cmd --reuse  -i .\charset-arabic.txt -m 1024,1024 -f json -o %2/%1.png -s 42 -r 14 -p 1 -t msdf --rtl %1