[Work in process] Path Flow Modifier

[zz85]

I've shared this on twitter, but just adding here for gathering more feedback and tracking.

The idea behind "Path Flow Modifier" (Path Flow in Maya term, Curve Modifier in Blender) is to allow deformation / bending of a mesh along a path. This utilizes the Curve and Frenent Frames properties from threejs, passes them through a texture and the resulting vertices are modified in real time in the vertex shaders.

There may be a couple more things to figure out before making a PR to add this as an example, meanwhile the examples and source code can be played around below.

Demo: https://zz85.github.io/threejs-path-flow/flow.html
Source Code: https://github.com/zz85/threejs-path-flow

[WestLangley]

Sweet! Can you update the mesh normals, too -- or do you feel it is not necessary?

[zz85]

@WestLangley I tried to update the mesh normals, however I think I might be making some wrong calculations... (https://github.com/zz85/threejs-path-flow/blob/9d58cc731b9242dda61013115f90f00dfe2604fd/flow.js#L97)

[Usnul]

Looks amazing. I'm wondering if it would be useful in many circumstances as is. If you could make bones follow a curve that could be super useful for things like tail animations and twisting bodies for more natural motion in certain cases. Reminds me of presentation on procedural animation where a lizard's tail was aligned on a spline to make turn animation look really fluid.

[Mugen87]

I've shared this on twitter, but just adding here for gathering more feedback and tracking.

The forum (category Resource) is now the ideal place for sharing such work.

[mrdoob]

@zz85 Did you managed to get more progress on this? Could be nice to have it as an example.

[AdaRoseCannon]

I'm having a go at getting this to work in a more modular format:

https://ada.is/xrgarden/src/lib/flow.js

Usage:

	//Create a closed wavey loop
	const curve = new CatmullRomCurve3( [
		new Vector3( -1, 0.15, 1 ),
		new Vector3( -1, 0.15, -1 ),
		new Vector3( 0, 0.15, 0 ),
		new Vector3( 1, 0.15, -1 ),
		new Vector3( 2, 0.15, 2 )
	] );

	curve.curveType = 'centripetal';
	curve.closed = true;

	const points = curve.getPoints( 50 );
	const geometry = new BufferGeometry().setFromPoints( points );

	const material = new LineBasicMaterial( { color : 0x00ff00 } );

	// Create the final object to add to the scene
	const line = new Line( geometry, material );

	scene.add(line);

	const splineTexure = initSplineTexture(renderer);
	const uniforms = getUniforms(splineTexure);
	updateSplineTexture(curve, splineTexure, uniforms);

	const {fish} = await modelsPromise;
	fish.traverse( function ( child ) {
		if ( child instanceof Mesh ) {
			modifyShader( child.material, uniforms );
		}
	});

	window.uniforms = uniforms;

	const speedPerTick = 0.05 / curve.getLength();

	rafCallbacks.add(function () {
		uniforms.pathOffset.value += speedPerTick;
	});

It works really nicely, although I can't get your code to work on mobile phones. Is there a WebGL feature missing for those devices?

It works on some mobile chipsets such as a Nokia 6.2

[AdaRoseCannon]

I changed it to WebGL2 and now it works great on mobile devices too.