One question of Openglobus

[ywszxdd]

I want to render custom data(vertex in lonlat、colors、incides、etc) using openglobus as one layer，How shuold I do?

[Zemledelec]

Hi @ywszxdd! Do you want some colors on the surface?

[ywszxdd]

for example,i want to custom one triangle polygon in openglobus ,each of the triangle ‘s vertex has different color, like use webgl render one triangle ,and the triangle colud as one layer in the scene, if use Cesium,I could use Cesium.Geometry do it ,like this,How should I do in openglobus?

[ywszxdd]

Hi@Zemledelec?Could you give me a reply?

[ywszxdd]

and the triangle's vertex has different lon、lat、height

[ywszxdd]

I use GeoObject,but GeoObject only support one color for one GeoObject . And then I use handler.gl custom render it,but the render result's position cannot change when the camera or the earth change

[ywszxdd]

this is my code,in this ,the triangle could render,but cannot change when the camera or the earth change.

<script id="shader-vs" type="x-shader/x-vertes"> attribute vec3 a_position; void main(){ gl_Position = vec4(a_position,1); } </script>

<script id="shader-fs" type="x-shader/x-fragment">
    precision mediump float;
    void main(){
      gl_FragColor = vec4(1,0,0.5,1);
    }
</script>
<script type="module">
    'use strict';
    import { Globe } from '../../src/og/Globe.js';
    import { XYZ } from '../../src/og/layer/XYZ.js';
    import { GeoTexture2d } from '../../src/og/layer/GeoTexture2d.js';
    import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
    import { Framebuffer } from '../../src/og/webgl/Framebuffer.js';
    import { Program } from '../../src/og/webgl/Program.js';
    import { wgs84 } from '../../src/og/ellipsoid/wgs84.js';
    let osm = new XYZ("OpenStreetMap", {
        isBaseLayer: true,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
    });
    let globus = new Globe({
        "target": "globus",
        "name": "Earth",
        "terrain": new GlobusTerrain(),
        "layers": [osm]
    });
    let handler = globus.renderer.handler;
    handler.addProgram(new Program("vectorMap", {
        attributes: {
            'a_position': 'vec4'
        },
        vertexShader: document.getElementById("shader-vs").innerHTML,
        fragmentShader: document.getElementById("shader-fs").innerHTML
    }));
    var p1 = wgs84.lonLatToCartesian({ lon: 0, lat: 0, height: 10000 }).normal();
    var p2 = wgs84.lonLatToCartesian({ lon: 100, lat: 0, height: 5000 }).normal();
    var p3 = wgs84.lonLatToCartesian({ lon: 50, lat: 50, height: 1000 }).normal();
    var positions = [
        p1.x, p1.y, p1.z,
        p2.x, p2.y, p2.z,
        p3.x, p3.y, p3.z,
    ]
    var vertBuffer = r.handler.createArrayBuffer(new Float32Array(positions), 3, 3);
    globus.renderer.events.on("draw", function (r) {
        let gl = r.handler.gl;
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        r.handler.programs.vectorMap
            .set({
                'a_position': vertBuffer,
            })
            .drawArrays(r.handler.gl.TRIANGLES, vertBuffer.numItems);
    });
</script>

[ywszxdd]

I had make a math transformation from 3d coordinates to your 2d screen coordinates in a vertex shader,

<script id="shader-vs" type="x-shader/x-vertes"> attribute vec3 a_position; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(){ gl_Position = uPMatrix * uMVMatrix * vec4(a_position,1.0); } </script>

but it still could not display ,why....

[ywszxdd]

Plese check the next code is right?lon、lat、height covert to vertexBuffer
var p1 = wgs84.lonLatToCartesian(new LonLat(0,0,1000)).normal();
var p2 = wgs84.lonLatToCartesian(new LonLat(20,0,5000)).normal();
var p3 = wgs84.lonLatToCartesian(new LonLat(10,20,1000)).normal();
var positions = [
p1.x, p1.y, p1.z,
p2.x, p2.y, p2.z,
p3.x, p3.y, p3.z,
]
this.vericesBuffer = this.renderer.handler.createArrayBuffer(new Float32Array(positions), 3, positions.length / 3);

[Zemledelec]

Try to remove the normalization of your cartesian coordinates.

[ywszxdd]

I found the question! "var p1 = wgs84.lonLatToCartesian(new LonLat(0,0,1000));"is correct。And the height if is 5000,the triangle is inside the sphere,so I think it is not display。
Thank you very much!!By the way,If I want to add my custom data as a entity not a scenenode , Can it be realized?

[Zemledelec]

Sure, but you need to know more about architecture of the entityCollections, and create some kind of "copy-paste" code:) On the other hand you can always use scenes, I use scenes all around on my side projects, and it works well!