Jump to content

Video to texture layer


Recommended Posts



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 =)




Link to comment
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(
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;
       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;
Link to comment
Share on other sites

  • 1 month later...



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!
Link to comment
Share on other sites

  • 3 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...