Hi everyone,
I’m testing playcanvas for a few week now and so far i’ve manage to do what i want but right now i’m stuck i don’t really understand why it’s not doing what i want.
I’ve used a bunch of entity i select using a raycast script and hit boxes to make evry animation spawn all that part work as supposed to but i must be missing something in my code because only the last animation work as expected and by the last i mean the last i just played it can be any of the video.
I’ve used the tutorial script with a few modification to work in my project
var Videotexture = pc.createScript('videotexture');
Videotexture.attributes.add('materials', {
type: 'asset',
assetType: 'material',
array: true
});
Videotexture.attributes.add('videoUrl', {
type: 'string',
array: true
});
Videotexture.attributes.add("SwitchingAssets", {
type: "entity",
title: "Assets"
});
// initialize code called once per entity
Videotexture.prototype.initialize = function() {
// Create a texture to hold the video frame data
var app = this.app;
var videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R5_G6_B5,
autoMipmap: false
});
videoTexture.minFilter = pc.FILTER_LINEAR;
videoTexture.magFilter = pc.FILTER_LINEAR;
videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
var alphaVideo = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R5_G6_B5,
autoMipmap: false
});
alphaVideo.minFilter = pc.FILTER_LINEAR;
alphaVideo.magFilter = pc.FILTER_LINEAR;
alphaVideo.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
alphaVideo.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
// Create two HTML Video Element to play the video and the mask on
var Avideo = document.createElement('video');
var video = document.createElement('video');
var name = this.entity.name;
var play = true;
var temp = 'null';
video.src = this.videoUrl[0];
video.crossOrigin = 'anonymous';
video.loop = false;
video.preload = "auto";
Avideo.src = this.videoUrl[1];
Avideo.crossOrigin = 'anonymous';
Avideo.loop = false;
Avideo.preload = "auto";
video.addEventListener('canplay', function (e) {
videoTexture.setSource(video);
alphaVideo.setSource(Avideo);
console.log('video assign to material');
});
// Get the material that we want to play the video on and assign the new video
// texture to it.
video.play();
Avideo.play();
for (var i = 0; i < this.materials.length; i++) {
var material = this.materials[i].resource;
material.diffuseMap = videoTexture;
material.emissiveMap = videoTexture;
material.opacityMap = alphaVideo;
material.update();
console.log('video is playing');
}
this.alphaVideo = alphaVideo;
this.videoTexture = videoTexture;
// update code called every frame
Videotexture.prototype.update = function(dt) {
//Upload the video data to the texture every other frame
this.upload = !this.upload;
this.videoTexture.upload();
this.alphaVideo.upload();
if ((play === true)&&(this.entity.name != temp)){
video.currentTime = 0;
Avideo.currentTime = 0;
temp = select(object);
video.play();
Avideo.play();
}
else if ((this.entity.name == 'HI')&&(play === true)){
video.currentTime = 0;
Avideo.currentTime = 0;
video.play();
Avideo.play();
}
play = video.paused;
};
};
There must be something i’m missing but i don’t see what.
Many thanks in anticipation of your response