Flickering when sequentially playing 200 frames of PLY files

[liyupeng-ing]

Hello, thank you for your amazing work. I'd like to ask how to sequentially play 200 frames of PLY files. I would really appreciate your help."

[liyupeng-ing]

I'm currently using the following method, but I notice visual jumps during frame transitions. Here's the complete code:

`

<title>PlayCanvas Web Components - 3D Gaussian Splat</title> <script type="importmap"> { "imports": { "playcanvas": "../node_modules/playcanvas/build/playcanvas.mjs" } } </script> <script type="module" src="../dist/pwc.mjs"></script>

<link rel="stylesheet" href="css/example.css">

<!-- 预加载所有 splat 帧资源 -->
<!-- 注意：这里假设你有从 001 到 199 的压缩 PLY 文件 -->
<!-- 如果是普通 .ply 文件，请改为 assets/splats/001.ply 等 -->
<pc-asset id="splat_001" src="assets/splats/001.compressed.ply"></pc-asset>
<pc-asset id="splat_002" src="assets/splats/002.compressed.ply"></pc-asset>
<pc-asset id="splat_003" src="assets/splats/003.compressed.ply"></pc-asset>
<pc-asset id="splat_004" src="assets/splats/004.compressed.ply"></pc-asset>
<pc-asset id="splat_005" src="assets/splats/005.compressed.ply"></pc-asset>
<pc-asset id="splat_006" src="assets/splats/006.compressed.ply"></pc-asset>
<pc-asset id="splat_007" src="assets/splats/007.compressed.ply"></pc-asset>
<pc-asset id="splat_008" src="assets/splats/008.compressed.ply"></pc-asset>
<pc-asset id="splat_009" src="assets/splats/009.compressed.ply"></pc-asset>
<pc-asset id="splat_010" src="assets/splats/010.compressed.ply"></pc-asset>
<pc-asset id="splat_011" src="assets/splats/011.compressed.ply"></pc-asset>
<pc-asset id="splat_012" src="assets/splats/012.compressed.ply"></pc-asset>
<pc-asset id="splat_013" src="assets/splats/013.compressed.ply"></pc-asset>
<pc-asset id="splat_014" src="assets/splats/014.compressed.ply"></pc-asset>
<pc-asset id="splat_015" src="assets/splats/015.compressed.ply"></pc-asset>
<pc-asset id="splat_016" src="assets/splats/016.compressed.ply"></pc-asset>
<pc-asset id="splat_017" src="assets/splats/017.compressed.ply"></pc-asset>
<pc-asset id="splat_018" src="assets/splats/018.compressed.ply"></pc-asset>
<pc-asset id="splat_019" src="assets/splats/019.compressed.ply"></pc-asset>
<pc-asset id="splat_020" src="assets/splats/020.compressed.ply"></pc-asset>
<pc-asset id="splat_021" src="assets/splats/021.compressed.ply"></pc-asset>
<pc-asset id="splat_022" src="assets/splats/022.compressed.ply"></pc-asset>
<pc-asset id="splat_023" src="assets/splats/023.compressed.ply"></pc-asset>
<pc-asset id="splat_024" src="assets/splats/024.compressed.ply"></pc-asset>
<pc-asset id="splat_025" src="assets/splats/025.compressed.ply"></pc-asset>
<pc-asset id="splat_026" src="assets/splats/026.compressed.ply"></pc-asset>
<pc-asset id="splat_027" src="assets/splats/027.compressed.ply"></pc-asset>
<pc-asset id="splat_028" src="assets/splats/028.compressed.ply"></pc-asset>
<pc-asset id="splat_029" src="assets/splats/029.compressed.ply"></pc-asset>
<pc-asset id="splat_030" src="assets/splats/030.compressed.ply"></pc-asset>
<pc-asset id="splat_031" src="assets/splats/031.compressed.ply"></pc-asset>
<pc-asset id="splat_032" src="assets/splats/032.compressed.ply"></pc-asset>
<pc-asset id="splat_033" src="assets/splats/033.compressed.ply"></pc-asset>
<pc-asset id="splat_034" src="assets/splats/034.compressed.ply"></pc-asset>
<pc-asset id="splat_035" src="assets/splats/035.compressed.ply"></pc-asset>
<pc-asset id="splat_036" src="assets/splats/036.compressed.ply"></pc-asset>
<pc-asset id="splat_037" src="assets/splats/037.compressed.ply"></pc-asset>
<pc-asset id="splat_038" src="assets/splats/038.compressed.ply"></pc-asset>
<pc-asset id="splat_039" src="assets/splats/039.compressed.ply"></pc-asset>
<pc-asset id="splat_040" src="assets/splats/040.compressed.ply"></pc-asset>
<pc-asset id="splat_041" src="assets/splats/041.compressed.ply"></pc-asset>
<pc-asset id="splat_042" src="assets/splats/042.compressed.ply"></pc-asset>
<pc-asset id="splat_043" src="assets/splats/043.compressed.ply"></pc-asset>
<pc-asset id="splat_044" src="assets/splats/044.compressed.ply"></pc-asset>
<pc-asset id="splat_045" src="assets/splats/045.compressed.ply"></pc-asset>
<pc-asset id="splat_046" src="assets/splats/046.compressed.ply"></pc-asset>
<pc-asset id="splat_047" src="assets/splats/047.compressed.ply"></pc-asset>
<pc-asset id="splat_048" src="assets/splats/048.compressed.ply"></pc-asset>
<pc-asset id="splat_049" src="assets/splats/049.compressed.ply"></pc-asset>
<pc-asset id="splat_050" src="assets/splats/050.compressed.ply"></pc-asset>
<pc-asset id="splat_051" src="assets/splats/051.compressed.ply"></pc-asset>
<pc-asset id="splat_052" src="assets/splats/052.compressed.ply"></pc-asset>
<pc-asset id="splat_053" src="assets/splats/053.compressed.ply"></pc-asset>
<pc-asset id="splat_054" src="assets/splats/054.compressed.ply"></pc-asset>
<pc-asset id="splat_055" src="assets/splats/055.compressed.ply"></pc-asset>
<pc-asset id="splat_056" src="assets/splats/056.compressed.ply"></pc-asset>
<pc-asset id="splat_057" src="assets/splats/057.compressed.ply"></pc-asset>
<pc-asset id="splat_058" src="assets/splats/058.compressed.ply"></pc-asset>
<pc-asset id="splat_059" src="assets/splats/059.compressed.ply"></pc-asset>
<pc-asset id="splat_060" src="assets/splats/060.compressed.ply"></pc-asset>
<pc-asset id="splat_061" src="assets/splats/061.compressed.ply"></pc-asset>
<pc-asset id="splat_062" src="assets/splats/062.compressed.ply"></pc-asset>
<pc-asset id="splat_063" src="assets/splats/063.compressed.ply"></pc-asset>
<pc-asset id="splat_064" src="assets/splats/064.compressed.ply"></pc-asset>
<pc-asset id="splat_065" src="assets/splats/065.compressed.ply"></pc-asset>
<pc-asset id="splat_066" src="assets/splats/066.compressed.ply"></pc-asset>
<pc-asset id="splat_067" src="assets/splats/067.compressed.ply"></pc-asset>
<pc-asset id="splat_068" src="assets/splats/068.compressed.ply"></pc-asset>
<pc-asset id="splat_069" src="assets/splats/069.compressed.ply"></pc-asset>
<pc-asset id="splat_070" src="assets/splats/070.compressed.ply"></pc-asset>
<pc-asset id="splat_071" src="assets/splats/071.compressed.ply"></pc-asset>
<pc-asset id="splat_072" src="assets/splats/072.compressed.ply"></pc-asset>
<pc-asset id="splat_073" src="assets/splats/073.compressed.ply"></pc-asset>
<pc-asset id="splat_074" src="assets/splats/074.compressed.ply"></pc-asset>
<pc-asset id="splat_075" src="assets/splats/075.compressed.ply"></pc-asset>
<pc-asset id="splat_076" src="assets/splats/076.compressed.ply"></pc-asset>
<pc-asset id="splat_077" src="assets/splats/077.compressed.ply"></pc-asset>
<pc-asset id="splat_078" src="assets/splats/078.compressed.ply"></pc-asset>
<pc-asset id="splat_079" src="assets/splats/079.compressed.ply"></pc-asset>
<pc-asset id="splat_080" src="assets/splats/080.compressed.ply"></pc-asset>
<pc-asset id="splat_081" src="assets/splats/081.compressed.ply"></pc-asset>
<pc-asset id="splat_082" src="assets/splats/082.compressed.ply"></pc-asset>
<pc-asset id="splat_083" src="assets/splats/083.compressed.ply"></pc-asset>
<pc-asset id="splat_084" src="assets/splats/084.compressed.ply"></pc-asset>
<pc-asset id="splat_085" src="assets/splats/085.compressed.ply"></pc-asset>
<pc-asset id="splat_086" src="assets/splats/086.compressed.ply"></pc-asset>
<pc-asset id="splat_087" src="assets/splats/087.compressed.ply"></pc-asset>
<pc-asset id="splat_088" src="assets/splats/088.compressed.ply"></pc-asset>
<pc-asset id="splat_089" src="assets/splats/089.compressed.ply"></pc-asset>
<pc-asset id="splat_090" src="assets/splats/090.compressed.ply"></pc-asset>
<pc-asset id="splat_091" src="assets/splats/091.compressed.ply"></pc-asset>
<pc-asset id="splat_092" src="assets/splats/092.compressed.ply"></pc-asset>
<pc-asset id="splat_093" src="assets/splats/093.compressed.ply"></pc-asset>
<pc-asset id="splat_094" src="assets/splats/094.compressed.ply"></pc-asset>
<pc-asset id="splat_095" src="assets/splats/095.compressed.ply"></pc-asset>
<pc-asset id="splat_096" src="assets/splats/096.compressed.ply"></pc-asset>
<pc-asset id="splat_097" src="assets/splats/097.compressed.ply"></pc-asset>
<pc-asset id="splat_098" src="assets/splats/098.compressed.ply"></pc-asset>
<pc-asset id="splat_099" src="assets/splats/099.compressed.ply"></pc-asset>
<pc-asset id="splat_100" src="assets/splats/100.compressed.ply"></pc-asset>
<pc-asset id="splat_101" src="assets/splats/101.compressed.ply"></pc-asset>
<pc-asset id="splat_102" src="assets/splats/102.compressed.ply"></pc-asset>
<pc-asset id="splat_103" src="assets/splats/103.compressed.ply"></pc-asset>
<pc-asset id="splat_104" src="assets/splats/104.compressed.ply"></pc-asset>
<pc-asset id="splat_105" src="assets/splats/105.compressed.ply"></pc-asset>
<pc-asset id="splat_106" src="assets/splats/106.compressed.ply"></pc-asset>
<pc-asset id="splat_107" src="assets/splats/107.compressed.ply"></pc-asset>
<pc-asset id="splat_108" src="assets/splats/108.compressed.ply"></pc-asset>
<pc-asset id="splat_109" src="assets/splats/109.compressed.ply"></pc-asset>
<pc-asset id="splat_110" src="assets/splats/110.compressed.ply"></pc-asset>
<pc-asset id="splat_111" src="assets/splats/111.compressed.ply"></pc-asset>
<pc-asset id="splat_112" src="assets/splats/112.compressed.ply"></pc-asset>
<pc-asset id="splat_113" src="assets/splats/113.compressed.ply"></pc-asset>
<pc-asset id="splat_114" src="assets/splats/114.compressed.ply"></pc-asset>
<pc-asset id="splat_115" src="assets/splats/115.compressed.ply"></pc-asset>
<pc-asset id="splat_116" src="assets/splats/116.compressed.ply"></pc-asset>
<pc-asset id="splat_117" src="assets/splats/117.compressed.ply"></pc-asset>
<pc-asset id="splat_118" src="assets/splats/118.compressed.ply"></pc-asset>
<pc-asset id="splat_119" src="assets/splats/119.compressed.ply"></pc-asset>
<pc-asset id="splat_120" src="assets/splats/120.compressed.ply"></pc-asset>
<pc-asset id="splat_121" src="assets/splats/121.compressed.ply"></pc-asset>
<pc-asset id="splat_122" src="assets/splats/122.compressed.ply"></pc-asset>
<pc-asset id="splat_123" src="assets/splats/123.compressed.ply"></pc-asset>
<pc-asset id="splat_124" src="assets/splats/124.compressed.ply"></pc-asset>
<pc-asset id="splat_125" src="assets/splats/125.compressed.ply"></pc-asset>
<pc-asset id="splat_126" src="assets/splats/126.compressed.ply"></pc-asset>
<pc-asset id="splat_127" src="assets/splats/127.compressed.ply"></pc-asset>
<pc-asset id="splat_128" src="assets/splats/128.compressed.ply"></pc-asset>
<pc-asset id="splat_129" src="assets/splats/129.compressed.ply"></pc-asset>
<pc-asset id="splat_130" src="assets/splats/130.compressed.ply"></pc-asset>
<pc-asset id="splat_131" src="assets/splats/131.compressed.ply"></pc-asset>
<pc-asset id="splat_132" src="assets/splats/132.compressed.ply"></pc-asset>
<pc-asset id="splat_133" src="assets/splats/133.compressed.ply"></pc-asset>
<pc-asset id="splat_134" src="assets/splats/134.compressed.ply"></pc-asset>
<pc-asset id="splat_135" src="assets/splats/135.compressed.ply"></pc-asset>
<pc-asset id="splat_136" src="assets/splats/136.compressed.ply"></pc-asset>
<pc-asset id="splat_137" src="assets/splats/137.compressed.ply"></pc-asset>
<pc-asset id="splat_138" src="assets/splats/138.compressed.ply"></pc-asset>
<pc-asset id="splat_139" src="assets/splats/139.compressed.ply"></pc-asset>
<pc-asset id="splat_140" src="assets/splats/140.compressed.ply"></pc-asset>
<pc-asset id="splat_141" src="assets/splats/141.compressed.ply"></pc-asset>
<pc-asset id="splat_142" src="assets/splats/142.compressed.ply"></pc-asset>
<pc-asset id="splat_143" src="assets/splats/143.compressed.ply"></pc-asset>
<pc-asset id="splat_144" src="assets/splats/144.compressed.ply"></pc-asset>
<pc-asset id="splat_145" src="assets/splats/145.compressed.ply"></pc-asset>
<pc-asset id="splat_146" src="assets/splats/146.compressed.ply"></pc-asset>
<pc-asset id="splat_147" src="assets/splats/147.compressed.ply"></pc-asset>
<pc-asset id="splat_148" src="assets/splats/148.compressed.ply"></pc-asset>
<pc-asset id="splat_149" src="assets/splats/149.compressed.ply"></pc-asset>
<pc-asset id="splat_150" src="assets/splats/150.compressed.ply"></pc-asset>
<pc-asset id="splat_151" src="assets/splats/151.compressed.ply"></pc-asset>
<pc-asset id="splat_152" src="assets/splats/152.compressed.ply"></pc-asset>
<pc-asset id="splat_153" src="assets/splats/153.compressed.ply"></pc-asset>
<pc-asset id="splat_154" src="assets/splats/154.compressed.ply"></pc-asset>
<pc-asset id="splat_155" src="assets/splats/155.compressed.ply"></pc-asset>
<pc-asset id="splat_156" src="assets/splats/156.compressed.ply"></pc-asset>
<pc-asset id="splat_157" src="assets/splats/157.compressed.ply"></pc-asset>
<pc-asset id="splat_158" src="assets/splats/158.compressed.ply"></pc-asset>
<pc-asset id="splat_159" src="assets/splats/159.compressed.ply"></pc-asset>
<pc-asset id="splat_160" src="assets/splats/160.compressed.ply"></pc-asset>
<pc-asset id="splat_161" src="assets/splats/161.compressed.ply"></pc-asset>
<pc-asset id="splat_162" src="assets/splats/162.compressed.ply"></pc-asset>
<pc-asset id="splat_163" src="assets/splats/163.compressed.ply"></pc-asset>
<pc-asset id="splat_164" src="assets/splats/164.compressed.ply"></pc-asset>
<pc-asset id="splat_165" src="assets/splats/165.compressed.ply"></pc-asset>
<pc-asset id="splat_166" src="assets/splats/166.compressed.ply"></pc-asset>
<pc-asset id="splat_167" src="assets/splats/167.compressed.ply"></pc-asset>
<pc-asset id="splat_168" src="assets/splats/168.compressed.ply"></pc-asset>
<pc-asset id="splat_169" src="assets/splats/169.compressed.ply"></pc-asset>
<pc-asset id="splat_170" src="assets/splats/170.compressed.ply"></pc-asset>
<pc-asset id="splat_171" src="assets/splats/171.compressed.ply"></pc-asset>
<pc-asset id="splat_172" src="assets/splats/172.compressed.ply"></pc-asset>
<pc-asset id="splat_173" src="assets/splats/173.compressed.ply"></pc-asset>
<pc-asset id="splat_174" src="assets/splats/174.compressed.ply"></pc-asset>
<pc-asset id="splat_175" src="assets/splats/175.compressed.ply"></pc-asset>
<pc-asset id="splat_176" src="assets/splats/176.compressed.ply"></pc-asset>
<pc-asset id="splat_177" src="assets/splats/177.compressed.ply"></pc-asset>
<pc-asset id="splat_178" src="assets/splats/178.compressed.ply"></pc-asset>
<pc-asset id="splat_179" src="assets/splats/179.compressed.ply"></pc-asset>
<pc-asset id="splat_180" src="assets/splats/180.compressed.ply"></pc-asset>
<pc-asset id="splat_181" src="assets/splats/181.compressed.ply"></pc-asset>
<pc-asset id="splat_182" src="assets/splats/182.compressed.ply"></pc-asset>
<pc-asset id="splat_183" src="assets/splats/183.compressed.ply"></pc-asset>
<pc-asset id="splat_184" src="assets/splats/184.compressed.ply"></pc-asset>
<pc-asset id="splat_185" src="assets/splats/185.compressed.ply"></pc-asset>
<pc-asset id="splat_186" src="assets/splats/186.compressed.ply"></pc-asset>
<pc-asset id="splat_187" src="assets/splats/187.compressed.ply"></pc-asset>
<pc-asset id="splat_188" src="assets/splats/188.compressed.ply"></pc-asset>
<pc-asset id="splat_189" src="assets/splats/189.compressed.ply"></pc-asset>
<pc-asset id="splat_190" src="assets/splats/190.compressed.ply"></pc-asset>
<pc-asset id="splat_191" src="assets/splats/191.compressed.ply"></pc-asset>
<pc-asset id="splat_192" src="assets/splats/192.compressed.ply"></pc-asset>
<pc-asset id="splat_193" src="assets/splats/193.compressed.ply"></pc-asset>
<pc-asset id="splat_194" src="assets/splats/194.compressed.ply"></pc-asset>
<pc-asset id="splat_195" src="assets/splats/195.compressed.ply"></pc-asset>
<pc-asset id="splat_196" src="assets/splats/196.compressed.ply"></pc-asset>
<pc-asset id="splat_197" src="assets/splats/197.compressed.ply"></pc-asset>
<pc-asset id="splat_198" src="assets/splats/198.compressed.ply"></pc-asset>
<pc-asset id="splat_199" src="assets/splats/199.compressed.ply"></pc-asset>

<!-- 场景 -->
<pc-scene>
    <!-- 天空盒 -->
    <pc-sky asset="rotunda" type="dome" center="0 0.1 0" scale="20 20 20" lighting></pc-sky>

    <!-- 相机 -->
    <pc-entity name="camera root">
        <pc-entity name="camera" position="0 2 3.5">
            <pc-camera clear-color="0 0 0 1"></pc-camera>
            <pc-scripts>
                <pc-script name="cameraControls" attributes='{
                    "enableFly": false,
                    "enablePan": false,
                    "focusPoint": "vec3:0,2,0",
                    "pitchRange": "vec2:-90,0",
                    "sceneSize": 3,
                    "zoomMin": 0.5,
                    "zoomMax": 3
                }'></pc-script>
            </pc-scripts>
        </pc-entity>
        <pc-scripts>
            <pc-script name="xrControllers"></pc-script>
            <pc-script name="xrNavigation"></pc-script>
        </pc-scripts>
    </pc-entity>

    <!-- 模型 -->
    <pc-entity name="statue" position="0 3 0" rotation="180 45 0">
        <pc-splat id="splatModel" asset=""></pc-splat>
    </pc-entity>
</pc-scene>

<script type="module"> import { Vec3, Quat } from 'playcanvas';

    document.addEventListener('DOMContentLoaded', async () => {
        const appElement = await document.querySelector('pc-app').ready();
        const app = appElement.app;

        // 获取模型组件
        const splatEntity = document.getElementById('splatModel');

        let currentFrame = 1;
        const startFrame = 1;
        const endFrame = 199;

        function playNextFrame() {
            currentFrame++;
            if (currentFrame > endFrame) currentFrame = startFrame;

            const assetId = `splat_${currentFrame}`;
            splatEntity.setAttribute('asset', assetId);

            // 使用 requestAnimationFrame 继续下一帧
            setTimeout(() => requestAnimationFrame(playNextFrame), 30); // 控制帧切换间隔
        }

        // 启动帧切换
        playNextFrame();
    });
</script>
<script type="module" src="js/example.mjs"></script>

`

and this is how it runs

v3violin-2025-06-12_14.29.38.mp4

[willeastcott]

Hey @slimbuck - so these PLY assets will be preloaded...but it flickers. I'm wondering whether this is maybe to do with the async nature of the sort worker....or some other thing in the 'prep for rendering' process. Can you think of anything that might explain the above effect?

@liyupeng-ing Would you be able to make this set of PLY files available for testing on our end?

[slimbuck]

Hey @slimbuck - so these PLY assets will be preloaded...but it flickers. I'm wondering whether this is maybe to do with the async nature of the sort worker....or some other thing in the 'prep for rendering' process. Can you think of anything that might explain the above effect?

@liyupeng-ing Would you be able to make this set of PLY files available for testing on our end?

Yes I think you're right. After asset load, the gsplat must first be added to the scene. Then, when the first render camera is found, a sort event is fired and async sorting is initiated. After sort is complete, results are uploaded to GPU and rendering can finally begin.

I am very keen to improve the semantics and control around these async operations, but right now all I can suggest @liyupeng-ing is to wait for the 'updated' event on gsplat.instance.sorter before showing the new model and hiding the previous, something like:

entity.gplat.instance.sorter.on('updated', () => {
    // show the entity
});

I was thinking we should only ready the asset once the first sort has completed. Unfortunately that won't work because the entity must be added to the scene in order to determine the sort camera to start sorting.

[willeastcott]

@slimbuck Is that technique used in the SuperSplat Editor when playing back PLY sequences? I don't recall seeing flickering there.