Sign in to follow this  
ddibiase

Video to texture layer

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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);
};

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.