[webgl] jugglin in canvases at 10% margins, render in scroll callback. Alleviates black canvases of death a little bit, but not much.

This commit is contained in:
badlogic 2017-09-15 16:31:50 +02:00
parent e68f1cb4cc
commit b838248e39

View File

@ -38,33 +38,36 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
var demos = spineDemos.demos; var demos = spineDemos.demos;
for (var i = 0; i < demos.length; i++) { for (var i = 0; i < demos.length; i++) {
var demo = demos[i]; var demo = demos[i];
var canvas = demo.canvas;
checkElementVisible(demo); checkElementVisible(demo);
renderDemo(demo);
}
}
if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) { function renderDemo(demo) {
if (demo.visible) { var canvas = demo.canvas;
if (canvas.parentElement != demo.placeholder) { if (!spineDemos.assetManager.isLoadingComplete(demo.DEMO_NAME)) {
$(canvas).detach(); if (demo.visible) {
demo.placeholder.appendChild(canvas); if (canvas.parentElement != demo.placeholder) {
} $(canvas).detach();
demo.loadingScreen.draw(); demo.placeholder.appendChild(canvas);
}
} else {
if (!demo.loaded) {
demo.loadingComplete();
demo.loaded = true;
} }
demo.loadingScreen.draw();
}
} else {
if (!demo.loaded) {
demo.loadingComplete();
demo.loaded = true;
}
if (demo.visible) { if (demo.visible) {
if (canvas.parentElement != demo.placeholder) { if (canvas.parentElement != demo.placeholder) {
$(canvas).detach(); $(canvas).detach();
demo.placeholder.appendChild(canvas); demo.placeholder.appendChild(canvas);
}
if (spineDemos.log) console.log("Rendering " + canvas.id);
demo.render();
demo.loadingScreen.draw(true);
} }
if (spineDemos.log) console.log("Rendering " + canvas.id);
demo.render();
demo.loadingScreen.draw(true);
} }
} }
} }
@ -73,8 +76,8 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
const rect = demo.placeholder.getBoundingClientRect(); const rect = demo.placeholder.getBoundingClientRect();
const windowHeight = (window.innerHeight || document.documentElement.clientHeight); const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
const windowWidth = (window.innerWidth || document.documentElement.clientWidth); const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0); const vertInView = (rect.top <= windowHeight * 1.1) && ((rect.top + rect.height) >= windowHeight * -0.1);
const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0); const horInView = (rect.left <= windowWidth * 1.1) && ((rect.left + rect.width) >= windowWidth * -0.1);
demo.visible = (vertInView && horInView); demo.visible = (vertInView && horInView);
} }
@ -109,6 +112,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer); demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function() { $(window).on('DOMContentLoaded load resize scroll', function() {
checkElementVisible(demo); checkElementVisible(demo);
renderDemo(demo);
}); });
checkElementVisible(demo); checkElementVisible(demo);
spineDemos.demos.push(demo); spineDemos.demos.push(demo);