admin管理员组

文章数量:1303505

I have Samsung A41 (Android 12, Mediatek MT6768) and I noticed the strange thing.

When the time (passed as uniform to fragment shader) exceeds 100 seconds the slideshow effect in animation (based on time) is observed. Without FPS degradation.

The same code on laptop works ok - animation is always smooth.

So to run my scene on phone I should wrapping time variable (0-2*PI) before passing to shader. It is strange and inconvinient. And I do not understand the reason of this behavior(

The full page with code (I've used twgl.js but the pure webgl keeps the effect):

<html>
<head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>twgl.js - tiny</title>
    <style>
        body {
            margin: 0;
            font-family: monospace;
            background:#000000;
        }

        canvas {
            display: block;
            width: 100vw;
            height: 100vh;
        }

        #b {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 2;
            color:#FFFFFF;
        }
    </style>
</head>
<body>
    <canvas id="c" width="375" height="667"></canvas>
    <div id="b">time visualiser</div>

    <script id="vs" type="notjs">
        attribute vec4 position;
        void main() {
          gl_Position = position;
        }
    </script>
    <script id="fs" type="notjs">
        #ifdef GL_ES
        precision mediump float;
        #endif
        uniform float time;
        uniform vec2 resolution;

        #define PI 3.14159265359

        void main() {
            vec2 st = (gl_FragCoord.xy - 0.5 * resolution) / min(resolution.x, resolution.y);
            float t = time;
            vec3 color = vec3(.1);
            float rx = .4;
            float ry = .7;
            vec2 p = vec2 (cos(t) * rx, sin(t) * ry);
            color += 1. - vec3( distance(p, st) * 10. );
            gl_FragColor = vec4(color, 1.0);
        }
    </script>
    <script type="module">
        // twgl.js of Gregg Tavares:
        // .js/tree/main/dist/6.x

        import * as twgl from '/lib/twgl-full.module.js';
        const gl = document.querySelector("#c").getContext("webgl");
        const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

        const arrays = {
            position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
        };
        const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

        //time visualizer
        var bdiv = document.getElementById("b");
        var preT = 0;
        let t = 0;
        let dT = 0;
        let fps = 0;

        function render(time) {
            twgl.resizeCanvasToDisplaySize(gl.canvas);
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

            //direct pass of time
            //when t is about 100 and more the slide-show begins and grows
            t = time / 1000;

            //normalize time to range 0..2*PI
            //animation is smooth always
            //t = (time / 1000) % (2 * Math.PI);

            //time visualizer
            dT = Math.abs(t - preT);
            fps = 1 / dT;
            b.innerHTML = `t: ${t.toFixed(2)}; fps: ${fps.toFixed(2)}`; 
            preT = t;

            const uniforms = {
                time: t,
                resolution: [gl.canvas.width, gl.canvas.height],
            };

            gl.useProgram(programInfo.program);
            twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
            twgl.setUniforms(programInfo, uniforms);
            twgl.drawBufferInfo(gl, bufferInfo);

            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);
    </script>



</body>
</html>

Has anyone encountered a similar problem, what is the cause?

I have try to wrap time to range 0..2*PI in javascript

t = (time / 1000) % (2 * Math.PI);

the same code in the shader does not solve the problem.

本文标签： Android WebGL fragment shader Slideshow begins when time uniform increasesStack Overflow

版权声明：本文标题：Android WebGL fragment shader. Slideshow begins when time uniform increases - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738502410a2090342.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。