1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
/// <reference path="shader.js" />
/// <reference path="../math/mat4.js" />
function getContext(pId, pOnRun) {
const lCanvas = $(pId).find('canvas'),
lPlayButton = $(pId).find('.play_button'),
lStopButton = $(pId).find('.stop_button'),
lGl = lCanvas[0].getContext('webgl'),
lWidth = lCanvas.width(),
lHeight = lCanvas.height();
return {
canvas: lCanvas,
playButton: lPlayButton,
stopButton: lStopButton,
gl: lGl,
width: lWidth,
height: lHeight,
perspective: orthographic(0, lWidth, 0, lHeight),
load: function() {
lPlayButton.empty().append($('<div>').addClass('spin-loader'));
return loadOrthographicShader(lGl).then(function(pProgramInfo) {
lPlayButton.css('display', 'none');
lStopButton.css('display', 'block');
return pProgramInfo;
});
},
reset: function() {
lPlayButton.css('display', 'block');
lPlayButton.empty().text('Play');
lStopButton.css('display', 'none');
lStopButton.on('click', undefined);
}
};
}
function requestUpdateLoop(pFunction, pOnExit) {
let lDeltaTimeSeconds = undefined,
lLastTimeSeconds = undefined,
lIsRunning = true;
function update(pTimeStamp) {
if (!lIsRunning) {
if (pOnExit) {
pOnExit();
}
return;
}
pTimeStamp = pTimeStamp / 1000.0; // Convert to seconds
// Time calculation
if (lLastTimeSeconds === undefined) {
lLastTimeSeconds = pTimeStamp;
lDeltaTimeSeconds = 0;
} else {
lDeltaTimeSeconds = pTimeStamp - lLastTimeSeconds;
lLastTimeSeconds = pTimeStamp;
}
while (lDeltaTimeSeconds > 0) {
pFunction(lDeltaTimeSeconds);
lDeltaTimeSeconds -= 0.16;
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
function lExit() {
lIsRunning = false;
}
return lExit;
}
|
