Basis video texture

Questions
1

Hi all,

I have been experimenting with rendering in webwokers, and naturally came to compressed textures, and into basis.

https://threejs.org/docs/#examples/en/loaders/BasisTextureLoader
The basis loader says:

“Basis Universal is a “supercompressed” GPU texture and texture video compression system”

And indeed I was able to easily compress a png sequence into a basis file.
And it is a valid file, after loading I have no problem using it, it loads and shows the first frame.

But I cannot find any way to animate it.
I checked the documentation and searched the web, I couldn’t find anything.
Any tip?

The only thing I found is the example from the basisu repository:

It seams it regenerate a texture at every frame, so I don’t know if the video texture can be uploaded as a whole to the GPU (texture arrays on webgl2?) but for now i would just like to know if I can regenerate the texture by giving an index?

Of course I could just load a sequence of basis files. I’m just asking to get a feeling of what is possible.

Regards.

2

Hi there! Did you ever get an answer on this or managed yourself to implement a playing basis video in three? Any feedback is more than welcome!

In mean time I got some feedback here:

But I did not proceed the basis-video-road. Creating the basis video file is hard (out of memory in case you have huge KTX files) and using as texture as well. My solution: simple MP4 with chromakey !! As in:

let videotexture = new THREE.VideoTexture(videodom[0]);
videotexture.minFilter = THREE.LinearFilter;
videotexture.magFilter = THREE.LinearFilter;
var mychromavideotexturematerial = getChromaKeyShaderMaterial(videotexture, new THREE.Color("rgb(0, 255, 0)"));

///======================
  function getChromaKeyShaderMaterial(texture, color) {

    const vertexShader = `
    varying vec2 vUv;
    void main( void ) {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
    `;
    const fragmentShader = `
    uniform vec3 keyColor;
    uniform float similarity;
    uniform float smoothness;
    varying vec2 vUv;
    uniform sampler2D map;
    void main() {

        vec4 videoColor = texture2D(map, vUv);

        float Y1 = 0.299 * keyColor.r + 0.587 * keyColor.g + 0.114 * keyColor.b;
        float Cr1 = keyColor.r - Y1;
        float Cb1 = keyColor.b - Y1;

        float Y2 = 0.299 * videoColor.r + 0.587 * videoColor.g + 0.114 * videoColor.b;
        float Cr2 = videoColor.r - Y2;
        float Cb2 = videoColor.b - Y2;

        float blend = smoothstep(similarity, similarity + smoothness, distance(vec2(Cr2, Cb2), vec2(Cr1, Cb1)));
        gl_FragColor = vec4(videoColor.rgb, videoColor.a * blend);
    }
    `;

    return new THREE.ShaderMaterial({
      transparent: true,
      uniforms: {
        map: {
          value: texture
        },
        keyColor: {
          value: color.toArray()
        },
        similarity: {
          value: 0.74
        },
        smoothness: {
          value: 0.0
        }
      },
      vertexShader: vertexShader,
      fragmentShader: fragmentShader
    });
  }