WebGPURenderer & compressed-texture (.ktx2/ basis)

Questions
, ,
1

I have tried to migrate from webGL to webGPU but cannot resolve two interesting issues:

  1. can I use GPU(!) compressed-texture with WebGPURenderer? how? which format? loader? I tried Ktx2Loader. I use Basis Universal for compression, tried various formats, none seem to be supported. (FF & Brave)

  2. how to use VideoTexture with WebGPURenderer?

2

A little bit of help for your first question, with this answer targeting the loading of GLTF format.

Maybe try my GLTF WebGPU Viewer with the StainedGlassLamp KTX2 example from KhronosGroup. The easiest way to do the test is to actually copy / paste the following link into the URL option of the viewer:

https://github.com/KhronosGroup/glTF-Sample-Assets/blob/52c9f0e473a523057135281b19d12b768e2f7eb7/Models/StainedGlassLamp/glTF-KTX-BasisU/StainedGlassLamp.gltf

Also, check this topic for some additional info on the viewer itself and its picture indicating whether WebGL2 or WebGPU is being used.

You can check the viewer’s code, which is pretty much the same code I used for WebGL2 renderer.

3

This WebGPU example uses compressed textures

https://threejs.org/examples/?q=texture%20arr#webgpu_textures_2d-array

This WebGPU example use a VideoTexture

https://threejs.org/examples/?q=video#webgpu_materials_video

4

thank you for your tips. I feel a bit embarrassed… at first glance I was doing everything correctly. I’ll let you know about where I went wrong. maybe it’s too early for me to migrate to GPURenderer :wink:

5

here is simple solution for webGPU videoTexture:

Three.js WebGPU Video Texture body { margin: 0; overflow: hidden; } 
    canvas {
        display: block;
    }
</style>

    import * as THREE from './three.webgpu.js';

    const renderer = new THREE.WebGPURenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    const video = document.createElement('video');
    video.src = './ARheritageApp_Bednarczyk.mp4'; 
    video.crossOrigin = 'anonymous';
    video.loop = true;
    video.muted = true;
    video.play();

    video.addEventListener('loadeddata', () => {
        const videoTexture = new THREE.VideoTexture(video);
        videoTexture.format = THREE.RGBAFormat;
        videoTexture.needsUpdate = true;

        const material = new THREE.MeshBasicMaterial({ map: videoTexture });

        const geometry = new THREE.PlaneGeometry(4, 2);
        const plane = new THREE.Mesh(geometry, material);
        scene.add(plane);

        function animate() {
            requestAnimationFrame(animate);

            if (video.readyState >= video.HAVE_CURRENT_DATA) {
                videoTexture.needsUpdate = true;
            }

            renderer.render(scene, camera);
        }

        animate();
    });
  
</script>

life example here: https://brief-gold-huge.on-fleek.app/

1 Like
6

Hi jakub8745,

very nice :+1:
There aren’t many live examples from users of three.webgpu.js yet. That’s why I’m happy about yours.
If this solves your question, would you mark the question as solved?
This also encourages others to use three.webgpu.js more