CEP-Resources
CEP-Resources copied to clipboard
Adobe-CEP
Rendering slowdown at odd-numbered widths
Ok, extremely weird and frustrating issue. I have a CEP panel extension in After Effects. When the width of the panel itself is odd (e.g. 1201px), the rendering gets slow. The bigger the panel size, the slower the rendering. I'll even get the 'stopwatch' icon like the cpu is maxed out or something. If the pixel width is even, the rendering is smooth. What is going on here??
To reproduce, just take some element that relies on smooth repaints, like a slider, or something in a requestAnimationFrame loop. Open up a debugger to help display the width of the CEP panel. Note the smoothness of the interactions at odd and even panel widths. I notice the biggest discrepancies at large panel sizes (1700x1000). Basically close to full-screen on a laptop, or larger than that on an external monitor.
Example: I forked the AfterEffectsPanel form the Samples section, and made a progress bar that runs in a requestAnimationFrame loop. Note the slowdown when the panel width is odd vs even:
https://user-images.githubusercontent.com/37604072/195191697-f358dc4e-a00c-4278-b2a1-30794a260bb5.mov
Code to replicate:
index.html
<!doctype html>
<!--
/*************************************************************************
* ADOBE CONFIDENTIAL
* ___________________
*
* Copyright 2014 Adobe Inc.
* All Rights Reserved.
*
* NOTICE: Adobe permits you to use, modify, and distribute this file in
* accordance with the terms of the Adobe license agreement accompanying
* it. If you have received this file from a source other than Adobe,
* then your use, modification, or distribution of it requires the prior
* written permission of Adobe.
**************************************************************************/
-->
<html>
<head>
<meta charset="utf-8">
<script src="./ext.js"></script>
<script src="./lib/CSInterface.js"></script>
<script src="./lib/jquery-1.9.1.js"></script>
<script src="./lib/Vulcan.js"></script>
<script type="text/javascript">
let count = 0;
$(document).ready(function () {
function render() {
var bar = document.getElementById("myBar");
function increase() {
count = count + 1;
if (count <= 100) {
bar.style.width = count + "%";
window.requestAnimationFrame(increase)
} else {
window.requestAnimationFrame(decrease)
}
}
function decrease() {
count = count - 1;
if (count >= 0) {
bar.style.width = count + "%";
window.requestAnimationFrame(decrease)
} else {
window.requestAnimationFrame(increase)
}
}
window.requestAnimationFrame(increase);
}
// For functions which require interaction at the JavaScript level, we provide these JQuery-based
// handlers, instead of directly invoking ExtendScript .This givs the JavaScript layer a chance
// to pass data into the ExtendScript layer, and process the results.
$("#sendtext").on("click", function (e) {
e.preventDefault();
window.requestAnimationFrame(render);
});
});
</script>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body onLoad="onLoaded()">
<a href="javascript:history.go(0)">Refresh panel</a>
<button id="sendtext">Start</button>
<div id="counterdiv"></div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</body>
</html>
style.css
/*************************************************************************
* ADOBE CONFIDENTIAL
* ___________________
*
* Copyright 2014 Adobe Inc.
* All Rights Reserved.
*
* NOTICE: Adobe permits you to use, modify, and distribute this file in
* accordance with the terms of the Adobe license agreement accompanying
* it. If you have received this file from a source other than Adobe,
* then your use, modification, or distribution of it requires the prior
* written permission of Adobe.
**************************************************************************/
body {
text-align:center;
}
button, select, input
{
border:1px solid;
height:19px;
}
input[type=text]
{
height:16px;
}
#content {
margin-right:auto;
margin-left:auto;
vertical-align:middle;
width:100%;
}
#content ul {
padding:0px;
}
#content ul li {
margin:3px 0px 3px 0px;
}
#myProgress {
width: 100%;
background-color: grey;
}
#myBar {
width: 1%;
height: 30px;
background-color: green;
}
Same thing with setInterval() instead of requestAnimationFrame()
Hi @cameronjeffords, thank you for the code!
MAX is next week so everyone is stretched a bit thin at the moment. I've asked for folks to investigate but may after MAX before we hear anything...
Hi @ErinFinnegan - Thanks! Totally understand everyone is busy, just wanted to get this on the radar. Please keep me updated, hope to hear back soon after.
Good luck on MAX!
Hey @ErinFinnegan , any updates on this? Do you know if the team will be investigating?
It seems like I was following a conversation about this somewhere else - were you also discussing this in a forum thread? 🤔 If not, no worries...
I think there are some open threads on FPS limitations in CEP panels (ex: https://community.adobe.com/t5/after-effects-bugs/running-cep-extensions-at-above-30fps-on-macos/idc-p/13273332#M808), but this seems different.