pixijs Leaflet wrapping using PixiJS

[estamos]

Hi all ,

since I am new here I want to say that it's an honor to be part of your great community.

I am using Leaflet.PixiOverlay to visualize some data on a Leaflet map .

Since I have zero knowledge on PixiJS I would like to ask you if it is possible to wrap the displayed graphic in all maps left and right .

The code I am using is the following

Note that that's not the completed code, I think that's the part of the code I need to modify , if you need more info I can provide you the whole code

 

      var _pixiGlCore2 = PIXI.glCore
      PIXI.mesh.MeshRenderer.prototype.onContextChange = function onContextChange () {
        var gl = this.renderer.gl
        this.shader = new PIXI.Shader(gl,
          'attribute vec2 aVertexPosition;\n' +
          'attribute vec3 aVertexColor;\n' +
          'uniform mat3 projectionMatrix;\n' +
          'uniform mat3 translationMatrix;\n' +
          'varying vec3 vColor;\n' +
          'void main(void)\n{\n' +
          '  vColor = aVertexColor;\n' +
          '  gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n' +
          '}\n',
          'precision mediump float;' +
          'varying vec3 vColor;\n' +
          'uniform float alpha;\n' +
          'void main(void)\n{\n' +
          '  gl_FragColor.rgb = vec3(vColor[0]*alpha, vColor[1]*alpha, vColor[2]*alpha);\n' +
          '  gl_FragColor.a = alpha;\n' +
          '}\n'
        )
     PIXI.mesh.MeshRenderer.prototype.render = function render (mesh) {
        var renderer = this.renderer
        var gl = renderer.gl
        var glData = mesh._glDatas[renderer.CONTEXT_UID]
        if (!glData) {
          renderer.bindVao(null)
          glData = {
            shader: this.shader,
            vertexBuffer: _pixiGlCore2.GLBuffer.createVertexBuffer(gl, mesh.vertices, gl.STREAM_DRAW),
            colorBuffer: _pixiGlCore2.GLBuffer.createVertexBuffer(gl, mesh.colors, gl.STREAM_DRAW),
            indexBuffer: _pixiGlCore2.GLBuffer.createIndexBuffer(gl, mesh.indices, gl.STATIC_DRAW)
          }
          // build the vao object that will render..
          glData.vao = new _pixiGlCore2.VertexArrayObject(gl)
            .addIndex(glData.indexBuffer)
            .addAttribute(glData.vertexBuffer, glData.shader.attributes.aVertexPosition, gl.FLOAT, false, 4 * 2, 0)
            .addAttribute(glData.colorBuffer, glData.shader.attributes.aVertexColor, gl.FLOAT, false, 4 * 3, 0)
          mesh._glDatas[renderer.CONTEXT_UID] = glData
        }
        renderer.bindVao(glData.vao)
        renderer.bindShader(glData.shader)
        glData.shader.uniforms.alpha = mesh.alpha
        glData.shader.uniforms.translationMatrix = mesh.worldTransform.toArray(true)
        glData.vao.draw(gl.TRIANGLES, mesh.indices.length, 0)
      }
    }
    this.pixiContainer = new PIXI.Container()
    // Create the PIXI overlay
    let layer = L.pixiOverlay(utils => this.render(utils), this.pixiContainer, {
      autoPreventDefault: false
    })

 

After many experiments with the code I discovered that by modifying gl_Position and to be more specific

vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0)

I am able to change the position of displayed graphics but I can't think of what I should do to display the graphic in all maps .

I hope you could help me .

 

Thank you for your time ,

I hope I made my question clear

Stay safe guys ,

Evangelos .

[ivan.popelyshev]

You removed translationMatrix from equation - you dont have "mesh.transform" anymore

btw , why dont you use pixi-v5? it wil be easier to help you in that case, because all those strange gl calls are wrapped in mesh-shader stuff : https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

 

Edited December 12, 2020 by ivan.popelyshev

[ivan.popelyshev]

basically, you need something like TilingSprite: you actual vertices have to cover whole frame, and you need tileTransform that matrix gets passed to uniform, and then you apply that to separate varying coord as vTextureCoord

i could do that fast, but, pixi-v4, i really dont want to do it.

Edited December 12, 2020 by ivan.popelyshev

[estamos]

46 minutes ago, ivan.popelyshev said:

basically, you need something like TilingSprite: you actual vertices have to cover whole frame, and you need tileTransform that matrix gets passed to uniform, and then you apply that to separate varying coord as vTextureCoord

i could do that fast, but, pixi-v4, i really dont want to do it.

Thank you for your quick response.

I think I can update my code so that I will use pixi-v5, do I need to write the code from scratch or is it compatible with pixi-v5 ? Currently I am using v4.8.2 .

Could you provide me some help / guidance on how to implement TilingSprite and tileTransform ?

Your help is much appreciated .

[ivan.popelyshev]

its mostly compatible. but for custom shader you have to use example i provided.

Yes, I can, if you try it yourself first. I usually fix demos, not write stuff from scratch.