[solved] Lines don't update after switching from CanvasRenderer to WebGLRenderer

Questions
,
1

I started my project using the CanvasRenderer and was able to get the lines to smoothly update using tweening. Now I’ve switched to WebGLRenderer, but the tweening no longer works. Here’s how I was updating the vertices of the lines before:

// Guidelines
			for (let j = 0; j < 2; j++) {
				let tween1 = new TWEEN.Tween(sess.guidelines[(i * 2) + j].geometry.vertices[0]);
				let tween2 = new TWEEN.Tween(sess.guidelines[(i * 2) + j].geometry.vertices[1]);
				let tween3 = new TWEEN.Tween(sess.guidelines[(i * 2) + j].geometry.vertices[2]);
				sess.guidelines[(i * 2) + j].geometry.verticesNeedUpdate = true;
				tween1.to(sess.loopGeometry.loopGuidelinePoints[j * 3], sett.transformDuration);
				tween2.to(sess.loopGeometry.loopGuidelinePoints[(j * 3) + 1], sett.transformDuration);
				tween3.to(sess.loopGeometry.loopGuidelinePoints[(j * 3) + 2], sett.transformDuration);
				tween1.easing(TWEEN.Easing.Cubic.InOut);
				tween2.easing(TWEEN.Easing.Cubic.InOut);
				tween3.easing(TWEEN.Easing.Cubic.InOut);
				tween1.start();
				tween2.start();
				tween3.start();
			}

You can see the working version with CanvasRenderer here, and the not-yet-working version with WebGLRenderer here. The dotted lines and solid curves should update after pressing the “Reload” button on the controller. Any help would be much appreciated.

2

If you animate the geometry like that, it’s necessary that you set verticesNeedUpdate to true in each frame when the animation actually happens.

3

That worked, thanks! One follow-up question: The dashes in my dashed lines don’t display correctly after updating. I tried running computeLineDistances() while updating, but that doesn’t help. How could I recompute the dashes during the animation?

4

Hi!
Any explanatory pictures or code snippets?

5

Sure, here’s the relevant code snippet:

for (let j = 0; j < 2; j++) {
				let tween1 = new TWEEN.Tween(sess.guidelines[(i * 2) + j].geometry.vertices[0]);
				let tween2 = new TWEEN.Tween(sess.guidelines[(i * 2) + j].geometry.vertices[1]);
				let tween3 = new TWEEN.Tween(sess.guidelines[(i * 2) + j].geometry.vertices[2]);

				tween1.to(sess.loopGeometry.loopGuidelinePoints[j * 3], sett.transformDuration);
				tween2.to(sess.loopGeometry.loopGuidelinePoints[(j * 3) + 1], sett.transformDuration);
				tween3.to(sess.loopGeometry.loopGuidelinePoints[(j * 3) + 2], sett.transformDuration);
				tween1.easing(TWEEN.Easing.Cubic.InOut);
				tween2.easing(TWEEN.Easing.Cubic.InOut);
				tween3.easing(TWEEN.Easing.Cubic.InOut);
				tween1.onUpdate(function () {
					sess.guidelines[(i * 2) + j].geometry.verticesNeedUpdate = true;
					sess.guidelines[(i * 2) + j].computeLineDistances(); // I tried this, but the dashes in the lines still don't display correctly during and after the animation.
				});
				tween1.start();
				tween2.start();
				tween3.start();
			}

You can see it in action here by pressing the “Reload” button on the controller. As you can see, the dashes in the lines are either compressed or extended after updating.

6

I was able to find the solution, which is to also set geometry.lineDistancesNeedUpdate to true while animating. Here’s the full snippet:

sess.guidelines[(i * 2) + j].computeLineDistances();
sess.guidelines[(i * 2) + j].geometry.lineDistancesNeedUpdate = true;
sess.guidelines[(i * 2) + j].geometry.verticesNeedUpdate = true;

Thanks again for your help! This forum is great.

2 Likes