Trying to run a video texture on a box

Help & Support
, , ,
1

Hello!

I’m trying to make a simple code in my codepen, where I run a video texture by url on a box.

I followed all the exemples I could found about the topic, but for some reason the video wouldn’t play, and I’m facing much touble to find what I’m doing wrong.

I would be very grateful if someone could help me :slight_smile:

my codepen link: https://codepen.io/dans-lp/pen/YzLPZQL?editors=0010

2

Your getVT function was returning the video DOM element, not the video texture.

There were some other minor issues too. See code below.

Fixed code:

// Create a PlayCanvas application
var canvas = document.getElementById("application-canvas");
var app = new pc.Application(canvas, {});
app.start();

// Fill the available space at full resolution
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Create box entity
var cube = new pc.Entity();
cube.addComponent('model', {
    type: "box", 
});
cube.setLocalScale(5,3,0);
app.root.addChild(cube);

var meshCube = cube.model.meshInstances[0].material;
meshCube.emissiveMap = getVT();
meshCube.diffuse = new pc.Color(0,0,0);
//meshCube.useLighting = false;
//meshCube.emissiveMap = getVT();
meshCube.update();


// Create camera entity
var camera = new pc.Entity();
camera.addComponent('camera', {
    clearColor: new pc.Color(0.1, 0.2, 0.3)
});
app.root.addChild(camera);

// Create directional light entity
var light = new pc.Entity();
light.addComponent('light');
app.root.addChild(light);

// Set up initial positions and orientations
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);

// Resize the canvas when the window is resized
window.addEventListener('resize', function () {
    app.resizeCanvas(canvas.width, canvas.height);
});

// video texture implementation
function getVT(){
  
   var app = this.app;
  
   var video = document.createElement('video');
    video.loop = true;
    video.muted = true;
    video.playsInline = true;
    video.crossOrigin = "anonymous";
  
    // Make sure that the video is in view on the page otherwise it doesn't
    // load on some browsers, especially mobile
    video.setAttribute(
      "style",
      "display: block; width: 1px; height: 1px; position: absolute; opacity: 0; z-index: -1000; top: 0px; pointer-events: none"
     );
  
    document.body.append(video);
  
  // Create a texture to hold the video frame data
    var videoTexture = new pc.Texture(app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
        magFilter: pc.FILTER_LINEAR,
        addressU: pc.ADDRESS_CLAMP_TO_EDGE,
        addressV: pc.ADDRESS_CLAMP_TO_EDGE,
        mipmaps: true
    });

    video.addEventListener('canplaythrough', function() {
        videoTexture.setSource(video);
        video.play();
    });
                           
    // set video source
    video.src = 'https://cdn.jsdelivr.net/npm/big-buck-bunny-1080p@0.0.6/video.mp4';

    document.body.appendChild(video);
    video.load();
   
    var upload = false;
    var time = 0;
    app.on("update", function (dt) {
      time += dt;

      // Upload the video data to the texture every other frame
      upload = !upload;
      if (upload) {
          videoTexture.upload(); 
      }
    });
  return videoTexture;
};
1 Like
3

thank you so much!

Still…I’m just a little confused about the importance of emissiveMap and diffuse

4

TLDR, emissiveMap is a texture mapping that ignores lighting. Diffuse is affected by lighting so to avoid the material looking blown out, its set to black.

1 Like
5

I see
Thanks a lot for the help :slight_smile: