Video to texture layer

[ddibiase]

Hello,

 

I'm experimenting with video rendering in canvas and found another topic (http://www.html5gamedevs.com/topic/1345-playing-hd-movie-with-pixijs-is-it-possible/?hl=video#entry8926) posted last year, but it wasn't totally helpful. I'm trying to recreate an effect in canvas similar to www.craftymind.com/factory/html5video/CanvasVideo.html. Clicking on the canvas makes the video explode and come back together.

 

I've worked out the fundamentals and have managed to get individual frame data from a video into a ticker. Here's some code:

 

this.canvas = document.getElementById('textcanvas');

this.context = this.copy_canvas.getContext('2d');

this.texture = PIXI.Texture.fromImage('tmp.jpg');

this.sprite  = new PIXI.Sprite(this.texture);

 

this.updateFrame = function() {

    if (! isNaN(self.inner.duration)) {

        this.context.drawImage(self.video, 0, 0);

        this.texture.baseTexture.source.src = self.canvas.toDataURL();

    }

};

self.interval = setInterval(this.updateFrame, 10);

 

I'm creating a base texture with a temporary image, since it seems to require an image passed through to it. Within the update frame, I'm assigning the video to the canvas so it draws the image. I'm then grabbing the frame data from canvas and chucking it into the baseTexture source.

 

I looked at how Texture is structured in the Pixi library and determined I can grab it directly from the canvas. So I swapped fromImage out for fromCanvas.

 

I'm not getting any rendering at that point. I don't have a good enough understanding of the texture cache or the lifecycle of the rendering layer. I'd really appreciate if anyone more experienced can push me in the right direction and perhaps provide a base understanding of the texture rendering lifecycle.

 

Thanks =)

 

Dave

 

[ddibiase]

I'm hoping someone can get a round to push me in the right direction. Put simply: I need to efficiently replace image data in BaseTexture using self.canvas.toDataURL();

 

Thanks again!

[ddibiase]

For anyone interested I found a post on Github that helped me solve the problem: https://github.com/GoodBoyDigital/pixi.js/issues/601 the solution was a bit more involved than I expected but it was a matter of building out a new "DynamicSprite" class (similar to MySprite in the Github example) and overriding the _renderWebGL method to check for a "dirty" texture.

 

this.baseTexture = new PIXI.BaseTexture(

    self.innerCanvas

);

this.texture = new PIXI.Texture(

    this.baseTexture,

    new PIXI.Rectangle(0, 0, window.innerWidth, window.innerHeight)

);

 

var DynamicSprite = function() {

   PIXI.Sprite.apply(this, arguments);

   this._dirtyTexture = false;

};

DynamicSprite.prototype = Object.create(PIXI.Sprite.prototype);

DynamicSprite.prototype.constructor = DynamicSprite;

DynamicSprite.prototype._renderWebGL = function(renderSession) {

   if (this._dirtyTexture) {

       this._dirtyTexture = false;

       PIXI.updateWebGLTexture(this.texture.baseTexture, renderSession.gl);

   }

   PIXI.Sprite.prototype._renderWebGL.call(this, renderSession);

};

this.sprite = new DynamicSprite(this.texture);

 

I'm then using an interval to update the textures:

 

this.updateFrame = function() {

    self.innerCanvasContext.drawImage(self.inner, 0, 0);

    self.sprite._dirtyTexture = true;

    self.baseTexture.updateSourceImage(self.innerCanvas);

};

[Grsmto]

Hi,

 

I'm trying to draw a video to my pixi scene, it's perfectly working with the canvas renderer but I can't get this working when switching to webgl renderer using your trick.

I'm using the same code so I don't get why It's not working. I just end with a black screen...

 

Here is my code:

// all the stuff for the MySprite class, then:MySprite.prototype._renderWebGL = function(renderSession) {    PIXI.updateWebGLTexture(this.texture.baseTexture, renderSession.gl);    PIXI.Sprite.prototype._renderWebGL.call(this, renderSession);};// Init everythingthis.videoCtx.drawImage(this.videoEl, 0, 0, this.w, this.h);       // I draw first my video in a hidden canvasthis.baseTexture = new PIXI.BaseTexture(this.videoCanvas);this.videoTexture = new PIXI.Texture(this.baseTexture, new PIXI.Rectangle(0, 0, this.w, this.h));this.videoSprite = new MySprite(this.videoTexture);this.videoSprite.width = this.w;this.videoSprite.height = this.h;this.stage.addChild(this.videoSprite);// In my RAF loop:this.videoCtx.drawImage(this.videoEl, 0, 0, this.w, this.h);this.baseTexture.updateSourceImage(this.videoCanvas);

 

 

Thanks very much I'm banging my head on my desk on this since yesterday!

[ddennis]

Do you have any update on this?

[praneybehl]

Yeah I am wondering that too. It will be great to have a way to render video with Pixi

[Mat Groves]

Morning peeps.. try looking in the pixi dev branch.. video texture and example 25 added

https://github.com/GoodBoyDigital/pixi.js/tree/dev 

[ddennis]

Thanks alot - much appreciated.

/Dennis 

[praneybehl]

Awesome!

[Tweeper]

Yes!! Nice! Gonna use this a lot! Pixi rules!