setting realistic video projection

This topic has 5 replies, 3 voices, and was last updated 5 years, 6 months ago by Anonymous.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2019-06-12 at 10:35 am #15532

Anonymous
Inactive

Hello, I try to set a realistic video projection which looks like a animated light beam from a spot. I tested already this code: https://zjbcool.com/video-texture.html, but I am absolutely not satisfied with that effect. With this example I can’t fake properly a light and material transparency. So I was thinking maybe, there is a way to set animated GIF or sprite(for 800frames??) and add it to the spot lamp to get lightning effect which also project proper a geometry on the topology of mesh. What do you think?

2019-06-13 at 9:21 am #15547

Mikhail Luzyanin
Staff

You can create a texture atlas of frames and animate it. You can put as much as you can frames as you want on such atlas, look ate the Industrial Robot demo for more informaton. Welding sparkls was made using this method.

Co-founder and lead graphics specialist at Soft8Soft.

2019-06-13 at 10:55 am #15551

Anonymous
Inactive

aha, interesting, I made already such a texture atlas, I call it sprite, but I think, I can’t find a way to project that as light on the wall. I add screenshot from the project, you can see that the video in the corner, dosn’t look like a realistic light projection, I search for solution to add the sprite to the lamp, because that room corner hat advanced topology and this what I did is just a very bad fake.

I found on playcanvas possibility to add an image to the spot but now just looking for possibility add a sprite. https://developer.playcanvas.com/en/tutorials/light-cookies/

2019-06-16 at 9:19 am #15685
Anonymous
Inactive
I found possibility to project the animated video directly from spotlight. I have a script which is working on playcanvas:
```
var Projector = pc.createScript('projector');

Projector.attributes.add('videoUrl', {
    type: 'string'
});

// initialize code called once per entity
Projector.prototype.initialize = function() {
    var app = this.app;

    // Create a texture to hold the video frame data
    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;

    // Create HTML Video Element to play the video
    var video = document.createElement('video');
    video.addEventListener('canplay', function (e) {
        videoTexture.setSource(video);
    });
    video.src = this.videoUrl;
    video.crossOrigin = 'anonymous';
    video.loop = true;
    video.muted = true;
    video.autoplay = true;
    video.play();
    
    this.videoTexture = videoTexture;

    this.upload = true;
    
    var light = this.entity.light;
    light.cookie = videoTexture;
    
    // Scale to match a 16:9 video
    var cookieScale = light.cookieScale;
    cookieScale.x = 1.777777;
    light.cookieScale = cookieScale;
    light.cookieFalloff = true;
    
    var cookieOffset = light.cookieOffset;
    cookieOffset = pc.Vec2.ZERO;
    light.cookieOffset = cookieOffset;
};

// update code called every frame
Projector.prototype.update = function(dt) {
    // Upload the video data to the texture every other frame
    this.upload = !this.upload;
    if (this.upload) {
        this.videoTexture.upload();
    }
};
```
Is it possible to work with this script on verge3d?
2019-06-16 at 10:27 am #15686

Yuri Kovelenov
Staff

Hi,

I found this discussion on light cookies with three.js:
https://stackoverflow.com/questions/38629599/how-to-implement-a-projector-with-a-cookie-in-three-js
Might be of some help.

Chief 3D Verger | LinkedIn | Twitter

2019-06-16 at 11:08 am #15687

Anonymous
Inactive

for me to difficult yet, but thank you so much for your fast response
Author

Posts