question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Rendering problem with transparent video

See original GitHub issue

Reported on the forum: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/BHXRoSzPHnk

The transparent parts of the video don’t clear when the video loops

transparent-video

var viewer = new Cesium.Viewer('cesiumContainer', {showRenderLoopErrors : false});

var videoElement = document.createElement('video');
videoElement.style.display = 'none';
videoElement.setAttribute('autoplay', '');
videoElement.setAttribute('loop', '');
videoElement.setAttribute('crossorigin', '');
videoElement.setAttribute('controls', '');
var src = document.createElement('source');
src.setAttribute('src', 'https://examples.phaser.io/assets/video/alpha-webm.webm');
src.setAttribute('type', 'video/webm');
videoElement.appendChild(src);
document.body.appendChild(videoElement);

var sphere = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-79, 39, 1000),
    ellipsoid : {
        radii : new Cesium.Cartesian3(1000, 1000, 1000),
        material : new Cesium.ImageMaterialProperty({
            image: videoElement,
            transparent: true
        })
    }
});

viewer.trackedEntity = sphere;

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
hpinkoscommented, Sep 19, 2019

transparent-video

Appears to be fixed

0reactions
cesium-conciergecommented, Sep 19, 2019

Congratulations on closing the issue! I found these Cesium forum links in the comments above:

https://groups.google.com/forum/?hl=en#!topic/cesium-dev/BHXRoSzPHnk

If this issue affects any of these threads, please post a comment like the following:

The issue at https://github.com/AnalyticalGraphicsInc/cesium/issues/4935 has just been closed and may resolve your issue. Look for the change in the next stable release of Cesium or get it now in the master branch on GitHub https://github.com/AnalyticalGraphicsInc/cesium.

Read more comments on GitHub >

github_iconTop Results From Across the Web

I am trying to render an animation with a transparent ...
This is normal, because most video codecs do not support transparency in a frame. To get transparency as an output, render as images, ......
Read more >
Transparent video - not working : r/blenderhelp - Reddit
I've actually just figured out how to fix it. It seems that I couldn't have both videos render as RGBA, so I exported...
Read more >
When I export my video, why isn't the background transparent?
In order for your video file to maintain transparency, you must export in a format that supports an Alpha Channel. When creating a...
Read more >
Sorting out Problems with Transparency - Mozilla Hubs
Rendering what the camera sees, complete with a transparent background. This image will be the basis for our 'faked' chain. Notice when we...
Read more >
Solved: Rendering Transparent Background - 10742271
When you look at the clip in any media player you will see a black background because NO media players will display a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found