Search the Community

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 .

Would it be possible to wrap a mesh around another one? I'm thinking of cloth here. So if you put a dress on a girl and parts of the dress are too small and go into the waist, you'd be able to programmatically push those vertices outwards so they are not inside the mesh. Is this possible?

I have a question concerning the skin wrap modifier. Is it possible to export say a shirt that is skin wrapped on top of a body with multiple morph targets so when we play with morph target sliders the shirt deforms accordingly?

I want to create game with unlimited world. I decided to make world wrap to move player and items to new position when player reaches end of world. wrapHorizontal() { let padding = game.width/2; let player = this.intoHell.player; if ( player.x + padding > game.world.width) { this.wrapped.x += 1; this.intoHell.player.x = padding; this.intoHell.background.sky.tilePosition.x += 2*padding; this.intoHell.items.x -= game.world.width - 2*padding; } else if ( player.x - padding < 0 ) { this.wrapped.x -= 1; this.intoHell.player.x = game.world.width - padding; this.intoHell.background.sky.tilePosition.x -= 2*padding; this.intoHell.items.x += game.world.width - 2*padding; } } But it makes items/sky blink. I use this function everytime in update() and I move player using body.velocity from arcade physics system. What can be cause of this behavior? intohell.zip EDIT: https://github.com/noobshit/intohell

I'm trying to make a simple running animation in phaser to put in as a dynamic animation in a store for a larger game I'm making. I want to have the player running along an infinite line of tiles, and I have made a mockup to test out how it will work. The mockup creates a line of floor tiles on the bottom of the canvas, and gives them a negative velocity, and when exiting the screen, wraps them to the other side. It seems to be working well, but if it is left running, or your computer hangs, even momentarily, the sprites break up and are no longer touching. You can see the mockup here, see the attached screenshot for what happens. How can I keep the floor even and not broken up?