In the progress bar method of loading page, there is a ‘app. on (‘preload: progress’, setProgress);’, Then pass’ app. on ('start ‘, hideSplash);’ To close the loading page. I want a part of this progress bar to be set as the rendering progress, that is, close the page after my object is rendered.
But I’m not sure how to get the rendering progress.Can someone help me?
Similar to this effect:
Hi @leooooooo,
You could register on the postrender events just once, then your callback will fire once after the first frame is rendered:
this.app.once('postrender', function(){
// after a frame has been rendered
}, this);
Will it return a progress?Similar to preload: progress
Ah no, that will run just once after all loading has finished. So you can assume that loading progress is complete.
The setProgress in the loading page needs to receive a value. If the postrender does not return a value, it seems that the progress bar of the loading page will not change
Sorry maybe I misunderstood what you are trying to do. Why aren’t you using the setProgress callback then?
pc.script.createLoadingScreen(function (app) {
var isInDebug = location.href.includes("debug");
var showSplash = function () {
var wrapper = document.createElement("div");
wrapper.id = "application-splash-wrapper";
var innerHTML = `
<div id="loading-box-wrap">
<img
id="loading-logo"
src="xxx"
/>
<div id="loading-box">
<div id="loading-car">0%</div>
<div class="loading-bar" style="margin: auto">
<div class="loading-bar" id="loading-bar"></div>
</div>
</div>
<div id="sub-tips">
</div>
</div>`;
wrapper.innerHTML = innerHTML;
document.body.appendChild(wrapper);
};
showSplash();
let loadingBox = document.getElementById("loading-box"),
bar = document.getElementById("loading-bar"),
car = document.getElementById("loading-car");
var hideSplash = function () {
var splash = document.getElementById("application-splash-wrapper");
splash.parentElement.removeChild(splash);
};
var setProgress = function (value) {
value = Math.min(1, Math.max(0, value));
bar.style.width = value * 100 + "%";
car.innerText = Math.floor(value * 100) + "%";
};
var createCss = function () {
var css = `
#sub-tips {
position: absolute;
left: 0;
right: 0;
bottom: 4%;
color: #606060;
text-align: center;
font-size: 0.8rem;
transform: scale(0.8);
z-index: 10;
display: none;
}
#application-splash-wrapper {
width: 100vw;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
position: absolute;
}
#loading-box-wrap {
width: 100%;
}
#loading-box {
position: absolute;
left: 0vw;
right: 0;
bottom: 12%;
width: 45%;
height: 20px;
margin: auto;
}
#loading-logo {
width: 100%;
margin-top: 30%
}
#loading-box .loading-bar, #loading-car {
display: none;
}
.loading-bar {
width: 100%;
height: 3px;
border-radius: 40px;
overflow: hidden;
background: #000;
no-repeat center/contain;
}
#loading-bar {
width: 0;
background:#fff;
background-size: 65vw 6px;
}
#loading-car {
width: 45px;
height: 70px;
text-align: center;
padding-top: 31px;
font-size: 0.65rem;
color: #fff;
position: absolute;
left: 0;
right: 0;
top: -50px;
margin: auto;
}
@media (min-width: 768px) {
#loading-logo {
margin-top: 0;
}
}
@media (orientation: landscape){
#loading-logo {
width: auto;
height: 85%;
}
#loading-box-wrap{
display: flex;
justify-content: center;
}
}
`;
var style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
};
createCss();
$("#application-canvas").css('background-color', '#000');
$("#loading-logo").fadeIn();
setTimeout(function () {
$("#loading-box .loading-bar, #loading-car").fadeIn(2000);
$("#sub-tips").fadeIn(2000);
}, 1000);
app.on('preload:progress', setProgress);
app.on('start', hideSplash);
});
Sorry, maybe it’s because I can’t describe it clearly.
I create a setProgress2(value)
But I don’t know how to pass the value to setProgress2 through the rendered callback.
Is there any progress in postrender？
pc.script.createLoadingScreen(function (app) {
var isInDebug = location.href.includes("debug");
var showSplash = function () {
var wrapper = document.createElement("div");
wrapper.id = "application-splash-wrapper";
var innerHTML = `
<div id="loading-box-wrap">
<img
id="loading-logo"
src="xxx"
/>
<div id="loading-box">
<div id="loading-car">0%</div>
<div class="loading-bar" style="margin: auto">
<div class="loading-bar" id="loading-bar"></div>
</div>
</div>
<div id="sub-tips">
</div>
</div>`;
wrapper.innerHTML = innerHTML;
document.body.appendChild(wrapper);
};
showSplash();
let loadingBox = document.getElementById("loading-box"),
bar = document.getElementById("loading-bar"),
car = document.getElementById("loading-car");
var hideSplash = function () {
var splash = document.getElementById("application-splash-wrapper");
splash.parentElement.removeChild(splash);
};
var setProgress = function (value) {
value = Math.min(0.5, Math.max(0, value*0.5));
bar.style.width = value * 100 + "%";
car.innerText = Math.floor(value * 100) + "%";
};
var setProgress2 = function (value) {
value = Math.min(1, Math.max(0.5, value*0.5+0.5));
bar.style.width = value * 100 + "%";
car.innerText = Math.floor(value * 100) + "%";
};
var createCss = function () {
var css = `
#sub-tips {
position: absolute;
left: 0;
right: 0;
bottom: 4%;
color: #606060;
text-align: center;
font-size: 0.8rem;
transform: scale(0.8);
z-index: 10;
display: none;
}
#application-splash-wrapper {
width: 100vw;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
position: absolute;
}
#loading-box-wrap {
width: 100%;
}
#loading-box {
position: absolute;
left: 0vw;
right: 0;
bottom: 12%;
width: 45%;
height: 20px;
margin: auto;
}
#loading-logo {
width: 100%;
margin-top: 30%
}
#loading-box .loading-bar, #loading-car {
display: none;
}
.loading-bar {
width: 100%;
height: 3px;
border-radius: 40px;
overflow: hidden;
background: #000;
no-repeat center/contain;
}
#loading-bar {
width: 0;
background:#fff;
background-size: 65vw 6px;
}
#loading-car {
width: 45px;
height: 70px;
text-align: center;
padding-top: 31px;
font-size: 0.65rem;
color: #fff;
position: absolute;
left: 0;
right: 0;
top: -50px;
margin: auto;
}
@media (min-width: 768px) {
#loading-logo {
margin-top: 0;
}
}
@media (orientation: landscape){
#loading-logo {
width: auto;
height: 85%;
}
#loading-box-wrap{
display: flex;
justify-content: center;
}
}
`;
var style = document.createElement("style");
style.type = "text/css";
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.head.appendChild(style);
};
createCss();
$("#application-canvas").css('background-color', '#000');
$("#loading-logo").fadeIn();
setTimeout(function () {
$("#loading-box .loading-bar, #loading-car").fadeIn(2000);
$("#sub-tips").fadeIn(2000);
}, 1000);
app.on('preload:progress', setProgress);
// app.on('start', hideSplash);
app.on('', setProgress2);
app.once('postrender', hideSplash);
});
There is no progress callback after the engine starts rendering, simple because all loading has finished prior to that.
Postrender will return a dt, that is the delta time (time it took to render the last frame).
Not sure how that can help you though.
okay，thank you，I’ll try it
I think this is useful, but I tested it. I can’t get the dt. Is there any development document for me? Or a bit of code snippet to refer to how to use it?
I think I should have used it wrong
Indeed it does return the delta time, I’ve checked the app source code. But still that won’t be useful to you even if it did I think.
You can check this manual page in case there is another callback in the app lifecycle that you can register on: Application Lifecycle | Learn PlayCanvas
360°ビュー｜シビック TYPE R｜Honda公式サイト
First of all, thank you very much for answering so many questions. It’s very kind of you！
Then，I saw the effect of this case, and the car they made was very good，It’s worth learning.
He can directly enter the vehicle when the progress bar reaches 100%，his progress bar is half preload and half other，I think he probably started to close the loading page after rendering.I also want to learn this function.In your experience, how did he achieve it？
