• Content Count

  • Joined

  • Last visited

  1. Its a little bit spaghetti code in my app (Angular + Akita + PIXI.js) its a part of a robotics application that I am not allowed to share entirely (would also not work without the backend)) but I can strip out the drawing part and assemble a small demo for the community
  2. Ah hmh it works, I forgot to set tf.tx = -dX and tf.ty = -dY and set both boolean flags in the render(.) function to false.
  3. For my app I also implemented freehand drawing but I use a two-stage approach: first I print circles on a renderTexture (that covers the viewport) wherever the cursor goes, and once the user emits a mouseup-event, I re-render the whole thing on a regular layer using a non-closed polygon along with simplify.js to reduce the number of vertices. For really quick movements there were 'gaps' in my implementation (since the mouse-emit-rate seems limited), so I also used interpolation to make that smooth. Works also really nice
  4. Hello, today I am trying to implement extracting images that certainly exceed the per-texture memory. So tiling is probably the only solution to this issue. I was thinking how to actually solve this and came up with asing the renderer to render tile-wise to texture. However, the code below doesnt really work. I am not sure how the texture vs. container transforms are intended to work private _extractTiles(app: PIXI.Application, container: PIXI.DisplayObject, maxTileWidth: number, maxTileHeight: number) { const bounds = container.getBounds(); const width = bounds.width; const height = bounds.height; console.warn('Bounds', width, height) const numRows = Math.ceil(width / maxTileWidth); const numCols = Math.ceil(height / maxTileHeight); console.log(numRows, numCols) for (let tileX = 0; tileX < numRows; tileX++) { for (let tileY = 0; tileY < numCols; tileY++) { // const tileWidth = Math.min(tile) const tileWidth = Math.min(maxTileWidth, width - tileX * maxTileWidth); const tileHeight = Math.min(maxTileHeight, height - tileY * maxTileHeight); console.warn('Before tilingTexture', tileWidth, tileHeight) const tileTexture = PIXI.RenderTexture.create({ width: tileWidth, height: tileHeight }); const dX = tileX * maxTileWidth; const dY = tileY * maxTileHeight; const tf = container.transform.localTransform.clone(); app.renderer.render(container, tileTexture, true, tf ) // Debug Sprite :) const sprite = new PIXI.Sprite(tileTexture); sprite.x = 100; sprite.y = 100; app.stage.addChild(sprite) // Using the extract module later on... // TODO } } }
  5. Tanks for the quick answer What I want to do is basically create particles (Marshmallows) that fall down onto a cake from a tool that is hovering above cake. While I was doing sprinkles just using rects + tweens (looks fine), marshmallows could be (depended on the perspective) a circle (top/bottom), a rect (side) and some mixtures of ellipsis +orthogonal lines. Now, I want randomized particles falling down onto the cake and thought it would be nice to animate this in shaders (and freeze them as soon as the animation phase is over). It could for sure be done with 2d animations and many single images but ... urgh
  6. Hi everyone, I've implemented a webapp where the user sees a table from top-down perspective and can decorate a cookie. For different sprinkles I've used simple rects and animated them with tween.js (or something like that). For liquid sugar I've modified a native webgl implementation based on the navier stokes equation. The last part to implement are marshmallows. Since the 2d projection of cylinders (which a marshmallow more or less looks like) can vary quite a bit if you rotate it I thought its time to try out the PIXI.Mesh, PIXI.Shader and so on classes. const vertexSrc = ` precision mediump float; attribute vec3 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4(projectionMatrix * translationMatrix * aVertexPosition,1.0); } `; const fragmentSrc = ` precision mediump float; void main() { gl_FragColor = vec4(1.0,1.0,0.0, 1.0); } `; I've noticed from another example that pixi passes a projection and translation matrix already. However... I dont know really how the projection Matrix looks like. If I pass in the 3d cylinder coordinates (range [-100,+100] for each dimension), I can just see two parallel yellow lines with quite a bit space between them. I guess the projection matrix must somehow slice the z-dimension probably at z=0 or something. Sooo my question is ... if I pass in a custom projection matrix is there something I need to consider? or is there any pixi.js magic happen that will make it hard to visualize this cylinder? Thank you very much : -)
  7. Last week I finished a paint brush tool (like in the good old MS paint ) and in order to get it running quite fast I am using a renderTexture print basically a path of circles such that it looks like a line. As soon as the user releases the pan-move, the tool emits the path (array of coordinates) which in turn gets rendered via the drawPolygon method of a pixi graphics (it looks much nicer and I is more performant than using circles again in a graphic). I totally avoid using beginFill()... basically only using the lineStyle before drawing the polygon. However, it seems that this is more or less only a border-decoration and cannot handle pointer-events (to let the user select these polylines and maybe remove them). Are there any solutions to this problem? A quickfix would be a trail of lineTo movements but since there is no lineCap, this looks pretty ugly Thanks in advance
  8. I followed your advice in line 3 and added this as child to the stage, which in turn i use as container to extract the image from, works thanks!
  9. When using extract pixels it seems that only content is extracted that starts from the origin and ignores the negative part of the axis. This is currently an issue for me as my indoor map is (approximately) centered at (0,0); So it will always reside partially in the negative coordinate areas. The container holding the map (a sprite with scale.y =-1 and some position offset) and some other shapes (graphics) live in the pixi.viewport container (awesome plugin btw ) and my first guess was that temporarily shifting the position of the viewport might help but I think this transform is somehow only relative to the stage. When passing the stage to extract, the result is just all black Thank you very much