///
///
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($('
').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;
}