Android WebGL fragment shader. Slideshow begins when time uniform increases
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:
// https://github.com/greggman/twgl.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.
Source: View source
