Ok, extremely weird and frustrating issue. I have a CEP panel extension in After Effec

Code to replicate: index.html <di

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Rendering slowdown at odd-numbered widths about cep-resources HOT 7 OPEN

cameronjeffords commented on September 27, 2024

Rendering slowdown at odd-numbered widths

from cep-resources.

Comments (7)

cameronjeffords commented on September 27, 2024 1

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.

from cep-resources.

cameronjeffords commented on September 27, 2024

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:

Screen.Recording.2022-10-11.at.4.25.18.PM.mov

from cep-resources.

cameronjeffords commented on September 27, 2024

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()

from cep-resources.

ErinFinnegan commented on September 27, 2024

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...

from cep-resources.

cameronjeffords commented on September 27, 2024

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!

from cep-resources.

cameronjeffords commented on September 27, 2024

Hey @ErinFinnegan , any updates on this? Do you know if the team will be investigating?

from cep-resources.

ErinFinnegan commented on September 27, 2024

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...

from cep-resources.

Rendering slowdown at odd-numbered widths about cep-resources HOT 7 OPEN

Comments (7)

Code to replicate:

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent