Sign in to follow this  

Video to texture layer

Recommended Posts



I'm experimenting with video rendering in canvas and found another topic ( posted last year, but it wasn't totally helpful. I'm trying to recreate an effect in canvas similar to 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(, 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 =)




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: 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(
this.texture = new PIXI.Texture(
    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;
   }, 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;

Share this post

Link to post
Share on other sites



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