pixijs / pixi-projection Goto Github PK

Hi,
i have a problem using pixi-projection on chrome (version 71.0.3578) on mac book pro.
you can see the problem https://pixijs.io/examples/#/projection/cards.js. The console reports these errors

Thanks

Hey there, I've just tried the demos here but it seems to be broken 😨 https://pixijs.io/examples/#/plugin-projection/camera-spine-layers.js

Cheers!

Just like the title says.

sometimes the result is A , sometimes it's B.
A

B

Why? And How to estimate the result ?

// not work

const PIXI = require("pixi.js");
window.PIXI = PIXI;
require("pixi-projection");

// I changed this. it's worked

const PIXI = require("pixi.js/dist/pixi"); //I changed the export module for this file.
window.PIXI = PIXI
require("pixi-projection");

i think you forget return matrix here ?

Would it be possible to create a curved surface Sprite of some sort?

Let me explain what I want.

Currently you can transform a Sprite by adjusting the four corners of it to warp the transform of it.

var quad = [p1,p2,p3,p4];
var sprite2d = new PIXI.projection.Sprite2d(someTexture);
sprite2d.proj.mapSprite(sprite2d, quad);

But I would like to curve one or more of the four sides by giving one middle point between each corner pair. Like so:

var quad = [p1,p2,p3,p4];
var quadc = [pc1,pc2,pc3,pc4];
var sprite2c = new PIXI.projection.Sprite2c(someTexture);
sprite2d.proj.mapBezierCurvedSprite(sprite2c, quad, quadc);

The middle points can perhaps be optional, so that you can choose to curve only one or two sides.
The curve from start through middle to end would be a bezier curve - the image above is done quickly in Illustrator and do not have a proper curve, it is just an image to display the concept.

Would this be possible to do?

Less function call , more performance will increase

// pixi-projection.d.ts
declare namespace PIXI {
    interface PointLike {
        z: number;
        set(x?: number, y?: number, z?: number): void;
    }
    interface Point {
        z: number;
        set(x?: number, y?: number, z?: number): void;
    }
    interface ObservablePoint {
        _z: number;
        z: number;
        set(x?: number, y?: number, z?: number): void;
    }
}

there is mandatory z field declared in PointLike, Point and ObservablePoint.
It causes compatibility problem. I can't assign other point-like object (like Vector2) into PointLike now.

if z field is optional, it should be set as optional.
if not, I think it should declare another interface like ProjectionPointLike and use them in projection-ed classes

Basics
Plane
Quad projective
Quad bilinear

If I just make a projection visual effect , Which one has the best performance?

http://pixijs.io/examples/#/projection/quad-homo.js

http://pixijs.io/examples/#/projection/quad-bi.js

there are only full-green areas in the demo.

I know when the quadrangle become a concave polygon , the result will be unexpected.

But I think the results should be under the same rule.
I mean the 4 results in the image , they are should be mirror in X/Y.

( In other lib about projection , the first one is used. )

Hi friend
At the moment I add a sprites child, I have this error.

TypeError: Cannot read property '1' of undefined
    at Sprite2dRenderer.MultiTextureSpriteRenderer.flush (pixi-projection.js:209)
    at Sprite2dRenderer.MultiTextureSpriteRenderer.stop (pixi-projection.js:301)
    at WebGLRenderer.setObjectRenderer (VM92 pixi.js:17259)
    at Sprite._renderWebGL (VM92 pixi.js:20572)
    at Sprite.renderWebGL (VM92 pixi.js:9207)
    at Sprite_Picture.renderWebGL (VM92 pixi.js:9211)
    at Sprite.renderWebGL (VM92 pixi.js:9211)
    at Spriteset_Map.renderWebGL (VM92 pixi.js:9211)
    at Scene_Map.renderWebGL (VM92 pixi.js:9211)
    at WebGLRenderer.render (VM92 pixi.js:17235)

I forget something?
this is the code test example for now, it crash when i add child container.addChild(bunny)

_IntroScreen.prototype.startLoop = function(){
      var vidControl = this.vidControl.vLooper;
      var squareX = new PIXI.Sprite(PIXI.Texture.WHITE);
          squareX.tint = 0xff0000;
          squareX.factor = 1;
          squareX.anchor.set(0.5);
          squareX.position.set(200, 200);
      var squareY = new PIXI.Sprite(PIXI.Texture.WHITE);
          squareY.tint = 0xff0000;
          squareY.factor = 1;
          squareY.anchor.set(0.5);
          squareY.position.set(500, 500);
      // create a new Sprite from an image path
      var container = new PIXI.projection.Container2d();
      container.position.set(1600/2, 900/2);
      //add sprite itself
      var bunny = new PIXI.projection.Sprite2d(new PIXI.Texture.fromImage('img/pictures/menu_item/BG_MenueIt.png'));
      bunny.anchor.set(0.5);
      bunny.scale.set(1);
      container.addChild(bunny);// CRASHHHH !!!
      SceneManager._scene._spriteset._pictureContainer.children[(vidControl.pID)-1].addChild(container);
      SceneManager._scene._spriteset._pictureContainer.children[(vidControl.pID)-1].addChild(squareX);
      SceneManager._scene._spriteset._pictureContainer.children[(vidControl.pID)-1].addChild(squareY);

Here is the line that seems responsible in the pixi-projection.js
line:209 =>
var blendMode = premultiplyBlendMode[sprites[0]._texture.baseTexture.premultipliedAlpha ? 1 : 0][sprites[0].blendMode];

see the image :

I make the ground be horizontal , my expecting is the sprite is like original.

But it's be "fat" , because scale-y is too small , or scale-x is too big.

Good afternoon,

I have been working with the 3d projector and have come across an issue that is most likely on my end.

How do I correctly sort the "wall" in the middle of this example?

Thanks in advance.

Expected Behavior**

When creating a 2d sprite, and assigning values before the tiks, they are badly rendered.
In the example below, all sprites should the same SIZE

Current Behavior

When creating a sprite, should apply values without affecting the future behavior of the sprite2d projection
In the example below, all sprites are not the same SIZE

Possible Solution**

To be honest, it exceeds me and it's really complicated.
This suggests a deep understanding of the rendering.

Environment**

*node: "11.8.0"
*nw: "0.36.0 SDK"

• pixi.js version: 4.8.2 webGL
• Browser & Version: *chromium: "72.0.3626.81"
• OS & Version: _e.g. win10

- Running Example:
please to understand, copy and replace this code in this current link example:
https://pixijs.io/examples/#/projection/iso-basic.js
Sorry not available in pixiplayground.

i clean the code to make easy to read.
you can see the big issue inside the scene at start()

// HERARCHI: APP => STAGE => CAMERA => SCENES => GAMEOBJ
//APP:
class _app extends PIXI.Application { 
  constructor() {
      super({
        width: 800,height: 600,                       
        sharedTicker:true,
        backgroundColor: 0x303030
      });
    };
    run() {
        try { stage.initialize(); } 
        catch (e) { throw console.error(e.stack) };
    };
};

// STAGE: scenesManager
class _stage extends PIXI.Stage {
    constructor() {
        super();
        this.sceneList = {Scene_1:new _Scene_Base(3400,2600)}; //scene cache
        this._timer = -1; // fake timer update for change scene
        this.debugSceneText =  {t:new PIXI.Text(''),_id:0,get next(){this.t.text=`currentScene: ${this._id++}`} };
        this.addChild(this.debugSceneText.t);
        this.ticker = PIXI.ticker.shared.add(this.update, this); // game update sharedTicker:true,
    };
    initialize(){
        this.addChild(Camera);
        Camera.initialize();
    };
    update(delta) {
      try {
          // refresh||change scene cache
          if(--this._timer<0){
            this._timer = 200;
            this.sceneList.Scene_1.end();
            Camera.initialize();
            Camera.setupToScene(this.sceneList.Scene_1);
            this.sceneList.Scene_1.start();
            this.debugSceneText.next
          }else{
            Camera.updateProjection();
          }
      } catch (e) { throw console.error(e.stack) };
    };
};

// SCENE: batch create in a loading scene
class _Scene_Base extends PIXI.projection.Container2d {
    constructor() {super()};
    // start when we succeed clear last 'scene,events,camera,fadeIn'
    // scene are constructed and batched in a buffer kit during the loading scene.
    // start build sprite required for this scene and apply data from json
    start(){
        this.setupObjs();
        setTimeout(()=>this.setupObjs(200) , 300);
        setTimeout(()=>this.setupObjs(300) , 600);
    };
    end(){ 
        this.removeChildren();
    };
    setupObjs(x=100){
        for (let i=0, l=5; i<l; i++) {
            var s = new PIXI.projection.Sprite2d(new PIXI.Texture.fromImage('required/assets/flowerTop.png'));
            this.addChild(s);
            // custom data
            s.rotation= i/Math.PI; // seem ok
            s.anchor.set(0.5,1);
            s.position.set(x,85*i); 
            s.scale.set(0.5);
        };
    };
};

//CAMERA: controler scene rendering , projection, view-port and culling.
class _camera extends PIXI.projection.Container2d{
    constructor() {
        super()
        this._screenW = app.screen.width; 
        this._screenH = app.screen.height;
        this._sceneW = app.screen.width; // scene width
        this._sceneH = app.screen.height; // scene height
        this.far = new PIXI.Sprite(PIXI.Texture.WHITE);
        this.far.factor = 0.5;
        this.scene = null;
    };
    initialize() {
        this._sceneW = app.screen.width; // scene width
        this._sceneH = app.screen.height; // scene height
        this.position.set(this._screenW/2,this._screenH/2); // center camera
        this.scene = null;
        this.removeChildren();
        this.parent.addChild(this.far); // add to stage
        this.far.position.set(this._screenW/2,0);
    };
    setupToScene(scene) {
        this.scene = scene;
        this._sceneW = scene.w;
        this._sceneH = scene.h;
        this.addChild(scene);
        // FIXME: when we creat new sprite it seem no take current setup, we need wait ~next tiks ?
        Camera.updateProjection(); // make one update from current scene.
    };
    updateProjection(){
        const far = this.far  ;
        const _fpX = 0, _fpY = 0, _fpF = 0, _zoom = 1;
        far.x = ((this._screenW/2)-(this.pivot._x*_zoom))+_fpX;
        far.y = (-(this.pivot._y*_zoom))+_fpY;
        far.factor = _fpF;
        this.scale.set(_zoom);
        let pos = this.toLocal(far.position, undefined, undefined, undefined, PIXI.projection.TRANSFORM_STEP.BEFORE_PROJ);
        pos.y = -pos.y;
        pos.x = -pos.x;
        this.proj.setAxisY(pos, -far.factor);
        this.scene.children.forEach(s => { s.proj.affine = PIXI.projection.AFFINE.AXIS_X });// update gameObjs affine
    };
};

var app = new _app();
document.body.appendChild(app.view);
var Camera = new _camera()
var stage = new _stage();
app.stage = stage;
app.run();

Thank in advance for any tips or suggest or fix.
note: It is likely that I misunderstand the problem or that the problem comes from a bad logic.

I noticed this strange behavior in free transform

Hi,
I have been trying to make projection works with TilingSprite without success.
TilingSprite extending Sprite, I think there must be an easy way to do it.

Thanks for any help

I found this feature is disabled in https://pixijs.io/examples/#/plugin-projection/quad-bi.js.

When will it be ready ? or never be supported in Pixi v5 ?

1：

`

2：
Use pixi-legacy to run

`
<script type="text/javascript" src="libs/pixi-legacy.min.js"></script>
<script type="text/javascript" src="libs/pixi-projection.js"></script>
<script type="text/javascript" src="quad-homo.js"></script>

Hey ivan, or other people use this, what formula to compute and draw distance between 2 container3d?
I was success with projection 2d to find a formula that worked.
it was little complicated.

               Object.keys(c.pathConnexion).forEach(id => { // connextion id to sprite ID
                   const cc = $objs.cases_s[id]; // dataobj conected
                   let point = new PIXI.Point(0,0);
                   const xy   = $camera.toLocal(c, $stage.scene, void 0, void 0, PIXI.projection.TRANSFORM_STEP.BEFORE_PROJ);//dataObj  .sprite.toGlobal(point)
                   const xy_c = $camera.toLocal(cc, $stage.scene, void 0, void 0, PIXI.projection.TRANSFORM_STEP.BEFORE_PROJ); //dataObj_c.sprite.toGlobal(point)
                   const dX = (xy_c.x-xy.x)*$camera._zoom;
                   const dY = (xy_c.y-xy.y)*$camera._zoom;
                   const path = new PIXI.Graphics();
                   path.lineStyle(4, 0x4286f4, 1);
                   path.moveTo(0,0).lineTo(dX, dY).endFill();
                   const scaleXY = new PIXI.Point(~~1/c.scale.x/$camera._zoom,~~1/c.scale.y/$camera._zoom);
                   path.scale.copy(scaleXY);
                   c.addChild(path);
                   c.Debug.path.graficConection.push(path);
                   c.Debug.path.addChild(path);
               });

But now with 3d projection the system changed, it more easy, but am not able to draw a line connection between 2 objs?
Upper is my target result i want. (photoshoped)
And bottom it the weird result i get.

Did you have demo example or code to help me?
it's been since an hour i try without success . :(
it's probably too simple?

Hi Ivan the source suggests that this will work with Spine. Can you convert an existing spine element to work in the same way you can with a Sprite or Container?

Thanks

Hi,

I'm using 3d Projection (Sprite3d).
I have a parent sprite3d and a sprite3d child.

        this._goal = new PIXI.projection.Sprite3d(this._resources.goal.texture);
        this._camera.addChild(this._goal);
        this._goal.position3d.x -= this._goal.width / 2;
        this._goal.position3d.y = -this._goal.height; // the goal is in the floor, move it out
        this._goal.position3d.z = 800;
        this._goal.depth = 250;
        this._goal.minX = this._goal.position3d.x;
        this._goal.maxX = this._goal.position3d.x + this._goal.width;
        this._goal.minY = this._goal.position3d.y;
        this._goal.maxY = this._goal.position3d.y + this._goal.height;
        this._goal.minZ = this._goal.position3d.z;
        this._goal.maxZ = this._goal.position3d.z + this._goal.depth;

        this._goalC = new PIXI.projection.Sprite3d(this._resources.goalCollide.texture);
        this._goal.addChild(this._goalC);
        this._goalC.position3d.x = 71;
        this._goalC.position3d.y = 117;

So goalC has an offset of 71 on x axis and 117 on y axis, relatively to goal.

How can I get world 3d position of goalC ?

Thanks !

Hi.
I've installed both pixi.js and pixi-projection npm packages on angular.
Pixi.js works fine as it has exports, but pixi-projection does not work.

On load time, pixi-projection.js directly needs PIXI to exist to overlay its methods, but PIXI is inside a node_module package, and is not present until it is needed (later).
So I get an error.

Any ideas on this?

Not every device supports highp for fragment shaders. PIXI patches fragment shaders with precision depending on PIXI.settings.PRECISION_FRAGMENT.
"precision highp float;\n" should be removed from shaderFrag properties.

Would it be possible to add ParticleContainer2d/PartcleContainer2s to this plugin?

Doing convertTo2d() on a ParticleContainer and then adding a Sprite2d to it results in this:

ParticleRenderer.js:147 Uncaught TypeError: Cannot read property 'prepend' of undefined
    at ParticleRenderer.render (ParticleRenderer.js:147)
    at ParticleContainer.renderWebGL (ParticleContainer.js:214)
    at ReelSymbol.renderWebGL (Container.js:414)
    at Container2d.renderWebGL (Container.js:414)
    at Reel.renderWebGL (Container.js:414)
    at Reels.renderWebGL (Container.js:414)
    at Container.renderAdvancedWebGL (Container.js:467)
    at Container.renderWebGL (Container.js:405)
    at WebGLRenderer.render (WebGLRenderer.js:329)

If I have a 2d projected container with 2 sprites inside, when the plane is "flipped" should i see child sprites in a reverse order?

an application can be a container containing 2 sprites inside in the same positon, representing the 2 faces of a card.
container
|----- face1 : z=0
|----- face2 : z=1

when i "flip" the container i should see "face1" instead of "face2"?

Hi Ivan, I was testing this pixi-projection stuff on an older Samsung device and got this error (this is from your basic example page)

The device does run the rest of the PIXI webGL stuff and is running in webGL mode on the renderer.
This error happens when the pixi-projection.js file is loaded, even without any other pixi-projection code.

As the projection stuff is only webGL compatible I was going to have a none projected canvas fallback anyway. Is there anything I could test the webGL instance for to see if the device can handle the pixi-projection code?

Thanks in advance for your help.

How much of pixijs v5 support is already there?
I tried with v5 rc3 and got null pointer error when It tries to access PIXI.glCore.

Can I use the sprite3d as a mask?
I do it and get an error

https://gizmooo.github.io/pixi-test/index.html

i get strange distortion from bottom when i try to navigate in deep fake z.

Any tips or suggest to fix this or avoid this ?

i have some difficulty with culling in projection.
Am no able to proceed with .getBounds(), because i get weird math values thats i not understand !.
So i experimente like this, it work but am really not sure if is the best ways, i will probably get issue because it no compute bounds correctly.

    /**@description update from updateMain in sceneManager */
    update(){
        this.view.scale3d.set(this._zoom);
        this.view.euler.y = this._ang;
        this.view.euler.x = this._perspective;
        if(this._angleToFocus){
            //this.view.setPlanes(this._focus+Math.abs(this._ang*2000), this._near, this._far, this._orthographic)
        }
        if( this._culling ){
            const b = {left:(this.view.position3d._x-$app.screen.width/2)*this._zoom,right:(this.view.position3d._x+$app.screen.width / 2)*this._zoom}
            for (let i=1,list = $stage.scene.children, l=list.length; i<l; i++) {
                const c = list[i];
                if(c.position3d){
                    const inside = c.position3d._x>b.left && c.position3d._x<b.right;
                    c.renderable = inside;
                }
            };
        }
    };

Any tips or demo to show how proceed in pixi projection with culling ?
I need this because despite my optimization., with a lot of stuff, i start get poor performance.

When I try to use a Sprite2d as mask I get an error.

Here is some example code:

var sprite1 = new PIXI.Sprite(ctx.renderer.generateTexture(getRect(0,0,200,200,0xffffff)));
sprite1.position.set(800, 100);
this.addChild(sprite1);

var q = [
    new PIXI.Point(100,0),
    new PIXI.Point(200,0),
    new PIXI.Point(200,100),
    new PIXI.Point(100,100)
];
var sprite2 = new PIXI.projection.Sprite2d(ctx.renderer.generateTexture(getPolygon(0,0,q,0x00fffff)));
sprite2.position.set(850,150);
this.addChild(sprite2);
sprite1.mask = sprite2;

function getRect(x, y, width, height, color, alpha) {
    var g = new PIXI.Graphics();
    g
        .beginFill(color)
        .drawRect(0,0,width,height)
        .endFill();
    g.x = x;
    g.y = y;
    g.alpha = alpha === undefined ? 1 : alpha;
    return g;
}

function getPolygon(x, y, quad, color, alpha) {
    var g = new PIXI.Graphics();
    g
        .beginFill(color)
        .drawPolygon([
            quad[0].x, quad[0].y,
            quad[1].x, quad[1].y,
            quad[2].x, quad[2].y,
            quad[3].x, quad[3].y])
        .endFill();
    g.x = x;
    g.y = y;
    g.alpha = alpha === undefined ? 1 : alpha;
    return g;
}

The error produced is this:

Uncaught TypeError: Cannot read property 'tx' of undefined
    at Object.calculateSpriteMatrix (pixi.js:18575)
    at FilterManager.calculateSpriteMatrix (pixi.js:19131)
    at SpriteMaskFilter.apply (pixi.js:18655)
    at FilterManager.popFilter (pixi.js:18855)
    at MaskManager.popSpriteMask (pixi.js:19369)
    at MaskManager.popMask (pixi.js:19328)
    at Sprite.renderAdvancedWebGL (pixi.js:9422)
    at Sprite.renderWebGL (pixi.js:9363)
    at Projection.renderAdvancedWebGL (pixi.js:9416)
    at Projection.renderWebGL (pixi.js:9363)

I am using projections in a project I am working on and it would be nice to use a projected Sprite2d as mask to other projected Sprite2d/Container2d instances. Right now I am using regular Sprites as mask and updates those whenever a projected Sprite2d or Container2d, that needs masking, has its projection updated. But it would save time to be able to use a projected Sprite2d as the mask instead.
Is it possible?

am intrigued by what is the camera mode?
Any plan on this ?

Beacuse in pixi.js (dist file) , there are some codes :

Object.defineProperty(exports, 'Point', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_Point).default;
  }
});

There is getter only.

In pixi-projection.js (dist file) , there are some codes :

PIXI.Point = Point3d;

So , in some browsers , there will throw an error like this :

Is it possible to use this plugin without importing all of the core pixi.js package?

Naively, could it just check for the existence of the global before assigning?

jsfiddle

I tried 3d rotation with the filter, but the result was a bit strange.

bunny Why not rotate around the y axis in the upper-left corner?

const app = new PIXI.Application({
    width: 667,
    height: 375,
    antialias: true
})

const vs = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
uniform mat3 filterMatrix;
uniform mat4 pMatrix;
uniform mat4 vMatrix;
uniform mat4 tMatrix;
uniform mat4 rMatrix;
uniform vec4 uPosition;
varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

mat4 transform() {
    mat4 _projectionMatrix = mat4(1.0);
    _projectionMatrix[3][0] = projectionMatrix[2][0];
    _projectionMatrix[3][1] = projectionMatrix[2][1];
    _projectionMatrix[0][0] = projectionMatrix[0][0];
    _projectionMatrix[1][1] = projectionMatrix[1][1];
    return _projectionMatrix;
}

void main() {
    gl_Position = pMatrix * vMatrix * rMatrix * transform() *
        vec4(aVertexPosition, 0.0, 1.0);
    vFilterCoord = (filterMatrix * vec3(aTextureCoord, 1.0)).xy;
    vTextureCoord = aTextureCoord;
}
`

const
    pMatrix = mat4.create(),
    vMatrix = mat4.create(),
    rMatrix = mat4.create()

app.loader.add('bunny', 'https://pixijs.io/examples/required/assets/depth_blur_moby.jpg')
    .load(main)


mat4.perspective(pMatrix, Math.PI / 3, app.view.width / app.view.height, 0, 100)
mat4.lookAt(vMatrix, [0, 0, 2], [0, 0, 0], [0, 1, 0])

function main() {
    const
        bunny = PIXI.Sprite.from('bunny'),
        filter = new PIXI.Filter(vs, null, { pMatrix, vMatrix, rMatrix })


    //bunny.position.set(100, 100)
    bunny.scale.set(.5)

    filter.uniforms.pMatrix = pMatrix
    filter.uniforms.vMatrix = vMatrix
    filter.uniforms.rMatrix = rMatrix
    bunny.filters = [filter]


    app.ticker.add(() => {
        mat4.rotateY(rMatrix, rMatrix, .01)
        filter.uniforms.rMatrix = rMatrix
    })

    app.stage.addChild(bunny)
}

document.body.appendChild(app.view)

Hi.

I met some problems when I tried to use filters with pixi-projection.

First case

Based on 2d basics example.
When some filter is applied to PIXI.projection.Sprite2d instance, that instance draws a texture that is cut off.
When I checked rendering process out with Spector.js, the texture seems to be placed on wrong position in frame buffer.

code look like this;

// fragment shader that does nothing
var fragShader = "varying vec2 vTextureCoord;\n" +
      "uniform sampler2D uSampler;\n" +
      "void main() {\n" +
      "  gl_FragColor = texture2D(uSampler, vTextureCoord);\n" +
      "}";
var shader = new PIXI.Filter(null, fragShader);
bunny.filters = [shader];

Second case

Based on 2d basics example.
Almost same situation as first case.
When a regular PIXI.Sprite instance that uses the same texture with PIXI.projection.Sprite2D, is added to the stage.
PIXI.Sprite instance filled with white color unexpectedly.

code look like this;

var texture = loader.resources.tex_for_bunny.texture;
var plain = new PIXI.Sprite(texture);
app.stage.addChild(plain);

// fragment shader that does nothing
var fragShader = "varying vec2 vTextureCoord;\n" +
      "uniform sampler2D uSampler;\n" +
      "void main() {\n" +
      "  gl_FragColor = texture2D(uSampler, vTextureCoord);\n" +
      "}";
var shader = new PIXI.Filter(null, fragShader);
bunny.filters = [shader];

Third case

Based on 3d cards example.
When I tried to apply filter to each card, it did not work as I expected.
Code below should fill card container with red but only clear pixels are filled with red.

// fragment shader that fill pixels with red
var fragShader = "varying vec2 vTextureCoord;\n" +
      "uniform sampler2D uSampler;\n" +
      "void main() {\n" +
      "  gl_FragColor = vec4(1,0,0,1);\n" +
      "}";
var shader = new PIXI.Filter(null, fragShader);
cards.children[0].filters = [shader];

I wrote pages that reproduces issues above.

• case1
• case2
• case3
• repo

Please let me know if my implementation has something wrong, I'm going to fix it and see if things go right.

Would it be possible to add functionality to convert a pixi-spine object to 2d? I can get the proper projection of a spine object using RenderTexture but that is not as performant and stable as using the spine object directly on stage.

What I mean is like:

var spineObject = new PIXI.spine.Spine(data);
spineObject.convertTo2d();

By doing the above the spine would then follow the projection of the Container2d or Sprite2d it is added as a child to.

as http://pixijs.download/dev/docs/PIXI.Container.html#toLocal, the point param is optional in toLocal(), but in Container2d it will throw.

in the example

http://pixijs.io/examples/?v=v4.8.6#/projection/iso-basic.js
&
http://pixijs.io/examples/?v=v4.8.6#/projection/plane.js

I changed .proj.affine from AXIS_X to AXIS_Y .

I found the result is not as expected.

Hi, I'm using pixi-projection @0.36 in PIXI @5.2.0 recently. However, I found an error in the browser's console.

I saw the source code in the line 2014:

        SpriteMaskFilter2d.prototype.apply = function (filterManager, input, output, clear) {
            var maskSprite = this.maskSprite;
            var tex = this.maskSprite.texture; // !! here the maskSprite.texture is undefined 
            if (!tex.valid) {
                return;
            }
            if (!tex.uvMatrix) {
                tex.uvMatrix = new PIXI.TextureMatrix(tex, 0.0);
            }
            tex.uvMatrix.update();
            this.uniforms.mask = maskSprite.texture;
            this.uniforms.otherMatrix = SpriteMaskFilter2d.calculateSpriteMatrix(input, this.maskMatrix, maskSprite)
                .prepend(tex.uvMatrix.mapCoord);
            this.uniforms.alpha = maskSprite.worldAlpha;
            this.uniforms.maskClamp = tex.uvMatrix.uClampFrame;
            filterManager.applyFilter(this, input, output, clear);
        };

I tried to change the code to

            var maskSprite = this.maskSprite.maskObject;
            var tex = maskSprite.texture;

It seems to work out, so I am confused whether it's a bug.

Hum, i do not know if your engine and spine engine can allows it, but it would be great if we could convert a Bone to 3d?
Knowing that all spine childs elements have 3d containers.
example usage:

                const bone = this.s.skeleton.findBone('hitBone').convert3d();
                bone.euler.y = 1;
                bone.position3d.z = 400;

the idea can be propagation a hackUpdate from 3dBone to 3dChild ?
It work for individual part but too hard to manage with complexe Spine.

Hi,

I am trying to use pixi-projection (0.3.5) with pixi v5 (5.1.5). I've noticed that convertSubtreeTo2d does not work in such a configuration. Here you have a broken sandbox.

https://codesandbox.io/s/broken-pixi-projection-convertsubtreeto2d-ex2pk

Error:

Uncaught TypeError: Cannot read property 'start' of undefined
    at BatchSystem.setObjectRenderer (core.js:5552)
    at Sprite._render (sprite.js:394)
    at Sprite.render (display.js:1626)
    at Container.render (display.js:1631)
    at Container.render (display.js:1631)
    at Renderer.render (core.js:11266)
    at Application.render (app.js:77)
    at TickerListener.emit (ticker.js:138)
    at Ticker.update (ticker.js:677)
    at Ticker._tick (ticker.js:376)

Changing PIXI.Sprite to PIXI.projection.Sprite2d fixes the problem but I think that this is not the way how convertSubtreeTo2d should work.

You can just change dependencies to pixi 4.8.8 and pixi-projection 0.2.8 to see that example work as intended.

impact.js is a 2d html5 engine .

There is a very cool 3d plugin for it :
https://github.com/phoboslab/TwoPointFive

there is an online demo :
https://phoboslab.org/twopointfive/

I hope somebody could port a pixi.js verson.

the right-bottom point is not fixed at the right-bottom red rect. Why ?

And When use the normal method with matrix 4*4 , the result is not as same as the method in http://reedbeta.com/blog/quadrilateral-interpolation-part-1/

https://pixijs.io/examples/#/projection/quad-bi.js
https://pixijs.io/examples/#/projection/cards.js
https://pixijs.io/examples/#/projection/quad-homo.js
These examples do not work, it just shows "loading.." and nothing is loaded

Is this project still in use?

I would like to know if it is possible to easily integrate this module in the Third party runtimes of RMMV?
Knowing that I do not use the basic software core for rendering (tiles and charset).

I work on my side on a small plugin that offers a publisher more suitable for projects a bit less pixel Art and 2D.
The idea is to realize a small complex editor worthy of UNITY which makes it possible to manage the different altas, layers available for a classic and functional Workflow.
So logically, if am not wrong in my workFlow, we have.
Sprites: single large pictures textures, without frames
TilesSheets: Multiples small pictures with frames (texturePacker)
SpriteSheets: Sequential animations + FX from After Effect or other.. (texturePacker)
SpineSheets: Multiples Small pictures textures but arrange. (spine2D)

Originally, rmmv does not take spriteMap, but I hack to allow the map to be a simple single large sprite.
what would be the approach to integrate a simple effect, without much complexity, 2.5D immersion for the map and sprites
Do existe a tutorial and a good demo with the rmmv core scene?

Let see how my workflow look for now.
This its how i understand pixi.

thanks